User interface generation method and device and electronic equipment

Abstract

The invention discloses a user interface generation method and device and electronic equipment, and relates to the technical field of computers. The method comprises the steps that a data model corresponding to a user interface is created, the data model comprises a plurality of nested data sub-models, and each data sub-model comprises a row or a column of control data and an attribute indicating whether the control data is displayed or not; creating a view corresponding to the user interface, wherein the attributes of the view comprise at least one of the following: row height, column width, grid line attributes and an alignment mode of a control in a grid; and binding the view with the data model so as to carry out grid layout on each control in the user interface. According to the method, line and column display hiding and line height and column width setting can be realized without additionally writing codes, so that the interface development efficiency is improved. By setting the grid line attributes in the view attributes, the background styles of the grid lines and whether to display or not can be realized. Codes are high in readability, which row and which column a certain item is specifically located in a grid can be easily distinguished, and later maintenance is facilitated.

Description

Technical Field

[0001] The present application belongs to the field of computer technology, and in particular, relates to a method, device and electronic device for generating a user interface. Background Art

[0002] There are a large number of grid-layout user interfaces in industrial automation human machine interfaces (HMI). When there are a large number of controls that require grid layout, the layout of each interface control is complex and cumbersome.

[0003] In the related art, in the declarative programming language QML (Qt Meta-Object Language) program, the GridLayout control in QtQuick is a layout manager used to organize sub-items in a grid manner. It arranges sub-items in multiple rows and columns so that interface elements can be arranged according to the specified row and column structure, making it easy to build a grid user interface in QML. However, this layout method cannot meet the functional requirements in the actual application of industrial automation HMI. For example, it cannot directly hide or display a row or column, and cannot directly set the row height and column width. Interface developers need to write additional code to complete the above functions, which is very cumbersome and reduces the efficiency of interface development. Summary of the invention

[0004] The purpose of the embodiments of the present application is to provide a method, device and electronic device for generating a user interface, so as to solve the problem in the related art that additional code needs to be written to complete the display and hiding of rows and columns and the setting of row height and column width, thereby reducing the efficiency of interface development.

[0005] To achieve the above objectives, the present application embodiment adopts the following technical solutions: In a first aspect, an embodiment of the present application provides a method for generating a user interface, comprising: creating a data model corresponding to the user interface, the data model including multiple nested data sub-models, the data sub-model including a row or a column of control data and an attribute of whether the control data is displayed; creating a view corresponding to the user interface, the attributes of the view including at least one of the following: row height, column width, grid line attributes, and alignment of controls within the grid; binding the view to the data model to perform a grid layout for the controls in the user interface.

[0006] In a second aspect, an embodiment of the present application provides a device for generating a user interface, comprising: a first creation module, used to create a data model corresponding to the user interface, the data model including multiple nested data sub-models, the data sub-model including a row or a column of control data and an attribute of whether the control data is displayed; a second creation module, used to create a view corresponding to the user interface, the attributes of the view including at least one of the following: row height, column width, grid line attributes and alignment of controls within the grid; a layout module, used to bind the view to the data model to perform a grid layout for the controls in the user interface.

[0007] In a third aspect, an embodiment of the present application provides an electronic device, comprising a processor, a memory, and a program or instruction stored in the memory and executable on the processor, wherein the program or instruction, when executed by the processor, implements the steps of the method described in the first aspect.

[0008] At least one of the above technical solutions adopted in the embodiments of the present application can achieve the following beneficial effects: When generating a user interface, the embodiment of the present application creates a data model corresponding to the user interface, the data model includes multiple nested data sub-models, the data sub-model includes a row or a column of control data and the property of whether the control data is displayed, creates a view corresponding to the user interface, and the properties of the view include at least one of the following: row height, column width, grid line properties and the alignment of the control in the grid, and binds the view to the data model to perform grid layout on each control in the user interface. By setting the property of whether the corresponding control data is displayed in the data sub-model, it is possible to hide or display a row or a column of controls, and by setting the row height and column width in the view properties, the row height and column width can be customized, without writing additional code to realize row and column display and hiding and row height and column width settings, thereby improving the interface development efficiency. In addition, by setting the grid line properties in the view properties, the grid line background style and whether it is displayed can be realized. Multiple data sub-models are nested in the data model, and each data sub-model corresponds to a row or a column of controls. The code is highly readable, and it is easy to distinguish which row and column a certain item is in in the grid, which is convenient for later maintenance. BRIEF DESCRIPTION OF THE DRAWINGS

[0009] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings: Figure 1 A flowchart of a method for generating a user interface provided by an embodiment of the present application; Figure 2 A code schematic diagram of a data model provided for one embodiment of the present application; Figure 3 A code diagram of a table header control provided for one embodiment of the present application; Figure 4 A code schematic diagram of creating a view provided for an embodiment of the present application; Figure 5 A flowchart of a method for generating a user interface provided in another embodiment of the present application; Figure 6 A schematic diagram of a code for calculating the total number of rows and columns provided for one embodiment of the present application; Figure 7 A schematic diagram of a code for dynamically creating a column header provided for an embodiment of the present application; Figure 8 A schematic diagram of a grid layout process provided for one embodiment of the present application; Fig. 9 A schematic diagram of a user interface generated in a column layout according to an embodiment of the present application; Fig.10 A schematic diagram of a user interface generated in a row layout according to an embodiment of the present application; Fig.11 A schematic diagram of the structure of a user interface generation device provided by an embodiment of the present application; Fig.12 A schematic diagram of the structure of an electronic device provided for one embodiment of the present application. DETAILED DESCRIPTION

[0010] In order to make the purpose, technical solution and advantages of the present application clearer, the technical solution of the present application will be clearly and completely described below in combination with the specific embodiments of the present application and the corresponding drawings. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present application.

[0011] The terms "first", "second", etc. in this application are used to distinguish similar objects, and are not used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable under appropriate circumstances, so that the embodiments of the present application can be implemented in an order other than those illustrated or described here. In addition, the "and / or" in this application represents at least one of the connected objects, and the character " / " generally represents that the front and back associated objects are in an "or" relationship. It should be noted that the data involved in this application are all obtained on the premise of obtaining user authorization.

[0012] In this application, the term "Human Machine Interface (HMI) refers to the interactive interface between humans and machines or systems, through which human operators can control, monitor and adjust the working status of machines or systems."

[0013] In this application, the term "QML (Qt Meta-Object Language)" refers to a declarative programming language that simplifies the creation of user interfaces.

[0014] In this application, the term "QtQuick" refers to a set of technologies used in the Qt framework for developing user interfaces (UI), mainly used to build dynamic, modern application program interfaces. The Qt framework is a cross-platform C++ application development framework.

[0015] There are a large number of grid-layout user interfaces in industrial automation human-machine interfaces. When there are a large number of controls that require grid layout, the layout of each interface control is complex and cumbersome.

[0016] In the related art, in the declarative programming language QML (Qt Meta-Object Language) program, the GridLayout control in QtQuick is a layout manager used to organize child items in a grid manner. It arranges child items in multiple rows and columns so that interface elements can be arranged in a specified row and column structure, making it easy to build a grid user interface in QML. Its usage is as follows: GridLayout { anchors.fill: parent rows: 2 columns: 2 Repeater{ Model:3 delegate:Button { text: "Button"+index } } } However, the above layout method cannot meet the functional requirements in the actual application of industrial automation HMI. For example, it cannot directly hide or display a row or a column, and it cannot directly set the row height and column width. Interface developers need to write additional code to complete the above functions, which is very cumbersome and reduces the efficiency of interface development. To this end, the present application proposes a user interface generation method, device and electronic device to solve the problem in the related art that additional code needs to be written to complete the display and hiding of rows and columns and the setting of row height and column width, which reduces the efficiency of interface development.

[0017] The technical solutions provided by various embodiments of the present application are described in detail below in conjunction with the accompanying drawings.

[0018] Figure 1 A flowchart of a method for generating a user interface provided by an embodiment of the present application is shown below. Figure 1 As shown, the method for generating a user interface in an embodiment of the present application may specifically include the following steps: S101, creating a data model corresponding to the user interface, wherein the data model includes a plurality of nested data sub-models, and the data sub-model includes a row or a column of control data and an attribute of whether the control data is displayed.

[0019] In an embodiment of the present application, the execution subject of the method for generating a user interface of the embodiment of the present application is a user interface generating device, and the user interface generating device can be set in an electronic device. The electronic device can be a terminal device or a server. Among them, the terminal device can be a mobile phone, a tablet computer, a desktop computer, a portable notebook, a vehicle-mounted device, etc.; the server can be an independent server or a server cluster composed of multiple servers. The method for generating a user interface of the embodiment of the present application is implemented based on the GridLayout control in QtQuick.

[0020] Create a data model corresponding to the user interface to be generated. The type of the data model can be an object model (ObjectModel). The data model contains multiple data sub-models. When the type of the data model is ObjectModel, the type of the nested data sub-model is also ObjectModel, that is, sub-ObjectModel.

[0021] Each data sub-model includes data corresponding to a group of controls. The group of controls can be data for a row of controls or data for a column of controls, which is specifically controlled by the control layout direction in the view property flow corresponding to the user interface. The control layout direction can specifically include row layout or column layout. If the control layout direction is row layout, the data sub-model includes a row of control data. If the control layout direction is column layout, the data sub-model includes a column of control data. The data in the data sub-model can be some basic controls, such as a spin box (SpinBox), a button (Button), a table (Label), a combo box (ComboBox), etc., or other visual controls.

[0022] Each data sub-model can also include properties for displaying a row, a column or an item of control data, which users can set as needed. Specifically, the control item can be located by the passed row number or column number, and rows and columns can be hidden by looping and hiding the specified control items. Users only need to call the function interface to hide or show rows and columns, and the entire layout will be automatically adjusted, which is very convenient.

[0023] The data model may also include a header control such as a TMBasicInfo control, which is invisible and used to store header data. The properties of the header control may specifically include but are not limited to at least one of the following: an icon property for setting an icon displayed in the upper left corner of the grid, a title property for setting a title displayed in the upper left corner of the grid, a column title property (including a column title string, color, etc.) for setting the title data of the column corresponding to the column header, a row title property (including a row title string, color, etc.) for setting the title data of the row corresponding to the row header, and a row unit property (rowUnit) for setting the unit data displayed last in each row of the grid.

[0024] As an example, the structure code of the data model can be as follows Figure 2 As shown, the implementation code of the TMBasicInfo control can be as follows Figure 3 shown.

[0025] S102, creating a view corresponding to the user interface, wherein the properties of the view include at least one of the following: row height, column width, grid line properties, and alignment of controls within the grid.

[0026] In an embodiment of the present application, a view corresponding to the user interface to be generated is created. The control name corresponding to the view can be TMGridViewBasic, and the name is used to create an instance in QML. The properties of the view may specifically include but are not limited to at least one of the following: row height, column width, grid line properties, and the alignment of controls within the grid. The row height property is used to set the row height of each row, and each row can be set to a different row height. The column width property is used to set the column height of each column, and each column can be set to a different column width. The grid line property is used to set the grid line display or hide, and only the grid line of a row or a column can be hidden to achieve the style of merging rows or columns. The properties of the view are default values ​​when not modified, and users can set them as needed.

[0027] S103, binding the view to the data model to perform a grid layout on the controls in the user interface.

[0028] In the embodiment of the present application, by binding the view created in step S102 with the data model created in step S101, a grid layout of the controls in the user interface can be implemented, thereby generating the desired user interface.

[0029] As an example, the code to create a view could be as follows Figure 4 shown.

[0030] Further, such as Figure 5 As shown, the above step S103 "binding the view to the data model to perform grid layout on the controls in the user interface" may specifically include the following steps: S501, determining the total number of rows and the total number of columns based on the control layout direction.

[0031] In the embodiment of the present application, it is necessary to determine how many rows (including row headers) and columns (including column headers) are required to be laid out according to the control layout direction. Different control layout directions determine different total number of rows and columns.

[0032] Specifically, if the control layout direction is row layout, the total number of rows is determined to be the total number of multiple data sub-models plus one, and the total number of columns is determined to be the total number of control data in the data model divided by the total number of rows, rounded up plus one. If the control layout direction is column layout, the total number of columns is determined to be the total number of multiple data sub-models plus one, and the total number of rows is determined to be the total number of control data in the data model divided by the total number of columns, rounded up plus one. The total number of rows and columns are both increased by one to leave space for row headers and column headers. Part of the code can be as follows Figure 6 shown.

[0033] S502: Integrate the header data and the control data in the data model based on the control layout direction.

[0034] In an embodiment of the present application, the header data and the control data in all data sub-models can be extracted according to the control layout direction, and the extracted data can be allocated to another overall data model in the view control for storage.

[0035] S503, allocating the integrated data to corresponding row and column positions.

[0036] In the embodiment of the present application, a value may be assigned to a Repeater to create controls and assigned to a GridLayout to complete the grid layout of each control.

[0037] If the control layout direction is column layout, the row and column positions of each control in the first data sub-model are (0, 0), (0, 1), (0, 2), ... in sequence.

[0038] If the control layout direction is column layout, the row and column positions of each control in the first data sub-model are (0, 0), (1, 0), (2, 0), ... in sequence.

[0039] Furthermore, before step S501 "determining the total number of rows and columns based on the control layout direction", the above step S103 "binding the view to the data model to grid layout the controls in the user interface" may also include the following steps: determining whether header data is stored in the header control; if header data is stored in the header control, displaying the row and column headers (including row headers and column headers), and continuing to execute step S501; if no header data is stored in the header control, not displaying the row and column headers, and continuing to execute step S501.

[0040] It should be noted here that when header data is not needed, a header control may not be created. In this case, it can be determined whether to display the row and column headers by judging whether a header control is created in the data model. If a header control is created in the data model, the row and column headers are displayed, and step S501 is continued; if a header control is not created in the data model, the row and column headers are not displayed, and step S501 is continued.

[0041] The row headers and column headers are dynamically created in the view control such as TMGridViewBasic. Some implementation codes are as follows Figure 7 shown.

[0042] To clearly illustrate the grid layout process of the embodiment of the present application, Figure 8 The overall process of the grid layout of the embodiment of the present application is described. Figure 8 As shown, the grid layout process of the embodiment of the present application may specifically include the following steps: S801, determine whether the header control stores header data. If yes, execute step S802. If no, execute step S803.

[0043] S802, display the row and column headers. Execute step S803.

[0044] S803, determine the layout direction of the control. If the layout direction of the control is arranged in rows, execute steps S804-S805. If the layout direction of the control is arranged in rows, execute steps S806-S807.

[0045] S804, determining the total number of rows is the total number of the multiple data sub-models plus one, and determining the total number of columns is the total number of control data in the data model divided by the total number of rows, rounded up, plus one.

[0046] S805, integrating data by row. Execute step S808.

[0047] S806, determining the total number of columns is the total number of the multiple data sub-models plus one, and determining the total number of rows is the total number of control data in the data model divided by the total number of columns, rounded up, plus one.

[0048] S807, integrating data by column. Execute step S808.

[0049] S808, allocating the integrated data to corresponding row and column positions.

[0050] As an example, the user interface generated by the column layout can be as follows Fig. 9 As shown, the user interface generated by row layout can be Fig.10 shown.

[0051] In summary, the method for generating a user interface in an embodiment of the present application, when generating a user interface, creates a data model corresponding to the user interface, the data model includes multiple nested data sub-models, the data sub-model includes a row or a column of control data and the property of whether the control data is displayed, creates a view corresponding to the user interface, and the properties of the view include at least one of the following: row height, column width, grid line properties and the alignment of the control in the grid, and binds the view to the data model to perform grid layout on each control in the user interface. By setting the property of whether the corresponding control data is displayed in the data sub-model, it is possible to hide or display a row or a column of controls, and by setting the row height and column width in the view properties, the row height and column width can be customized, without writing additional code to realize row and column display and hiding and row height and column width settings, thereby improving the efficiency of interface development. In addition, by setting the grid line properties in the view properties, the grid line background style and whether it is displayed can be realized. Multiple data sub-models are nested in the data model, and each data sub-model corresponds to a row or a column of controls. The row and column structure is clear, the code is highly readable, and it is easy to distinguish which row and column a certain item is in in the grid, which is convenient for later maintenance.

[0052] Fig.11 This is a schematic diagram of a structure of a user interface generation device provided by an embodiment of the present application. Fig.11 As shown, the user interface generation device 1100 of the embodiment of the present application may specifically include: a first creation module 1101, a second creation module 1102 and a layout module 1103. Among them: The first creation module 1101 is used to create a data model corresponding to the user interface, wherein the data model includes multiple nested data sub-models, and the data sub-model includes a row or a column of control data and an attribute of whether the control data is displayed.

[0053] The second creation module 1102 is used to create a view corresponding to the user interface, and the properties of the view include at least one of the following: row height, column width, grid line properties, and alignment of controls in the grid.

[0054] The layout module 1103 is used to bind the view with the data model to perform a grid layout on the controls in the user interface.

[0055] In the embodiment of the present application, the specific process of each module and unit in the user interface generation device of the embodiment of the present application realizing its function can be referred to the relevant description in the above-mentioned user interface generation method embodiment, which will not be repeated here.

[0056] In summary, the user interface generation device of the embodiment of the present application can hide or display a row or column of controls by setting the corresponding control data display attribute in the data sub-model, and can customize the row height and column width by setting the row height and column width in the view properties, without having to write additional code to realize row and column display and hiding and row height and column width settings, thereby improving the efficiency of interface development. In addition, by setting the grid line attributes in the view properties, the grid line background style and whether to display it can be realized. Multiple data sub-models are nested in the data model, and each data sub-model corresponds to a row or column of controls. The row and column structure is clear, the code is highly readable, and it is easy to distinguish which row and column a certain item is in in the grid, which is convenient for later maintenance.

[0057] The present application also provides an electronic device. Fig.12 As shown, the electronic device includes a processor 1201, a memory 1202, and a program or instruction stored in the memory 1202 and executable on the processor 1201. When the program or instruction is executed by the processor 1201, the steps of a method for generating a user interface as described in any of the above-mentioned embodiments of the present application are implemented.

[0058] In the embodiment of the present application, the specific process of the electronic device in the embodiment of the present application realizing its functions can refer to the relevant description in the above-mentioned embodiment of the method for generating the user interface, which will not be repeated here.

[0059] The electronic device of the embodiment of the present application can hide or display a row or column of controls by setting the corresponding control data display property in the data sub-model. By setting the row height and column width in the view properties, the row height and column width can be customized, without having to write separate code to realize row and column display and hiding and row height and column width settings, thereby improving the efficiency of interface development. In addition, by setting the grid line properties in the view properties, the grid line background style and whether to display it can be realized. Multiple data sub-models are nested in the data model, and each data sub-model corresponds to a row or column of controls. The row and column structure is clear, the code is highly readable, and it is easy to distinguish which row and column a certain item is in in the grid, which is convenient for later maintenance.

[0060] An embodiment of the present application also proposes a readable storage medium, on which one or more computer programs are stored. The one or more computer programs include instructions. When the program or instructions are executed by a processor in an electronic device that includes multiple applications, the processor in the electronic device can execute each step of the method for generating a user interface in any of the above-mentioned embodiments.

[0061] In the embodiment of the present application, the specific process of the readable storage medium in the embodiment of the present application realizing its function can be referred to the relevant description in the above-mentioned embodiment of the method for generating the user interface, which will not be repeated here.

[0062] The readable storage medium of the embodiment of the present application can hide or display a row or column of controls by setting the property of whether the corresponding control data is displayed in the data sub-model. By setting the row height and column width in the view properties, the row height and column width can be customized, without having to write separate code to realize the display and hiding of rows and columns and the setting of row height and column width, thereby improving the efficiency of interface development. In addition, by setting the grid line properties in the view properties, the grid line background style and whether to display it can be realized. Multiple data sub-models are nested in the data model, and each data sub-model corresponds to a row or column of controls. The row and column structure is clear, the code is highly readable, and it is easy to distinguish which row and column a certain item is in in the grid, which is convenient for later maintenance.

[0063] The systems, devices, modules or units described in the above embodiments may be implemented by computer chips or entities, or by products with certain functions. A typical implementation device is a computer. Specifically, the computer may be, for example, a personal computer, a laptop computer, a cellular phone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.

[0064] For the convenience of description, the above device is described in various units according to their functions. Of course, when implementing the present application, the functions of each unit can be implemented in the same or multiple software and / or hardware.

[0065] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present application may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.

[0066] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0067] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0068] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0069] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0070] Memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. Memory is an example of a computer-readable medium.

[0071] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined in this article, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0072] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0073] The present application may be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present application may also be practiced in distributed computing environments where tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules may be located in local and remote computer storage media, including storage devices.

[0074] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0075] The above are only embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included within the scope of the claims of the present application.

Claims

1. A method for generating a user interface, characterized in that: include: Creating a data model corresponding to the user interface, wherein the data model includes a plurality of nested data sub-models, wherein the data sub-model includes a row or a column of control data and an attribute of whether the control data is displayed; Creating a view corresponding to the user interface, wherein the properties of the view include at least one of the following: row height, column width, grid line properties, and alignment of controls within the grid; The view is bound to the data model to perform a grid layout on the controls in the user interface.

2. The method according to claim 1, characterized in that The attributes of the view also include a control layout direction, and the control layout direction includes row layout or column layout.

3. The method according to claim 2, characterized in that If the control layout direction is row layout, the data sub-model includes a row of control data; If the control layout direction is column layout, the data sub-model includes a column of control data.

4. The method according to claim 2, characterized in that: The data model also includes a header control, and the header control is used to store header data.

5. The method according to claim 4, characterized in that The step of binding the view to the data model to perform a grid layout on the controls in the user interface includes: Determine the total number of rows and columns based on the control layout direction; Integrating the header data and the control data in the data model based on the control layout direction; Assign the integrated data to the corresponding row and column positions.

6. The method according to claim 5, characterized in that Before determining the total number of rows and columns based on the control layout direction, binding the view to the data model to perform grid layout on the controls in the user interface further includes: Determine whether the header data is stored in the header control; If the header data is stored in the header control, the row and column headers are displayed.

7. The method according to claim 5, characterized in that The determining the total number of rows and the total number of columns based on the control layout direction includes: If the control layout direction is row layout, the total number of rows is determined to be the total number of the multiple data sub-models plus one, and the total number of columns is determined to be the total number of the control data in the data model divided by the total number of rows, rounded up to the integer plus one; If the control layout direction is column layout, the total number of columns is determined to be the total number of the multiple data sub-models plus one, and the total number of rows is determined to be the total number of the control data in the data model divided by the total number of columns, rounded up, plus one.

8. The method according to claim 4, characterized in that The properties of the header control include at least one of the following: an icon property for setting an icon displayed in the upper left corner of a grid, a title property for setting a title displayed in the upper left corner of a grid, a column title property for setting title data for a column corresponding to a column header, a row title property for setting title data for a row corresponding to a row header, and a row unit property for setting the last unit data displayed in each row of a grid.

9. A user interface generation device, characterized in that: include: A first creation module is used to create a data model corresponding to the user interface, wherein the data model includes a plurality of nested data sub-models, and the data sub-model includes a row or a column of control data and an attribute of whether the control data is displayed; A second creation module is used to create a view corresponding to the user interface, wherein the properties of the view include at least one of the following: row height, column width, grid line properties, and alignment of controls within the grid; The layout module is used to bind the view to the data model to perform a grid layout on the controls in the user interface.

10. An electronic device, characterized in that: The method comprises a processor, a memory, and a program or instruction stored in the memory and executable on the processor, wherein the program or instruction, when executed by the processor, implements the steps of the method according to any one of claims 1 to 8.

Images