A method of generating a user interface framework logic tree and related apparatuses

Abstract

The application discloses a method for generating a user interface framework logic tree and a related device thereof, and the method comprises the following steps: defining the attributes of general elements in an interface element table based on an Excel format in advance, wherein the attributes comprise an element type, a level, a row, a column, content, a unique identifier and parent node information; obtaining the attributes of each target element according to a to-be-generated interface design diagram, and entering the attributes of each target element into a newly-generated interface element table row by row and column by column; and generating a user interface framework logic tree by using an xml document operation method to generate the attribute content of the interface element table. By defining the attributes of general elements in the interface element table in advance and entering the attributes of target elements into the interface element table, and then generating the content in the interface element table into a user interface framework logic tree, the application can reduce the time for a developer to draw an xaml page, improve the development efficiency of a program and reduce the operation cost of an enterprise.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of Internet, in particular to a method for generating a user interface framework logic tree and a related device thereof. BACKGROUND

[0002] WPF (Windows Presentation Foundation) is a Windows-based user interface framework launched by Microsoft, which belongs to the part of NET Framework 3.0. It provides a unified programming model, language and framework, separates the work of interface designers and developers, and provides a new multimedia interactive user graphical interface.

[0003] In the prior art, each UI user interface contains an interface file (xaml file) and a logic processing file (cs file), and the developer must develop the xaml file and the logic function at the same time when developing the software, which is a very heavy development task, and the development of the xaml file consumes a lot of time and effort of the developer; secondly, each UI user interface has high regularity and regularity, which is a class XML structure, and usually a large amount of development time is consumed for an interface, which leads to the extension of the project development cycle; and the development of the interface UI is boring and tedious, and the actual development difficulty lies in the logic implementation, and the boring and tedious development work occupies a large amount of time of the developer, which increases the enterprise operation cost; the development of the interface UI has low technical content, and long-term low-efficiency work slows down the accumulation of knowledge and experience of the developer, which is not conducive to the future career development. SUMMARY

[0004] The present application aims to provide a method for generating a user interface framework logic tree and a related device thereof, which aims to solve the problem that the development of the xaml file in the prior art consumes a lot of time and effort of the developer.

[0005] In a first aspect, the present application provides a method for generating a user interface framework logic tree using Excel, which comprises the following steps:

[0006] Defining the attributes of the general elements in the interface element table based on the Excel format in advance; wherein the attributes include: element type, level, row, column, content, unique identifier and parent node information;

[0007] Obtaining the attributes of each target element according to the interface design diagram to be generated, and entering the attributes of each target element into the newly generated interface element table row by row and column by column;

[0008] Generating the attribute content of the interface element table into a user interface framework logic tree using an xml document operation method.

[0009] In a second aspect, an embodiment of the present application provides an apparatus for generating a user interface framework logical tree using Excel, comprising:

[0010] a definition unit configured to define attributes of a general element in an interface element table based on an Excel format in advance, wherein the attributes comprise an element type, a level, a row, a column, content, a unique identifier, and parent node information;

[0011] an input unit configured to obtain the attributes of each target element according to a to-be-generated interface design diagram, and input the attributes of each target element into a newly generated interface element table row by row and column by column;

[0012] a logical tree generation unit configured to generate a user interface framework logical tree using an xml document operation method based on the attribute content of the interface element table.

[0013] In a third aspect, an embodiment of the present application further provides a computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method for generating a user interface framework logical tree using Excel according to the first aspect when executing the computer program.

[0014] In a fourth aspect, an embodiment of the present application further provides a computer readable storage medium, wherein the computer readable storage medium stores a computer program, and the computer program implements the method for generating a user interface framework logical tree using Excel according to the first aspect when executed by a processor.

[0015] The embodiment of the present application provides a method for generating a user interface framework logical tree and related apparatuses, comprising: defining attributes of a general element in an interface element table based on an Excel format in advance, wherein the attributes comprise an element type, a level, a row, a column, content, a unique identifier, and parent node information; obtaining the attributes of each target element according to a to-be-generated interface design diagram, and inputting the attributes of each target element into a newly generated interface element table row by row and column by column; and generating a user interface framework logical tree using an xml document operation method based on the attribute content of the interface element table. The embodiment of the present application defines the attributes of the general element in the interface element table in advance, inputs the attributes of the target element into the interface element table, and then generates the content in the interface element table into a user interface framework logical tree, thereby reducing the time for a developer to draw an xaml page, improving the development efficiency of a program, and reducing the operating cost of an enterprise. The embodiment of the present application further provides an apparatus for generating a user interface framework logical tree using Excel, a computer readable storage medium, and a computer device, which have the above beneficial effects, and details are not repeated here. BRIEF DESCRIPTION OF DRAWINGS

[0016] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following will briefly introduce the drawings needed in the embodiment description. Obviously, the drawings in the following description are some embodiments of the present application, and other drawings can be obtained by those skilled in the art without any creative effort on the basis of these drawings.

[0017] Figure 1 Flow chart of the method for generating the user interface framework logic tree of the present embodiment;

[0018] Figure 2 Subflow chart of the method for generating the user interface framework logic tree of the present embodiment;

[0019] Figure 3 Schematic block diagram of the apparatus for generating the user interface framework logic tree of the present embodiment. DETAILED DESCRIPTION

[0020] The technical solutions in the embodiments of the present application will be described clearly and completely below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are some embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without any creative effort belong to the protection scope of the present application.

[0021] It should be understood that, when used in the specification and the appended claims, the terms "comprise" and "include" indicate the presence of the described features, integers, steps, operations, elements, and / or components, but do not exclude one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0022] It should also be understood that the terms used in the present application specification are only for the purpose of describing specific embodiments and are not intended to limit the present application. As used in the present application specification and the appended claims, the singular forms "a", "an" and "the" are intended to include the plural forms unless the context clearly indicates otherwise.

[0023] It should be further understood that the term "and / or" used in the present application specification and the appended claims means any combination of one or more of the associated listed items and all possible combinations, and includes these combinations.

[0024] Currently, UI user interface all contains xaml file and cs file, wherein, the xaml file is used for the presentation of user interface UI, and the corresponding cs file is used for logic implementation, the developer needs to develop the xaml file for presenting the interface and the specific logic function at the same time, the development task is very heavy, and the xaml file for interface presentation has very high regularity, only the logic function is different, the embodiment separates the development of front-end xaml file from the development of back-end logic function to carry out collaborative development, so that the developer does not need to pay attention to the drawing of interface, only needs to pay attention to the specific logic implementation, greatly improves the development efficiency.

[0025] Please refer to Figure 1 The application provides a method for generating user interface framework logic tree using Excel, comprising:

[0026] S101: defining the attributes of general elements in the interface element table based on Excel format in advance; wherein the attributes include: element type, level, row, column, content, unique identification and parent node information;

[0027] S102: obtaining the attributes of each target element according to the interface design diagram to be generated, and entering the attributes of each target element into the newly generated interface element table row by row and column by column;

[0028] S103: generating the user interface framework logic tree using the attribute content of the interface element table by using the xml document operation method.

[0029] The embodiment reduces the time of the developer drawing the xaml page, improves the development efficiency of the program, and reduces the operating cost of the enterprise by defining the attributes of general elements in the interface element table in advance and entering the attributes of the target elements into the interface element table, and then generating the user interface framework logic tree from the content in the interface element table.

[0030] Further, after generating the user interface framework logic tree, the corresponding interface design diagram can be generated according to the user interface framework logic tree.

[0031] The step S101 will be described in detail as follows:

[0032] The element type, level, row, column, content, unique identifier and parent node information of the present embodiment are general element attributes. If other element attributes such as data binding, foreground color, background color, used style, etc. are needed, relevant addition operations can be performed after the general element attributes, for example, what style is needed to be used by the element, the used style key Key1 can be listed in Excel, and then Style="{DynamicResource Key1}" is generated in Xaml, so that the control can use the defined style; data binding can also be listed in Excel, and then xxx="{Binding Data1}" is generated in Xaml, where xxx represents the dependent property of the control. Defining styles, data binding and other rules is only different in usage, such as Style={DynamicResource Key1} for style, and xxx="{Binding Data1}" for data binding.

[0033] In one embodiment, the element type can include: layout element (Gird), non-input text control (TextBlock), input text control (TextBox), stack panel (StackPanel) and button (Button), wherein the definition of Gird is a flexible grid area container composed of columns and rows, TextBlock and TextBox can be used to present text content, TextBlock can only present text and cannot be interactively input, and TextBox can input content such as filling in information, etc.

[0034] In one specific application scenario, the element type, level, row, column, content, unique identifier and parent node information of the common element in the interface element table can be respectively represented by Element, Level, Row, Column, Content, Name and ParentTag, and Gird, TextBlock, TextBox, StackPanel and Button can be respectively represented by Gd, Txb, Tb, Sp and Btn, wherein the element type is used to generate an element of a corresponding logical tree; the level in the interface element table represents the level position of the corresponding element, the 0-level node represents the root-level node, the 1-level node is the child node of the 0-level node, and the 2-level node is the child node of a certain 1-level node; the row represents the row position of the corresponding element, 0 indicates that the element is in the first row in the logical tree; the column represents the column position of the corresponding element, 0 indicates that the element is in the first column in the logical tree; the content can be a text element or a layout element, and the content is used to distinguish different element contents, which can be used to distinguish non-input text controls and input text controls, and is convenient for intuitively understanding the positional relationship and node relationship of the non-input text controls and the input text controls in the logical tree; the unique identifier is used to distinguish elements, and in combination with the parent node information, the child elements can be distinguished.

[0035] It should be noted that the above element type is only preferred, and other element types such as drop-down boxes, single selection boxes, multiple selection boxes and the like can also be set.

[0036] Next, step S102 is described in detail:

[0037] After the attributes of each target element are entered row by row and column by column into the newly generated interface element table, the entering mode can be automatic entering by the system or manual input by clerical personnel or general developers.

[0038] Next, step S103 is described in detail:

[0039] Referring to Figure 2 , step S103 includes:

[0040] S201: obtaining the attributes of each target element in the interface element table;

[0041] S202: generating corresponding element nodes according to the element types of each target element;

[0042] S203: generating corresponding row nodes and column nodes under the corresponding element nodes according to the row and column of each target element, and writing the content into the corresponding row node or column node;

[0043] S204: Obtain the node relationship of each element node according to the hierarchy, unique identifier and parent node information of each element type;

[0044] S205: Generate the user interface framework logical tree using the xml document operation method according to the node relationship.

[0045] In one embodiment, the element type, hierarchy, row, column, content, unique identifier and parent node information of each target element in the interface element table are obtained; then the corresponding element nodes are generated according to the layout element, non-input text control, input text control, stack panel and button; then the corresponding row nodes and column nodes are generated under the corresponding element nodes according to the content of the row and column of the layout element, non-input text control, input text control, stack panel and button, and the content is written into the corresponding row node or column node; then the node relationship between each other is obtained according to the hierarchy, unique identifier and parent node information of the layout element, non-input text control, input text control, stack panel and button, and finally the user interface framework logical tree is generated using the xml document operation method according to the node relationship.

[0046] Among them, the attributes of each target element in the entire interface element table can be obtained, or the attributes of each target element in the interface element table can be obtained row by row.

[0047] Further, step S205 includes: creating the element node by XmlDocument CreateElement and setting the attribute; obtaining the corresponding child element node under the element node according to the node relationship; creating a XmlNode, and adding the child element node to the element node by the AppendChild method of XmlNode.

[0048] Further, step S204 includes: analyzing the hierarchical position of each element node according to the hierarchy of each element type; then obtaining the corresponding parent node of each element node according to the unique identifier and parent node information; and then obtaining the node relationship of each element node according to the hierarchical position of each element node and the corresponding parent node of each element node.

[0049] Further, obtaining the corresponding parent node of each element node according to the unique identifier and parent node information includes: if the parent node information of one element node is equal to the unique identifier of another element node, then the other element node is taken as the parent node of the one element node.

[0050] In a specific application scenario, the information from the first row is read, revealing a layout element called Grid, uniquely identified as gridLayout, at level 0. Based on this, a Grid node in XAML format is generated. Next, the Grid is read to have 5 rows and 6 columns, resulting in 5 row nodes and 6 column nodes under the Grid node. The information from the second row is then read, revealing a non-inputable text control called TextBlock, at level 1, uniquely identified as textblock. Its parent node is gridLayout, which is the same unique identifier as the Grid node. Therefore, TextBlock is considered a child element of the Grid, located in row 0 and column 1, with the content "Hello, I amTextblock". Based on this, a TextBlock node in XAML format is generated for the non-inputable text control element, and "Hello, I amTextblock" is written into the TextBlock node. Then, XML document manipulation methods are used to add the TextBlock node under the Grid node. This process is repeated for other elements, adding them to their respective nodes to ultimately form the corresponding logical tree.

[0051] The process of adding a TextBlock node to a Grid node using XML document manipulation methods is as follows: Create a Grid node using XmlDocument's CreateElement method, then set the corresponding attributes to the Grid node, add the corresponding row and column nodes to the Grid node, then create an XmlNode and a TextBlock node, and finally add the TextBlock node to the Grid node using XmlNode's AppendChild method and save it.

[0052] Please see Figure 3 This embodiment provides an apparatus 300 for generating a user interface framework logic tree using Excel, comprising:

[0053] Definition unit 301 is used to predefine the attributes of common elements in the interface element table based on Excel format; wherein the attributes include: element type, level, row, column, content, unique identifier and parent node information;

[0054] The input unit 302 is used to obtain the attributes of each target element according to the interface design drawing to be generated, and input the attributes of each target element into the newly generated interface element table row by row and column by column.

[0055] The logic tree generation unit 303 is used to generate a user interface framework logic tree from the attribute content of the interface element table using XML document manipulation methods.

[0056] Further, the logic tree generating unit 303 comprises:

[0057] An interface design graph generating subunit, configured to generate an interface design graph according to the user interface framework logic tree.

[0058] Further, the definition unit 301 comprises:

[0059] An element type setting subunit, configured to set that the element types comprise a layout element, a non-input text control, an input text control, a stack panel and a button.

[0060] Further, the logic tree generating unit 303 comprises:

[0061] An attribute acquiring subunit, configured to acquire attributes of each target element in the interface element table;

[0062] An element node generating subunit, configured to generate corresponding element nodes according to the element types of the target elements;

[0063] A content writing subunit, configured to generate corresponding row nodes and column nodes under the corresponding element nodes according to the rows and columns where the target elements are located, and write content into the corresponding row nodes or column nodes;

[0064] A node relationship acquiring subunit, configured to acquire node relationships of the element nodes according to the levels, unique identifiers and parent node information of the element types;

[0065] A document operation subunit, configured to generate a user interface framework logic tree by using an xml document operation method according to the node relationships.

[0066] Further, the document operation subunit comprises:

[0067] An element node attribute setting subunit, configured to create the element nodes by using the CreateElement of the XmlDocument and set attributes;

[0068] A sub-element node acquiring subunit, configured to acquire corresponding sub-element nodes under the element nodes according to the node relationships;

[0069] A node adding subunit, configured to create an XmlNode, and add the sub-element nodes to the element nodes by using the AppendChild method of the XmlNode.

[0070] Further, the node relationship acquiring subunit comprises:

[0071] A level position analyzing subunit, configured to analyze the level positions of the element nodes according to the levels of the element types.

[0072] The parent node obtaining sub-unit is configured to obtain the parent node corresponding to each element node according to the unique identifier and the parent node information.

[0073] The node relationship analysis sub-unit is configured to obtain the node relationship of each element node according to the hierarchical position of each element node and the parent node corresponding to each element node.

[0074] Further, the parent node obtaining sub-unit comprises:

[0075] The parent node analysis and judgment sub-unit is configured to, if the parent node information of one element node is equal to the unique identifier of another element node, take the another element node as the parent node of the one element node.

[0076] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the above-mentioned device and unit can refer to the corresponding process in the foregoing method embodiments, which will not be described here.

[0077] The application further provides a computer readable storage medium, which has a computer program stored thereon, and the computer program can implement the method provided by the above-mentioned embodiments when executed. The storage medium can include a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various storage program code media.

[0078] The application further provides a computer device, which can include a memory and a processor, the memory has a computer program stored therein, and the processor can implement the method provided by the above-mentioned embodiments when calling the computer program in the memory. Of course, the computer device can also include various network interfaces, power supplies and other components.

[0079] The embodiments in the specification are described in a progressive manner, and each embodiment focuses on the difference from other embodiments. The same and similar parts of each embodiment can be referred to each other. For the device disclosed in the embodiments, since it corresponds to the method disclosed in the embodiments, the description is relatively simple, and the related parts can be referred to the method part. It should be pointed out that, for those skilled in the art, without departing from the principle of the application, some improvements and modifications can be made to the application, and these improvements and modifications also fall within the protection scope of the claims of the application.

[0080] It should also be noted that, in the specification, relational terms such as first and second and the like can be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but can include other elements not expressly listed or inherent to such process, method, article, or apparatus.

[0081] Without further limitation, an element defined by an "includes a... " statement is not meant to be an exclusive inclusion, such that a process, method, article, or apparatus that includes elements in addition to or other than those listed after such a statement is not included.

Claims

1. A method for generating a user interface framework logic tree using Excel, characterized in that, include: Predefine the attributes of common elements in the Excel-formatted interface element table; The attributes include: element type, level, row, column, content, unique identifier, and parent node information; Obtain the attributes of each target element based on the interface design drawing to be generated, and enter the attributes of each target element row by row and column by column into the newly generated interface element table; Use XML document manipulation methods to generate a user interface framework logic tree from the attribute content of the interface element table; The step of generating a user interface framework logic tree from the attribute content of the interface element table using XML document manipulation methods includes: Obtain the attributes of each target element in the interface element table; Generate corresponding element nodes based on the element type of each target element; Based on the row and column of each target element, generate corresponding row nodes and column nodes under the corresponding element nodes, and write the content into the corresponding row nodes or column nodes; The node relationships of each element node are obtained based on the hierarchy, unique identifier, and parent node information of each element type; Based on the node relationships, an XML document manipulation method is used to generate a user interface framework logic tree; List the style key Key1 used in Excel, and generate Style = {Dynamic Resource Key1} in XAML. List the data Data1 that needs to be bound in Excel, and generate xxx = {Binding Data1} in XAML, where xxx represents the dependency property of the control. The step of forming a user interface framework logic tree using XML document manipulation methods based on the node relationships includes: The element node is created using XmlDocument's CreateElement method, and its properties are set. Based on the node relationships, obtain the corresponding child element nodes under the element node; Create an XmlNode and add the child element node to the element node using the AppendChild method of XmlNode; The process of obtaining the node relationships of each element node based on its hierarchical level, unique identifier, and parent node information includes: The hierarchical position of each element node is determined based on the hierarchical analysis of each element type. Retrieve the parent node corresponding to each element node based on the unique identifier and parent node information; The node relationships of each element node are obtained based on its hierarchical position and its corresponding parent node. The step of obtaining the parent node corresponding to each element node based on the unique identifier and parent node information includes: If the parent node information of one element node is equal to the unique identifier of another element node, then the other element node is taken as the parent node of the one element node. The process of adding a TextBlock node under a Grid node using XML document manipulation methods is as follows: Create a Grid node using XmlDocument's CreateElement method, set attributes for the Grid node, add row and column nodes under the Grid node, create an XmlNode and a TextBlock node, add the TextBlock node under the Grid node using the XmlNode's AppendChild method, and save it. The development of the front-end XAML file and the development of the back-end logic functions are separated for collaborative development.

2. The method for generating a user interface framework logic tree using Excel according to claim 1, characterized in that, After generating the user interface framework logic tree from the attribute content of the interface element table using XML document manipulation methods, the method further includes: The interface design diagram is generated based on the user interface framework logic tree.

3. The method for generating a user interface framework logic tree using Excel according to claim 1, characterized in that, The element types include: layout elements, non-text input controls, text input controls, stack panels, and buttons.

4. An apparatus for generating a user interface framework logic tree using Excel, characterized in that, include: Define a unit, used to predefine the attributes of common elements in an Excel-formatted interface element table; The attributes include: element type, level, row, column, content, unique identifier, and parent node information; The input unit is used to obtain the attributes of each target element based on the interface design drawing to be generated, and input the attributes of each target element row by row and column by column into the newly generated interface element table. The logic tree generation unit is used to generate a user interface framework logic tree from the attribute content of the interface element table using XML document manipulation methods. The logic tree generation unit includes: The attribute acquisition sub-unit is used to acquire the attributes of each target element in the interface element table; The element node generation sub-unit is used to generate corresponding element nodes according to the element type of each target element; The content is written to the sub-unit, which is used to generate corresponding row nodes and column nodes under the corresponding element node according to the row and column of each target element, and write the content into the corresponding row node or column node; The node relationship retrieval sub-unit is used to retrieve the node relationships of each element node based on the hierarchy, unique identifier, and parent node information of each element type. The document manipulation subunit is used to generate a user interface framework logic tree based on the node relationships using XML document manipulation methods. The binding cell is used to list the style key Key1 used in Excel and generate Style = {DynamicResource Key1} in XAML. It also lists the data Data1 to be bound in Excel and generates xxx = {BindingData1} in XAML, where xxx represents the control's dependency property. The document operation subunit includes: The element node attribute setting sub-unit is used to create the element node through XmlDocument's CreateElement and set its attributes; The sub-element node acquisition sub-unit is used to obtain the corresponding sub-element node under the element node according to the node relationship; Adding child units to a node is used to create an XmlNode, and the child element node is added to the element node through the AppendChild method of the XmlNode; The node relationship acquisition subunit includes: The hierarchical position analysis subunit is used to analyze the hierarchical position of each element node based on the hierarchical level of each element type. The parent node retrieves child units, which is used to obtain the parent node corresponding to each element node based on the unique identifier and parent node information; The node relationship analysis subunit is used to obtain the node relationship of each element node based on the hierarchical position of each element node and the corresponding parent node of each element node. The parent node acquires child units including: The parent node analysis and judgment sub-unit is used to determine if the parent node information of one element node is equal to the unique identifier of another element node, and then take the other element node as the parent node of the one element node. The process of adding a TextBlock node under a Grid node using XML document manipulation methods is as follows: Create a Grid node using XmlDocument's CreateElement method, set attributes for the Grid node, add row and column nodes under the Grid node, create an XmlNode and a TextBlock node, add the TextBlock node under the Grid node using the XmlNode's AppendChild method, and save it. Separate units are used to separate the development of front-end XAML files from the development of back-end logic functions for collaborative development.

5. A computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the method of generating a user interface framework logic tree using Excel as described in any one of claims 1 to 3.

6. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, causes the processor to perform the method for generating a user interface framework logic tree using Excel as described in any one of claims 1 to 3.

Images