CN104239044A - Dynamic generation method for graphical user interface - Google Patents
Dynamic generation method for graphical user interface Download PDFInfo
- Publication number
- CN104239044A CN104239044A CN201410453727.5A CN201410453727A CN104239044A CN 104239044 A CN104239044 A CN 104239044A CN 201410453727 A CN201410453727 A CN 201410453727A CN 104239044 A CN104239044 A CN 104239044A
- Authority
- CN
- China
- Prior art keywords
- interface
- control
- container
- description file
- sub
- 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.)
- Granted
Links
Landscapes
- Stored Programmes (AREA)
Abstract
The invention discloses a dynamic generation method for a graphical user interface. The method comprises the following steps of (1) packaging a coordinate setting method, an attribute setting method, an action response mode and a creation method of interface elements according to a unified interface, and generating an interface element library; (2) describing the layout information of the graphical user interface, a control type to be used and a control attribute to generate an interface description file according to a service requirement; (3) dynamically generating the graphical user interface of a program according to the interface element library and the interface description file by using an interface layout algorithm. According to the method, a universal and flexible software interface dynamic-generation technology which can be customized according to a specific application field is provided, so that the problems of high development cost, difficulty in upgrading and maintenance, low reutilization rate of a working achievement, difficulty in interface layout and poor flexibility of a software interface are solved.
Description
Technical field
The invention belongs to computer application field, be specifically related to a kind of dynamic creation method of graphic user interface.
Background technology
Graphic user interface is the window of software, be user operation software and obtain the medium fed back, and along with the development of infotech, user not only has higher requirement to the function of software, it is also proposed higher requirement to aspects such as the aesthetic measure of software interface, the customizabilities at interface simultaneously.
The design aids that software Graphics user interface generally adopts development environment to provide, hard coded or the mode that both combine realize.Adopt design aids to realize graphic user interface, the ins and outs that developer needs to be grasped are few, and interface layout is convenient directly perceived, but to control functionality expansion and customization difficulty, and the achievement of customization and debugging is not easily reused, the general construction cycle is long, debugging maintenance difficulty.Hard coded is adopted to realize graphic user interface, developer can expand control easily or customize new control, and the good control of development and Design is easy to reuse, but corresponding developer needs to be grasped a large amount of ins and outs, and interface layout is difficult, encoding amount is large, and the construction cycle is long, debugging maintenance difficulty.
In order to address these problems, industry develops the technology of various automatic generation graphic user interface.The patent " the generation method of graphic user interface " that the patent No. is " CN 101202665 B " describes a kind of method dynamically being generated graphic user interface by XML configuration file when the client of C/S Framework Software is run without the need to program compiler.In this patent, it using XML interface configuration file as the response to client traffic request, and is sent to client by server, and client resolves configuration file, obtains the assembly needed from Component Gallery, and by component instance to generate graphic user interface.Solve the problem of C/S Framework Software client end interface upgrade maintenance difficulty, and improve the development efficiency at interface, reduce cost of development.
In actual applications, the software architecture faced by programmer needs and graphic user interface type varied, general graphic user interface solution needs to provide technically certain dirigibility to meet the demand of types of applications environment; The design and implimentation of software Graphics user interface relates to multiple interface programming technology, types of applications environment needs to consider in the feature etc. of business demand, historic evolution and interface programming technology in the concrete choice of technology, general graphic user interface solution needs the packaged type provided different interface programming technology, makes different interface programming technology incorporate solution with accordant interface; Different applications is due to the difference of demand, all there is difference in various degree in the interface element type set used and look & feel, general graphic user interface solution needs the business scope customization mode providing different aspects, to adapt to the demand in different application field.Patent " CN 101202665 B " obviously cannot well solve such problem.
Summary of the invention
Technology of the present invention is dealt with problems and is: overcome the deficiencies in the prior art, provide a kind of method of general dynamic generation software Graphics user interface, can customize for different application field, realize the dynamic generation of graphic user interface in program operation process, solve software interface cost of development high, upgrade maintenance difficulty, achievement is not easily reused, and the problem of interface layout's difficulty very flexible.
Technical solution of the present invention is:
A kind of graphic user interface dynamic creation method, step is as follows:
(1) interface element is encapsulated according to unified interface, generate interface element storehouse;
Described interface element is divided into control and container by function, control is at function and the interface element in logic with independence, the action that each control has one group of attribute and can perform, container interface holds one group at function or the window of related control or panel in logic, and container also belongs to control;
Various controls and container distinctive coordinate method to set up, property setting method, action response mode and creation method are encapsulated according to unified interface, generates interface element storehouse;
(2) generate interface description file according to the demand of the graphic user interface for generating, described interface description file comprises the layout information of the graphical interfaces for generation, the control type that will use and control property and describes;
(3) the interface description file generated in the interface element storehouse using interface layout algorithm to generate according to step (1) and step (2) dynamically generates graphic user interface, described graphic user interface is made up of a primary tank, and primary tank comprises some sub-containers and some child controls;
Be specially:
S1: according to the control type that will use in interface description file, extract the description of primary tank type and create the example from interface element storehouse;
S2: according to the position coordinates of the layout information determination primary tank in interface description file, use primary tank coordinate method to set up to arrange its position coordinates, use attribute method to set up arranges its attribute;
S3: the child control of traversal primary tank and sub-container, create the example of child control and sub-container, according in interface description file, its attribute is set about the control property description of this child control or sub-container, the mode of action response is set, determines child control or sub-container position coordinate and arrange, if what create is sub-container, then after the sub-container of establishment, its child control of downward traversal, if all child controls of primary tank and sub-container all travel through complete, then whole graphic user interface generates complete.
Carry out according to determining in the position coordinates of the layout information determination primary tank in interface description file and step S3 that child control or sub-container position coordinate all can be chosen any one kind of them by following three kinds of modes in described step S2:
Mode one is static method: when generating described interface description file, directly defines the absolute coordinates of each interface element on the screen of target resolution in the layout information of described graphical interfaces;
Mode two is dynamic approach: adopt the method for form nested tables to divide screen, each interface element is a corresponding cell in the position of screen, according to the ranks proportionate relationship of form, the nest relation of different form and the true resolution of screen, determine the coordinate of cell in each form, i.e. the position coordinates of each interface element.
Mode three is quiet dynamic associated methods: when generating described interface description file, directly the absolute coordinates of each interface element on the screen of target resolution is defined in the layout information of described graphical interfaces, when dynamically generating graphic user interface according to interface description file, if the screen resolution of current operating environment is not the target resolution of interface description file, so the absolute coordinates equal proportion defined in interface description file is scaled the coordinate of applicable current operating environment screen resolution;
The present invention's beneficial effect is compared with prior art:
(1) according to the demand in embody rule field, the interface programming technology that is suitable for can be selected and wherein intrinsic interface element is customized in different levels, as directly selected, carry out customizing functions or expansion to interface element intrinsic in selected interface programming technology, combine multiple interface element, design and produce new interface element, then use unified interface to encapsulate to these interface elements, the interface element storehouse meeting specific application area demand can be built.
Namely which solves the problem of interface element expansion and customization difficulty when using design aids generation software Graphics user interface, also the problem at every turn all needing to process a large amount of ins and outs when using hard coded mode to generate graphic user interface is solved, the achievement of simultaneously above-mentioned customization, exploitation and debugging efforts, owing to being kept in interface element storehouse, can be reused in the exploitation of subsequent software graphic user interface.
(2) different control location Coordinate calculation methods can be chosen by business demand and realize interface layout, and interface layout information defines in interface description file, so the debugging of interface layout does not need to recompilate code, improve the development efficiency at interface, reduce the design difficulty at interface.
(3) build except interface element storehouse except by application demand, if do not related to the service logic that concrete software needs realize, exploitation and the maintenance at interface only need to write or revise interface description file, without the need to writing code or recompility program, therefore the present invention is also suitable for quick interface prototyping.
(4) be supported in the interface using and dynamically change software in application start operational process of the present invention according to the conversion of running environment and demand, or after starting, eject the subdialogue frame or the page that are applicable to according to the demand of user.
Accompanying drawing explanation
Fig. 1 is the technology of the present invention solution schematic diagram;
Fig. 2 is the schematic diagram of form nested tables;
Fig. 3 is the embodiment flow process of interface layout's algorithm;
Fig. 4 is the inventive method process flow diagram.
Embodiment
Below in conjunction with accompanying drawing, the specific embodiment of the present invention is further described in detail.
Solution of the present invention as shown in Figure 1, primarily of interface element storehouse, interface description file and interface layout's Algorithm constitution.
Interface element storehouse uses control interface and container joint to pack the interface element that a certain concrete interface programming technology provides, for interface description file and placement algorithm provide consistent interface element to use interface, with the Design and implementation of both simplification, provide the method for customizing towards application in different aspects, realize the reusable interface element storehouse meeting application feature, jointly form with interface description file and placement algorithm the graphic user interface solution meeting specific application area demand.
Control is at function and the interface element in logic with independence, and each control has one group of attribute and the action that can perform, such as, on interface one independently button can as a control, two relevant buttons also can form a control.Control interface provides the method for packing of interface element in this solution inside that concrete interface programming technology provides, in interface control bag, each control must realize this interface, and this interface provides the method for access control attribute, the method for definition control actions and creates the method for control example.
Graphic user interface can accept the action of input equipment (as mouse, keyboard), and these actions are responded by corresponding control.The mode that the control that different interface programming technology provides realizes action response is different, and the mode as Java employing virtual interface realizes the response to input equipment action, and VC adopts the response of message mechanism realization to action.For adapting to the difference of interface programming technical movements response mode, the form of the interface element subclass that the present invention provides with concrete interface programming technology encapsulates the action response mode of corresponding control, and in interface description file, defines this control point to quoting of its subclass.
General, if the interface element packaged by control inside needs the message of response to have nothing to do with concrete service logic, be then achieved in control inside; The message relevant to concrete service logic, gives acquiescence and realizes in interface control bag, when realizing service logic with subclass form specific implementation, and control belonging to association.
Container interface holds one group at function or the window of related control or panel in logic, it is a kind of special control, such as the control of certain equipment correlation parameter of display can be placed in a vessel, make this container and intrinsic control display thereof when needed, not need this container seasonal to hide.Each container can comprise any number of control and sub-container.Container also can be abstract, does not have corresponding visual interface element, only for dividing into groups to control.
Container joint defines the method for its child control of management that each container in interface control bag externally provides, as inserted a control, deleting a control or search a control.Because container is a kind of special control, so each container must realize control interface and container joint simultaneously.General, the creation method of container, except creating the example of himself, also creates the example of its sub-container comprised and child control.
Container, except dividing into groups to control, is also the entity at its administrative interface zone, its child control being carried out to layout.As in certain embodiment, define two kinds of container: WhitePanel and SlipPanel.
WhitePanel is an abstract container not having visual interface element, represents a rectangular area on interface, and in this rectangular area, carries out layout to its child control by placement algorithm.
SlipPanel is a rectangular area that can have frame (or not having), it can define the sub-interface of this area size multiple, the control set that every sub-interface comprises is different, use identical or different placement algorithm, synchronization only has a sub-interface to may be displayed on rectangular area, and can control which sub-interface display.
Implement this solution in a certain embody rule field, on the basis of selected interface programming technology, by the demand Custom Interface element database of application, mainly can implement in following three aspects:
1, applicable application is write but the interface element do not supported of selected programming technique.As at industrial control field, using VC development environment, needing self-developing for showing the control of data curve map;
2, to the interface element that selected programming technique is supported, the message response function of applicable application is write;
3, use control interface, the interface element support selected programming technique or independently developed interface element, carry out single interface element individual packages or several interface element assembled package by business demand.As a button is used together with control combination of interfaces with an editor, and the click action compose-message response function to button, make editor show current time, form the control that can obtain current time.
In embodiment, the encapsulation of control interface, container joint and interface element adopts the supporting interface technology such as C++, Java and polymorphic object oriented language to be embodied as optimum, the selection of interface programming technology can consider the platform specific that application program uses, as MFC, SWT, Qt etc.
The embodiment of a control interface provides following method:
Wherein, the interface element of the platform specific of control enclosed inside is associated with the subclass realizing its message response by setElement method.GetElement method is for obtaining the pointer of packaged interface element in control, make the interface element directly can accessing its enclosed inside in control outside, especially when using subclass mode to encapsulate the action response of corresponding control, multiple interface elements of encapsulation in same control can be made mutually to access, jointly complete the response to external action.
Act method receives < denomination of dive, parameter list > bis-tuple, and perform corresponding action according to denomination of dive and parameter, as certain control can accept two tuple < backgrounds, red >, and the background of this control is set to redness.Act method is the main method that control reception outside (in application program service logic part or other controls) is ordered.
Container is also control, and therefore the access interface of control is also applicable to container.General, the create method of container, except creating the example of himself, also creates the example of its sub-container comprised and child control; Act method, except receiving the action responded by container self, also can receiving the action needing sub-container or child control response, all stashing as allowed all child controls.
Container is different from general control part and is that inside can comprise sub-container or child control, and provides the access control method of antithetical phrase container and child control, so container had both needed to realize control interface, also needs to realize container joint.The embodiment of a container joint provides following method:
| Title | Function |
| add/delElement | Add/delete child control or sub-container |
| getElement | Obtain the pointer of child control or sub-container |
Interface element storehouse is after customization completes, and the Container Type wherein defined and control type can be reused in subsequent project.Graphic user interface is generated in a software, need to generate interface description file according to the demand of the graphic user interface for generating, this file comprises the layout information of the graphic user interface that wish generates, the control type that will use and control property and describes.
In this solution, arbitrary graphic user interface is made up of a primary tank, the administrative rectangular area of primary tank occupies the whole of this graphic user interface, some sub-containers and some child controls is comprised again in primary tank, this a little container and the administrative rectangular area of child control are according to the definition of primary tank placement algorithm, occupy the diverse location of the administrative rectangular area of primary tank respectively, its neutron container comprises again some sub-containers and some child controls, and carries out layout to its sub-container comprised and child control between the administrative rectangle region of this sub-container.So, definition and the description of whole graphic user interface is realized.
Therefore, the embodiment of an interface description file can describe and define a graphic user interface as follows:
First, definition primary tank, comprises the Container Type of primary tank, sub-container that the attribute of primary tank, primary tank comprise and child control and sub-container and the layout information of child control in primary tank region within the jurisdiction.
Then, the child control that definition primary tank comprises, comprises the control type of child control, the attribute of child control.
Then, the sub-container that comprises of definition primary tank, comprises the Container Type of sub-container, sub-container that the attribute of sub-container, sub-container comprise and child control and this little container and the layout information of child control in this rectangular area, sub-container institute area under one's jurisdiction.
Finally, in a manner described, all containers and the control of the required definition of this interface description file is completed.
(said vesse type and control type are all defined in interface element storehouse)
In embodiment, interface description file is embodied as optimum with XML, also can adopt the way of realization of other configuration files.Be below the specific embodiment (using static topology algorithm) of an interface description file:
Interface layout's algorithm with interface element storehouse and interface description file for input, with the graphic user interface of program for exporting.Concrete steps are:
A1, according to the control type that will use in interface description file, extracts the description of primary tank type and creates the example from interface element storehouse;
A2, according to the position coordinates of the layout information determination primary tank in interface description file, use primary tank coordinate method to set up to arrange its position coordinates, use attribute method to set up arranges its attribute;
A3, the child control of traversal primary tank and sub-container, create the example of child control and sub-container, according in interface description file, its attribute is set about the control property description of this child control or sub-container, the mode of action response is set, determine child control or sub-container position coordinate and arrange, if what create is sub-container, then after the sub-container of establishment, its child control of traversal downwards, if all child controls of primary tank and sub-container all travel through complete, then whole graphic user interface generates complete.
Travel through the child control of primary tank and sub-container in said method A3, and to its child control of lower traversal after the sub-container of establishment, the traversal method of depth-first or breadth First can be used.Adopt the embodiment of interface layout's algorithm of depth-first search traversal method as follows: (Fig. 3)
S1: the example creating primary tank, sets a property according to the definition of interface description file, the subclass of relevant action response, calculates its position coordinates according to the placement algorithm used, is pressed in stack;
S2: if stack non-NULL, then perform S3, otherwise algorithm is complete;
S3: eject stack top element, as work at present container;
S4: if work at present container also has untreated child control, then perform S5, otherwise S2;
S5: the example creating child control, sets a property according to the definition of interface description file, the subclass of relevant action response, calculates according to the control location Coordinate calculation method used and arranges its position coordinates;
S6: if the new child control created is container, then perform S7, otherwise S4;
S7: during the sub-vessel pressure that newly creates is stacked, performs S4.
Above-mentioned control location Coordinate calculation method, is included in the layout information that defines in interface description file and the computing method according to this information determination control location coordinate.Specifically can by following three kinds of modes:
Mode one is static method: when generating described interface description file, directly defines the position coordinates of each interface element on the screen of target resolution in the layout information of described graphic user interface.
Concrete, the upper left corner relative coordinate of each container of definable is (0,0), and the sub-container that container comprises and the coordinate of child control are all relative his father's containers.In interface description file, when the sub-container of a definition container and child control, record the relative coordinate of this little container and child control, namely the layout information of this container simultaneously.
When the software applying this solution dynamically generates graphic user interface, first determine the top left co-ordinate (X of software interface
0, Y
0), namely primary tank top left co-ordinate is (X
0, Y
0), the relative coordinate in interface description file that so primary tank comprises is the coordinate of the child control of (x, y) is (X
0+ x, Y
0+ y), in primary tank, the coordinate of relative coordinate to be the relative coordinate comprised in the sub-container of (x ', y ') be child control of (a, b) is (X
0+ x '+a, Y
0+ y '+b).
Top left co-ordinate (the X of described software interface
0, Y
0) determination mode, because of adopt interface programming technology and different, as under VC environment, (X
0, Y
0) GetClientRect method can be used to obtain.
Mode two is dynamic approach: adopt the method for form nested tables to divide screen, each interface element is a corresponding cell in the position of screen, according to the ranks proportionate relationship of form, the nest relation of different form and the true resolution of screen, determine the coordinate of cell in each form, i.e. the position coordinates of each interface element.As shown in Figure 2, a software interface can first be divided by the form T of a m*n, then uses form T ' to divide to the interface in T (x, y) scope ... ..., so can realize any division to software interface and location.(wherein T (x, y) represents in T the cell being in the capable y row of x)
In interface description file, definition is needed to be used for the mapping to form of nest relation between the form of screen divider, form and control.Wherein, each form describes its line number comprised and columns, every line height accounts for the ratio of whole form height, every column width accounts for whole table width ratio.
Below in interface description file when adopting Dynamic Distribution's algorithm comprise a specific embodiment of layout information:
On employing Dynamic Distribution algorithm graphic user interface, the computing method of control coordinate are:
First, its every row/column percentage is calculated to <Table> each in <Templates> node
Then, adopt strategy traversal <Layout> node and the child node thereof of depth-first or breadth First, the <Table> that the actual rectangular area of screen and current <Layout> node use shared by this container, calculates the coordinate of each form and cell in each <Layout>;
Finally, according to the map information of <Element> to the <Layout> that <mapping> node comprises, according to the coordinate of control place cell, the coordinate of each control at screen is set.
Mode three is quiet dynamic associated methods: when generating interface description file, directly the absolute coordinates of each interface element on the screen of target resolution is defined in the layout information of graphic user interface, when dynamically generating graphic user interface according to interface description file, if the screen resolution of current operating environment is not the target resolution of interface description file, so the absolute coordinates equal proportion defined in interface description file is scaled the coordinate of applicable current operating environment screen resolution;
In specific embodiment, interface layout's algorithm adopts mode three, and the layout information comprised needed in interface description file is identical with employing mode one, but adopts mode three need indicate its applicable target resolution in interface description file.When carrying out position coordinates calculating, if the resolution of actual screen is identical with the target resolution of interface description file, then processing mode adopts mode one identical with interface layout algorithm, otherwise need carry out equal proportion conversion to the control location coordinate calculated by mode one.If the target resolution of interface description file is (a, b), the resolution of actual screen is (c, d), the control calculated by mode one at target resolution be (a, b) screen on position coordinates be (x, y), so this control in resolution be (c, d) screen on position coordinates be (c/a*x, b/d*y).
Three kinds of embodiments of interface layout's algorithm respectively have relative merits, need to select according to the feature in embody rule field.Mode one is simply easy to realize, but relates to the calculating of particular location coordinate, and artificial treatment is comparatively difficult, for embody rule domain design interface auxiliary development instrument, can carry out the calculating of position coordinates, and then Aided Generation interface description file; Mode two does not relate to the calculating of particular location coordinate, is comparatively applicable to manual generating interface description file, and can the screen of self-adaptation different resolution to a certain extent; Mode three adds the adaptive faculty to different resolution screen on the basis of mode one.
If embodiment has the demand of self-adaptation different resolution screen, so can select mode two and mode three, and generate for each resolution that may use the interface description file be applicable to, when using the software actual generation graphic user interface of this solution, corresponding interface description file is selected according to the resolution of actual screen, if there is no the interface description file being applicable to this resolution, so use the interface description file closest to this resolution, allow the graphic user interface of interface layout's algorithm adaptive generation software.
Optimum embodiment of the present invention should select the programming language supporting dynamic creation mechanism, concrete, deviser is needed to realize in grand mode voluntarily in C++, can with reference to grand DECLARE_SERIAL and IMPLEMENT_SERIAL in MFC, and Java supports dynamic creation with reflex mechanism in speech level.If container or control dynamic create, then directly can use type attribute dynamic creation container or the control example of <Element> node in interface description file in interface layout's algorithm.So, in the process of Custom Interface element database, interface layout's algorithm without the need to amendment, otherwise, in interface element storehouse, add the constructive process that container or control need to realize newly adding in the mode of switch-case in interface layout's algorithm control.
To sum up, implement the graphic user interface that this solution generates a software a concrete business scope and need following steps: (Fig. 4)
(1) interface element is encapsulated according to unified interface, generate interface element storehouse;
Described interface element is divided into control and container by function, control is at function and the interface element in logic with independence, the action that each control has one group of attribute and can perform, container interface holds one group at function or the window of related control or panel in logic, and container also belongs to control;
Various controls and container distinctive coordinate method to set up, property setting method, action response mode and creation method are encapsulated according to unified interface, generates interface element storehouse;
(2) generate interface description file according to the demand of the graphic user interface for generating, described interface description file comprises the layout information of the graphical interfaces for generation, the control type that will use and control property and describes;
(3) dynamically generate graphic user interface according to the interface description file generated in step (2), described graphic user interface is made up of a primary tank, and primary tank comprises some sub-containers and some child controls.Be specially:
S1: according to the control type that will use in interface description file, extract the description of primary tank type and create the example from interface element storehouse;
S2: according to the position coordinates of the layout information determination primary tank in interface description file, use primary tank coordinate method to set up to arrange its position coordinates, use attribute method to set up arranges its attribute;
S3: the child control of traversal primary tank and sub-container, create the example of child control and sub-container, according in interface description file, its attribute is set about the control property description of this child control or sub-container, the mode of action response is set, determines child control or sub-container position coordinate and arrange, if what create is sub-container, then after the sub-container of establishment, its child control of downward traversal, if all child controls of primary tank and sub-container all travel through complete, then whole graphic user interface generates complete.
Above-mentioned interface element storehouse and interface layout's algorithm reusable, in subsequent project, use this solution to generate the graphic user interface of software only need definition interfaces description document.
The application program adopting this technology to realize structurally naturally is divided into contact bed and Business Logic.Contact bed and Business Logic can run on same main frame, or run on (program as C/S structure) on different main frame respectively, and these two kinds of deployment way can realize as follows:
Situation on same main frame is run on for contact bed and service logic, the place employing sending data to interface can be needed in business module directly to call, send the communication mode such as message or pipeline to interface transmission tuple < control title, parameter list >, the selection of concrete communication mode need consider the dynamic structure of program, as whether contact bed and Business Logic run on the problems such as same process or same thread.To the response of user action, the subclass of the platform specific interface element packaged by control need be realized, and be associated with corresponding control in the interface description file of XML form, these subclasses can be packaged into separately an assembly bag, also can directly be encapsulated in the correlation module of Business Logic.
Situation on different main frame is run on for contact bed and Business Logic, the place sending data to interface can be needed in business module to adopt network communication mode to send tuple < control title to interface, parameter list >; To the response of user action, also the subclass of the platform specific interface element realized packaged by control is needed, and be associated with corresponding control in interface description file, control command is sent with network communication mode to service logic correlation module in these subclasses, these subclasses are packaged into separately an assembly bag, are present in same main frame with contact bed.
Adopt this technology can fast creation program prototype, conveniently to exchange with party in request, and the interface created be easy to revise, and without the need to recompilating program under identical platform, only needs to adjust configuration file and picture concerned resource; When changing platform, only need encapsulate according to the Basic Elements of Graphic User Interface of demand to new platform under new platform.
The content be not described in detail in instructions of the present invention belongs to the known technology of professional and technical personnel in the field.
Claims (2)
1. a graphic user interface dynamic creation method, is characterized in that step is as follows:
(1) interface element is encapsulated according to unified interface, generate interface element storehouse;
Described interface element is divided into control and container by function, control is at function and the interface element in logic with independence, the action that each control has one group of attribute and can perform, container interface holds one group at function or the window of related control or panel in logic, and container also belongs to control;
Various controls and container distinctive coordinate method to set up, property setting method, action response mode and creation method are encapsulated according to unified interface, generates interface element storehouse;
(2) generate interface description file according to the demand of the graphic user interface for generating, described interface description file comprises the layout information of the graphical interfaces for generation, the control type that will use and control property and describes;
(3) the interface description file generated in the interface element storehouse generated according to step (1) and step (2) dynamically generates graphic user interface, described graphic user interface is made up of a primary tank, and primary tank comprises some sub-containers and some child controls;
Be specially:
S1: according to the control type that will use in interface description file, extract the description of primary tank type and create the example from interface element storehouse;
S2: according to the position coordinates of the layout information determination primary tank in interface description file, use primary tank coordinate method to set up to arrange its position coordinates, use attribute method to set up arranges its attribute;
S3: the child control of traversal primary tank and sub-container, create the example of child control and sub-container, according in interface description file, its attribute is set about the control property description of this child control or sub-container, the mode of action response is set, determines child control or sub-container position coordinate and arrange, if what create is sub-container, then after the sub-container of establishment, its child control of downward traversal, if all child controls of primary tank and sub-container all travel through complete, then whole graphic user interface generates complete.
2. a kind of graphic user interface dynamic creation method according to claim 1, is characterized in that: carry out according to determining in the position coordinates of the layout information determination primary tank in interface description file and step S3 that child control or sub-container position coordinate are chosen any one kind of them by following three kinds of modes in described step S2:
Mode one is static method: when generating described interface description file, directly defines the absolute coordinates of each interface element on the screen of target resolution in the layout information of described graphical interfaces;
Mode two is dynamic approach: adopt the method for form nested tables to divide screen, each interface element is a corresponding cell in the position of screen, according to the ranks proportionate relationship of form, the nest relation of different form and the true resolution of screen, determine the coordinate of cell in each form, i.e. the position coordinates of each interface element;
Mode three is quiet dynamic associated methods: when generating described interface description file, directly the absolute coordinates of each interface element on the screen of target resolution is defined in the layout information of described graphical interfaces, when dynamically generating graphic user interface according to interface description file, if the screen resolution of current operating environment is not the target resolution of interface description file, so the absolute coordinates equal proportion defined in interface description file is scaled the coordinate of applicable current operating environment screen resolution.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410453727.5A CN104239044B (en) | 2014-09-05 | 2014-09-05 | A kind of graphic user interface dynamic creation method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410453727.5A CN104239044B (en) | 2014-09-05 | 2014-09-05 | A kind of graphic user interface dynamic creation method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104239044A true CN104239044A (en) | 2014-12-24 |
| CN104239044B CN104239044B (en) | 2017-07-28 |
Family
ID=52227186
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410453727.5A Active CN104239044B (en) | 2014-09-05 | 2014-09-05 | A kind of graphic user interface dynamic creation method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104239044B (en) |
Cited By (39)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104731590A (en) * | 2015-03-13 | 2015-06-24 | 广东欧珀移动通信有限公司 | Method and device for realizing user interface controls |
| CN104978195A (en) * | 2015-06-26 | 2015-10-14 | 浪潮软件集团有限公司 | Interface configuration device and method |
| CN105335164A (en) * | 2015-12-01 | 2016-02-17 | 深圳市云舒网络技术有限公司 | Window drawing method and device based on windows |
| CN105589714A (en) * | 2015-09-29 | 2016-05-18 | 中国银联股份有限公司 | Method and device for analyzing application program usage behaviors of user |
| CN105893586A (en) * | 2016-04-06 | 2016-08-24 | 中国建设银行股份有限公司 | Method for automatically generating dynamic page based on integration rules |
| CN105988814A (en) * | 2015-03-02 | 2016-10-05 | 腾讯科技（深圳）有限公司 | Interface generation method and apparatus |
| CN106021101A (en) * | 2016-05-16 | 2016-10-12 | 北京奇虎科技有限公司 | Method and device for testing mobile terminal |
| CN106021102A (en) * | 2016-05-16 | 2016-10-12 | 北京奇虎科技有限公司 | Automated test file generation method and apparatus |
| CN106250158A (en) * | 2016-08-01 | 2016-12-21 | 广州优视网络科技有限公司 | The layout method of a kind of client end interface, device and mobile device |
| WO2016201813A1 (en) * | 2015-06-19 | 2016-12-22 | 中兴通讯股份有限公司 | Dynamic layout method and system based on android |
| CN106484445A (en) * | 2015-08-27 | 2017-03-08 | 阿里巴巴集团控股有限公司 | The page display method of application program for mobile terminal and device |
| CN106502704A (en) * | 2016-10-31 | 2017-03-15 | 乐视控股（北京）有限公司 | The implementation method of user interface controls and its device in a kind of 3d space |
| CN106528115A (en) * | 2016-10-31 | 2017-03-22 | 乐视控股（北京）有限公司 | Visualized interface development method and device |
| CN106547528A (en) * | 2015-09-22 | 2017-03-29 | 腾讯科技（深圳）有限公司 | A kind of quick interface arrangement method and device |
| CN106708504A (en) * | 2016-11-15 | 2017-05-24 | 深圳市丰巨泰科电子有限公司 | Personalized control method for generating APP through doodling |
| CN106843862A (en) * | 2017-01-06 | 2017-06-13 | 福建升腾资讯有限公司 | A kind of method that Swing interfaces automatically form |
| CN107015795A (en) * | 2017-01-11 | 2017-08-04 | 阿里巴巴集团控股有限公司 | A kind of method and device for drawing user interface |
| CN107220170A (en) * | 2016-03-22 | 2017-09-29 | 阿里巴巴集团控股有限公司 | A kind of method of testing, device and electronic equipment |
| CN107977203A (en) * | 2017-10-20 | 2018-05-01 | 捷开通讯(深圳)有限公司 | The creation method of storage device, application program control and user interface |
| CN108255489A (en) * | 2018-01-12 | 2018-07-06 | 北京三快在线科技有限公司 | Front-end interface code generating method, device, electronic equipment and storage medium |
| CN108647026A (en) * | 2018-05-15 | 2018-10-12 | 中国电子科技集团公司第二十九研究所 | Visualization interface integrated approach based on dynamic grid and system |
| CN108733371A (en) * | 2018-05-16 | 2018-11-02 | 北京奇艺世纪科技有限公司 | A kind of interface creating method, device and equipment |
| CN108874477A (en) * | 2017-05-11 | 2018-11-23 | 武汉斗鱼网络科技有限公司 | A kind of method and apparatus showing static images and dynamic picture |
| CN109062571A (en) * | 2018-06-12 | 2018-12-21 | 广州视源电子科技股份有限公司 | Method and apparatus for dynamic configuration of user interface |
| CN109144511A (en) * | 2018-08-16 | 2019-01-04 | 北京应用物理与计算数学研究所 | Numerical simulation graphic user interface automatic generation method and system |
| CN109308199A (en) * | 2018-09-04 | 2019-02-05 | 广州优视网络科技有限公司 | A kind of display methods, device and the terminal device of control set |
| WO2019043535A1 (en) * | 2017-08-29 | 2019-03-07 | International Business Machines Corporation | Providing instructions during remote viewing of a user interface |
| CN109933323A (en) * | 2019-03-15 | 2019-06-25 | 山东云缦智能科技有限公司 | A kind of method and device that user interface is set |
| CN110275754A (en) * | 2019-06-28 | 2019-09-24 | 百度在线网络技术（北京）有限公司 | Exchange method, device, equipment and the storage medium presented for user interface |
| CN111124412A (en) * | 2020-01-02 | 2020-05-08 | 腾讯科技（深圳）有限公司 | Game page drawing method, device, equipment and storage medium |
| CN111414215A (en) * | 2019-01-07 | 2020-07-14 | 比亚迪股份有限公司 | Human-computer interface generation method and device and storage medium |
| CN111552529A (en) * | 2020-04-17 | 2020-08-18 | 南阳柯丽尔科技有限公司 | UI (user interface) adaptation method and device, computer equipment and storage medium |
| CN111580816A (en) * | 2020-05-08 | 2020-08-25 | 南京宁和颂扬科技有限公司 | Intelligent tablet terminal based on interactive graphic software |
| CN111831283A (en) * | 2020-07-21 | 2020-10-27 | 成都寰蓉光电科技有限公司 | QT-based human-computer interface modularization development method |
| CN112181418A (en) * | 2020-10-21 | 2021-01-05 | 中国核动力研究设计院 | Rapid construction method and system for nuclear reactor computing software graphical interface |
| CN112486483A (en) * | 2020-11-23 | 2021-03-12 | 广州经传多赢投资咨询有限公司 | UI framework implementation method, system, device and storage medium based on XML |
| CN112667238A (en) * | 2020-12-31 | 2021-04-16 | 华南理工大学 | Method and system for dynamically generating control panel of automation equipment |
| CN114090138A (en) * | 2020-07-03 | 2022-02-25 | 北京沃东天骏信息技术有限公司 | Page display method and device |
| WO2022068594A1 (en) * | 2020-09-29 | 2022-04-07 | 华为技术有限公司 | Application interface layout method and electronic device |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101453469A (en) * | 2007-12-06 | 2009-06-10 | 索尼株式会社 | System and method for dynamically generating user interfaces for network client devices |
| CN101477461A (en) * | 2009-02-10 | 2009-07-08 | 腾讯科技（深圳）有限公司 | Dynamic generation apparatus and method for application program interface |
| CN101751257A (en) * | 2009-11-19 | 2010-06-23 | 华为终端有限公司 | Image user interface help information display method and device |
-
2014
- 2014-09-05 CN CN201410453727.5A patent/CN104239044B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101453469A (en) * | 2007-12-06 | 2009-06-10 | 索尼株式会社 | System and method for dynamically generating user interfaces for network client devices |
| CN101477461A (en) * | 2009-02-10 | 2009-07-08 | 腾讯科技（深圳）有限公司 | Dynamic generation apparatus and method for application program interface |
| CN101751257A (en) * | 2009-11-19 | 2010-06-23 | 华为终端有限公司 | Image user interface help information display method and device |
Cited By (59)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105988814A (en) * | 2015-03-02 | 2016-10-05 | 腾讯科技（深圳）有限公司 | Interface generation method and apparatus |
| CN105988814B (en) * | 2015-03-02 | 2020-07-03 | 腾讯科技（深圳）有限公司 | Interface generation method and device |
| CN104731590B (en) * | 2015-03-13 | 2018-04-27 | 广东欧珀移动通信有限公司 | A kind of user interface controls implementation method and device |
| CN104731590A (en) * | 2015-03-13 | 2015-06-24 | 广东欧珀移动通信有限公司 | Method and device for realizing user interface controls |
| WO2016201813A1 (en) * | 2015-06-19 | 2016-12-22 | 中兴通讯股份有限公司 | Dynamic layout method and system based on android |
| CN106325658A (en) * | 2015-06-19 | 2017-01-11 | 中兴通讯股份有限公司 | Android-based dynamic layout method and system |
| CN104978195A (en) * | 2015-06-26 | 2015-10-14 | 浪潮软件集团有限公司 | Interface configuration device and method |
| CN106484445A (en) * | 2015-08-27 | 2017-03-08 | 阿里巴巴集团控股有限公司 | The page display method of application program for mobile terminal and device |
| CN106547528B (en) * | 2015-09-22 | 2020-07-14 | 腾讯科技（深圳）有限公司 | Interface layout method and device |
| CN106547528A (en) * | 2015-09-22 | 2017-03-29 | 腾讯科技（深圳）有限公司 | A kind of quick interface arrangement method and device |
| CN105589714A (en) * | 2015-09-29 | 2016-05-18 | 中国银联股份有限公司 | Method and device for analyzing application program usage behaviors of user |
| CN105589714B (en) * | 2015-09-29 | 2018-12-25 | 中国银联股份有限公司 | The method and apparatus for using application behavior for analyzing user |
| CN105335164B (en) * | 2015-12-01 | 2019-05-28 | 深圳市云舒网络技术有限公司 | A kind of window method for drafting and drawing apparatus based on windows |
| CN105335164A (en) * | 2015-12-01 | 2016-02-17 | 深圳市云舒网络技术有限公司 | Window drawing method and device based on windows |
| CN107220170A (en) * | 2016-03-22 | 2017-09-29 | 阿里巴巴集团控股有限公司 | A kind of method of testing, device and electronic equipment |
| CN105893586B (en) * | 2016-04-06 | 2019-04-02 | 中国建设银行股份有限公司 | A kind of method and system automatically generating dynamic page based on Integral Rule |
| CN105893586A (en) * | 2016-04-06 | 2016-08-24 | 中国建设银行股份有限公司 | Method for automatically generating dynamic page based on integration rules |
| CN106021102B (en) * | 2016-05-16 | 2019-05-28 | 北京奇虎科技有限公司 | The generation method and device of automatic test file |
| CN106021101B (en) * | 2016-05-16 | 2019-05-28 | 北京奇虎科技有限公司 | The method and device that mobile terminal is tested |
| CN106021102A (en) * | 2016-05-16 | 2016-10-12 | 北京奇虎科技有限公司 | Automated test file generation method and apparatus |
| CN106021101A (en) * | 2016-05-16 | 2016-10-12 | 北京奇虎科技有限公司 | Method and device for testing mobile terminal |
| CN106250158A (en) * | 2016-08-01 | 2016-12-21 | 广州优视网络科技有限公司 | The layout method of a kind of client end interface, device and mobile device |
| CN106528115A (en) * | 2016-10-31 | 2017-03-22 | 乐视控股（北京）有限公司 | Visualized interface development method and device |
| CN106502704A (en) * | 2016-10-31 | 2017-03-15 | 乐视控股（北京）有限公司 | The implementation method of user interface controls and its device in a kind of 3d space |
| CN106708504A (en) * | 2016-11-15 | 2017-05-24 | 深圳市丰巨泰科电子有限公司 | Personalized control method for generating APP through doodling |
| CN106843862A (en) * | 2017-01-06 | 2017-06-13 | 福建升腾资讯有限公司 | A kind of method that Swing interfaces automatically form |
| CN107015795A (en) * | 2017-01-11 | 2017-08-04 | 阿里巴巴集团控股有限公司 | A kind of method and device for drawing user interface |
| CN108874477B (en) * | 2017-05-11 | 2021-06-15 | 武汉斗鱼网络科技有限公司 | Method and device for displaying static pictures and dynamic pictures |
| CN108874477A (en) * | 2017-05-11 | 2018-11-23 | 武汉斗鱼网络科技有限公司 | A kind of method and apparatus showing static images and dynamic picture |
| WO2019043535A1 (en) * | 2017-08-29 | 2019-03-07 | International Business Machines Corporation | Providing instructions during remote viewing of a user interface |
| US11206300B2 (en) | 2017-08-29 | 2021-12-21 | International Business Machines Corporation | Providing instructions during remote viewing of a user interface |
| GB2578405A (en) * | 2017-08-29 | 2020-05-06 | Ibm | Providing instructions during remote viewing of a user interface |
| US11201906B2 (en) | 2017-08-29 | 2021-12-14 | International Business Machines Corporation | Providing instructions during remote viewing of a user interface |
| WO2019076307A1 (en) * | 2017-10-20 | 2019-04-25 | 捷开通讯(深圳)有限公司 | Storage apparatus, application control creation method, and user interface creation method |
| CN107977203A (en) * | 2017-10-20 | 2018-05-01 | 捷开通讯(深圳)有限公司 | The creation method of storage device, application program control and user interface |
| CN108255489B (en) * | 2018-01-12 | 2021-05-25 | 北京三快在线科技有限公司 | Front-end interface code generation method and device, electronic equipment and storage medium |
| CN108255489A (en) * | 2018-01-12 | 2018-07-06 | 北京三快在线科技有限公司 | Front-end interface code generating method, device, electronic equipment and storage medium |
| CN108647026A (en) * | 2018-05-15 | 2018-10-12 | 中国电子科技集团公司第二十九研究所 | Visualization interface integrated approach based on dynamic grid and system |
| CN108733371A (en) * | 2018-05-16 | 2018-11-02 | 北京奇艺世纪科技有限公司 | A kind of interface creating method, device and equipment |
| CN109062571B (en) * | 2018-06-12 | 2022-08-16 | 广州视源电子科技股份有限公司 | Method and apparatus for dynamic configuration of user interface |
| CN109062571A (en) * | 2018-06-12 | 2018-12-21 | 广州视源电子科技股份有限公司 | Method and apparatus for dynamic configuration of user interface |
| CN109144511A (en) * | 2018-08-16 | 2019-01-04 | 北京应用物理与计算数学研究所 | Numerical simulation graphic user interface automatic generation method and system |
| CN109308199A (en) * | 2018-09-04 | 2019-02-05 | 广州优视网络科技有限公司 | A kind of display methods, device and the terminal device of control set |
| CN111414215A (en) * | 2019-01-07 | 2020-07-14 | 比亚迪股份有限公司 | Human-computer interface generation method and device and storage medium |
| CN109933323A (en) * | 2019-03-15 | 2019-06-25 | 山东云缦智能科技有限公司 | A kind of method and device that user interface is set |
| CN110275754A (en) * | 2019-06-28 | 2019-09-24 | 百度在线网络技术（北京）有限公司 | Exchange method, device, equipment and the storage medium presented for user interface |
| CN111124412A (en) * | 2020-01-02 | 2020-05-08 | 腾讯科技（深圳）有限公司 | Game page drawing method, device, equipment and storage medium |
| CN111124412B (en) * | 2020-01-02 | 2021-08-17 | 腾讯科技（深圳）有限公司 | Game page drawing method, device, equipment and storage medium |
| CN111552529B (en) * | 2020-04-17 | 2023-03-14 | 南阳柯丽尔科技有限公司 | UI (user interface) adapting method and device, computer equipment and storage medium |
| CN111552529A (en) * | 2020-04-17 | 2020-08-18 | 南阳柯丽尔科技有限公司 | UI (user interface) adaptation method and device, computer equipment and storage medium |
| CN111580816A (en) * | 2020-05-08 | 2020-08-25 | 南京宁和颂扬科技有限公司 | Intelligent tablet terminal based on interactive graphic software |
| CN114090138A (en) * | 2020-07-03 | 2022-02-25 | 北京沃东天骏信息技术有限公司 | Page display method and device |
| CN111831283A (en) * | 2020-07-21 | 2020-10-27 | 成都寰蓉光电科技有限公司 | QT-based human-computer interface modularization development method |
| WO2022068594A1 (en) * | 2020-09-29 | 2022-04-07 | 华为技术有限公司 | Application interface layout method and electronic device |
| CN112181418B (en) * | 2020-10-21 | 2022-02-11 | 中国核动力研究设计院 | Rapid construction method and system for nuclear reactor computing software graphical interface |
| CN112181418A (en) * | 2020-10-21 | 2021-01-05 | 中国核动力研究设计院 | Rapid construction method and system for nuclear reactor computing software graphical interface |
| CN112486483A (en) * | 2020-11-23 | 2021-03-12 | 广州经传多赢投资咨询有限公司 | UI framework implementation method, system, device and storage medium based on XML |
| CN112667238A (en) * | 2020-12-31 | 2021-04-16 | 华南理工大学 | Method and system for dynamically generating control panel of automation equipment |
| CN112667238B (en) * | 2020-12-31 | 2022-04-22 | 华南理工大学 | Method and system for dynamically generating control panel of automation equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104239044B (en) | 2017-07-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104239044A (en) | Dynamic generation method for graphical user interface | |
| Fenves et al. | Integrated software environment for building design and construction | |
| CN101833289B (en) | Scaling composite shapes for a graphical human-machine interface | |
| CN101382887A (en) | Method and apparatus for regulating interface layout | |
| CN102193782B (en) | Method for operating table model | |
| CN105487864A (en) | Method and device for automatically generating code | |
| CN116225429A (en) | Pulling type component frame-based ipage webpage type low-code development platform | |
| US20090282349A1 (en) | System and method for dynamic configuration of components of web interfaces | |
| CN101158940B (en) | Method and device for dwindling character stuffing in target region | |
| CN101140516A (en) | Method and system for dynamic laying-out interface element | |
| CN104463957B (en) | A kind of three-dimensional scenic Core Generator integrated approach based on material | |
| CN104346149A (en) | Descriptive framework used for data visualization | |
| CN109716294A (en) | With the user interface for moving mini label | |
| CN101876917A (en) | Control development method and device | |
| Jiang et al. | ORCSolver: An efficient solver for adaptive gui layout with or-constraints | |
| CN113535165A (en) | Interface generation method and device, electronic equipment and computer readable storage medium | |
| CN108108194A (en) | User interface edit methods and user interface editing machine | |
| US20200210518A1 (en) | Systems and/or methods for dynamic layout design | |
| CN110990093A (en) | Flexible interface layout visualization method and medium based on component technology | |
| CN114117645A (en) | Ship overall performance prediction integrated application system | |
| CN105488052B (en) | Structural data is switched to the method and system of format formfile | |
| CN102081521B (en) | A kind of general development platform of military hardware operation interface | |
| CN108647026B (en) | Visual interface integration method and system based on dynamic grid | |
| CN115309397B (en) | Canvas topology management method and system of data interpretation model | |
| Schwartze et al. | Adjustable context adaptations for user interfaces at runtime |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |