CN112486483A - UI framework implementation method, system, device and storage medium based on XML - Google Patents
UI framework implementation method, system, device and storage medium based on XML Download PDFInfo
- Publication number
- CN112486483A CN112486483A CN202011323703.XA CN202011323703A CN112486483A CN 112486483 A CN112486483 A CN 112486483A CN 202011323703 A CN202011323703 A CN 202011323703A CN 112486483 A CN112486483 A CN 112486483A
- Authority
- CN
- China
- Prior art keywords
- xml
- control
- layer
- processor
- file
- Prior art date
- Legal status (The legal status 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 status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 41
- 238000009877 rendering Methods 0.000 claims abstract description 14
- 238000004458 analytical method Methods 0.000 claims abstract description 12
- 238000010276 construction Methods 0.000 claims abstract description 12
- 238000013461 design Methods 0.000 abstract description 6
- 238000010586 diagram Methods 0.000 description 6
- 230000006870 function Effects 0.000 description 6
- 230000000694 effects Effects 0.000 description 4
- 238000013507 mapping Methods 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000009977 dual effect Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a UI framework realization method, a system, a device and a storage medium based on XML, wherein the method comprises the following steps: the storage layer acquires and stores a source file; wherein the file comprises an XML file; the analysis layer analyzes the source file to obtain a basic control node; the control construction layer acquires component attributes and constructs a control according to the basic control node and the component attributes; the rendering layer renders the UI according to the controls and the container for interface presentation. According to the embodiment of the invention, the source file comprising the XML is obtained through the storage layer, the basic control node is obtained through analysis of the analysis layer, the control construction layer constructs the control according to the member attribute information and the basic control node, and the drawing layer draws the UI interface according to the information such as the control, the life cycle and the like. The embodiment of the invention can be widely applied to the field of UI design.
Description
Technical Field
The invention relates to the field of UI design, in particular to a method, a system, a device and a storage medium for realizing a UI framework based on XML.
Background
With the rapid development of IT technology, the UI (User Interface) always bears the role of computer and User interaction. The UI interface is designed to meet both the use requirements of the user and the aesthetic requirements. Therefore, how to develop a UI meeting the user's needs quickly and at low cost is very important.
Traditional UI frameworks employ drag-and-control programming or object-oriented code writing, which requires a lot of time and effort; the UI framework of the dragging control type programming is sealed, so that the flexibility is greatly reduced, the user-defined function is difficult to expand, the dragging control type programming is different from the dragging simple control, if some specific UI components are realized in a customized mode, a large amount of codes need to be written and a large amount of bottom logic needs to be known, and the dragging control type programming is difficult to develop, long in time and high in cost.
Disclosure of Invention
In view of this, embodiments of the present invention provide a method, a system, an apparatus, and a storage medium for implementing a UI framework based on XML. The method can quickly develop the UI interface according to the design drawing, and has the advantages of good flexibility, relative simplicity in use and low cost.
In a first aspect, an embodiment of the present invention provides a method for implementing a UI framework based on XML, including the steps of:
the storage layer acquires and stores a source file; wherein the source file comprises an XML file;
the analysis layer analyzes the source file to obtain a basic control node;
the control construction layer acquires component attributes and constructs a control according to the basic control node and the component attributes;
and the drawing layer draws the UI according to the control and the container for interface presentation.
Optionally, the source file comprises a compressed package file, a resource file, or an XML file.
Optionally, the base control node includes a control node, an error node, or a style node.
Optionally, the rendering layer employs a dual buffer rendering UI.
Optionally, the control category includes built-in controls or custom controls.
Optionally, the method further comprises the steps of:
and updating the UI, wherein the updating only carries out regional redrawing on the changed control.
In a second aspect, an embodiment of the present invention provides an XML-based UI framework implementation system, including:
the storage layer is used for acquiring and storing the source file; wherein the source file comprises an XML file;
the analysis layer is used for analyzing the source file to obtain a basic control node;
the control construction layer is used for acquiring component attributes and constructing a control according to the basic control node and the component attributes;
and the drawing layer is used for drawing the UI according to the control and the container for interface presentation.
In a third aspect, an embodiment of the present invention provides an apparatus for implementing a UI framework based on XML, including:
at least one processor;
at least one memory for storing at least one program;
when the at least one program is executed by the at least one processor, the at least one processor implements the XML-based UI framework implementation method described above.
In a fourth aspect, an embodiment of the present invention provides a storage medium, in which processor-executable instructions are stored, and when the processor-executable instructions are executed by a processor, the storage medium is configured to perform the above-mentioned XML-based UI framework implementation method.
In a fifth aspect, an embodiment of the present invention provides an XML-based UI framework implementation system, including a display device and a computer device connected to the display device; wherein,
the display equipment is used for displaying and presenting the drawn UI;
the computer device includes:
at least one processor;
at least one memory for storing at least one program;
when the at least one program is executed by the at least one processor, the at least one processor implements the XML-based UI framework implementation method described above.
The implementation of the embodiment of the invention has the following beneficial effects: the embodiment of the invention obtains and stores the source file comprising the XML through the storage layer, the analysis layer analyzes the stored source file to obtain the basic control node, the control construction layer constructs the control according to the member attribute information and the basic control node, and the drawing layer draws the UI interface according to the information such as the control, the life cycle and the like.
Drawings
FIG. 1 is a flowchart illustrating steps of a UI framework implementation method based on XML according to an embodiment of the present invention;
FIG. 2 is a block diagram of a UI framework implementation framework based on XML according to an embodiment of the present invention;
fig. 3 is a parsing flowchart of a parser provided in an embodiment of the present invention;
FIG. 4 is a flow chart of a control construction provided by an embodiment of the present invention;
fig. 5 is a drawing flow chart of a renderer according to an embodiment of the present invention;
FIG. 6 is an inheritance relationship diagram of a control according to an embodiment of the present invention;
FIG. 7 is a block diagram of a UI framework implementation system based on XML according to an embodiment of the present invention;
fig. 8 is a block diagram illustrating a structure of an apparatus for implementing an XML-based UI framework according to an embodiment of the present invention;
FIG. 9 is a block diagram of another implementation system of an XML-based UI framework according to an embodiment of the present invention;
FIG. 10 is a design UI provided by embodiments of the invention.
Detailed Description
The invention is described in further detail below with reference to the figures and the specific embodiments. The step numbers in the following embodiments are provided only for convenience of illustration, the order between the steps is not limited at all, and the execution order of each step in the embodiments can be adapted according to the understanding of those skilled in the art.
As shown in fig. 1, an embodiment of the present invention provides an XML-based UI framework implementation method, which includes the following steps.
S1, the storage layer acquires and stores the source file; wherein the source file comprises an XML file.
And S2, the analysis layer analyzes the source file to obtain a basic control node.
S3, the control constructing layer obtains the component attribute and constructs the control according to the basic control node and the component attribute.
And S4, drawing the UI by the drawing layer according to the control and the container for interface presentation.
As shown in fig. 2, the XML configuration designer of the storage layer edits and designs a UI on XML, and the design file may be stored in different storage formats and read by the storage layer to obtain source information; the analyzer in the analysis layer analyzes the meta characters provided by the storage layer to obtain a basic control node; the control constructor of the control constructing layer constructs a control and other nodes according to the basic control node information and stores the control and other nodes in the memory, wherein the control constructor comprises a basic control; and finally, drawing a user interface by a drawing device of the drawing layer according to the control and presenting the user interface to a user, wherein the drawing device comprises a basic rendering engine which is responsible for drawing basic drawings such as lines, rectangles, pictures and the like.
As shown in the parsing flow of the parser in fig. 3, the parser in the parsing layer reads an XML file from a shrink package file, a resource file, or an XML file, and parses meta characters in the XML file to obtain basic control nodes, where the basic control nodes include control nodes, error nodes, and style nodes. Wherein, the error node outputs error information to the developer; the style nodes are used as common style sheets similar to CSS, all the nodes are cached into a mapping table, and the mapping table is transmitted to the next processor for processing.
As shown in fig. 4, the control construction layer constructs each control object and forms a control tree through a basic control node and a mapping table formed by the XML parser. In order to achieve strong flexibility, a process developer of the construction can use a built-in control, can also customize the control and add a drawing flow. In order to provide good expansibility, commonly used custom controls can also be added into the basic controls to form ecology.
As shown in the rendering flow chart of the renderer in fig. 5, the renderer in the rendering layer completes most of the rendering work, the distribution processing of the control message, and the management of the control lifecycle. The basic rendering engine is responsible for basic rendering such as drawing lines, rectangles and pictures, and meanwhile, the fonts, style groups and the like used by the control objects are rendered through the basic rendering engine. And finally, the whole form UI interface is manufactured through the control object and the container, and the container comprises the layout of the UI interface. In addition, a double buffer rendering interface is employed to avoid flicker. In the UI updating process, only the updated control object is subjected to regional redrawing, so that the drawing overhead is greatly reduced.
It should be noted that, as shown in the control relationship diagram shown in fig. 6, the inheritance relationship of a control is as follows: all the controls are inherited to a basic control, and the basic control is mainly responsible for setting related properties of control objects, such as texts, graphs, positions, menus, position calculation and the like; the container control contains other controls or containers like a container.
The implementation of the embodiment of the invention has the following beneficial effects: the embodiment of the invention obtains and stores the source file comprising the XML through the storage layer, the analysis layer analyzes the stored source file to obtain the basic control node, the control construction layer constructs the control according to the member attribute information and the basic control node, and the drawing layer draws the UI interface according to the information such as the control, the life cycle and the like.
As shown in fig. 7, an embodiment of the present invention provides an XML-based UI framework implementation system, including:
the storage layer is used for acquiring and storing the source file; wherein the source file comprises an XML file;
the analysis layer is used for analyzing the source file to obtain a basic control node;
the control construction layer is used for acquiring component attributes and constructing a control according to the basic control node and the component attributes;
and the drawing layer is used for drawing the UI according to the control and the container for interface presentation.
It can be seen that the contents in the foregoing method embodiments are all applicable to this system embodiment, the functions specifically implemented by this system embodiment are the same as those in the foregoing method embodiment, and the advantageous effects achieved by this system embodiment are also the same as those achieved by the foregoing method embodiment.
As shown in fig. 8, an embodiment of the present invention provides an apparatus for implementing an XML-based UI framework, including:
at least one processor;
at least one memory for storing at least one program;
when the at least one program is executed by the at least one processor, the at least one processor implements the XML-based UI framework implementation method described above.
It can be seen that the contents in the foregoing method embodiments are all applicable to this apparatus embodiment, the functions specifically implemented by this apparatus embodiment are the same as those in the foregoing method embodiment, and the advantageous effects achieved by this apparatus embodiment are also the same as those achieved by the foregoing method embodiment.
An embodiment of the present invention provides a storage medium having stored therein processor-executable instructions, which when executed by a processor, are used to perform the above-mentioned XML-based UI framework implementation method. Likewise, the contents of the above method embodiments are all applicable to the present storage medium embodiment, the functions specifically implemented by the present storage medium embodiment are the same as those of the above method embodiments, and the advantageous effects achieved by the present storage medium embodiment are also the same as those achieved by the above method embodiments.
As shown in fig. 9, an embodiment of the present invention provides an XML-based UI framework implementation system, including a display device and a computer device connected to the display device; wherein,
the display equipment is used for displaying and presenting the drawn UI;
the computer device includes:
at least one processor;
at least one memory for storing at least one program;
when the at least one program is executed by the at least one processor, the at least one processor implements the XML-based UI framework implementation method described above.
Specifically, as for the display apparatus, it is mainly realized by a display screen device; the computer device may be different types of electronic devices, including but not limited to a desktop computer, a laptop computer, and other terminals.
It can be seen that the contents in the foregoing method embodiments are all applicable to this system embodiment, the functions specifically implemented by this system embodiment are the same as those in the foregoing method embodiment, and the advantageous effects achieved by this system embodiment are also the same as those achieved by the foregoing method embodiment.
The generation process of the UI is described below as an XML file. The specific XML file is as follows:
the UI interface generated by the XML file is shown in fig. 10. First, the storage layer is read to obtain the source information. Secondly, the parsing layer parses the meta characters provided by the storage layer to obtain basic control nodes such as Button and Label and a horizon layout container, wherein the container is mainly used for layout of the UI; define is a style node, and the style node is used for multiplexing the same UI style; the text is not the same as the UI style of the "ok" and "cancel" buttons in fig. 10. And then, the control constructing layer constructs a control object, a style node and other self-defined nodes through the nodes for caching. All built-in controls and layouts inherit from the basic controls; the basic control is responsible for realizing the basic functions of common position location, width and height, and then a series of buttons, Label and other controls are derived on the basis. And finally, the drawing layer draws through the attributes of the control object, such as width, textcolor font color and the like. A user click on a control is sent by the rendering manager a click message to the control. Lifecycle management is also performed for the deletion and addition of controls. The series of basic layouts and the customization of the control elements are combined to form a window UI.
While the preferred embodiments of the present invention have been illustrated and described, it will be understood by those skilled in the art that various changes in form and details may be made therein without departing from the spirit and scope of the invention as defined by the appended claims.
Claims (10)
1. A UI framework implementation method based on XML is characterized by comprising the following steps:
the storage layer acquires and stores a source file; wherein the source file comprises an XML file;
the analysis layer analyzes the source file to obtain a basic control node;
the control construction layer acquires component attributes and constructs a control according to the basic control node and the component attributes;
and the drawing layer draws the UI according to the control and the container for interface presentation.
2. The method of claim 1, wherein the source file comprises a package file, a resource file, or an XML file.
3. The method of claim 1, wherein the base control node comprises a control node, an error node, or a style node.
4. The method for implementing an XML-based UI framework according to claim 1, wherein the rendering layer employs a double-buffer rendering UI.
5. The method of claim 1, wherein the control classification comprises a built-in control or a custom control.
6. The method for implementing an XML-based UI framework according to claim 1, further comprising the steps of:
and updating the UI, wherein the updating only carries out regional redrawing on the changed control.
7. An XML-based UI framework implementation system, comprising:
the storage layer is used for acquiring and storing the source file; wherein the source file comprises an XML file;
the analysis layer is used for analyzing the source file to obtain a basic control node;
the control construction layer is used for acquiring component attributes and constructing a control according to the basic control node and the component attributes;
and the drawing layer is used for drawing the UI according to the control and the container for interface presentation.
8. An apparatus for implementing an XML-based UI framework, comprising:
at least one processor;
at least one memory for storing at least one program;
when executed by the at least one processor, cause the at least one processor to implement the XML-based UI framework implementation method of any one of claims 1-6.
9. A storage medium having stored therein processor-executable instructions, which when executed by a processor, are for performing the XML-based UI framework implementation method of any one of claims 1 to 6.
10. A UI framework implementation system based on XML is characterized by comprising a display device and a computer device connected with the display device; wherein,
the display equipment is used for displaying and presenting the drawn UI;
the computer device includes:
at least one processor;
at least one memory for storing at least one program;
when executed by the at least one processor, cause the at least one processor to implement the XML-based UI framework implementation method of any one of claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011323703.XA CN112486483A (en) | 2020-11-23 | 2020-11-23 | UI framework implementation method, system, device and storage medium based on XML |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011323703.XA CN112486483A (en) | 2020-11-23 | 2020-11-23 | UI framework implementation method, system, device and storage medium based on XML |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112486483A true CN112486483A (en) | 2021-03-12 |
Family
ID=74933135
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011323703.XA Pending CN112486483A (en) | 2020-11-23 | 2020-11-23 | UI framework implementation method, system, device and storage medium based on XML |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112486483A (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101295249A (en) * | 2008-06-26 | 2008-10-29 | 腾讯科技（深圳）有限公司 | Method and system for dynamic configuration management of software interface style |
| CN104239044A (en) * | 2014-09-05 | 2014-12-24 | 北京航天自动控制研究所 | Dynamic generation method for graphical user interface |
| US20150012905A1 (en) * | 2013-07-02 | 2015-01-08 | Andrew T. Emmons | System and method for streamlining user interface development |
| CN111966393A (en) * | 2020-08-27 | 2020-11-20 | 中电科仪器仪表有限公司 | Configurable interface custom generation method and system |
-
2020
- 2020-11-23 CN CN202011323703.XA patent/CN112486483A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101295249A (en) * | 2008-06-26 | 2008-10-29 | 腾讯科技（深圳）有限公司 | Method and system for dynamic configuration management of software interface style |
| US20150012905A1 (en) * | 2013-07-02 | 2015-01-08 | Andrew T. Emmons | System and method for streamlining user interface development |
| CN104239044A (en) * | 2014-09-05 | 2014-12-24 | 北京航天自动控制研究所 | Dynamic generation method for graphical user interface |
| CN111966393A (en) * | 2020-08-27 | 2020-11-20 | 中电科仪器仪表有限公司 | Configurable interface custom generation method and system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US6802058B2 (en) | Method and apparatus for synchronized previewing user-interface appearance on multiple platforms | |
| RU2537776C2 (en) | Markup-based extensibility for user interfaces | |
| US8386919B2 (en) | System for displaying an annotated programming file | |
| US8413070B1 (en) | Declarative resizeable list in electronic form | |
| CN112099792B (en) | Visual UI style design method and system | |
| US10664556B2 (en) | Adaptable user interface layout | |
| US11677807B2 (en) | System and method to standardize and improve implementation efficiency of user interface content | |
| CN112631580B (en) | Data processing method and device and computing equipment | |
| US9817811B2 (en) | Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method | |
| US20030128239A1 (en) | Method and apparatus for XML schema publishing into a user interface | |
| CN113791783B (en) | Control generation method, device, equipment and storage medium | |
| US9727537B2 (en) | Application of a system font mapping to a design | |
| WO2006051713A1 (en) | Document processing device, and document processing method | |
| CN112486483A (en) | UI framework implementation method, system, device and storage medium based on XML | |
| CN112487330A (en) | UI skin changing method, system, device and storage medium based on XML | |
| CN117762519A (en) | Component management method, device, computer equipment and storage medium | |
| Banavar et al. | Tooling and system support for authoring multi-device applications | |
| CN115686692A (en) | Rendering method and system of desktop component, electronic device and storage medium | |
| WO2006051712A1 (en) | Document processing device, and document processing method | |
| CN113407183A (en) | Interface generation method, device, equipment and storage medium | |
| KR100346983B1 (en) | Web editor for wireless internet and operating method therefor | |
| WO2006046667A1 (en) | Document processing device and document processing method | |
| WO2024109400A1 (en) | Sub-application page processing method and apparatus, and computer device and storage medium | |
| US20240126577A1 (en) | Visualization of application capabilities | |
| WO2006051714A1 (en) | Document processing device, and document processing method |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |