[0021] The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, but not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.
[0022] like figure 1 As shown, the specific embodiment of the present invention provides an adaptive GUI construction method, the method includes: receiving a resource file and an interface frame template file input by a user (step S101); decomposing the resource file into data item record, according to the control attribute setting instruction input by the user, set the association relationship between the control attribute and the control in the data item record, and generate a GUI control resource (step S102); The GUI control resources are encapsulated into coordinate resource objects, and the GUI control resources that do not have coordinate position attributes in the GUI control resources are encapsulated into non-coordinate resource objects, and the coordinate resource objects and non-coordinate resource objects are translated into corresponding GUI objects for storage ( Step S103); read the GUI object, insert the GUI object as a logical node into the resource tree based on the interface frame template file according to the sequence adapted to the GUI layout (step S104); receive the control position setting instruction input by the user, and according to the control position The setting instruction sets the coordinate position data of the GUI object in the resource tree (step S105 ); translates the set resource tree into a GUI layout, and displays the GUI layout (step S106 ).
[0023] In the adaptive graphical user interface construction method of this embodiment, the resource file and the interface frame template file selection interface can be provided to the user through the network terminal, and the user's selection instruction can be received.
[0024] The content of the resource file selected by the user is parsed in the server connected to the network terminal through the network, decomposed into data item records, and output to the network terminal for the user to set the attributes of the data item. like figure 2 As shown, the DSR metadata table displays the parsed data item record of the DSR gateway file, and provides six attributes of the data item for users to set, and the component type column provides a drop-down menu of control attributes for the user to choose. The network terminal can receive the user's definition of the association relationship between the controls in the data item record, for example, identifying the label and the input field as the control (such as image 3 shown), save the association relationship between the controls set by the user to the properties of the data item to prepare for the subsequent setting of the control spacing.
[0025] in as figure 2 In the control property setting interface shown, the data items selected by the user are classified through the input/output properties to determine the group (GROUP) to which they belong; then according to whether the GUI control resource has layout information, the GUI control resource selected by the user is classified. It is divided into graphic coordinate resources and graphic non-coordinate resources, and the classified resources are encapsulated into resource objects and stored in the resource object database.
[0026] The resource objects in the resource object database are sequentially read, and the resource objects are translated into GUI objects according to the corresponding relationship between the resource objects and the GUI objects, and stored in the GUI object database.
[0027] like Figure 4 As shown, the interface frame template file input by the user is used as the initial starting point for generating the resource tree, that is, the prototype of the resource tree; then, the GUI object is sequentially read from the GUI object database, if the input/output attribute of the GUI object is input (I ), then traverse the resource tree in turn from the root node (Window) to find the input node group (Group_Input); further, traverse the GUI object nodes under the input node group (Group_Input), if the new GUI object node already exists, return to continue execution The next step is to insert the GUI object into the resource tree, otherwise add a GUI object node in the input node group (Group_Input). If the input/output attribute of the GUI object is output (0), then traverse the resource tree from the root node (Window) to find the output node group (Group_Output), and further, traverse the GUI object nodes under the output node group (Group_Output), If the new GUI object node already exists, return to continue to execute the step of inserting the next GUI object into the resource tree, otherwise, add a GUI object node in the output node group (Group_Output). Repeat the above steps of inserting GUI object nodes until the GUI objects in the resource object database have been processed.
[0028]The network terminal displays the GUI control position parameter setting interface to the user, and receives the parameters set by the user. The data in the resource tree is sequentially read, the GUI object is obtained, and the position attribute of the GUI object is adaptively set in turn in combination with the layout parameters set by the user. It includes: (1) size adjustment, estimate the scaling ratio according to the difference between the length of the data item in the resource file and the actual control length, that is, the length coefficient; then, calculate the length of the GUI control according to the length coefficient and the length of the data item, and calculate the same The width of the GUI control; finally the length and width of the GUI control are stored in the resource tree database as position properties. (2) Position adjustment, which is used to adjust the X coordinate and Y coordinate of the GUI control, so that the X coordinate of the adjusted control is aligned with the X coordinate of the previous sub-control, and the Y coordinate is aligned with the Y coordinate of the sub-control in the previous row; to ensure a neat and beautiful layout , and store the coordinates of the control as a location property in the resource tree database. (3) Boundary adjustment, adjust the spacing of GUI controls through the adaptive boundary difference method, and determine the spacing of GUI controls through multiple out-of-bounds checks until a spacing parameter that conforms to the boundary range is found. In the case that the out-of-bounds check and spacing setting attempts cannot obtain the appropriate spacing, the spacing of GUI controls can be re-determined by reducing or increasing the number of controls in each row to avoid the occurrence of control out-of-bounds or excessively large margins. like Figure 5 As shown, the control position setting interface is composed of four parameter groups. The first group of parameters is used to select the output control type of the GUI control, the table type output component can be selected, and the graphic component can be built according to a fixed length; the second group of parameters is used to set the GUI control. The initial coordinates and length and width of the first group control (Group1) in the layout; the third group of parameters is used to set the position properties of the GUI controls in the group control (Group), including the initial position information and line spacing of the text label (Label). , the initial position information of the text input field (Text), the initial position information of the button control (Button), etc.; the fourth group of parameters is used to set the output control type to the position information of the table control. It only takes effect when the type output component.
[0029] user in Figure 5 In the control position setting interface shown, the layout of GUI objects is adjusted adaptively in turn, and the following tasks are completed in turn: 1) Adjust the actual length of the GUI controls according to the scaling ratio of the input/output data items; 2) Adjust the input/output Coordinate positions of labels and controls; 3) Adjust the absolute positions of the first and last GUI controls in the group controls; 4) Set the number of columns, row spacing, column spacing, etc. of input/output controls.
[0030] According to the location attribute information of the GUI object, the resource tree is translated into a GUI layout through the GUI graphic display plug-in, and output to the network terminal for the user to preview.
[0031] like Image 6 As shown, the specific steps of this embodiment include:
[0032] In step 401, a resource file/interface framework template file selection interface is provided to the user, and a selection instruction from the user is received.
[0033] Step 402, parse the content of the resource file selected by the user, and decompose it into data item records.
[0034] Step 403, the user sets the attribute of the data item.
[0035] Step 404: Receive the user's definition of the association relationship of the control, identify the label and the input field as the control with the association relationship, and save the association relationship set by the user into the attribute of the data item.
[0036] Step 405: Classify the data item selected by the user through the input/output attribute to determine the group to which it belongs; then according to whether the GUI control resource has layout information, the GUI control resource selected by the user is divided into graphic coordinate resources and The graphics are non-coordinate resources, and the classified resources are encapsulated into resource objects and stored in the resource object database.
[0037] Step 406, access the resource object database, determine whether the newly added resource object is new, if not, return to step 403, continue to process the next data item in the resource file until the processing is completed, otherwise, save the new resource object in the resource object. in the object database.
[0038] Step 407 , traverse the resource object database, sequentially read the resource objects, translate the resource objects into GUI objects according to the corresponding relationship between the resource objects and the GUI objects, and store them in the GUI object database.
[0039] Step 408: Convert the GUI objects in the GUI object database into logical nodes, insert the GUI objects into the resource tree according to the control sequence of the GUI layout, and store them in the resource tree database.
[0040] In step 409, the GUI control position parameter setting interface is displayed to the user, and the parameters set by the user are received.
[0041] From steps 410 to 412, the data in the resource tree database is sequentially read, the GUI objects are acquired, and the position attributes of the GUI objects are adaptively set sequentially in combination with the layout parameters set by the user. These include:
[0042] Step 410, size adjustment.
[0043] Step 411, position adjustment.
[0044] Step 412, boundary adjustment.
[0045] Step 413: Access the GUI object database to determine whether there is an unconfigured GUI object. If there is, return to step 408 to perform the task of inserting the GUI object into the resource tree. Steps 409 to 413 are repeated until all GUI objects are Resource tree inserted. If the traversal of all GUI objects has been completed, go to step 414 to execute.
[0046] Step 414, accessing the resource tree database, translating the resource tree into a graphical user interface through a GUI graphic display plug-in, and outputting it to the user terminal to display the preview effect of the GUI layout.
[0047] In step 415, the user terminal receives the user's selection result of the GUI layout. If the GUI layout needs to be adjusted, go back to step 403 to adjust the control parameters of the GUI layout; if the GUI layout does not need to be adjusted, go to step 416.
[0048] Step 416, output the GUI layout interface, and end the process.
[0049] like Figure 7 As shown, this embodiment also provides an adaptive graphical user interface construction device, the device includes: a file receiving unit 201 for receiving a resource file and an interface frame template file input by a user; a control property setting unit 202 for using Decomposing the resource file into data item records, setting the association relationship between the control attributes and the controls in the data item records according to the control attribute setting instruction input by the user, and generating GUI control resources; GUI object storage unit 203, used to encapsulate the GUI control resource with the coordinate position attribute in the GUI control resource into a coordinate resource object, and encapsulate the GUI control resource without the coordinate position attribute in the GUI control resource into a non-coordinate resource object, and the coordinate resource object and the non-coordinate resource objects are translated into corresponding GUI objects for storage; the resource tree generation unit 204 is used to read the GUI objects, and insert the GUI objects as logical nodes into the resource tree based on the interface framework template file according to the sequence adapted to the GUI layout The control position setting unit 205 is used to receive the control position setting instruction input by the user, and according to the control position setting instruction, the coordinate position data of the GUI object in the resource tree is set; the GUI layout display unit 206 is used to set the resource after the setting The tree is translated to a GUI layout, and the GUI layout is displayed.
[0050] like Figure 8 As shown, the resource tree generating unit includes: a resource tree storage module, which is used to store the initial frame of the resource tree including the root node of the resource tree generated according to the interface frame template file; a GUI object reading module, which is used for reading according to the sequence adapted to the GUI layout. Take the GUI object; the node insertion module is used to traverse the resource tree from the root node according to the properties of the GUI object, find the node group corresponding to the properties of the GUI object, and add the GUI object to the node group as a new node of the resource tree .
[0051] The device of this embodiment receives the interface frame template and resource file provided by the user, and converts the data elements in the resource file into GUI controls. In order to facilitate layout adjustment, the device of this embodiment also converts the The GUI layout is converted into a resource tree with GUI controls as nodes, and then based on the resource tree, the position properties of the GUI controls are linearly adjusted, so as to achieve the purpose of adjusting the entire GUI layout.
[0052] GUI control resources include containers (forms, frames, layers, groups), components (buttons, text boxes, drop-down boxes, labels, edit boxes, etc.), and composite components (button groups, tables). In this embodiment, the GUI layout adjustment system is built on the GUI designer platform, so the GUI control resources are predetermined.
[0053] The device in this embodiment may be a server, and the device in this embodiment may be connected to a network terminal through a network, and realize information interaction with users through the network terminal. The device of this embodiment includes: a file receiving program module, which receives the resource file/interface frame template file selected by the user, transmits it to the control attribute setting program module for analysis, and displays the parsed data item for the user to input the attributes of the data item; the control position setting Program module, for users to input GUI control position parameters, and adjust GUI layout; GUI layout display program module, generate a graphical interface to display to users, for users to confirm whether GUI layout needs to be adjusted; GUI object database, responsible for storing resource file data items The converted GUI object; the resource tree generation program module converts the GUI layout into a resource tree with GUI objects as nodes according to the hierarchical relationship of GUI controls in the GUI layout, and stores it in the resource tree database.
[0054] The control property setting program module is responsible for reading the resource file and interface frame template file input by the user, parsing the resource file into data items, receiving the data items determined by the user for GUI layout, and setting the properties of the data items (with The data item after the attribute corresponds to the GUI control resource), and at the same time, according to whether the GUI control resource has a coordinate position attribute, it is divided into coordinate resources and non-coordinate resources. The GUI control resources with layout position information are called graphic coordinate resources, including labels, Input/output fields, buttons, group controls, etc.; GUI control resources without layout location information are called non-coordinate resources, including forms, layers, cursor controls, etc. Finally, the classified resources are encapsulated into resource objects and stored in resources in the object database.
[0055] The GUI object storage module is responsible for accessing the resource objects of the resource object database, sequentially reading the resource objects, converting them into GUI objects, and storing them in the GUI object database.
[0056] The resource tree generation program module is responsible for inserting the GUI objects in the GUI object database into the resource tree as logical nodes according to the control sequence of the GUI layout, and storing them in the resource tree database.
[0057] The control position setting program module is responsible for all the GUI objects in the resource tree classified as graphic coordinate resources, adaptively adjust their size, position, boundary and other location attributes, and update them to the resource tree database. It includes: a size adjustment unit, a position adjustment unit, and a boundary adjustment unit.
[0058]The size adjustment unit is responsible for estimating the length and width of the actual control according to the length and width of the data item in the resource file and the length and width of the parent control, and adjusts the size of the control accordingly to realize the length of the data item to the GUI control. Length conversion. First, according to the difference between the length of the data item in the resource file and the actual control length, estimate the scaling ratio, that is, the length factor. The length factor follows the following two constraints: 1. The cumulative length and spacing of the horizontal controls cannot be greater than the actual width of the parent control; 2. The difference between the width of the parent control and the sum of the length and spacing of the horizontal controls cannot be smaller than the user's border distance. The formula of the length coefficient: let the length of the data item in the resource file be x, the length of the horizontal control is len, r is the length coefficient, and len satisfies the relational formula: len=rx (obviously, when the width of the parent control is given, the value of r is depends on the length of the horizontal control len). The relationship ratio between the length of the horizontal control and the length of the data item can be expressed according to the linear calculation formula, and the formula is as follows:
[0059] r=(len1/x1+len2/x2+...+lenN/xN)/N
[0060] where N is the number of coordinate controls, x1, x2...xn are the data item lengths, and len1, len2...lenn are the actual input/output component lengths. The width estimation method for vertical controls is similar to the length factor. In the same way, the vertical width factor i can be calculated. Then, the length of the GUI control can be calculated according to the length coefficient and the length of the data item: x=len/r, and similarly the width of the GUI control y=width/i can be calculated. Finally, save the length and width of the GUI control to the resource tree database as the position attribute value of the GUI control.
[0061] The position adjustment unit is responsible for adjusting the X coordinate and Y coordinate of the GUI control, so that the X coordinate of the adjusted control is aligned with the X coordinate of the previous sub-control, and the Y coordinate is aligned with the Y coordinate of the sub-control in the previous row; ensuring a neat and beautiful layout.
[0062] The boundary adjustment unit is responsible for adjusting the boundary position information of the first child control appearing in the GUI parent control, the last child control of the same output line, and the first child control of the last output line, so that the length of the boundary is not greater than that provided by the user. Boundary setting value; at the same time, adjust the spacing of horizontal GUI controls, including adjusting the spacing of GUI controls with an associated relationship and the spacing of GUI controls with a non-associated relationship, so that the interface layout is neat and the space utilization rate is high.
[0063] For the spacing of GUI controls with an association relationship, the length of a fixed value (for example: 1 character) is taken by default; for the spacing of GUI controls with a non-associative relationship, in addition to the control spacing set by the user as a reference, it is also necessary to control to avoid the number of horizontal controls. If it is too large to cause out-of-bounds effect of the actual output width, the device uses the "adaptive boundary difference method" to adjust:
[0064] First, calculate the length sum of the horizontal controls and the spacing with reference to the GUI control spacing set by the user. If the boundary difference between the width of the group control and the length sum is greater than 0, and the boundary difference is within a certain range of the margin (for example, ±30 %), the existing layout parameters are accepted; if the margin difference is greater than a certain value of the margin (for example, 30%), the spacing of the non-associative GUI controls is incremented by several unit lengths (for example: several character lengths), Try to perform the above-mentioned out-of-bounds check again until the obtained spacing falls within the standard range; if the difference between the boundaries is less than a certain value of the margin (for example: 30%), decrement the spacing of the non-associative GUI controls by several unit lengths, and try again The above-mentioned out-of-bounds check is performed until the obtained spacing falls within the standard range. Since this step can involve at most multiple spacing adjustments, this adjustment method is called "adaptive boundary difference method".
[0065] Secondly, under the premise that the out-of-bounds check and the spacing setting attempt cannot obtain the appropriate spacing, the method of reducing or increasing the number of output GUI controls is adopted to avoid the phenomenon that the GUI controls are out of bounds or the margin is too large. Specific steps are as follows:
[0066] 1: Traverse the resource tree storage unit, and sequentially read the GUI objects under the group control;
[0067] 2: According to the maximum number of columns (assuming 6, including three groups of labels + text boxes), perform the following steps in a loop:
[0068] Calculate whether the boundary difference is within a reasonable range, that is, the boundary difference is within a certain range (for example: 30%) of the margin set by the user.
[0069] If the boundary difference is less than 0, and exceeds the sum of the lengths of the text input box and the label, and reaches a certain range of the length sum (for example: +30 to +50%), the adaptive boundary difference method is used to adjust the control spacing and margins ; If a suitable spacing cannot be obtained, reduce the maximum number of columns by 2, re-adjust the adaptive boundary difference method, and repeat this step until a suitable spacing is obtained.
[0070] If the boundary difference is greater than 0, and its absolute value exceeds the sum of the lengths of the text input box and the label, and reaches a certain range of the length sum (for example, between +30 and +50%), the adaptive boundary difference method is used to adjust The spacing and margin of the controls; if the appropriate spacing cannot be obtained, add 2 to the maximum number of columns, re-adjust the adaptive boundary difference method, and repeat this step until the appropriate spacing is obtained.
[0071] If the selected margin is within a reasonable range, the position parameter of the horizontal GUI control is recorded.
[0072] 3: Execute the next row of controls and their location parameter settings. Check whether the difference between the height of the group control and the sum of the control height and line spacing (vertical boundary difference) output by the current line is within a reasonable range.
[0073] If the vertical boundary difference is within a certain interval (for example: less than 1.5 times the margin, and greater than 1 times the margin), reduce the line spacing and margin by a few units (for example: 1 unit), and re-check the boundary. until the vertical margin difference is equal to the appropriate value (eg: 1.5 times the margin);
[0074] If the vertical boundary difference is greater than a certain value (for example: 2 times the margin), increase the line spacing and margin by several units (for example: 1 unit), and re-check the out-of-bounds until the vertical boundary difference is equal to the appropriate value ( For example: 1.5x margin);
[0075] If the vertical border difference is less than a certain value (for example: 1 times the margin), increase the height of the group control so that the vertical border difference reaches an appropriate value (for example: 1.5 times the margin);
[0076] Finally, the calculated line spacing and margin of the GUI control are stored in the resource tree storage unit as its position attributes. After adjustment, the interface layout is neat and the space utilization rate is high.
[0077] The data storage device is responsible for storing the data information required for the operation of the device, including: resource files, interface frame template files, resource objects and GUI object databases, and resource trees. in,
[0078] The resource file storage unit is responsible for storing the relevant resource files used by the user to design the GUI layout, and is used to provide the user to select the resource file used for this GUI design, which can be a DSR gateway file, an interface file, and the like.
[0079] The interface frame template file storage unit is responsible for storing the original GUI layout file, including the basic controls that constitute the GUI layout, such as form, layer and group controls. Its function is to assist in determining the GUI layout prototype required by the user.
[0080] The resource object storage unit is responsible for storing the resource objects packaged after resource analysis and classification.
[0081] The resource tree storage unit is responsible for storing the resource tree with GUI objects as logical nodes according to the control sequence of the GUI layout, so as to facilitate the linear adjustment of the position attributes of the GUI objects and realize the adjustment of the GUI layout.
[0082] The GUI layout display program module is responsible for parsing the GUI objects in the resource tree storage unit. According to the location attribute information of the GUI objects, the resource tree is translated into a graphical user interface layout through the GUI graphic display plug-in, and output to the user terminal to display the GUI to the user. The preview effect of the layout, the final generated GUI layout.
[0083] Preferably, three units of the control position setting program module: a size adjustment unit, a position adjustment unit, and a boundary adjustment unit, and the composition structure of each unit is as follows: Figure 9 As shown, it includes: a grid layout adjustment unit 311 , a flow layout adjustment unit 312 , a border layout adjustment unit 313 , and an associated layout adjustment unit 314 . The layout adjustment units 311, 312, 313, 314 may be nested with each other, for example, the grid layout adjustment unit 311 may be nested in the border layout adjustment unit 313, so that the grid unit can be used to measure the border distance of the control. Due to the nature of the layout adjustment unit being nested, its structure can be constructed in various ways. Figure 9 An example of one of these structures is shown.
[0084] The grid layout adjustment unit 311 is responsible for dividing the coordinates of the controls by using a grid, and establishing a grid-based coordinate space. The margins, spacing, length and width of controls are measured by the size of the grid unit, which is expressed as an integer multiple of the grid size, for example: the length of a grid unit is specified as one character;
[0085] The flow layout adjustment unit 312 is responsible for controlling the distance between the coordinates (X coordinates) of the horizontal plane controls to avoid cross-border conflicts in the horizontal direction caused by too much horizontal display control data and too large distances;
[0086] The border layout adjustment unit 313 is responsible for controlling the controls in the rectangular box and the border distances of four border areas, namely the upper border, the lower border, the left border and the right border, so that the margins cannot exceed the border value set by the user.
[0087] The association layout adjustment unit 314 is responsible for controlling the spacing relationship between the controls with the associated relationship, so that the relationship between the controls with the associated relationship is close. It is very necessary to specify the relationship between the controls. For example, the text label and the input field always appear in pairs, and there is also a corresponding relationship between the table and the table column. This correspondence needs to be defined appropriately in the interface design. spacing. For example, the distance between the associated label and the input field is specified as one grid unit length.
[0088] Figure 10 It is a GUI interface constructed by using the device of this embodiment. The interface is composed of 3 group controls. The sub-controls contained in the group control are composed of text boxes, labels, drop-down boxes and buttons. Figure 10 It can be seen that the Y coordinates of the same horizontal control are equal, the X coordinates of the same vertical control are equal, and the lengths of the controls are basically the same, except for the controls with special length requirements. After adjustment through the adaptive algorithm, the margin and spacing settings of the GUI layout interface are more reasonable, which has reached the requirements of the layout design of the GUI.
[0089] The invention solves the problems of inefficiency, control position intersection and information truncation when GUI layout rearrangement is required due to changes in business requirements, not caring about control association relationship, and inability to adaptively adjust GUI control layout. The advantages of the invention lie in :
[0090] 1. In view of the rearrangement of GUI layout caused by business changes and interface redesign, the present invention can adaptively adapt the layout of GUI controls through the GUI layout adjustment device 3, and provide the most suitable display effect, effectively solving the problem of control The problems of intersection and information truncation make the present invention extremely practical, and effectively improve the construction efficiency of the graphical user interface layout.
[0091] 2. The present invention treats GUI controls with an associated relationship and GUI controls with a non-associated relationship differently in the construction of the GUI layout, so that the relationship between the GUI controls with an associated relationship is closer, and the GUI that best meets customer needs can be displayed. layout.
[0092]In the present invention, the principles and implementations of the present invention are described by using specific embodiments, and the descriptions of the above embodiments are only used to help understand the method and the core idea of the present invention; The idea of the invention will have changes in the specific embodiments and application scope. To sum up, the contents of this specification should not be construed as limiting the invention.
