CN105373520A - Method and device for setting control style attributes - Google Patents

Method and device for setting control style attributes Download PDF

Info

Publication number
CN105373520A
CN105373520A CN 201510659391 CN201510659391A CN105373520A CN 105373520 A CN105373520 A CN 105373520A CN 201510659391 CN201510659391 CN 201510659391 CN 201510659391 A CN201510659391 A CN 201510659391A CN 105373520 A CN105373520 A CN 105373520A
Authority
CN
Grant status
Application
Patent type
Prior art keywords
style
control
information
according
target
Prior art date
Application number
CN 201510659391
Other languages
Chinese (zh)
Inventor
张佳佳
荆龙刚
Original Assignee
金蝶软件(中国)有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F17/00Digital computing or data processing equipment or methods, specially adapted for specific functions
    • G06F17/20Handling natural language data
    • G06F17/21Text processing
    • G06F17/22Manipulating or registering by use of codes, e.g. in sequence of text characters

Abstract

The invention provides a method for setting control style attributes. The method comprises the following steps: obtaining an instruction for setting style attributes for a selected target control; according to the instruction of the set style attributes, displaying an editable style panel; through the editable style panel, obtaining the setting of each style attribute and the corresponding style attribute value of the target control; receiving a storage instruction for the setting; and according to the setting of each style attribute and the corresponding style attribute value of the target control, generating a CSS (Cascading Style Sheet) file. The style attribute value of each style attribute is uniformly set for the target control, i.e., a plurality of required style attributes are simultaneously stored for the target control, so that a DOM (Document Object Model) element only needs to be operated for one time when a plurality of style attributes render the target control, rendering speed is quickened, and meanwhile, various performance problems can be avoided. In addition, the invention provides a device for setting the control style attributes.

Description

设置控件样式属性的方法和装置 Setting style attributes control apparatus and method

技术领域 FIELD

[0001] 本发明涉及网页开发技术领域,特别是涉及一种设置控件样式属性的方法和装置。 [0001] The present invention relates to web development technologies, and particularly to a method and apparatus for setting control style attributes.

背景技术 Background technique

[0002] CSS (Cascading Style Sheet,层叠样式表)是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 [0002] CSS (Cascading Style Sheet, Cascading Style Sheets) for controlling the page style and a markup language allows the page content and style information separated. 使用CSS样式可以控制许多仅使用HTML(Hypertext Markup Language,超文本标记语言)无法控制的样式属性。 Use CSS styles to control many using only HTML (Hypertext Markup Language, HTML) can not control style properties. 当在浏览器中打开一个HTML网页时,浏览器将读取该网页中的HTML标签,并根据CSS样式表将网页元素呈现出来,即CSS样式决定浏览器将如何描述HTML元素的表现形式。 When you open an HTML page in a browser, the browser will read the HTML tags that page, and according to a CSS style sheet will show a page element out, that CSS style determines how the browser will describe forms of HTML elements. 控件是对数据和方法的封装,控件可以有自己的样式属性和方法。 Control is encapsulation of data and methods, control can have its own style attributes and methods. 在WAFII (Web Applicat1n Framework II,网页应用程序框架II)平台控件库中把部分常用CSS样式作为控件自身样式属性,开发者在WAFII动态开发平台配置工具中对目标控件的样式属性设置初始值。 In WAFII (Web Applicat1n Framework II, web application framework II) platform control library to some common CSS styles itself as a control style property developer configuration tool style property is set to an initial value of the target control in WAFII dynamic development platform.

[0003] 传统技术中,一个页面往往有多个控件,而每一个控件有多个样式属性,各个样式属性之间是独立的,运行期通过控件样式属性去清染DOM (Document Object Model,文件对象模型)元素的过程中,每渲染一个样式属性就需要操作一次D0M元素,因此,运行期动态渲染网页时往往需要频繁操作D0M元素,导致渲染速度缓慢,同时也会带来很多性能问题。 [0003] conventional technology, often have more than one page controls, and each control has several style attributes are independent between the various style attributes, run by the control style properties to clear dye DOM (Document Object Model, file process Object model) elements, each rendering a style attribute'll need to do once D0M elements, therefore, run-time dynamic rendering often requires frequent operation D0M elements of a web page, resulting in slow rendering speed, but also bring a lot of performance problems.

发明内容 SUMMARY

[0004] 基于此,为了解决上述问题,提出了一种加快渲染速度的设置控件样式属性的方法和装置。 [0004] Based on this, in order to solve the above problem, we proposed a set style attributes control method and apparatus for accelerating rendering speed.

[0005] —种设置控件样式属性的方法,所述方法包括:获取为选取的目标控件设置样式属性的指令;根据所述设置样式属性的指令显示可编辑样式面板,通过所述可编辑样式面板获取对所述目标控件的各样式属性及相应样式属性值的设置;接收对所述设置的保存指令,根据所述对目标控件的各样式属性及相应样式属性值的设置生成CSS文件。 [0005] - control settings by style attributes, the method comprising: obtaining a set style properties for the selected control target instruction; style attributes according to the setting instruction of the editable form panel, the panel by said editing style Gets style attributes set for each of the target control value and the corresponding style property; retains instructions for receiving the setting to generate the CSS file according to each style attribute setting the target control value and the corresponding style property.

[0006] 在其中一个实施例中,所述方法还包括: [0006] In one embodiment, the method further comprising:

[0007] 将所述目标控件的控件信息和对应的样式属性信息记录在配置文件中。 [0007] The control information of the target control and the corresponding style information is recorded in the attribute profile.

[0008] 在其中一个实施例中,根据所述设置样式属性的指令显示可编辑样式面板的步骤,包括:读取所述配置文件,根据所述目标控件的控件信息从所述配置文件中获取到相应的样式属性信息;解析所述样式属性信息,根据所述样式属性信息在所述可编辑样式面板中初始化所述目标控件的属性及相应属性值。 , Obtained from the configuration file to read the configuration file according to the control information of the target control: [0008] embodiment, according to the setting instruction step of displaying the style property editable form panels, comprising in one embodiment attribute information corresponding to the style; parsing the style attribute information, the attribute information according to the pattern in the editable form panel initializing the attribute property values ​​and corresponding target control.

[0009] 在其中一个实施例中,所述方法还包括:在加载页面的过程中,根据所述页面的包路径查找是否存在共享的CSS文件,若是,则根据共享的CSS文件渲染所述页面上的控件。 [0009] In one embodiment, the method further comprising: during the loading of the page, look for the existence of shared CSS file path to the page based on the packet, if yes, the page rendering files in accordance with the shared CSS controls on.

[0010] 在其中一个实施例中,所述CSS文件中记录了控件的样式类信息;所述根据共享的css文件渲染所述页面上的控件的步骤,包括:加载所述CSS文件中的控件的样式类信息,将所述样式类信息对应的控件属性值一次赋值到控件元素中,实现控件的渲染。 [0010] In one embodiment, the CSS file is recorded style control class information; step controls on the page of the rendered document in accordance with shared css, comprising: loading the CSS file control style type information, the class information pattern corresponding to a control property value assigned to the control element, to achieve rendering control.

[0011] —种设置控件样式属性的装置,所述装置包括:获取模块,用于获取为选取的目标控件设置样式属性的指令;显示模块,用于根据所述设置样式属性的指令显示可编辑样式面板,通过所述可编辑样式面板获取对所述目标控件的各样式属性及相应样式属性值的设置;生成模块,接收对所述设置的保存指令,根据所述对目标控件的各样式属性及相应样式属性值的设置生成CSS文件。 [0011] - the control device is provided kind style attributes, the apparatus comprising: an obtaining module, configured to acquire the style attribute set to the selected target control command; display module, according to the setting for a style property editing instruction displaying styles panel, obtained by the panel may be provided for each editing style style attributes of the target control value and the corresponding style property; generating module receives the instruction to save the settings according to the respective style attributes of the target control set and generate corresponding style property values ​​of the CSS file.

[0012] 在其中一个实施例中,所述装置还包括:记录模块,用于将所述目标控件的控件信息和对应的样式属性信息记录在配置文件中。 [0012] In one embodiment, the apparatus further comprising: a recording module, configured to control the control information of the target and the corresponding style information is recorded in the attribute profile.

[0013] 在其中一个实施例中,所述显示模块包括:读取模块,用于读取所述配置文件,根据所述目标控件的控件信息从所述配置文件中获取到相应的样式属性信息;初始化模块,用于解析所述样式属性信息,根据所述样式属性信息在所述可编辑样式面板中初始化所述目标控件的样式属性及相应样式属性值。 [0013] In one embodiment, the display module comprises: reading means for reading the configuration file, the configuration file obtained from the respective style attributes of the target information according to the control information control ; initialization module configured to parse the attribute information, style, style attributes according to the attribute information of the style in the initialization of the editable form of the target control panel and the corresponding style property values.

[0014] 在其中一个实施例中,所述装置还包括:渲染模块,用于在加载页面的过程中,根据所述页面的包路径查找是否存在共享的CSS文件,若是,则根据共享的CSS文件渲染所述页面上的控件。 [0014] In one embodiment, the apparatus further comprising: a rendering module, the process for loading the page, look for the existence of shared CSS file path to the page based on the packet, if yes, according to the shared CSS file rendering controls on the page.

[0015] 在其中一个实施例中,所述CSS文件中记录了控件的样式类信息;渲染模块还用于加载所述css文件中的控件的样式类信息,将所述样式类信息对应的控件属性值一次赋值到控件元素中,实现控件的渲染。 [0015] In one embodiment, the CSS file is recorded in a control information type style; style rendering module is further configured to load the class information css file control, the control pattern information corresponding to the class a property value assigned to the control elements, the realization of rendering control.

[0016] 上述方法和装置,通过获取为选取的目标控件设置样式属性的指令,根据所述设置样式属性的指令显示可编辑样式面板,通过所述可编辑样式面板获取对所述目标控件的各样式属性及相应样式属性值的设置,接收对所述设置的保存指令,根据所述对目标控件的各样式属性及相应样式属性值的设置生成CSS文件。 [0016] The method and apparatus provided by the style property to obtain the selected target control command, according to the setting of the style property editing style instructs the display panel may be, may be obtained by the editing style panel of each of the control target setting style attributes and attribute values ​​corresponding to the style, the receiver retains instructions provided, according to the CSS file is generated for each set of style attributes and the corresponding target control style property values. 通过统一为目标控件设置各样式属性的样式属性值,即同时为目标控件保存所需的多个样式属性,这样多个样式属性对目标控件进行渲染时只需要操作一次D0M元素,加快了渲染的速度,同时也避免了很多性能问题。 Set each style property through a unified control style property values ​​as the goal, that is, at the same time save as target control multiple style attributes that are required, so that multiple elements need only do this once D0M style properties to target control when rendering to speed up the rendering speed, but also to avoid a lot of performance problems.

附图说明 BRIEF DESCRIPTION

[0017]图1为一个实施例中设置控件样式属性方法的流程图; [0017] FIG. 1 is a flow diagram is provided a control method embodiment of style properties;

[0018] 图2为一个实施例中样式面板的界面图; [0018] FIG. 2 is a view of a screen panel according to the style;

[0019] 图3为一个实施例中显示可编辑样式面板的流程图; [0019] FIG. 3 is a flowchart showing an editable form panel in one embodiment;

[0020]图4为一个实施例中设置控件样式属性装置的结构框图; [0020] FIG. 4 is a block diagram of the embodiment is provided a control apparatus embodiment of style properties;

[0021]图5为一个实施例中显示模块的结构框图。 [0021] FIG. 5 is a block diagram of the structure of a display module embodiment.

具体实施方式 detailed description

[0022] 为了使本发明的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本发明进行进一步详细说明。 [0022] To make the objectives, technical solutions and advantages of the present invention will become more apparent hereinafter in conjunction with the accompanying drawings and embodiments of the present invention will be further described in detail. 应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。 It should be understood that the specific embodiments described herein are only intended to illustrate the present invention and are not intended to limit the present invention.

[0023] 如图1所示,在一个实施例中,提出了一种设置控件样式属性的方法,该方法包括: [0023] Figure 1, in one embodiment, presents a set of control style attributes, the method comprising:

[0024] 步骤102,获取为选取的目标控件设置样式属性的指令。 [0024] Step 102, the style property gets set to the selected target control instruction.

[0025] 具体的,控件是对数据和方法的封装,控件可以有自己的样式属性和方法。 [0025] Specifically, the control is encapsulation of data and methods, control can have its own style attributes and methods. 样式属性是控件数据的简单访问者。 Style property is simply a visitor control data. 通过为控件选择CSS样式设置控件的样式属性。 By selecting the style attribute CSS style control is set to control. CSS样式是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS style pattern is used to control the web and allows a markup language style information will be separated from the page content. 比如,百度首页搜索框是一个控件,它具有搜索的功能,它具有的CSS样式属性有长度、宽度、高度、背景色等,CSS样式类似控件的外衣,决定它展现出来的视觉效果。 For example, Baidu home page search box is a control that has a search function, it has a CSS style attributes length, width, height, background color, etc., coat CSS style similar controls, it decided to show up visual effects. 在本实施例中,获取为目标控件设置样式属性的指令的方式可以有多种,例如,可以是通过点击控件,直接刷新出当前控件样式属性选项,也可以是通过点击左键选取目标控件后,从当前面板中选取设置样式属性的选项,还可以在右键点击目标控件弹出的菜单中插入设置样式属性选项,点击该设置样式属性选项。 In the present embodiment, the style property gets set to the target control command can be a variety of ways, for example, by clicking the control, direct refresh the current control style property options may be selected after a certain control by left-clicking select set style properties from the current panel options, you can also right-click the target control in the pop-up menu insert set style properties option, click the option to set the style properties.

[0026] 步骤104,根据设置样式属性的指令显示可编辑样式面板,通过可编辑样式面板获取对目标控件的各样式属性及相应样式属性值的设置。 [0026] Step 104, according to an instruction set style attribute editing style display panel may obtain each set of style attributes and the corresponding target control style property values ​​can be edited by the style panel.

[0027] 具体的,接收对目标控件设置样式属性的指令后,加载样式面板,继而显示可编辑样式面板,通过可编辑面板可对目标控件的各样式属性及样式属性值进行设置。 [0027] Specifically, after receiving the target set style attributes control command, load panel style, then the display panel can edit the style, the style can be set for each attribute and attribute value of the target pattern can be edited by the control panel. 图2给出了样式面板的界面图,从图2中可以看到样式面板上显示多个样式属性及相应的样式属性值,其中有高度、宽度、文本、字号、风格、背景等,可以根据需要对样式属性值进行设置,比如高度设为ΙΟΟρχ,宽度设为200px,字号设为12Px等。 Figure 2 shows the pattern of FIG interface panel, can be seen from Figure 2 displays a plurality of style attributes and attribute values ​​corresponding style pattern on the panel, including the height, width, text, font, style, background, etc., may style property value needs to be set to such a height ΙΟΟρχ, 200px width is set, the font size is set 12Px like. 通常选中的控件类型不同,设置的各样式属性值也不同,常见的控件类型有菜单、按钮、数字输入框、日期、时间、复选框、标签等。 Usually select different control types, each style attribute value is different, there are common types of controls menus, buttons, digital input box, date, time, check boxes, labels and so on. 本实施例中,统一为控件设置样式属性,运行期时可以减少对D0M元素的操作。 In this embodiment, the unified set style properties for the control, can be reduced when operation of the operating element D0M period. 比如,若给控件设置了宽度ΙΟΟρχ,高度200px,在现有方案中是分别单独设置宽度和高度的,即$ ( “#crtlName”),css ( “width”,ΙΟΟρχ) ;$ ( “#crtlName”),css ( “heigth”,200px)。 For example, if the width is set to the control ΙΟΟρχ, 200px height, in the conventional embodiment are the width and height are provided separately, i.e., $ ( "#crtlName"), css ( "width", ΙΟΟρχ); $ ( "#crtlName "), css (" heigth ", 200px). 而本实施例中,在设计期将宽度和高度统一设为“width: ΙΟΟρχ ;height:200px”。 In the present embodiment, the width and height of the design of the unified set "width: ΙΟΟρχ; height: 200px". 这样,在运行期通过一次操作D0M元素就可以将宽度和高度渲染到目标控件元素中。 Thus, in a single operation run by D0M elements can be rendered to the width and height of the target control element.

[0028] 步骤106,接收对上述设置的保存指令,根据对目标控件的各样式属性及相应样式属性值的设置生成CSS文件。 [0028] Step 106, the received command to the save set is generated according to the CSS file is provided for each style attributes and the corresponding target control style property values.

[0029] 具体的,对可编辑样式面板上各样式属性及相应的样式属性值进行设置后,点击保存按钮,根据对目标控件的各样式属性及相应样式属性值的设置生成CSS文件。 [0029] Specifically, after each edit the style property on the style panel and the corresponding style property values ​​are set, click the Save button to generate CSS file according to the settings for each style attributes and the corresponding target control style property values. 在页面运行期通过加载该CSS文件对目标控件进行渲染,在页面运行期是页面通过自动加载其相应路径下的CSS文件完成清染的,比如,a路径下有生成一个customerCss.css文件,那么a路径下的a页面和b页面都会自动加载该customerCss.css文件。 In the pages run by loading the CSS file to the target control rendering, page by page run is automatically loaded CSS files in their respective paths to complete the clearance dye, for example, there is a customerCss.css generate a file path, a page in a page path b and automatically load the file customerCss.css.

[0030] 在本实施例中,通过获取为选取的目标控件设置样式属性的指令,根据设置样式属性的指令显示可编辑样式面板,通过可编辑样式面板获取对目标控件的各样式属性及相应样式属性值的设置,接收对上述设置的保存指令,根据对目标控件的各样式属性及相应样式属性值的设置生成CSS文件。 [0030] In the present embodiment, by acquiring the setting style property for the selected target control command, according to an instruction set style attributes of the editable form the panel, obtaining the respective style attributes of the target control and the corresponding style Editable Styles panel set the attribute value, receives the above saving instruction set to generate the CSS file according to the settings for each style attributes and the corresponding target control style property values. 通过统一为目标控件设置各样式属性的样式属性值,即同时为目标控件保存所需的多个样式属性,这样多个样式属性对目标控件进行渲染时只需要操作一次D0M元素,加快了渲染的速度,同时也避免了很多性能问题。 Set each style property through a unified control style property values ​​as the goal, that is, at the same time save as target control multiple style attributes that are required, so that multiple elements need only do this once D0M style properties to target control when rendering to speed up the rendering speed, but also to avoid a lot of performance problems.

[0031 ] 在一个实施例中,将目标控件的控件信息和对应的样式属性信息记录在配置文件中。 [0031] In one embodiment, the control information corresponding to the target control and style attribute information is recorded in the configuration file.

[0032] 在本实施例中,配置文件中记录了目标控件的控件信息和对应的样式属性信息。 [0032] In the present embodiment, the configuration file records attribute information of the style information and the corresponding control target control. 具体的,接收保存指令,根据对目标控件的各样式属性及相应样式属性值的设置生成CSS文件,同时将目标控件的控件信息和对应的样式属性信息记录在配置文件中。 Specifically, the received save command, CSS file generated according to the settings for each style attributes and the corresponding target control style property values, while the control information and style attribute information corresponding to the target control records in the configuration file. 比如,开发人员在设计期对按钮设置高度为ΙΟΟρχ,宽度为ΙΟΟρχ,背景色为红色,并把该样式方案保存为“按钮”的样式方案,那么在这个过程中配置文件中记录了“按钮”和“样式方案”的关系。 For example, developers in the design phase of the button to set the height of ΙΟΟρχ, width ΙΟΟρχ, the background color is red, and save the style scheme "button" style scheme, then in the process configuration file records the "button" and "style scheme" relationship.

[0033] 如图3所示,在一个实施例中,根据设置样式属性的指令显示可编辑样式面板的步骤,包括: [0033] As shown in FIG. 3, in one embodiment, is provided in accordance with the style property display instruction step editable form panel, comprising:

[0034] 步骤104a,读取配置文件,根据目标控件的控件信息从配置文件中获取到相应的样式属性信息。 [0034] Step 104a, reads the configuration file from the configuration file to obtain the corresponding style attribute information according to control information of the target control.

[0035] 在本实施例中,若目标控件之前已经设置过样式属性,当需要重新为目标控件设置样式属性时,即需要更新目标控件样式属性时,首先读取配置文件中目标控件的控件信息,从而获取到目标控件相应的样式属性信息。 When [0035] In the present embodiment, if the target control has previously been set style property, when the control target is a need to re-set style properties, i.e., to update the target control style property, first read control information in a profile of the target control , so as to acquire the appropriate style attribute information of the target control.

[0036] 步骤104b,解析样式属性信息,根据样式属性信息在可编辑样式面板中初始化目标控件的样式属性及相应样式属性值。 [0036] Step 104b, parsed style attribute information, style attributes and corresponding target control style property values ​​in the style attribute information may be edited initialization panel according to the style.

[0037] 在本实施例中,通过配置文件,获取到目标控件的样式属性信息后,解析样式属性信息,根据样式属性信息在可编辑样式面板中初始化目标控件的样式属性及相应样式属性值。 [0037] In the present embodiment, the configuration file, after obtaining the style attribute information of the target control resolving the style attribute information to initialize the style attributes of the target control and corresponding style property values ​​in the editable form panel according to the style attribute information. 初始化的过程就是把之前保存过的样式方案,在样式面板中展示出来,便于开发人员了解之前的样式方案。 Initialization process is to previously saved style scheme to show up in the Styles panel, easy to understand style before the developer program. 具体的,配置文件中记录了“控件”和“样式方案”的对应关系,当选中该控件时,通过解析选中的控件对应的样式属性信息,就可以将对应的样式属性初始化到样式面板中。 Specifically, the configuration file records the "control" and "style scheme," the correspondence, when the control is elected by the style attribute information control corresponds resolution selected, you can initialize the corresponding style property to the Styles panel. 比如,选中的控件为“红色按钮”,其对应的样式方案信息为:tagClaSSName:“红色按钮”,tagClass:redbtn, style: “width: ΙΟΟρχ, height: ΙΟΟρχ”。 For example, the selected controls as a "red button", which corresponds to the style program information: tagClaSSName: "red button", tagClass: redbtn, style: "width: ΙΟΟρχ, height: ΙΟΟρχ". 通过解析样式信息,将具体的width (宽度),height (高度)值初始化到样式面板中。 Style information parsed by the specific width (width), height (height) value is initialized to the style panel.

[0038] 在本实施例中,通过读取配置文件,根据目标控件的控件信息从配置文件中获取到相应的样式属性信息,解析样式属性信息,根据样式属性信息在可编辑样式面板中初始化目标控件的样式属性及相应样式属性值,即将之前保存过的样式方案在样式面板中显示出来。 [0038] In the present embodiment, by reading a configuration file according to the acquired control information from the control target profile corresponding to the style attribute information parsed style attribute information, the target initialization pattern in editable attribute information panel according to the pattern style attributes and the corresponding style property value of the control, about to previously saved style scheme shown in the styles panel. 开发人员在设计期通过样式面板保存当前的样式方案,保存的过程中会在后台生成样式文件和当前方案的配置信息,然后提交至SVN(Subvers1n,版本控制系统),以供小组其他成员更新。 Developers at design save the current style scheme by Styles panel, to save the process will generate a configuration pattern file and the current program in the background, and then submitted to SVN (Subvers1n, version control systems), for use by other members of the group update. 这样,小组其他成员更新前通过读取配置文件,将之前保存的样式方案初始化到样式面板中,可以直观的看到之前的方案信息,便于进行下一步的更新。 In this way, the other members of the group before the update by reading the configuration file, previously saved style program to initialize the style panel, you can visually see the program information before, facilitate the next update.

[0039] 在一个实施例中,上述设置控件样式属性的方法还包括:在加载页面的过程中,根据页面的包路径查找是否存在共享的CSS文件,若是,则根据共享的CSS文件渲染页面上的控件。 [0039] In one embodiment, the above arrangement control style property method further comprising: during the loading of the page, look for a shared CSS file based on the packet path to the page, on if yes, to render the page based on the shared CSS file controls.

[0040] 在本实施例中,开发人员在设计期对控件设置样式属性后,在运行期加载页面的过程中,通过在页面的包路径查找是否存在共享的CSS文件,若存在,就根据该CSS文件渲染页面上的控件。 After [0040] In the present embodiment, the developer in the design of set style properties to control, during the operation of loading the page, whether there is a shared CSS file by looking at the packet path to the page, if present, on the basis of the CSS file rendering controls on the page. 具体的,页面的包路径是指css文件数据包所在的路径。 Specifically, the package path of the page refers to the path where css file packet.

[0041] 在一个实施例中,CSS文件中记录了控件的样式类信息。 [0041] In one embodiment, CSS file information recorded in the control type style. 根据共享的CSS文件渲染页面上的控件的步骤,包括:加载CSS文件中的控件的样式类信息,将所述样式类信息对应的控件属性值一次赋值到控件元素中,实现控件的渲染。 Rendering controls on the page according to the CSS file sharing step comprising: a class information loading style controls the CSS file, the first class information corresponding to the pattern control property values ​​assigned to the control element, to achieve rendering control.

[0042] 在本实施例中,在控件样式属性设计期,开发人员通过如图2所示的样式面板为控件保存了样式类信息(如图2中所示的测试按钮1)和相应的控件属性值,控件的样式类<tagClass>信息被保存在CSS文件中。 [0042] In the present embodiment, the control of the design style attributes, as shown by the developer style for the control panel shown in FIG. 2 styles stored class information (test button shown in FIG. 1) and the corresponding control style class attribute values, control <tagClass> information is saved in the CSS file. 控件属性值是用同时包括多个样式属性值的字符串来表示的。 Simultaneously control property value is a string comprising a plurality of style property values ​​represented. 在页面运行期时,加载css文件中的样式类信息,控件将该样式类信息对应的控件属性值一次赋值到对应的DOM元素中,即操作一次对应的DOM元素就可以实现对控件的渲染。 When the page is run, loads the style class information css file, assign the controls once the control property value style class information corresponding to the corresponding DOM elements, namely operating a corresponding DOM elements can be achieved rendering control.

[0043] 如图4所示,在一个实施例中,提出了一种设置控件样式属性的装置,上述装置包括: [0043] As shown in FIG. 4, in one embodiment, proposes a control device is provided style properties, said apparatus comprising:

[0044] 获取模块402,用于获取为选取的目标控件设置样式属性的指令; [0044] The obtaining module 402, configured to acquire the style attribute set to the selected target control command;

[0045] 显示模块404,用于根据所述设置样式属性的指令显示可编辑样式面板,通过所述可编辑样式面板获取对所述目标控件的各样式属性及相应样式属性值的设置; [0045] The display module 404, according to the setting for the style property editing style instructs the display panel may obtain each set of style attributes of the target control value and the corresponding style property editing style through said panel;

[0046] 生成模块406,接收对所述设置的保存指令,根据所述对目标控件的各样式属性及相应样式属性值的设置生成CSS文件。 [0046] The generating module 406 receives the saving instruction set generated according to the CSS file is provided for each style attributes and the corresponding target control style property values.

[0047] 在一个实施例中,上述设置控件样式属性的装置还包括: [0047] In one embodiment, the above arrangement of the control apparatus further includes a style property:

[0048] 记录模块408,用于将所述目标控件的控件信息和对应的样式属性信息记录在配置文件中。 [0048] The recording module 408, configured to control the control information of the target and the corresponding style information is recorded in the attribute profile.

[0049] 如图5所示,在一个实施例中,显示模块包括: [0049] As shown in Figure 5, in one embodiment, the display module comprising:

[0050] 读取模块404a,用于读取所述配置文件,根据所述目标控件的控件信息从所述配置文件中获取到相应的样式属性信息; [0050] The reading module 404a, for reading the configuration file, the configuration file obtained from the respective style attributes of the target information according to the control information control;

[0051] 初始化模块404b,用于解析所述样式属性信息,根据所述样式属性信息在所述可编辑样式面板中初始化所述目标控件的样式属性及相应样式属性值。 [0051] The initialization module 404b, configured to parse the attribute information of the pattern, the pattern according to the attribute information, style attributes to initialize the target control value and the corresponding style property in the editable form panel.

[0052] 在一个实施例中,上述设置控件样式属性的装置还包括: [0052] In one embodiment, the above arrangement of the control apparatus further includes a style property:

[0053] 渲染模块,用于在加载页面的过程中,根据所述页面的包路径查找是否存在共享的CSS文件,若是,则根据共享的CSS文件渲染所述页面上的控件。 [0053] The rendering module, the process for loading the page, look for a shared path CSS file of the page based on the packet, if yes, control is rendered on the page according to the CSS file sharing.

[0054] 在一个实施例中,CSS文件中记录了控件的样式类信息。 [0054] In one embodiment, CSS file information recorded in the control type style. 根据共享的CSS文件渲染页面上的控件的步骤,包括:加载CSS文件中的控件的样式类信息,将所述样式类信息对应的控件属性值一次赋值到控件元素中,实现控件的渲染。 Rendering controls on the page according to the CSS file sharing step comprising: a class information loading style controls the CSS file, the first class information corresponding to the pattern control property values ​​assigned to the control element, to achieve rendering control.

[0055] 以上所述实施例仅表达了本发明的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对本发明专利范围的限制。 [0055] The above embodiments are only expressed several embodiments of the present invention, and detailed description thereof is more specific, but can not therefore be understood as limiting the scope of the present invention. 应当指出的是,对于本领域的普通技术人员来说,在不脱离本发明构思的前提下,还可以做出若干变形和改进,这些都属于本发明的保护范围。 It should be noted that those of ordinary skill in the art, without departing from the spirit of the present invention, can make various changes and modifications, which fall within the protection scope of the present invention. 因此,本发明专利的保护范围应以所附权利要求为准。 Therefore, the protection scope of the present invention should be subject to the appended claims.

Claims (10)

  1. 1.一种设置控件样式属性的方法,所述方法包括: 获取为选取的目标控件设置样式属性的指令; 根据所述设置样式属性的指令显示可编辑样式面板,通过所述可编辑样式面板获取对所述目标控件的各样式属性及相应样式属性值的设置; 接收对所述设置的保存指令,根据所述对目标控件的各样式属性及相应样式属性值的设置生成CSS文件。 A control set of style attributes, the method comprising: obtaining a set style properties for the selected target control instruction; editable form panel according to the display instruction setting style property, may be obtained by the editing style panel style attributes set for each of the target control value and the corresponding style property; retains instructions for receiving the setting to generate the CSS file according to each style attribute setting the target control value and the corresponding style property.
  2. 2.根据权利要求1所述的方法,其特征在于,所述方法还包括: 将所述目标控件的控件信息和对应的样式属性信息记录在配置文件中。 2. The method according to claim 1, wherein said method further comprises: the control information of the target control and the corresponding style information is recorded in the attribute profile.
  3. 3.根据权利要求2所述方法,其特征在于,根据所述设置样式属性的指令显示可编辑样式面板的步骤,包括: 读取所述配置文件,根据所述目标控件的控件信息从所述配置文件中获取到相应的样式属性信息; 解析所述样式属性信息,根据所述样式属性信息在所述可编辑样式面板中初始化所述目标控件的样式属性及相应样式属性值。 3. The method according to claim 2, wherein the step of edit style display panel in accordance with the instructions set style properties, comprising: reading the configuration file, in accordance with the control information from the control target acquired profile information of the respective style attributes; parsing the attribute information, style, the style style attributes initializing the attribute information may be edited in the panel pattern and the target control value in accordance with the respective style attributes.
  4. 4.根据权利要求1所述的方法,其特征在于,所述方法还包括: 在加载页面的过程中,根据所述页面的包路径查找是否存在共享的CSS文件,若是,则根据共享的CSS文件渲染所述页面上的控件。 4. The method according to claim 1, characterized in that, said method further comprising: during the loading of the page, look for the existence of shared CSS file path to the page based on the packet, if yes, according to the shared CSS file rendering controls on the page.
  5. 5.根据权利要求4所述的方法,其特征在于,所述CSS文件中记录了控件的样式类信息; 所述根据共享的CSS文件渲染所述页面上的控件的步骤,包括: 加载所述css文件中的控件的样式类信息,将所述样式类信息对应的控件属性值一次赋值到控件元素中,实现控件的渲染。 The method according to claim 4, wherein the CSS file is recorded style control class information; step controls the rendering on the page according to the CSS file sharing, comprising: loading the css style class information about the control file, the style class information corresponding to a control property value assigned to the control element, to achieve rendering control.
  6. 6.一种设置控件样式属性的装置,所述装置包括: 获取模块,用于获取为选取的目标控件设置样式属性的指令; 显示模块,用于根据所述设置样式属性的指令显示可编辑样式面板,通过所述可编辑样式面板获取对所述目标控件的各样式属性及相应样式属性值的设置; 生成模块,接收对所述设置的保存指令,根据所述对目标控件的各样式属性及相应样式属性值的设置生成CSS文件。 A set of style attributes control apparatus, the apparatus comprising: an obtaining module, configured to acquire the style attribute set to the selected target control command; display module, according to the setting for a style property editing instruction display style panel by the panel for setting the style edit style attributes for each of the target control value and the corresponding style property; generating module receives the instruction to save the settings according to the respective style attributes of the target control and setting the appropriate style property values ​​to generate the CSS file.
  7. 7.根据权利要求6所述的装置,其特征在于,所述装置还包括: 记录模块,用于将所述目标控件的控件信息和对应的样式属性信息记录在配置文件中。 7. The device according to claim 6, characterized in that said apparatus further comprises: a recording module, configured to control the control information of the target and the corresponding style information is recorded in the attribute profile.
  8. 8.根据权利要求7所述装置,其特征在于,所述显示模块包括: 读取模块,用于读取所述配置文件,根据所述目标控件的控件信息从所述配置文件中获取到相应的样式属性信息; 初始化模块,用于解析所述样式属性信息,根据所述样式属性信息在所述可编辑样式面板中初始化所述目标控件的属性及相应属性值。 8. A device according to claim 7, wherein the display module comprises: reading means for reading the configuration file, the configuration file obtained from the control information of the target according to the respective control style attribute information; initialization module, configured to parse the attribute information of the pattern, the pattern according to the attribute information of the initialization and control of the properties of the target in the respective attribute values ​​can be edited style panel.
  9. 9.根据权利要求6所述的装置,其特征在于,所述装置还包括: 渲染模块,用于在加载页面的过程中,根据所述页面的包路径查找是否存在共享的CSS文件,若是,则根据共享的css文件渲染所述页面上的控件。 9. The apparatus according to claim 6, characterized in that said apparatus further comprising: a rendering module, the process for loading the page, look for the existence of shared CSS file path to the page based on the packet, if yes, the rendering of controls on the page based on shared css file.
  10. 10.根据权利要求9所述的装置,其特征在于,所述CSS文件中记录了控件的样式类信息; 渲染模块还用于加载所述CSS文件中的控件的样式类信息,将所述样式类信息对应的控件属性值一次赋值到控件元素中,实现控件的渲染。 10. The apparatus according to claim 9, wherein the CSS file is recorded style control class information; rendering module is further configured to load the CSS style class information in the control file, the style class information corresponding to a control property value assigned to the control element, to achieve rendering control.
CN 201510659391 2015-10-13 2015-10-13 Method and device for setting control style attributes CN105373520A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN 201510659391 CN105373520A (en) 2015-10-13 2015-10-13 Method and device for setting control style attributes

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN 201510659391 CN105373520A (en) 2015-10-13 2015-10-13 Method and device for setting control style attributes

Publications (1)

Publication Number Publication Date
CN105373520A true true CN105373520A (en) 2016-03-02

Family

ID=55375729

Family Applications (1)

Application Number Title Priority Date Filing Date
CN 201510659391 CN105373520A (en) 2015-10-13 2015-10-13 Method and device for setting control style attributes

Country Status (1)

Country Link
CN (1) CN105373520A (en)

Citations (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20050154982A1 (en) * 2004-01-13 2005-07-14 International Business Machines Corporation Apparatus, system and method of importing cascading style sheets to macromedia flash
CN1732428A (en) * 2002-12-31 2006-02-08 国际商业机器公司 Edit selection control
CN1790244A (en) * 2004-09-30 2006-06-21 微软公司 User interface for displaying selectable software functionality controls that are relevant to a selected object
CN1828597A (en) * 2005-03-03 2006-09-06 微软公司 Styling mechanism for enriching user interface design
CN1961312A (en) * 2004-06-24 2007-05-09 朴喜燮 Methods and the program-recording medium for creating, editing and trading home page components to assemble a home page and a personal portal site directly in wysiwyg on web browser
US20070283243A1 (en) * 2006-05-31 2007-12-06 Sap Portals Israel Ltd. Method and apparatus for adapting external controls to a portal design
CN101258489A (en) * 2005-09-09 2008-09-03 微软公司 Quick styles for formatting of documents
CN101263490A (en) * 2005-09-09 2008-09-10 微软公司 Methods and systems for providing direct style sheet editing
CN101359285A (en) * 2007-08-02 2009-02-04 珠海金山软件股份有限公司 Apparatus and method for inserting control into document
CN101615121A (en) * 2009-07-22 2009-12-30 福州星网视易信息系统有限公司 Style editor of BS platform information release system
CN102254049A (en) * 2011-08-29 2011-11-23 程向明 Web page design system and method for building same
CN102770842A (en) * 2010-01-22 2012-11-07 微软公司 Pattern-based user interfaces
CN102968300A (en) * 2011-11-10 2013-03-13 微软公司 Control starter and widget for providing on-object of context
CN103246502A (en) * 2012-02-10 2013-08-14 腾讯科技(深圳)有限公司 Implementation method and system of pop-up window

Patent Citations (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1732428A (en) * 2002-12-31 2006-02-08 国际商业机器公司 Edit selection control
US20050154982A1 (en) * 2004-01-13 2005-07-14 International Business Machines Corporation Apparatus, system and method of importing cascading style sheets to macromedia flash
CN1961312A (en) * 2004-06-24 2007-05-09 朴喜燮 Methods and the program-recording medium for creating, editing and trading home page components to assemble a home page and a personal portal site directly in wysiwyg on web browser
CN1790244A (en) * 2004-09-30 2006-06-21 微软公司 User interface for displaying selectable software functionality controls that are relevant to a selected object
CN1828597A (en) * 2005-03-03 2006-09-06 微软公司 Styling mechanism for enriching user interface design
CN101258489A (en) * 2005-09-09 2008-09-03 微软公司 Quick styles for formatting of documents
CN101263490A (en) * 2005-09-09 2008-09-10 微软公司 Methods and systems for providing direct style sheet editing
US20070283243A1 (en) * 2006-05-31 2007-12-06 Sap Portals Israel Ltd. Method and apparatus for adapting external controls to a portal design
CN101359285A (en) * 2007-08-02 2009-02-04 珠海金山软件股份有限公司 Apparatus and method for inserting control into document
CN101615121A (en) * 2009-07-22 2009-12-30 福州星网视易信息系统有限公司 Style editor of BS platform information release system
CN102770842A (en) * 2010-01-22 2012-11-07 微软公司 Pattern-based user interfaces
CN102254049A (en) * 2011-08-29 2011-11-23 程向明 Web page design system and method for building same
CN102968300A (en) * 2011-11-10 2013-03-13 微软公司 Control starter and widget for providing on-object of context
CN103246502A (en) * 2012-02-10 2013-08-14 腾讯科技(深圳)有限公司 Implementation method and system of pop-up window

Similar Documents

Publication Publication Date Title
US8387006B1 (en) System and method for authoring a web page to be run-time editable
US7594168B2 (en) Browser based web site generation tool and run time engine
US20040133854A1 (en) Persistent document object model
US20070245339A1 (en) Creating documentation screenshots on demand
US20080028302A1 (en) Method and apparatus for incrementally updating a web page
US20140258970A1 (en) Collaborative application development environment using a connected device
US20020039101A1 (en) Binary cache file format for themeing the visual appearance of a computer system
US6957394B1 (en) Rendering controls of a web page according to a theme
US20040046789A1 (en) Extensible user interface (XUI) framework and development environment
US20010045961A1 (en) System and theme file format for creating visual styles
US20040230900A1 (en) Declarative mechanism for defining a hierarchy of objects
JP5193042B2 (en) Command user interface for displaying selectable functionality control database applications
US7200816B2 (en) Method and system for automating creation of multiple stylesheet formats using an integrated visual design environment
US7340673B2 (en) System and method for browser document editing
US20060161841A1 (en) Web page authoring apparatus, web page authoring method, and program
US20140304682A1 (en) Systems and methods for run-time editing of a web page
US20110119603A1 (en) System and method for integrating a plurality of software applications
CN101477461A (en) Dynamic generation apparatus and method for application program interface
US7546522B2 (en) Method, system, and computer-readable medium for applying a global formatting scheme to a chart in an electronic document
US20100318894A1 (en) Modifications to Editable Elements of Web Pages Rendered in Word Processor Applications
US20150169318A1 (en) Method and system for modifying deployed applications
US8181157B2 (en) Custom language support for project documentation and editing
US20100161713A1 (en) Method and system for personalizing a desktop widget
US20060090130A1 (en) System and method for styling content in a graphical user interface control
US20060224607A1 (en) Method and system for aggregating rules that define values for the same property associated with the same document element

Legal Events

Date Code Title Description
C06 Publication
C10 Entry into substantive examination