Interface view display method, terminal device, and computer-readable storage medium

By obtaining configuration information, generating node tree and runtime tree, and combining user data to render interface views, the complex development and maintenance of UI personalized needs in the existing technology is solved, and a more efficient interface view personalized solution is achieved.

CN114489619BActive Publication Date: 2025-05-13HANGZHOU TUYA INFORMATION TECH CO LTD
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202210094310.9
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2022-01-26
Publication Date
2025-05-13
Estimated Expiration
2042-01-26

AI Technical Summary

Technical Problem

When developing apps for multiple customers, the prior art requires built-in styles to achieve UI personalization, resulting in complex demand development and maintenance.

Method used

Generate node trees by obtaining configuration information, creating runtime trees, and rendering the interface view with user data to avoid pre-built-in styles.

Benefits of technology

Improve the scope of application of personalized solutions for interface view display, and simplifies the requirements development and maintenance process.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN114489619B_ABST
    Figure CN114489619B_ABST
Patent Text Reader

Abstract

The present application discloses an interface view display method and its terminal device and computer-readable storage medium, the method comprising: obtaining configuration information, generating a node tree based on the configuration information; creating a runtime tree based on the node tree, binding user data to the runtime tree; rendering interface view elements according to each node in the runtime tree and its bound user data, and generating the interface view from multiple interface view elements. The interface view display method of the present application can generate a node tree based on the configuration information after obtaining the configuration information, and further create a runtime tree, while rendering and displaying the interface view in combination with the data provided by the user. The method does not require a pre-built-in interface view style, which increases the scope of application of the personalized interface view display solution, thereby simplifying the process of interface view display demand development and maintenance.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present application relates to the field of computer technology, and more specifically, to an interface view display method and its terminal device and computer-readable storage medium. Background Art

[0002] In the prior art, when customizing and developing apps for multiple customers, there is often a situation where the business logic functions are the same, but the interface view displays are very different, that is, the same function requires the development of multiple sets of page interfaces, that is, the UI (User Interface) personalization requirements.

[0003] In response to the needs of UI personalization, the existing general solution is: pre-built-in styles, and personalized customization of UI is achieved by controlling the arrangement and combination. Specifically, during development, it is necessary to pre-determine the customized UI elements and styles, and then pre-build these styles in the application and associate them with a configuration variable, and then control which style the UI displays by changing the value of the configuration variable. Since the existing technical solution is a description of the variable attributes of the business UI style, when the demand iteration becomes more and more complex, it is also necessary to simultaneously add corresponding built-in logic to support it, which makes the demand development and maintenance in UI display more and more difficult. Summary of the invention

[0004] In view of this, the purpose of this application is to provide an interface view display method that does not require pre-built-in styles. After obtaining configuration information, a node tree is generated based on the configuration information, and a runtime tree is further created. At the same time, the interface view is rendered and displayed in combination with the data provided by the user, thereby improving the scope of application of personalized interface view display solutions and simplifying the process of interface view display demand development and maintenance.

[0005] In order to solve the above technical problems, the first technical solution provided by the present application is: to provide an interface view display method, the interface view display method comprising:

[0006] Acquire configuration information, and generate a node tree based on the configuration information;

[0007] Creating a runtime tree based on the node tree, and binding user data to the runtime tree;

[0008] The interface view element is rendered according to each node in the runtime tree and the user data bound thereto, and the interface view is generated by a plurality of interface view elements.

[0009] Wherein, generating a node tree based on the configuration information includes:

[0010] Acquire first node description information from the configuration information;

[0011] Determine a first node type based on the first node semantic name in the first node description information;

[0012] Creating a first node according to the first node type;

[0013] The node tree is generated based on the first node.

[0014] After creating the first node according to the first node type, the interface view display method further includes:

[0015] Detecting whether the first node description information contains second node description information;

[0016] If so, determining the second node type based on the second node semantic name in the second node description information;

[0017] Creating a second node according to the second node type;

[0018] The node tree is created based on the first node, the second node, and the parent-child node relationship between the first node and the second node.

[0019] Wherein, creating a runtime tree based on the node tree includes:

[0020] Detecting the number of elements of each node in the node tree;

[0021] Dividing the nodes into a plurality of runtime nodes according to the number of elements of each node;

[0022] The runtime tree is created based on the runtime nodes.

[0023] The step of binding the user data to the runtime tree includes:

[0024] Generate an abstract syntax tree from the user data according to preset rules;

[0025] A depth-first traversal is performed on the abstract syntax tree, and operations on each node in the abstract syntax tree are performed in sequence, so as to bind with the runtime tree.

[0026] Wherein, the interface view display method further includes:

[0027] After updating the user data based on the behavior event distribution signal, binding the updated user data to the runtime tree;

[0028] The updated interface view element is rendered according to each node in the runtime tree and the updated user data bound thereto, and the original interface view is refreshed by the multiple updated interface view elements.

[0029] After rendering the interface view element according to each node in the runtime tree and the user data bound thereto, the interface view display method further comprises:

[0030] Performing decoration processing on the rendered interface view elements;

[0031] The decoration process includes at least one of the following operations: creating an associated event and adjusting element data.

[0032] The obtaining of configuration information includes:

[0033] Get the basic elements of the interface view provided by the UI toolkit;

[0034] The interface view basic elements are semantically processed to obtain the configuration information.

[0035] In order to solve the above technical problems, the second technical solution provided in the present application is: to provide a terminal device, the terminal device includes a processor, and the processor is used to implement the interface view display method as mentioned above when executing a computer program stored in a memory.

[0036] In order to solve the above technical problems, the third technical solution provided in the present application is: providing a computer-readable storage medium, and when the program is executed by a processor, it implements the interface view display method as mentioned above.

[0037] The beneficial effect of the present application is that the interface view display method of the present application can generate a node tree based on the configuration information after obtaining the configuration information, and further create a runtime tree, and render and display the interface view in combination with the data provided by the user. The method does not require the pre-built-in interface view style, which increases the scope of application of the interface view display personalization solution, thereby simplifying the process of interface view display demand development and maintenance. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for describing the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work. Among them:

[0039] Figure 1 It is a flowchart of an embodiment of an interface view display method provided by the present application;

[0040] Figure 2 is a flowchart of specific implementation steps of step S11;

[0041] Figure 3It is a flowchart of the first scenario of the interface view display method provided by this application;

[0042] Figure 4 It is a flowchart of the second scenario of the interface view display method provided by this application;

[0043] Figure 5 It is a flowchart of the third scenario of the interface view display method provided by this application;

[0044] Figure 6 It is a flowchart of the fourth scenario of the interface view display method provided by this application;

[0045] Figure 7 This is a workflow diagram of the interface view display method provided by this application;

[0046] Figure 8 It is a structural diagram of an embodiment of a terminal device provided by the present application;

[0047] Fig. 9 It is a schematic diagram of the structure of the computer-readable storage medium provided in this application. DETAILED DESCRIPTION

[0048] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. 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 creative work are within the scope of protection of this application.

[0049] The core of this application is to provide an interface view display method to solve the problem of increasingly difficult demand development and maintenance caused by pre-built-in styles in interface view display design.

[0050] The present application is described in detail below with reference to the accompanying drawings and embodiments.

[0051] See also Figure 1 , Figure 1 The present application provides a flowchart of an embodiment of an interface view display method. The interface view display method described in the embodiment of the present application is applied to a terminal device, wherein the terminal device of the present application can be a server, or a system composed of a server and a local terminal. Accordingly, the various parts included in the terminal device of the present application, such as various units, sub-units, modules, and sub-modules, can all be set in the server, or can be set in the server and the local terminal respectively.

[0052] Furthermore, the above-mentioned server can be hardware or software. When the server is hardware, it can be implemented as a distributed server cluster consisting of multiple servers, or it can be implemented as a single server. When the server is software, it can be implemented as multiple software or software modules, such as software or software modules used to provide distributed servers, or it can be implemented as a single software or software module, which is not specifically limited here. In some possible implementations, the interface view display method of the embodiment of the present application can be implemented by a processor calling a computer-readable instruction stored in a memory.

[0053] like Figure 1 As shown, the specific steps of the interface view display method of the embodiment of the present application are as follows:

[0054] Step S11: Obtain configuration information, and generate a node tree based on the configuration information.

[0055] In the embodiment of the present application, the terminal device can obtain the configuration information of the interface view and generate a node tree based on the configuration information. The configuration information includes but is not limited to the element name, attribute, style, data binding expression and event distribution expression of the interface view, and the embodiment of the present application does not limit this.

[0056] Preferably, in order to enable the terminal device to obtain the configuration information of the interface view, the terminal device can obtain the basic interface view elements provided by the user interface toolkit for building the user interface, and preset them into the interface view engine, so that the interface view engine can perform semantic processing on the basic interface view elements through semantic description tools, thereby creating basic interface view elements recognizable by the terminal device, and thereby enabling the terminal device to obtain the basic interface view elements recognizable to it, that is, the configuration information.

[0057] It should be noted that the present application does not limit the type of user interface toolkit for building, for example, it can be Flutter, Hybrid, Weex, React Native, etc. The embodiment of the present application takes Flutter as an example for explanation.

[0058] Flutter is an open-source toolkit for building user interface views from Google. It helps developers efficiently build exquisite multi-platform applications through a set of code bases, and can support mobile, Web, desktop, and embedded platforms. Therefore, terminal devices can choose Flutter to provide basic elements of interface views to achieve multi-terminal rendering and engine reuse, reducing multi-terminal differences.

[0059] This application does not limit the above-mentioned semantic description tools, for example, it can be Json (JavaScript Object Notation), xml (Extensible Markup Language) and Protocol Buffers, etc. This application takes Json as an example for explanation. The interface view engine can process the basic elements of the interface view provided by Flutter through Json, and then create a Json file containing the basic elements of the interface view that can be recognized by the terminal device, so that the terminal device can obtain the corresponding configuration information by parsing the Json file.

[0060] Furthermore, the terminal device can generate a node tree based on the above configuration information. For details, please refer to Figure 2 , Figure 2 It is a flowchart of the specific implementation steps of step S11.

[0061] Step S111: Acquire first node description information from configuration information.

[0062] In the implementation of this application, the terminal device can obtain the description information of the first node, that is, the description information of the root node, through the configuration information. The description information of the first node includes but is not limited to the name, type, attribute, style, data binding expression, and event distribution expression of the first node, which is not limited in this embodiment of the application.

[0063] Step S112: Determine the first node type based on the first node semantic name in the first node description information.

[0064] In the implementation of the present application, the terminal device may determine the type of the first node according to the first node semantic name included in the first node description information, wherein the type includes but is not limited to the layout type and the component type, etc., which are not limited in the embodiment of the present application.

[0065] Step S113: Create a first node according to the first node type.

[0066] In an embodiment of the present application, after determining the type of the first node, the terminal device may create a first node corresponding to the type according to the type of the first node. The present application takes the type of the first node as a layout type as an example for explanation. After determining that the type of the first node is a layout type, the terminal device may further create a first node corresponding to the layout type.

[0067] Step S114: Generate a node tree based on the first node.

[0068] In the application embodiment, after creating the first node, the terminal device can generate a node tree based on the first node, that is, the node tree is composed of multiple first nodes.

[0069] Preferably, in other embodiments, after the terminal device completes creating the first node, it may continue to detect whether the second node description information exists in the description information of the first node.

[0070] Further, the terminal device may determine the type of the second node based on the second node semantic name in the second node description information, and create the second node according to the type of the second node. For details, please refer to step S112 and step S113, which will not be described in detail here.

[0071] Since there may be child nodes under the first node and / or the second node, in order to make the creation of the node tree more complete, preferably, in the embodiment of the present application, the terminal device can further determine whether there are child nodes under the first node and / or the second node; if so, continue to create the third node, the fourth node, etc., until the description information of all nodes does not contain the description information of the child nodes. Finally, the terminal device creates a node tree based on the first node, the second node, and the parent-child node relationship between the first node and the second node.

[0072] Please continue reading Figure 3 , Figure 3 It is a flowchart of the first scenario of the interface view display method provided by the present application. In an embodiment of the present application, the terminal device parses the Json file to obtain configuration information, and obtains the description information of the root node based on the configuration information. The terminal device determines whether the type of the root node is a layout type or a component type based on the semantic name contained in the description information of the root node, and creates a node corresponding to the type based on its type.

[0073] In addition, when the terminal device reads the root user based on the above configuration information to obtain the description information of the root node, it can further determine whether it has a child node based on the semantic name contained in the description information of the root node. If so, it further determines whether the type of the child node is a layout type or a component type based on the semantic name of the child node, and creates nodes corresponding to the different types of the child node until all nodes are created.

[0074] In an embodiment of the present application, after acquiring the configuration information of the interface view, the terminal device may generate a node tree based on the configuration information for subsequent creation of a runtime tree, thereby binding the user data to the runtime tree.

[0075] Step S12: Create a runtime tree based on the node tree, and bind the user data to the runtime tree.

[0076] In an embodiment of the present application, the terminal device can create a runtime tree based on the node tree, and create a runtime environment, and then bind the user data to the runtime tree.

[0077] The present application does not limit the specific implementation steps for creating the runtime tree, as long as the runtime tree can be successfully created.

[0078] Preferably, see Figure 4 , Figure 4 It is a flow chart of the second scenario of the interface view display method provided by this application. Among them, the terminal device can detect the number of elements of each node in the above node tree, and divide the node into multiple runtime nodes according to the number of elements of each node, and finally create a runtime tree based on the runtime node.

[0079] Please refer to Figure 4 and 5 , Figure 5 : is a flowchart of the third scenario of the interface view display method provided by this application. Figure 4 and 5 As shown, after creating the node tree, the terminal device can further perform node fission operations on the node tree to realize the creation of the node tree at runtime.

[0080] In the embodiment of the present application, through the node fission operation, a node of the node tree will be fissioned into multiple UI elements, and the terminal device can divide the node into multiple runtime nodes according to the number of elements of each node, and finally create a runtime tree based on the runtime node. For example, if a node of the node tree is fissioned into two elements, the terminal device will generate corresponding runtime tree nodes based on the two elements, and then generate a runtime tree.

[0081] Preferably, the terminal device can also classify the node types of the node tree, and then create corresponding runtime tree nodes according to the types of the node tree nodes. Furthermore, the terminal device can also use v-for instructions and v-if instructions to traverse and render the fissioned nodes.

[0082] It should be noted that the v-if directive is used to control the display and hiding of elements. When the variable or expression following the v-if directive is true, the element is displayed, otherwise the element is hidden. The v-for directive is used to add or delete elements according to the truth or falsity of the expression.

[0083] Furthermore, after the terminal device generates the runtime tree, it can bind the user data to the runtime tree. Figure 5As shown, the terminal device can bind the data provided by the user to the runtime tree. The data provided by the user includes but is not limited to value, style, ID (Identity document), etc., which is not limited in this application.

[0084] It should be noted that the present application does not limit the specific implementation steps for binding the above-mentioned user data with the runtime tree, as long as the binding operation can be implemented.

[0085] Preferably, see Figure 6 , Figure 6 : is a flowchart of the fourth scenario of the interface view display method provided by this application. Figure 6 As shown, after the terminal device has created the runtime tree, it can use the data binding syntax parsing tool to generate an abstract syntax tree from the user data according to the preset rules. Then, a depth-first traversal is performed on the abstract syntax tree, and the operation of each node in the abstract syntax tree is performed in turn, so as to bind it to the runtime tree. Among them, this application does not limit the preset rules, for example, it can be four arithmetic operations, value operations, ternary operations, etc.

[0086] Specifically, the terminal device obtains the data binding expression $Root.num / 2+$Root.name, and splits the data binding expression $Root.num / 2+$Root.name through four arithmetic operations to generate an abstract syntax tree. Among them, $Root is the data named Root entered by the user. After obtaining the user's data, the terminal device chooses to perform a depth-first traversal of the user's data on the above abstract syntax tree, and performs operations on each node in the abstract syntax tree in turn, so as to bind it to the runtime tree.

[0087] It should be noted that the Abstract Syntax Tree (AST), or Syntax Tree for short, is an abstract representation of the syntax structure of the source code. It represents the syntax structure of the programming language in a tree-like form, and each node on the tree represents a structure in the source code. The reason why the syntax is "abstract" is that the syntax here does not represent every detail that appears in the real syntax. For example, nested parentheses are implied in the tree structure and are not presented in the form of nodes; and conditional jump statements such as if-condition-then can be represented using nodes with two branches.

[0088] Furthermore, the present application does not limit the type of the above-mentioned data binding syntax parsing tool, for example, it can be antlr, APG, Coco / R, GOLD, etc. The embodiment of the present application takes antlr as an example for explanation.

[0089] ANTLR refers to an open source grammar analyzer that can automatically generate a grammar tree based on input and display it visually. Its predecessor is PCCTS, which provides a framework for automatically constructing a custom language recognizer, compiler, and interpreter through grammar description for languages ​​including Java, C++, and C#. ANTLR can resolve recognition conflicts through predicates, support actions and return values, and can also automatically generate a grammar tree based on input and display it visually.

[0090] Step S13: Rendering an interface view element according to each node in the runtime tree and the user data bound thereto, and generating an interface view from a plurality of interface view elements.

[0091] After the runtime tree is generated, the terminal device may also render the interface view elements according to each node in the runtime tree and the user data bound thereto, so as to realize generation of the interface view from multiple interface view elements.

[0092] Preferably, in order to enable the terminal device to render the interface view elements and then generate the interface view. Figure 4 as well as Figure 5 As shown, the terminal device can also generate an interface display tree based on the runtime tree to display the interface view on the terminal device.

[0093] Specifically, the terminal device can parse each node of the generated runtime tree and bind it with user data to convert each node of the runtime tree into an interface display tree node, that is, an interface view element. Then, the interface display tree is generated from the interface display tree node to realize the display of the interface view on the terminal device.

[0094] Preferably, the terminal device can also perform analysis based on the type of the runtime tree node, and generate an interface display node corresponding to the type, thereby generating an interface display tree. The types of the runtime tree nodes include but are not limited to layout types, component types, and the like.

[0095] In other embodiments, the terminal device can also update user data based on the behavior event distribution signal, and then bind the updated user data to the runtime tree, and update the generated interface display tree nodes according to each node in the runtime tree and its bound updated user data rendering, and refresh the original interface display tree by multiple interface display tree nodes, that is, refresh the original interface view.

[0096] On the basis of the above embodiment, after rendering the interface view elements and generating the interface view, the terminal device may further decorate the rendered interface view elements to generate a decorated interface view.

[0097] It should be noted that the decoration processing of the embodiment of the present application can be customized by the user, for example, it can be one or more of creating an associated event and adjusting element data. Among them, creating an associated event is to bind the interface view element with the associated event to realize the jump of the interface view element to the associated event; element data adjustment includes but is not limited to transparency processing, brightness processing and clarity processing, etc., which are not limited in the embodiment of the present application.

[0098] Please continue reading Figure 7 , Figure 7 This is a schematic diagram of the interface view display method provided by this application. Figure 7 As shown, the terminal device reads the Json file through the page loading file to obtain the configuration information, and generates a node tree based on the configuration information, and then generates a runtime tree. The runtime tree is combined with the user data, and the interface view elements are rendered according to each node in the runtime tree to realize the generation of the interface view by multiple interface view elements. The interface view triggers the operation behavior event, and the terminal device distributes it to the business logic, and updates the user data based on the behavior event distribution signal, so as to bind the updated user data to the runtime tree, realize the rendering and update of the interface view elements, and then refresh the original interface view.

[0099] The interface view display method provided in the present application can generate a node tree based on the configuration information after obtaining the configuration information, and further create a runtime tree, and render and display the interface view in combination with the data provided by the user, without the need for pre-built-in interface view styles. At the same time, this method can realize the separation of interface view and logic, thereby improving the scope of application of personalized interface view display solutions and reducing the complexity of interface view customization.

[0100] Please continue to see Figure 8 , Figure 8 4 is a schematic diagram of a terminal device according to an embodiment of the present application. The terminal device includes a memory 41 and a processor 42 connected to each other.

[0101] The memory 41 is used to store and implement the above-mentioned interface view display method.

[0102] The processor 42 is used to execute program instructions stored in the memory 41 .

[0103] The processor 42 may also be referred to as a CPU (Central Processing Unit). The processor 42 may be an integrated circuit chip having the ability to process signals. The processor 42 may also be a general-purpose processor, a digital signaling processor (DSP), an application-specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components. The general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0104] The memory 41 can be a memory stick, a TF card, etc., which can store all the information in the terminal device, including the input raw data, computer programs, intermediate operation results and final operation results are all stored in the memory. It stores and retrieves information according to the location specified by the controller. With the memory, the terminal device has a memory function and can ensure normal operation. The memory of the terminal device can be divided into main memory (internal memory) and auxiliary memory (external memory) according to its purpose. There is also a classification method of dividing it into external memory and internal memory. External memory is usually a magnetic medium or an optical disk, etc., which can store information for a long time. Memory refers to the storage component on the motherboard, which is used to store the data and programs currently being executed, but is only used to temporarily store programs and data. If the power is turned off or the power is cut off, the data will be lost.

[0105] In the several embodiments provided in the present application, it should be understood that the disclosed methods and devices can be implemented in other ways. For example, the device implementation described above is only schematic. For example, the division of modules or units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another terminal device, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0106] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.

[0107] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0108] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for a computer device (which can be a personal computer, a system server, or a network device, etc.) or a processor to execute all or part of the steps of the various implementation methods of the present application.

[0109] See also Fig. 9 , which is a schematic diagram of the structure of a computer-readable storage medium provided by the present application. The storage medium of the present application stores a program file 51 that can implement all the above-mentioned interface view display methods, wherein the program file 51 can be stored in the above-mentioned storage medium in the form of a software product, including a number of instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) or a processor (processor) to execute all or part of the steps of each implementation method of the present application. The aforementioned storage device includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, or a computer, a server, a mobile phone, a tablet, and other devices.

[0110] The above are only implementation methods of the present application, and are not intended to limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made using the contents of the present application specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present application.

Claims

1. A method for displaying an interface view, characterized in that: The interface view display method comprises: Acquire configuration information, and acquire first node description information from the configuration information; Determine a first node type based on the first node semantic name in the first node description information; Creating a first node according to the first node type; Generate a node tree based on the first node; Detecting the number of elements of each node in the node tree; Dividing the nodes into a plurality of runtime nodes according to the number of elements of each node; Creating a runtime tree based on the runtime nodes; Generate an abstract syntax tree from user data according to preset rules; Performing a depth-first traversal on the abstract syntax tree, and sequentially performing an operation on each node in the abstract syntax tree, thereby binding the user data to the runtime tree; The interface view element is rendered according to each node in the runtime tree and the user data bound thereto, and the interface view is generated by a plurality of interface view elements.

2. The interface view display method according to claim 1, characterized in that: After creating the first node according to the first node type, the interface view display method further includes: Detecting whether the first node description information contains second node description information; If so, determining the second node type based on the second node semantic name in the second node description information; Creating a second node according to the second node type; The node tree is created based on the first node, the second node, and the parent-child node relationship between the first node and the second node.

3. The interface view display method according to claim 1, characterized in that: The interface view display method further includes: After updating the user data based on the behavior event distribution signal, binding the updated user data to the runtime tree; The updated interface view element is rendered according to each node in the runtime tree and the updated user data bound thereto, and the original interface view is refreshed by the multiple updated interface view elements.

4. The interface view display method according to claim 1, characterized in that: After rendering the interface view element according to each node in the runtime tree and the user data bound thereto, the interface view display method further comprises: Performing decoration processing on the rendered interface view elements; The decoration process includes at least one of the following operations: creating an associated event and adjusting element data.

5. The interface view display method according to claim 1, characterized in that: The obtaining of configuration information includes: Get the basic elements of the interface view provided by the UI toolkit; The interface view basic elements are semantically processed to obtain the configuration information.

6. A terminal device, characterized in that: The terminal device includes a processor, and the processor is used to implement the interface view display method as described in any one of claims 1 to 5 when executing a computer program stored in a memory.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the interface view display method described in any one of claims 1-5 is implemented.

Citation Information

Patent Citations

  • Page data compiling method and apparatus, and page rendering method and apparatus

    CN106569824A

  • Method and device for page rendering

    CN106598574A