Page rendering method and device, equipment and storage medium
Patent Information
- Application Number
- CN202380008930.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2023-04-28
- Publication Date
- 2024-12-31
AI Technical Summary
The existing page rendering technology has poor flexibility, resulting in poor user experience. In particular, the front-end page lacks hot update capabilities, which causes users to delay obtaining the latest version, affecting the user experience.
By obtaining and parsing domain-specific language (DSL) files, rendering pages in real time, creating a control tree structure, including rendering functions and DSL attributes, rendering controls based on attribute values, and supporting control updates and status management to achieve hot updates of pages.
It improves the flexibility of page rendering, realizes real-time updates to the page during operation, improves user experience, and reduces development and maintenance costs.
Smart Images

Figure CN119234209A_ABST
Abstract
Description
Page rendering method, device, equipment and storage medium Technical Field
[0001] The present invention relates to the field of computer application technology, and in particular to a page rendering method, apparatus, device and storage medium. Background Art
[0002] With the popularization of computers, users usually use more computer services, such as searching for information, watching videos, browsing web pages, etc.
[0003] Users typically interact with the front-end page displayed on their computer. For example, they can download and run applications locally on their terminal to interact with the front-end page, or they can open a web page in a browser to interact with it.
[0004] However, the current page rendering flexibility is poor, resulting in a poor user experience.
[0005] Summary of the Invention
[0006] The present invention provides a page rendering method, apparatus, device and storage medium to address the deficiencies in related technologies.
[0007] According to a first aspect of an embodiment of the present invention, a page rendering method is provided, comprising: obtaining a domain-specific language (DSL) file for describing a target page; the target page including a control; parsing the obtained DSL file based on a preset DSL parsing module to create a control tree structure including control instances; rendering the target page according to the created control tree structure; the control instances in the control tree structure including rendering functions and DSL attributes; the values of the DSL attributes including DSL data for describing the corresponding control instances; the rendering function being configured to determine a current attribute value of the corresponding control instance based on the DSL data in the current value of the DSL attribute, and rendering the corresponding control based on the current attribute value of the corresponding control instance.
[0008] Optionally, the method further includes: updating the target page, specifically including: obtaining control update data, determining a target control instance that needs to be updated based on the control update data, and updating DSL data in the target control instance; executing a rendering function in the updated target control instance, and updating and rendering the control corresponding to the target control instance in the target page.
[0009] Optionally, the method further includes: creating a corresponding state instance when creating a control instance; different control instances correspond to different state instances; the state instance has the ability to execute the rendering function in the corresponding control instance; the execution of the rendering function in the updated target control instance includes: calling the state instance corresponding to the target control instance, and executing the rendering function in the updated target control instance.
[0010] Optionally, the state instance is further used to update the DSL property value of the corresponding control instance; updating the DSL data in the target control instance includes: calling the state instance corresponding to the target control instance to execute: updating the DSL data in the target control instance according to the control update data.
[0011] Optionally, the acquiring control update data includes: acquiring control update data according to a local event execution result; and / or acquiring control update data sent by an external device.
[0012] Optionally, the root node of the control tree structure includes a notification center control instance; the notification center control instance is used to: send the information of the interacted control instance to the event parsing processing module according to the received control interaction event, trigger the event parsing processing module to execute the corresponding operation event, and obtain the event execution result; the event parsing processing module includes: a set of corresponding relationships between control instance information and operation events.
[0013] Optionally, the control update data generation method includes: acquiring property update information of the control to be updated; and converting the property update information into control update data in DSL format based on a preset DSL conversion module.
[0014] Optionally, the method for generating the DSL file includes: acquiring configuration information of a target page; the configuration information includes information of a control tree structure; and converting the configuration information into the DSL file based on a preset DSL conversion module.
[0015] Optionally, the DSL file includes at least one of the following: control information, event binding information and data binding information for describing a control tree structure; the method further includes: initializing generation: a data parsing processing module, an event parsing processing module and a page generation module; saving the event binding information in the DSL file to the event parsing processing module; saving the data binding information in the DSL file to the data parsing processing module; saving the control information in the DSL file to the page generation module; parsing the obtained DSL file to create a control tree structure containing control instances, including: calling the page generation module, parsing the control information, and creating a control tree structure containing control instances.
[0016] Optionally, rendering the target page according to the created control tree structure includes: executing an initialization event of the target page; determining an initial control instance that needs to be updated based on the execution result of the initialization event, and updating the DSL data in the determined initial control instance; executing a rendering function of the control instance in the control tree structure, rendering the corresponding control, and obtaining the target page.
[0017] Optionally, the rendering function includes a constructor; rendering the target page according to the created control tree structure includes: in the process of creating the control tree structure, executing the constructor of the included control instance, rendering the corresponding control, and obtaining the target page.
[0018] Optionally, the method further includes: executing an initialization event of the target page; determining an initial control instance that needs to be updated based on the execution result of the initialization event, and updating the DSL data in the determined initial control instance; executing a rendering function of the updated initial control instance, and updating and rendering the corresponding control in the target page.
[0019] Optionally, the DSL parsing module includes: a DSL control parsing submodule corresponding to a control type; the DSL control parsing submodule is configured to parse DSL data used to describe a control instance of the corresponding control type and create the corresponding control instance; the parsing of the acquired DSL file based on the preset DSL parsing module includes: calling the DSL control parsing submodule corresponding to the target control type in the preset DSL parsing module to perform parsing on the DSL data used to describe a control instance of the target control type in the acquired DSL file.
[0020] Optionally, the DSL conversion module includes a DSL control conversion submodule corresponding to the control type; the DSL control conversion submodule is used to convert the control instance code of the corresponding control type into DSL data for describing the control instance of the corresponding control type.
[0021] According to a second aspect of an embodiment of the present invention, another page rendering method is provided, which is applied to a development end and includes: obtaining configuration information of a target page; the configuration information includes information about a control tree structure; converting the configuration information into a domain-specific language (DSL) file for describing the target page based on a preset DSL conversion module; using the parsed results of the DSL file to create a control tree structure containing control instances; the created control tree structure is used to render the target page; the control instances in the control tree structure include rendering functions and DSL attributes; the values of the DSL attributes include DSL data for describing the corresponding control instances; the rendering function is used to determine the current attribute values of the corresponding control instance based on the DSL data in the current values of the DSL attributes, and render the corresponding control based on the current attribute values of the corresponding control instance.
[0022] According to a third aspect of an embodiment of the present invention, another page rendering method is provided, comprising: a development end obtaining configuration information of a target page; the configuration information including information of a control tree structure; the development end converting the configuration information into a domain-specific language (DSL) file for describing the target page based on a preset DSL conversion module; a rendering end obtaining the DSL file and parsing the obtained DSL file based on a preset DSL parsing module to create a control tree structure containing control instances; rendering the target page based on the created control tree structure; the control instances in the control tree structure including rendering functions and DSL attributes; the values of the DSL attributes including DSL data for describing the control instances; the rendering function being configured to determine current attribute values of the control instances based on the DSL data in the current values of the DSL attributes, and render the corresponding controls based on the current attribute values of the control instances.
[0023] According to a fourth aspect of an embodiment of the present invention, a page rendering apparatus is provided, comprising: an acquisition unit, configured to acquire a domain-specific language (DSL) file for describing a target page; the target page including controls; a parsing unit, configured to parse the acquired DSL file based on a preset DSL parsing module to create a control tree structure including control instances; and render the target page according to the created control tree structure; the control instances in the control tree structure including rendering functions and DSL attributes; the values of the DSL attributes including DSL data for describing the corresponding control instances; and the rendering function configured to determine current attribute values of the corresponding control instance based on the DSL data in the current values of the DSL attributes, and render the corresponding control according to the current attribute values of the corresponding control instance.
[0024] Optionally, the device further includes an updating unit, configured to update the target page, specifically comprising: obtaining control update data, determining a target control instance to be updated based on the control update data, and updating DSL data in the target control instance; executing a rendering function in the updated target control instance, and updating and rendering the control corresponding to the target control instance in the target page.
[0025] Optionally, the parsing unit is also used to: create a corresponding state instance when creating a control instance; different control instances correspond to different state instances; the state instance has the ability to execute the rendering function in the corresponding control instance; the update unit is used to: call the state instance corresponding to the target control instance, and execute the rendering function in the updated target control instance.
[0026] Optionally, the state instance is further used to update the DSL property value of the corresponding control instance; the updating unit is used to: call the state instance corresponding to the target control instance to execute: update the DSL data in the target control instance according to the control update data.
[0027] Optionally, the updating unit is further configured to: obtain control update data according to a local event execution result; and / or obtain control update data sent by an external device.
[0028] Optionally, the root node of the control tree structure includes a notification center control instance; the notification center control instance is used to: send the information of the interacted control instance to the event parsing processing module according to the received control interaction event, trigger the event parsing processing module to execute the corresponding operation event, and obtain the event execution result; the event parsing processing module includes: a set of corresponding relationships between control instance information and operation events.
[0029] Optionally, the control update data generation method includes: acquiring property update information of the control to be updated; and converting the property update information into control update data in DSL format based on a preset DSL conversion module.
[0030] Optionally, the method for generating the DSL file includes: acquiring configuration information of a target page; the configuration information includes information of a control tree structure; and converting the configuration information into the DSL file based on a preset DSL conversion module.
[0031] Optionally, the DSL file includes at least one of the following: control information, event binding information and data binding information for describing the control tree structure; the parsing unit is further used to: initialize and generate: a data parsing processing module, an event parsing processing module and a page generation module; save the event binding information in the DSL file to the event parsing processing module; save the data binding information in the DSL file to the data parsing processing module; save the control information in the DSL file to the page generation module; call the page generation module, parse the control information, and create a control tree structure containing control instances.
[0032] Optionally, the parsing unit is used to: execute an initialization event of the target page; determine an initial control instance that needs to be updated based on the execution result of the initialization event, and update the DSL data in the determined initial control instance; execute a rendering function of the control instance in the control tree structure, render the corresponding control, and obtain the target page.
[0033] Optionally, the rendering function includes a constructor; the parsing unit is used to: in the process of creating the control tree structure, execute the constructor of the included control instance, render the corresponding control, and obtain the target page.
[0034] Optionally, the parsing unit is further used to: execute an initialization event of the target page; determine the initial control instance that needs to be updated based on the execution result of the initialization event, and update the DSL data in the determined initial control instance; execute the rendering function of the updated initial control instance, and update and render the corresponding control in the target page.
[0035] Optionally, the DSL parsing module includes: a DSL control parsing submodule corresponding to the control type; the DSL control parsing submodule is used to parse DSL data used to describe a control instance of the corresponding control type and create the corresponding control instance; the parsing unit is used to call the DSL control parsing submodule corresponding to the target control type in the preset DSL parsing module for parsing the DSL data used to describe the control instance of the target control type in the acquired DSL file.
[0036] Optionally, the DSL conversion module includes a DSL control conversion submodule corresponding to the control type; the DSL control conversion submodule is used to convert the control instance code of the corresponding control type into DSL data for describing the control instance of the corresponding control type.
[0037] According to a fifth aspect of an embodiment of the present invention, another page rendering device is provided, which is applied to a development end and includes: a configuration unit, configured to obtain configuration information of a target page; the configuration information includes information about a control tree structure; a conversion unit, configured to convert the configuration information into a domain-specific language (DSL) file for describing the target page based on a preset DSL conversion module; the parsing result of the DSL file is used to create a control tree structure containing control instances; the created control tree structure is used to render the target page; the control instances in the control tree structure include rendering functions and DSL attributes; the values of the DSL attributes include DSL data for describing the control instances; the rendering function is configured to determine the current attribute values of the control instances based on the DSL data in the current values of the DSL attributes, and render the corresponding control based on the current attribute values of the control instances.
[0038] According to a sixth aspect of an embodiment of the present invention, a page rendering system is provided, comprising: a development end and a rendering end; the development end is configured to: obtain configuration information of a target page; the configuration information includes information about a control tree structure; based on a preset DSL conversion module, convert the configuration information into a domain-specific language (DSL) file for describing the target page; the rendering end is configured to: obtain the DSL file, and based on a preset DSL parsing module, parse the obtained DSL file to create a control tree structure containing control instances; and render the target page according to the created control tree structure; the control instances in the control tree structure include: rendering functions and DSL attributes; the values of the DSL attributes include: DSL data for describing the corresponding control instances; the rendering function is configured to: determine the current attribute values of the corresponding control instance based on the DSL data in the current values of the DSL attributes, and render the corresponding control according to the current attribute values of the corresponding control instance.
[0039] According to the above embodiment, by acquiring and parsing the DSL file used to describe the target page and rendering the target page in real time, the flexibility of page rendering is improved.
[0040] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the invention. BRIEF DESCRIPTION OF THE DRAWINGS
[0041] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the invention and, together with the description, serve to explain the principles of the invention.
[0042] FIG1 is a schematic flow chart of a page rendering method according to an embodiment of the present invention;
[0043] FIG2 is a schematic flow chart of another page rendering method according to an embodiment of the present invention;
[0044] FIG3 is a schematic flow chart of another page rendering method according to an embodiment of the present invention;
[0045] FIG4 is a schematic diagram showing the principle of a page updating method according to an embodiment of the present invention;
[0046] FIG5 is a schematic flow chart of a page rendering and updating method according to an embodiment of the present invention;
[0047] FIG6 is a schematic structural diagram of a page rendering device according to an embodiment of the present invention;
[0048] FIG7 is a schematic structural diagram of another page rendering device according to an embodiment of the present invention;
[0049] FIG8 is a schematic structural diagram of a page rendering system according to an embodiment of the present invention;
[0050] FIG9 is a schematic diagram of the hardware structure of a computer device configured with the method according to an embodiment of the present invention. DETAILED DESCRIPTION
[0051] Exemplary embodiments will be described in detail herein, examples of which are illustrated in the accompanying drawings. In the following description, when referring to the drawings, like numbers in different figures represent like or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments are not intended to represent all possible embodiments consistent with the present invention. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present invention, as detailed in the appended claims.
[0052] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in the present invention are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the relevant laws, regulations and standards of relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.
[0053] With the popularization of computers, users usually use more computer services, such as searching for information, watching videos, browsing web pages, etc.
[0054] Users typically interact with the front-end page displayed on their computer. For example, they can download and run applications locally on their terminal to interact with the front-end page, or they can open a web page in a browser to interact with it.
[0055] However, the current page rendering flexibility is poor, resulting in a poor user experience.
[0056] For example, current front-end pages often do not have the ability to hot update, which may cause users to delay in obtaining the latest version of the front-end page, resulting in a poor user experience.
[0057] For example, for applications running locally on the terminal, since there is no ability to hot-update the front-end page, it is often necessary to delete the application and re-download the latest version of the application, resulting in a poor user experience.
[0058] In order to solve the above problem, an embodiment of the present invention provides a page rendering method.
[0059] In this method, an intermediate language file describing a page in an intermediate language is obtained. This intermediate language file is then parsed in real time, and corresponding control instances are created based on the results of the intermediate language parsing, allowing for real-time page rendering. The intermediate language can be a language that can be parsed into executable code, such as a custom language that facilitates parsing into executable code. It can also be highly interpretable for easy review by business personnel, and can be pseudocode.
[0060] Among them, the page is composed of controls. By creating a control instance and rendering the corresponding control, the page can be obtained.
[0061] Compared with conventional technology, which directly downloads the executable file of the page when downloading the application, resulting in the inability to update the page during operation, this method can render the page in real time by parsing the intermediate language file used to describe the page in real time, thereby improving the flexibility of page rendering and facilitating hot updates of the page.
[0062] Specifically, the intermediate language file obtained in this method can be obtained locally from the terminal, or the latest page version can be obtained from the server corresponding to the application for rendering.
[0063] For example, a file describing the latest page version in an intermediate language can be obtained from the server corresponding to the application. Then, the file can be parsed in real time, and a corresponding control instance can be created based on the parsing result of the intermediate language. The latest page version can be rendered in real time to achieve hot updates of the page.
[0064] Therefore, the method can render the page in real time by parsing the intermediate language file used to describe the page in real time, thereby improving the flexibility of page rendering and facilitating hot updates of the page.
[0065] In a specific example of page hot update, a hot update can be performed on a terminal application or a page in a browser. For example, the application can be updated by the developer, updating the layout of the page or the controls contained in the page; or the layout of the browser page or the controls contained in the browser page can be updated locally.
[0066] The following is a detailed explanation of a page rendering method provided by an embodiment of the present invention.
[0067] As shown in FIG1 , FIG1 is a flow chart of a page rendering method according to an embodiment of the present invention.
[0068] The embodiment of the present invention does not limit the execution subject of the method process. Optionally, the execution subject may include any one of the following: a terminal, an application, a browser, a server, etc.
[0069] The method may include the following steps.
[0070] S101: Obtain a Domain Specific Language (DSL) file for describing a target page.
[0071] Optionally, the target page can contain controls.
[0072] S102: parsing the acquired DSL file based on a preset DSL parsing module, creating a control tree structure including control instances; and rendering a target page according to the created control tree structure.
[0073] Optionally, the control instance in the control tree structure may include: a rendering function and DSL properties.
[0074] Optionally, the value of the DSL attribute may include: DSL data used to describe the corresponding control instance.
[0075] Optionally, the rendering function may be used to determine the current attribute value of the control instance according to the DSL data in the current attribute value of the DSL attribute, and render the corresponding control according to the current attribute value of the control instance.
[0076] The above method process can render the target page in real time by acquiring and parsing the DSL file used to describe the target page, thereby improving the flexibility of page rendering.
[0077] Among them, since the above method process renders the described target page according to the DSL file obtained in real time, the content of the rendered target page is highly flexible and can be flexibly changed according to the content of the DSL file.
[0078] Optionally, the target page can be the latest version of the page, so that the above method can be used to implement hot updates of the page during operation. Specifically, the DSL file describing the new page can be obtained in real time for parsing and page rendering, so that hot updates of the page can be implemented during operation.
[0079] In an optional embodiment, the target page can be rendered based on the Flutter framework, and the target page can be configured based on the Flutter framework. The Flutter framework has a cross-platform feature, so it can obtain versions for multiple platforms based on a single development, reducing the development cost of multiple platforms.
[0080] Optionally, the controls in the process of this method may include widgets, specifically widgets of the button, text, panel, list, image, etc.
[0081] The above method flow is explained in detail below.
[0082] 1. S101: Obtain a domain-specific language (DSL) file for describing a target page.
[0083] Optionally, the target page can contain controls.
[0084] 1) This method does not limit the specific form of the Domain Specific Language (DSL) or the specific format of the DSL file.
[0085] For example, for document writing tasks, lightweight markup language (Markdown) can be used as DSL language; for string matching tasks, regular expressions (RegExp) can be used as DSL language; for work process control tasks, dependency detection tool (Make) language or automated build tool (Gradle) language can be used as DSL language; for data search tasks, structured query language (SQL) can be used as DSL language; for web page (Web) style coding tasks, cascading style sheets (CSS) language can be used as DSL language, and so on. The code file written by DSL is also a DSL file. Accordingly, the specific format of DSL files corresponding to different DSL languages will also be different. This application does not limit the specific programming language used by DSL files and the format of DSL files.
[0086] Optionally, the domain specific language may include any one of the following: pseudo code, a user-defined programming language, Chinese, etc. Optionally, the format of the DSL file may be a json format or other formats.
[0087] Optionally, the DSL file can be used as an intermediate language file to facilitate real-time parsing of the process and creation of corresponding control instances.
[0088] Therefore, the language or format of the DSL file itself is not limited, as long as the process can parse the DSL file and render the target page described by the DSL file.
[0089] 2) This method does not limit the method and source of obtaining the DSL file.
[0090] Optionally, the DSL file may be obtained locally or externally, specifically, the DSL file may be obtained from a server or other device.
[0091] Optionally, the execution subject of the present method process may be a terminal application. In order to realize hot update of pages in the terminal application, a DSL file issued by the server corresponding to the terminal application may be obtained. The DSL file may be used to describe the latest version of the target page, thereby enabling the terminal application to render the latest version of the target page through the present method process, thereby realizing hot update of the page.
[0092] Optionally, the DSL file may also be obtained locally, specifically, it may be a pre-downloaded DSL file, which is obtained locally for rendering and display when the target page needs to be displayed.
[0093] 3) About the development process of the target page.
[0094] This method does not limit the number of target pages. Optionally, the target page can include one or more pages. Of course, this method can be interpreted as the rendering process of a single page, while the rendering process of multiple pages can also be rendered using this method. The specific details can be obtained through simple reasoning.
[0095] This method does not limit the configuration method of the target page during the development process.
[0096] The target page usually requires business personnel to design and configure it so that the target page can be published or updated.
[0097] Optionally, the target page can be configured by a developer directly writing executable code; or it can be configured through a visualization platform.
[0098] The visualization platform can be used to configure page information according to user interaction operations. This embodiment does not limit specific interaction operations and page information.
[0099] Optionally, the page configuration information may include at least one of the following: control information, event information, and data information.
[0100] Optionally, you can configure the control information contained in the page, such as control layout information, control size, control content, etc. You can also configure event information and data information in the page, such as jump events between different pages, control interaction events, and parameter data passed within the page. Specifically, you can perform event binding and data binding.
[0101] Optionally, the interactive operation of the business personnel may include at least one of the following: a control dragging operation, an event binding operation, a data binding operation, a configuration operation, a control size adjustment operation, and the like.
[0102] In a specific example, business personnel can interact with the visualization platform, first setting the overall background panel size and configuring its content, such as an image. They can then design the overall page layout by dragging and dropping controls and adjusting their position and size. They can also design the page's operational logic and functionality by binding events and data.
[0103] This embodiment can lower the development threshold for business personnel and improve the convenience of business personnel in configuring the page through the visualization platform.
[0104] 4) About how to generate DSL files.
[0105] This method does not limit the generation method of the DSL file.
[0106] Alternatively, a business person may directly edit the DSL file used to describe the target page.
[0107] For example, the DSL file may adopt pseudo code, so that business personnel can edit the pseudo code for describing the page as the DSL file.
[0108] Optionally, the configuration information of the page may be converted into a DSL file, specifically by using the configuration information of the page in the visualization platform for conversion.
[0109] Optionally, the method for generating a DSL file may include: acquiring configuration information of a target page; and converting the configuration information into a DSL file based on a preset DSL conversion module.
[0110] This embodiment can improve the efficiency of generating DSL files by automatically converting the configuration information of the target page into a DSL file.
[0111] This embodiment does not limit the specific configuration information content.
[0112] Optionally, the configuration information may include at least one of the following: control information, event information, and data information. The specific form of the control information may not be limited.
[0113] Optionally, according to the description of S102 in the process of this method, since it is necessary to parse the DSL file and create a control tree structure, the configuration information may include information about the control tree structure. The configuration information may specifically include the code of each control instance in the control tree structure and the parent-child relationship between each control instance.
[0114] The information of the control tree structure may be generated according to a page configured on the visualization platform.
[0115] For example, business personnel can configure a target page through a visual platform, where the various controls in the layout can form a tree structure at the code level, making it easy to generate corresponding control instance code and combine it into the code of the control tree structure. The code here can specifically be executable code.
[0116] This embodiment does not limit the form of the DSL conversion module, as long as it can convert the configuration information of the target page into a DSL file for describing the target page.
[0117] In an optional embodiment, the conversion of the control instance code can be performed according to the type of the control, which facilitates the development of a DSL conversion module and the development of different conversion logics for different control types.
[0118] Optionally, the DSL conversion module may include: a DSL control conversion submodule corresponding to the control type. The DSL conversion module may include one or more DSL control conversion submodules, and different DSL control conversion submodules may correspond to different control types.
[0119] Optionally, the DSL control conversion submodule may be used to convert the control instance code of the corresponding control type into DSL data for describing the control instance of the corresponding control type.
[0120] This embodiment can use the control type to distinguish different conversion logics, thereby reducing development difficulty and facilitating subsequent code updates and verification.
[0121] Of course, this embodiment mainly describes the control information in the page configuration information, and event information or data information can also be converted separately through the DSL conversion module.
[0122] Specifically, the event binding information may be converted into DSL data for describing the event binding situation, and the data binding information may be converted into DSL data for describing the data binding situation.
[0123] Optionally, the DSL conversion module may be configured to: synthesize the DSL data converted by each conversion submodule to obtain a DSL file.
[0124] The method flow does not limit the specific logic of converting the target page configuration information into DSL data.
[0125] Optionally, for a control in the target page configuration information, information of the control may be converted into DSL data, specifically by using a template.
[0126] Optionally, different DSL format templates corresponding to different control types are preset. For any control in the configuration information, the information of the control can be filled into the DSL format template corresponding to the control type to obtain DSL data used to describe the control, that is, the DSL data corresponding to the control.
[0127] After that, you can integrate the parent-child relationship between controls, event binding information, data binding information, etc. to get the DSL file.
[0128] 2. S102: parsing the obtained DSL file based on a preset DSL parsing module, creating a control tree structure including control instances; and rendering the target page according to the created control tree structure.
[0129] Optionally, the control instance in the control tree structure may include: a rendering function and DSL properties.
[0130] Optionally, the value of the DSL attribute may include: DSL data used to describe the corresponding control instance.
[0131] Optionally, the rendering function may be used to determine the current attribute value of the control instance according to the DSL data in the current attribute value of the DSL attribute, and render the corresponding control according to the current attribute value of the control instance.
[0132] 1) About parsing DSL files.
[0133] This method does not limit the parsing method of the DSL file.
[0134] Optionally, different types of DSL data in the DSL file may be parsed separately, or the DSL file may be parsed uniformly.
[0135] Optionally, a preset DSL parsing module may be called for parsing.
[0136] This embodiment does not limit the source and form of the DSL parsing module, as long as the DSL parsing module can be used to parse the DSL file.
[0137] Optionally, the DSL parsing module may be issued by the server or deployed locally on the device.
[0138] Optionally, the DSL parsing module may include multiple submodules for respectively parsing different types of DSL data in the DSL file. The DSL parsing module may also include multiple branch logics for respectively parsing different types of DSL data in the DSL file.
[0139] This embodiment does not limit the deployment of the DSL parsing module. Optionally, the DSL parsing module can be deployed in a process or in a local storage area of a device for easy invocation.
[0140] In an optional embodiment, the method flow does not limit the DSL data type contained in the DSL file.
[0141] Optionally, since the DSL file is used to describe the target page, and the page may generally include controls, events, and data for display, the DSL file may include at least one of the following: control information, event information, and data information.
[0142] Optionally, when parsing the DSL file, the DSL parsing module may parse the control information, event information, and data information separately, or may parse the control information, event information, and data information comprehensively.
[0143] Regarding the control information, optionally, since the controls displayed on the page include different control types, such as buttons, text, images, etc., different control types may have different parsing methods or parsing results, for example, the bound event types and data types may be different.
[0144] Therefore, different branching logics can be used to determine the control type before parsing, or different parsing sub-modules can be used to parse different control types.
[0145] Optionally, the DSL parsing module includes a DSL control parsing submodule corresponding to a control type. The DSL control parsing submodule can be used to parse DSL data describing a control instance of a corresponding control type and create the corresponding control instance.
[0146] Different DSL control parsing submodules may correspond to different control types and may be used to parse DSL data used to describe a control instance of a corresponding control type and create the corresponding control instance.
[0147] Optionally, parsing the obtained DSL file based on a preset DSL parsing module may include: calling a DSL control parsing submodule corresponding to the target control type in the preset DSL parsing module to parse the DSL data in the obtained DSL file that is used to describe a control instance of the target control type.
[0148] In this embodiment, DSL data used to describe control instances of corresponding control types in a DSL file can be parsed through multiple DSL control parsing submodules. By using control types to distinguish different conversion logics, development difficulty is reduced and subsequent code updates and verification are facilitated.
[0149] This method does not limit the specific logic of converting DSL data into control instances.
[0150] Optionally, the DSL data corresponding to any control instance in a DSL file can include information about the control instance type and corresponding control property values. Specifically, it can have a fixed format (for example, fixed field names and corresponding values, fixed data locations, etc.). The DSL data corresponding to different control instances of the same type can have the same format to facilitate subsequent parsing of the DSL data by rendering functions.
[0151] Optionally, conversion can be performed based on code templates. Specifically, a preset control instance code template can be used to populate the DSL data corresponding to any control instance in the DSL file into the code template corresponding to the control instance type. The control instance code template can include DSL attributes and rendering functions. Specifically, the DSL data can be populated into the DSL attributes to facilitate the subsequent execution of the rendering function. The control attribute values can be parsed from the DSL data and used to render the control.
[0152] Therefore, the DSL parsing module may include a preset control instance code template, which may specifically be a template in the form of executable code.
[0153] Optionally, the code template of a control instance may correspond to the type of the control instance, and different control types may correspond to different control instance code templates. The code template of a control instance may include DSL properties and rendering functions.
[0154] Optionally, when parsing a DSL file based on the DSL parsing module, a template corresponding to the control instance type can be determined for the DSL data corresponding to any control instance in the DSL file, and the DSL data can be filled into the DSL attributes in the determined template to create a control instance, which can specifically be a control instance in the form of executable code.
[0155] Of course, in an optional embodiment, different types of control instance code templates may contain different attributes. For example, a text-type control instance code template may contain attributes such as text content and text font, while an image-type control instance code template may contain attributes such as image resolution.
[0156] Correspondingly, in different types of control instance code templates, the specific implementation logic of the rendering function may be different, and may be specifically used to implement control property assignment and control rendering of the corresponding control instance type.
[0157] 2) Create a control tree structure containing control instances,
[0158] This method does not limit the creation method of the control tree structure.
[0159] Optionally, a control tree structure containing control instances may be created based on the parsing result of the DSL file.
[0160] Alternatively, you can create corresponding control instances based on the control-related DSL data in the DSL file parsing results, and determine the parent-child relationship between the control instances, thereby obtaining a control tree structure. For details, please refer to the above explanation.
[0161] Optionally, the DSL data related to the control in the parsing result of the DSL file may include control information nested according to the parent-child relationship between controls, so that corresponding control instances can be recursively created based on the DSL data related to the control, and during the creation process, the parent-child relationship between the control instances can be clarified to obtain a control tree structure.
[0162] In an optional embodiment, the DSL file may include at least one of the following: control information for describing a control tree structure, event binding information, and data binding information.
[0163] Optionally, in the above method flow, before parsing the obtained DSL file, the following steps may also be included: initialization generation: data parsing processing module, event parsing processing module and page generation module; saving event binding information in the DSL file to the event parsing processing module; saving data binding information in the DSL file to the data parsing processing module; saving control information in the DSL file to the page generation module.
[0164] Optionally, the DSL parsing module may include: a data parsing and processing module, an event parsing and processing module, and a page generating module.
[0165] In the subsequent parsing process, the data parsing processing module, the event parsing processing module and the page generation module can respectively parse the information in the saved DSL file to perform event binding, data binding and creation of control instances.
[0166] Optionally, parsing the acquired DSL file and creating a control tree structure including control instances may include: calling a page generation module, parsing control information, and creating a control tree structure including control instances.
[0167] The above embodiment can improve parsing efficiency and reduce development difficulty by utilizing different modules to parse control information, event binding information, and data binding information respectively.
[0168] The present method is not limited to control instances. Optionally, the control instance may include a widget, specifically a basic element widget (eg, Text, Image, Button, etc.) and a layout element widget (eg, Align, Stack, etc.).
[0169] In an optional embodiment, to facilitate subsequent page rendering and dynamic page updates, the control instance in the control tree structure may include: a rendering function and DSL properties.
[0170] Optionally, each control instance in the control tree structure may include: a rendering function and DSL properties.
[0171] The DSL attribute can be used to store the DSL data that currently describes the control instance. The DSL data can be in JSON format or key-value pair format.
[0172] The rendering function can be used to parse the DSL data in the DSL attribute values of the control instance, so as to obtain the attribute values describing the control instance in the DSL data, such as the type, size, color, transparency, etc. of the control instance, and further render and display it.
[0173] Of course, this form can facilitate the update of DSL data in the DSL attribute value in the control instance, and after the update is completed, the rendering function is executed again for rendering and display, thereby realizing dynamic update of the page.
[0174] Therefore, the value of a DSL attribute can optionally include DSL data describing the control instance. Optionally, the rendering function can be used to determine the current attribute value of the control instance based on the DSL data in the current value of the DSL attribute, and render the corresponding control based on the current attribute value of the control instance.
[0175] Of course, for more specific explanations of page rendering and page updates, please refer to the following text.
[0176] Furthermore, optionally, since the target page may include multiple pages, the correspondingly created control tree structure may include multiple control tree structures, each used to render a different page in the target page.
[0177] 3) Render the target page.
[0178] After creating a control tree structure containing control instances, the target page can be rendered.
[0179] This method does not limit the specific rendering method of the target page.
[0180] Optionally, the target page can be rendered according to the created control tree structure.
[0181] Optionally, corresponding controls may be rendered according to the created control tree structure, thereby rendering the target page.
[0182] Optionally, a rendering function in the control instance may be executed to parse the DSL data in the DSL attribute value of the control instance, render the corresponding control, and thus render the target page.
[0183] In an optional embodiment, for a control instance in a control tree structure, the corresponding control may be rendered by executing a rendering function therein, thereby achieving page rendering.
[0184] This embodiment does not limit the execution of the rendering function.
[0185] Optionally, the rendering function can be a constructor, so that the rendering function can be executed during the process of creating a control instance; the rendering function can also not be a constructor and need to wait for calling, so that the rendering function of the control instance in the control tree structure can be called when the target page needs to be rendered.
[0186] Optionally, the rendering function may include a constructor; specifically, the rendering function may be a constructor, so that the constructor (i.e., the rendering function) may be directly executed during the process of creating a control instance. Therefore, rendering the target page according to the created control tree structure may include: during the process of creating the control tree structure, executing the constructor of the included control instance, rendering the corresponding control, and obtaining the target page.
[0187] Optionally, rendering the target page may also include, in the process of creating the control instance, executing the constructor of the created control instance, rendering the corresponding control, and obtaining the target page.
[0188] Optionally, in the specific process of rendering the target page, the constructor of each control instance in the control tree structure may be executed to render the corresponding control to obtain the target page.
[0189] This embodiment can utilize the characteristics of the constructor to directly perform page rendering during the process of creating a control instance, thereby improving rendering efficiency.
[0190] Optionally, when executing the initialization of the target page, the rendering function may be called to render the page, and the initialization of the page may include initialization updates of the controls.
[0191] Therefore, optionally, rendering the target page according to the created control tree structure may include: executing the initialization event of the target page; determining the initial control instance that needs to be updated based on the execution result of the initialization event, and updating the DSL data in the determined initial control instance; executing the rendering function of the control instance in the control tree structure, rendering the corresponding control, and obtaining the target page.
[0192] This embodiment also does not limit the number of initial control instances that need to be updated. Specifically, it can be 0, that is, no control instance needs to be updated; or it can be one or more, so that the page rendering can be performed after the DSL data is updated based on the initialization event.
[0193] This embodiment does not limit the specific form of the initialization event. Optionally, the initialization event may include at least one of the following: an initial parameter acquisition event for acquiring initial parameters of a page, a control update event for updating page controls, a parameter update event for updating page parameters, and the like.
[0194] Optionally, in the specific process of rendering the target page, the rendering function of each control instance in the control tree structure may be executed to render the corresponding control to obtain the target page.
[0195] It should be noted that, since this page rendering is initialization rendering, it is not necessary to distinguish whether the control instance has been updated. The rendering function of the control instance in the control tree structure can be directly executed to perform page rendering.
[0196] This embodiment can utilize the initialization event of the target page to trigger the execution of the rendering function, thereby achieving page rendering and improving the stability of page rendering.
[0197] In an optional embodiment, since the initialization event of the target page may need to update the page, for example, the initialization event of the target page may need to obtain real-time version update information from the server to check whether the version needs to be updated. Therefore, for the embodiment in which the rendering function is a constructor, the page can be further updated according to the initialization event.
[0198] Optionally, the rendering function may specifically be a constructor, and rendering the target page may include: in the process of creating the control tree structure, executing the constructor of the included control instance, rendering the corresponding control, and obtaining the target page.
[0199] Furthermore, the method process may also include the following steps: executing the initialization event of the target page; determining the initial control instance that needs to be updated based on the execution result of the initialization event, and updating the DSL data in the determined initial control instance; executing the rendering function of the updated initial control instance, updating the corresponding control in the rendering target page, thereby realizing page update.
[0200] This embodiment can update page rendering based on the initialization event, thereby improving the efficiency of page initialization and the display effect.
[0201] 3. Update the target page.
[0202] The above embodiment explains the steps of parsing the obtained DSL file, creating a control tree structure, and rendering the target page.
[0203] After rendering the target page, the layout or display of the target page may need to be updated due to business changes or version updates, which may require updating the rendering of the target page. Of course, the layout or display of the target page may also need to be updated due to the execution of local device events, such as displaying relevant results in a list when querying data, which may require updating the rendering of the target page.
[0204] Optionally, at least one of the following items in the target page may be updated: event binding information, data binding information, and controls.
[0205] This method does not limit the specific update method and specific update content of the target page.
[0206] Optionally, event binding update information may be obtained to update the event binding information configured in the target page.
[0207] For example, for page jump events, as new pages are added, events for jumping to new pages can be added.
[0208] Optionally, data binding update information may be obtained to update the data binding information configured in the target page.
[0209] For example, for a button with updated functionality, you can update the display text bound to the button.
[0210] In an optional embodiment, for controls that need to be updated in the target page, the corresponding control instance can be determined, the DSL data therein is updated, and the rendering function therein is re-executed to update, thereby eliminating the need to update the entire target page, thereby improving update efficiency and accuracy.
[0211] Specifically, only the controls that need to be updated in the target page may be updated, without updating other controls that do not need to be updated in the target page.
[0212] Optionally, the above method flow may further include: updating the target page, which may specifically include: obtaining control update data; determining the target control instance that needs to be updated based on the obtained control update data, and updating the DSL data in the target control instance; executing the rendering function in the updated target control instance, and updating the control corresponding to the target control instance in the rendering target page.
[0213] This embodiment can update data through controls and update DSL data in control instances, thereby achieving dynamic updates of pages, and can improve update efficiency and accuracy by updating only controls that need to be updated for rendering.
[0214] 1) About the control to update data.
[0215] This embodiment does not limit the specific form and content of the control update data, as long as the target control instance to be updated can be determined according to the control update data, and the DSL data in the target control instance can be updated.
[0216] Optionally, the control update data may be in the form of DSL data or key-value pairs.
[0217] Optionally, the control update data may include at least one of the following: target control instance information representing the need to be updated, property information representing the need to be updated of the control instance, property value results representing the need to be updated of the control instance, etc.
[0218] Optionally, the control update data may include an identifier of the target control instance and new DSL data that needs to be updated for the target control instance, so that the corresponding target control instance can be determined based on the identifier of the target control instance in the control update data, and the new DSL data in the control update data can be directly used to replace the original DSL data in the target control instance.
[0219] Optionally, the control update data may include multiple sets of data in the form of key-value pairs, specifically including the identifier of the target control instance, the property to be updated, and the corresponding new property value. Thus, based on the identifier of the target control instance in the control update data, the corresponding target control instance can be determined. Furthermore, based on the properties to be updated in the control update data, the corresponding new property values can be used to replace the original property values in the target control instance.
[0220] This embodiment does not limit the specific method of updating the DSL data in the target control instance according to the control update data, and the specific method can be determined according to the content of the control update data.
[0221] Optionally, for a DSL-formatted control, update data can be directly updated into the DSL data of the target control instance.
[0222] Optionally, for control update data in the form of key-value pairs, after matching and determining the corresponding attribute in the target control instance, the attribute value can be updated to the attribute value in the control update data.
[0223] This embodiment does not limit the method for obtaining control update data.
[0224] Optionally, it can be obtained from other devices or locally.
[0225] Alternatively, the control update data may be obtained from the server. For example, the server stores the latest page version of the business update, which can be sent to the terminal for page update.
[0226] Alternatively, you can obtain control update data from local event execution results. For example, after obtaining the results of local query data, you can update and display a list control.
[0227] Therefore, optionally, the execution subject of the process of the present method may be a terminal, and the terminal may correspond to a server, specifically a server corresponding to the business. The terminal may specifically be a client.
[0228] Optionally, obtaining control update data may include: obtaining control update data according to a local event execution result; and / or obtaining control update data sent by an external device.
[0229] This embodiment is not limited to an external device, and specifically may be a server corresponding to a terminal. Therefore, correspondingly, obtaining control update data may include: obtaining control update data based on an event execution result in the terminal; and / or obtaining control update data sent by a server corresponding to the terminal.
[0230] Optionally, obtaining control update data may include: obtaining control update data according to an event execution result in the client; and / or obtaining control update data sent by a server corresponding to the client.
[0231] This embodiment can obtain control update data through the local event execution result of the terminal, or obtain control update data from the server corresponding to the terminal, thereby improving the flexibility of obtaining control update data and making the control update more tailored to the business.
[0232] In an optional embodiment, in order to conveniently reduce development costs, a visual page configuration update can be used when configuring the update page. The generation principle of the DSL file is further utilized, and a DSL conversion module is used to convert the visual page configuration update into DSL data in DSL form as control update data.
[0233] Optionally, the method for generating control update data may include: acquiring property update information of the control to be updated; and converting the acquired property update information into control update data in DSL format based on a preset DSL conversion module.
[0234] This embodiment does not limit the method for obtaining the property update information of the control to be updated.
[0235] Optionally, the property update information of the control to be updated can be obtained based on the local event execution result of the executing entity; the property update information of the control to be updated can be determined based on the visual page configuration update; or the property update information of the control to be updated can be obtained from the server in the form of key-value pairs.
[0236] Optionally, the method for generating control update data can be executed on an external device or locally, which is not limited in this embodiment.
[0237] Converting the property update information into control update data in DSL format can facilitate updating the DSL data in the control and improve update efficiency.
[0238] This embodiment does not limit the specific updating method.
[0239] Optionally, when the control update data only includes property update information, the control update data can be used to replace the corresponding property data in the DSL data of the control instance to be updated; when the control update data includes all DSL data of the control to be updated, the DSL data of the control instance to be updated can be directly replaced with the control update data.
[0240] In this embodiment, the DSL conversion module can uniformly convert the attribute update information into data in the form of DSL, thereby improving the efficiency of control update.
[0241] 2) About the execution of the rendering function.
[0242] This method does not limit the execution method of the rendering function.
[0243] Optionally, since the rendering function needs to be re-executed for updated rendering, the rendering function in the control instance can be directly called to execute the control rendering to achieve page updated rendering.
[0244] Optionally, in the case where the rendering function is a constructor, the constructor may be re-executed to update the rendering. Specifically, the destructor may be executed first, and then the constructor may be re-executed.
[0245] Optionally, when the rendering function is not a constructor, the rendering function may be directly called to re-render the control.
[0246] In an optional embodiment, a state instance for calling and executing a rendering function may be created for a control instance, and the update rendering of the control instance may be indirectly controlled through the state instance.
[0247] Optionally, the method may further include: when creating a control instance, creating a corresponding state instance; different control instances correspond to different state instances; and the state instance has the ability to execute a rendering function in the corresponding control instance.
[0248] Optionally, executing the rendering function in the updated target control instance may include: calling a state instance corresponding to the target control instance, and executing the rendering function in the updated target control instance.
[0249] Optionally, in the flutter scenario, the control instance may be a widget, and the state instance may be a corresponding state, specifically a state set as a public state, to facilitate calling the state to execute the rendering function of the corresponding widget.
[0250] Optionally, different control instances may correspond to different state instances.
[0251] This embodiment can indirectly execute the rendering function of the corresponding control instance through the state instance, thereby improving the security of the rendering function execution.
[0252] Furthermore, optionally, the state instance can also be used to update the DSL data in the corresponding control instance, so that the state instance can execute the entire update process for the corresponding control instance.
[0253] Optionally, the state instance can also be used to update the DSL property value of the corresponding control instance; updating the DSL data in the target control instance may include: calling the state instance corresponding to the target control instance to execute: updating the DSL data in the target control instance according to the control update data.
[0254] This embodiment can update the DSL data of the corresponding control instance through the state instance, thereby improving the security of DSL data update.
[0255] 4. Events
[0256] In this method, there may be various events for the rendered target page, such as page jump events, query events, data acquisition events, and the like.
[0257] This method does not limit the specific form and triggering conditions of the event.
[0258] Optionally, for events triggered by control operations, in order to facilitate overall management, the root node of the control tree structure can be set as the notification center to facilitate finding the control information triggered by the operation and sending the relevant information triggered by the operation to the event processing module.
[0259] Optionally, the root node of the control tree structure may include a notification center control instance; the notification center control instance may be used to: send information of the interacted control instance to the event parsing processing module based on the received control interaction event, trigger the event parsing processing module to execute the corresponding operation event, and obtain the event execution result; the event parsing processing module may include: a set of correspondences between control instance information and operation events.
[0260] This embodiment does not limit the root node form and creation method of the control tree structure. Optionally, after determining the control tree structure based on the created control instance, a parent node can be added to the current root node as a new root node, and the new root node can be set as the notification center.
[0261] This embodiment does not limit the form of the control interaction event, for example, clicking a button, double-clicking a button, clicking an image, etc.
[0262] This embodiment does not limit the form of the control instance information. Optionally, the control instance information may include at least one of the following: a control instance identifier, a control instance type, an interaction type, an operation type, and the like.
[0263] For ease of understanding, for example, the control instance information can be used to represent clicking a "query" button and double-clicking a "specify" icon.
[0264] This embodiment does not limit the specific form of the event analysis processing module. Optionally, the event analysis processing module can be used to analyze the control instance information, determine the corresponding operation event and execute it to obtain the event execution result.
[0265] In a specific embodiment, the interacted control may be a query button, and the notification center control instance may send information about the query button to the event parsing and processing module.
[0266] The event parsing processing module may include a correspondence between query buttons and data query operations, so that corresponding data query operations can be executed based on the interaction of query buttons, and the table control can be further updated according to the event execution results to display the query results.
[0267] This embodiment can set the root node of the control tree structure as the notification center, and can quickly determine the corresponding control instance for the control interaction event, thereby improving the processing efficiency of the control interaction event.
[0268] Corresponding to the above-mentioned page rendering method for actual page rendering, embodiments of the present invention also provide another page rendering method, specifically a method for generating a DSL file for page rendering, and a page rendering method integrating both sides.
[0269] As shown in FIG2 , FIG2 is a flow chart of another page rendering method according to an embodiment of the present invention. The method can be applied to a development end. The development end can specifically be a terminal operated by a developer.
[0270] The method may include the following steps.
[0271] S201: Obtain configuration information of the target page.
[0272] Optionally, the configuration information may include information about the control tree structure.
[0273] S202: Based on a preset DSL conversion module, the acquired configuration information is converted into a domain specific language DSL file for describing the target page.
[0274] Optionally, the parsing result of the DSL file can be used to create a control tree structure containing control instances; the created control tree structure is used to render the target page.
[0275] Optionally, the control instance in the control tree structure may include: a rendering function and DSL properties.
[0276] Optionally, the value of a DSL attribute may include: DSL data used to describe the corresponding control instance; the rendering function may be used to: determine the current attribute value of the corresponding control instance based on the DSL data in the current value of the DSL attribute, and render the corresponding control based on the current attribute value of the corresponding control instance.
[0277] In the process of this method, the converted DSL file can be used to create a control tree structure containing control instances after being parsed, so as to facilitate the subsequent rendering of the target page. It can also render the target page in real time by parsing the DSL file, thereby improving the flexibility of page rendering.
[0278] Furthermore, this method and process can be specifically applied to a development platform, specifically a visual page configuration platform, facilitating development through visual page configuration. This allows for real-time parsing of DSL files generated by the developer for rendering the target page, improving page rendering flexibility.
[0279] This method does not limit how to store the converted DSL file.
[0280] Optionally, the developer can upload the DSL file to the server, so that the terminal that needs to render the target page can obtain the DSL file from the server for parsing and rendering.
[0281] Specifically, the DSL file and the preset DSL parsing module can be packaged into a program package and stored on the server. The terminal can download the program package from the server, parse and run it, and render the target page.
[0282] Further explanation of the process of this method can be found above.
[0283] As shown in FIG3 , FIG3 is a flow chart of another page rendering method according to an embodiment of the present invention.
[0284] The method may include steps performed by a development end and steps performed by a rendering end. The development end may specifically be a terminal operated by a developer. The rendering end may specifically be a terminal that renders a target page, for example, an application terminal.
[0285] The method may include the following steps.
[0286] S301: The development end obtains the configuration information of the target page.
[0287] Optionally, the configuration information may include information of the control tree structure.
[0288] S302: The development end converts the configuration information into a domain specific language DSL file for describing the target page based on a preset DSL conversion module.
[0289] S303: The rendering end obtains a DSL file, and parses the obtained DSL file based on a preset DSL parsing module to create a control tree structure containing control instances; and renders the target page according to the created control tree structure.
[0290] Optionally, the control instance in the control tree structure may include: a rendering function and DSL properties.
[0291] Optionally, the value of a DSL attribute may include: DSL data used to describe the corresponding control instance; the rendering function may be used to: determine the current attribute value of the corresponding control instance based on the DSL data in the current value of the DSL attribute, and render the corresponding control based on the current attribute value of the corresponding control instance.
[0292] In the process of this method, the rendering end can obtain the converted DSL file for subsequent parsing and target page rendering, so that the target page can be rendered in real time by parsing the DSL file, thereby improving the flexibility of page rendering.
[0293] This method does not limit how the rendering end obtains the DSL file.
[0294] Optionally, the development side can upload the DSL file to the server side, so that the rendering side that needs to render the target page can obtain the DSL file from the server side for parsing and rendering.
[0295] Specifically, the DSL file and the preset DSL parsing module can be packaged into a program package and stored on the server. The rendering end can download the program package from the server, parse and run it, and render the target page.
[0296] Further explanation of the process of this method can be found above.
[0297] For ease of understanding, the embodiment of the present invention further provides an application embodiment.
[0298] First, a few concepts are explained.
[0299] Flutter: A cross-platform framework.
[0300] Widget: Every UI component in the Flutter framework is a widget, such as text, image, button, etc.
[0301] State: The state of the widget. When the widget is initialized, the corresponding State is generated to update the widget's display status and data.
[0302] DSL: A domain-specific language (DSL) is a language designed for use in a specific domain context. This embodiment may use JSON.
[0303] Microprogram: A business module with dynamic generation and hot update. It can be as small as a single page or as large as a functional module consisting of multiple pages.
[0304] Dart: Flutter's development language and Flutter code file format.
[0305] WidgetID: The unique ID of each widget.
[0306] JsonPath: The path of a field in the Json tree structure. For example, the JsonPath of the color field in Figure 3 is "$['style']['color']".
[0307] EventCenter: event analysis and processing module
[0308] DataCenter: data analysis and processing module
[0309] Init: Page initialization event. Enter the process of obtaining data and rendering the page.
[0310] Click: User click event.
[0311] With the development of electronic technology and the Internet of Things, the performance of terminal devices (mobile devices, display devices TV, etc.) is becoming more and more powerful, and various platforms need to interact, which directly leads to the increasing package size of terminal applications (high-definition images, various 3D engines, etc.).
[0312] Since terminal applications, unlike web applications, can be deployed in the cloud, hot updates and version updates have become a huge pain point.
[0313] Flutter's cross-platform development solution allows applications developed based on this framework to run simultaneously on iOS, Android, Web, and Windows devices. However, Flutter lacks the dynamic page generation capabilities of the Web.
[0314] This embodiment leverages Flutter's cross-platform nature to dynamically generate pages across platforms by parsing Flutter's basic widgets. Specifically, based on Flutter's cross-platform nature, the platform can package terminal applications by parsing Flutter's basic components into a DSL intermediate language, which is then parsed into executable files on each platform terminal.
[0315] Flutter cross-platform principle:
[0316] The Flutter architecture adopts a layered design and is divided into three layers from bottom to top: Embedder, Engine, and Framework.
[0317] The Embedder is the operating system adaptation layer, implementing platform-specific features such as rendering surface settings, thread settings, and platform plug-ins. As we can see, Flutter does not have many platform-specific features, which makes the cost of maintaining cross-device consistency at the framework level relatively low.
[0318] The Engine layer primarily includes Skia, Dart, and Text, implementing Flutter's rendering engine, text layout, event handling, and Dart runtime. Skia and Text provide upper-layer interfaces with the ability to call underlying rendering and layout functions, while Dart provides Flutter with the ability to call Dart and the rendering engine during runtime. The Engine layer combines these components to implement view rendering based on the data they generate.
[0319] The Framework layer is a UI SDK implemented in Dart, including features such as animation, graphics drawing, and gesture recognition. To provide a more intuitive and convenient interface for drawing fixed-style graphics such as controls, Flutter also builds on these fundamental capabilities and encapsulates a set of UI component libraries based on the Material and Cupertino visual design styles. These component libraries can be directly used when developing in Flutter.
[0320] Simply put, Flutter encapsulates the upper-layer UI through the underlying rendering of the system to achieve cross-platform UI consistency.
[0321] Based on this, this embodiment develops a dynamic framework to realize the dynamic generation and update of Flutter pages (named as micro-programs). The following will explain in detail from the aspects of UI pages, data binding, event binding, etc.
[0322] 1. Microprogram page DSL composition and analysis:
[0323] The DSL description file of a microprogram page can be mainly divided into 4 parts.
[0324] 1) The Layout field indicates the overall page layout, namely the size and position of each component and the default data.
[0325] 2) The Events field represents the event description set of the entire page. Each event uses WidgetID as the key, including EventParameters-event parameters and TargetWidget-target Widget, which are used for subsequent EventCenter parsing and event execution.
[0326] 3) The Parameters field represents the page initialization parameters and the parameters passed for page jumps in Key-Value format. It is saved in DataCenter for parsing and storage, and is used as the input parameters when executing page initialization events.
[0327] 4) The Other field represents some other fields, including the page's unique ID, Title, and route name, etc., which are used for page route jumps.
[0328] To develop a Flutter program normally, you need to create business dart files and statically compile them into the program package.
[0329] If you want to dynamically generate pages, you need to dynamically generate the pages based on the page description (DSL) requested by the network while the program (Dart file) is running. Therefore, you cannot deploy the Dart file to the cloud and send it down. Instead, you need to convert the Dart file into a DSL, upload it to the cloud, send it down to the program via the network, and then use Dart to convert the DSL into a page.
[0330] The interface of a terminal application is nothing more than a collection of text, pictures, buttons, input boxes, and lists. On the Flutter side, the layout is a tree structure.
[0331] For example, a login page has a Container as its root node, a Column as its child node, and Column's child nodes include Text(BOE), Text(Welcome to the Smart Refrigerator Management System), Button(Login), etc. The input box is a Row, and its child nodes include a TextField(input box) and a Button(close button).
[0332] The dynamic generation of micro-program pages requires putting the above tree-structured pages into the cloud (similar to the Web). The page storage format, delivery format, and runtime parsing and generation process after delivery require the use of the DSL dynamic parsing framework of this embodiment.
[0333] The core of the DSL dynamic framework is the following six modules.
[0334] 1. Widget to DSL: Parse Widget into DSL object--Export method
[0335] Each Widget corresponds to an Export method, which is responsible for converting various properties into DSL objects and storing them in the Parser parsing pool.
[0336] Taking a single Text as an example, the entire Text Widget is converted into a DSL object by parsing the various properties of the Text.
[0337] 2. DSL to Widget: Parse DSL objects into corresponding Widget-Parser methods
[0338] Each Widget corresponds to a Parser method, which is responsible for converting the DSL object into the various properties of the Widget and storing them in the Parser parsing pool.
[0339] 3. Parser pool: A collection of Parser parsers for all Widgets in a DSL. Using type as the key, the parsing process searches based on the type field in the DSL.
[0340] 4. Build method: the main method of dynamic page generation process.
[0341] According to the DSL file, recursively traverse all nodes starting from the root node of the Widget tree. Based on the node type, find the parser of that node type in the Parser parsing pool, parse it, and obtain the corresponding widget instance. Then continue traversing the child nodes (child, children) of the node, find the parser of the child node based on the type, and continue parsing to obtain the widget instance until the last level of the Widget tree. At this point, the entire page Widget tree is generated and rendered.
[0342] Correspondingly, for the page configured during the development process, you can also recursively traverse all nodes starting from the root node based on the widget tree in the page, use the export method to convert it, and obtain DSL data that can represent the widget tree.
[0343] 5. EventCenter: The event center of the page, a collection of page initialization events and runtime user interaction behaviors. Stored in a key-value format, the key is the widget ID and the value is the event description collection.
[0344] 6. DataCenter: The data center of the page. The page initialization data and data generated during runtime are stored in a key-value format. The key is the widget ID, and the value is a data set including network request data and widget DSL data.
[0345] 2. Widget data binding and parsing
[0346] After the UI page in the first step is completed, the page has the ability to render and display static data. However, in actual business, the page displays dynamic data, such as a list that obtains data from the server through network requests and displays it.
[0347] If the micro program page is to display dynamic data, each widget needs to be given the ability to dynamically obtain data. Based on this, this embodiment designs a base class DSLBaseWidget.
[0348] DSLBaseWidget contains a jsonMap property and a setCustomWidget method.
[0349] jsonMap stores the DSL data description of the input Widget.
[0350] setCustomWidget is the constructor of this Widget.
[0351] Other widgets, including Text and Image, inherit DSLBaseWidget and override the widget's constructor, that is, the setCustomWidget method, to generate instances of each widget.
[0352] During the instance generation process, the State instance of each Widget will be saved to the DataCenter. When an event points to a Widget update, the DataCenter will retrieve the State based on the WidgetID, inject the event result data into the jsonMap, perform the State update operation, and re-execute setCustomWidget to refresh the Widget.
[0353] As shown in FIG4 , FIG4 is a schematic diagram showing the principle of a page updating method according to an embodiment of the present invention.
[0354] 3. Microprogram Event Bus
[0355] After recursive parsing of the microprogram page, the root node is set to a NotificationWidget to receive user interaction events. When the user clicks a button or image, a notification is triggered on the event bus. The notification transparently transmits the widget's DSL data. The EventCenter searches for the event description and event parameters based on the widget ID and executes the corresponding event. After execution, the page is refreshed.
[0356] 4. Runtime
[0357] 1. Data Stack
[0358] Data variables generated during the parsing and execution of DataCenter and EventCenter, such as List data sources and network request response data, are stored in the data stack in a key-value format. The key is the widget ID, and the value is the data source generated at runtime, facilitating the calling of event parameters.
[0359] 2. Data refresh
[0360] The event description of each Event has the ID and target attributes of the TargetWidget. After the Event is executed, the data results will be updated to the jsonMap of the target Widget, and then the State of the target Widget will be found in the DataCenter to perform the update operation.
[0361] 5. Whole process flow
[0362] For ease of understanding, as shown in FIG5 , FIG5 is a flow chart of a page rendering and updating method according to an embodiment of the present invention, specifically showing the dynamic parsing and data refresh process of the micro-program page:
[0363] 1. Initialize the DataCenter, EventCenter, and Layout objects to receive JSON data. The DataCenter stores the parameter set, the EventCenter stores the event description set, and the Layout stores the UI page description.
[0364] 2. Layout recursively calls the Build method to parse the widget tree. The root node is configured with a NotificationWidget for event bus data penetration. Each widget node generates a corresponding State, and the State and the node's JSON data are saved to the DataCenter based on the widget ID.
[0365] 3. EventCenter executes the InitEvent (page initialization) event.
[0366] 4. Find TargetState and JSON data according to the WidgetID of TargetWidget, inject the execution result data of the InitEvent event into the JSON data of TargetWidget, call the refresh method of State to update and render TargetWidget, and complete the initialization of the page.
[0367] 5. The user click event is transmitted to the Layout page through the Notification event bus. The event description is searched for in EventCenter based on EventID. EventCenter executes the corresponding event. If the event result requires updating the widget, the TargetState and JSON data are searched based on the WidgetID of the TargetWidget. The execution result data of the InitEvent event is injected into the JSON data of the TargetWidget, and the refresh method of State is called to update and render the TargetWidget.
[0368] 6. Overall product.
[0369] Product generation layer - Flutter Designer (visual configurator) configures the page UI layout, widget data binding, event binding, and generates the DSL product of the microprogram.
[0370] Product hosting layer - micro-packages are stored in the cloud.
[0371] Product operation layer - the terminal obtains the microprogram package from the cloud, generates an executable file through the terminal's DSL parser, and runs it.
[0372] Taking the software application open platform as an example, there are three main steps.
[0373] 1. Visual configurator panel.
[0374] The visualization panel can generate the entire page by dragging and dropping various widgets (Text, Image, etc.) according to business needs.
[0375] You can adjust the properties of each widget according to the UI diagram, such as font color.
[0376] The login button configures the login interface and page jump events.
[0377] 2. Generate the DSL page product of the microprogram.
[0378] After the overall page configuration is completed, the Export method of the current widget and its sub-widgets is recursively executed according to the type to generate the DSL product of the entire page.
[0379] 3. Generate the terminal app package through the Jenkins packaging tool, install and run the terminal.
[0380] 4. Terminal parsing of micro-program DSL page.
[0381] After the terminal obtains the DSL, it recursively executes the Build method to parse and generate an executable file.
[0382] This embodiment enables: 1. Dynamic page generation for multiple platforms, including iOS, Android, and Windows. 2. Free, low-granular page layout and visual configuration. 3. Dynamic binding of terminal page data and events, as well as app hot updates. 4. The entire low-code solution process.
[0383] Corresponding to the above method embodiments, the present invention also provides apparatus embodiments.
[0384] As shown in FIG6 , FIG6 is a structural diagram of a page rendering device according to an embodiment of the present invention.
[0385] The apparatus may include the following units.
[0386] The acquisition unit 401 is configured to acquire a domain specific language (DSL) file for describing a target page. The target page may include controls.
[0387] The parsing unit 402 is configured to parse the acquired DSL file based on a preset DSL parsing module, create a control tree structure including control instances, and render a target page according to the created control tree structure.
[0388] Optionally, the control instance in the control tree structure includes: a rendering function and DSL properties.
[0389] Optionally, the value of the DSL attribute includes: DSL data used to describe the control instance to which it belongs; the rendering function is used to: determine the current attribute value of the control instance based on the DSL data in the current value of the DSL attribute, and render the corresponding control based on the current attribute value of the control instance.
[0390] Optionally, the device also includes an updating unit 403, which is used to: update the target page, specifically including: obtaining control update data, determining the target control instance that needs to be updated based on the control update data, and updating the DSL data in the target control instance; executing the rendering function in the updated target control instance, and updating the control corresponding to the target control instance in the rendering target page.
[0391] Optionally, the parsing unit 402 is further configured to: create a corresponding state instance when creating a control instance; different control instances correspond to different state instances; and the state instance has the ability to execute the rendering function in the corresponding control instance;
[0392] The updating unit 403 is used to:
[0393] Call the state instance corresponding to the target control instance and execute the rendering function in the updated target control instance.
[0394] Optionally, the state instance is also used to update the DSL property value of the corresponding control instance;
[0395] The updating unit 403 is used to:
[0396] Call the state instance corresponding to the target control instance to execute: update the DSL data in the target control instance according to the control update data.
[0397] Optionally, the updating unit 403 may also be configured to:
[0398] Get control update data based on local event execution results; and / or
[0399] Get the control update data sent by the external device.
[0400] Optionally, the root node of the control tree structure includes a notification center control instance;
[0401] The notification center control instance is used to: send the information of the interacted control instance to the event analysis processing module according to the received control interaction event, trigger the event analysis processing module to execute the corresponding operation event, and obtain the event execution result;
[0402] The event analysis processing module includes: a set of corresponding relationships between control instance information and operation events.
[0403] Optionally, the method for generating control update data includes:
[0404] Get the property update information of the control to be updated;
[0405] Based on the preset DSL conversion module, the attribute update information is converted into control update data in DSL format.
[0406] Optionally, the method for generating a DSL file includes:
[0407] Get the configuration information of the target page; the configuration information includes the information of the control tree structure;
[0408] Based on the preset DSL conversion module, the configuration information is converted into a DSL file.
[0409] Optionally, the DSL file includes at least one of the following: control information, event binding information, and data binding information for describing the control tree structure;
[0410] The parsing unit 402 is further configured to:
[0411] Initialization generation: data analysis and processing module, event analysis and processing module and page generation module;
[0412] Save the event binding information in the DSL file to the event parsing processing module;
[0413] Save the data binding information in the DSL file to the data parsing processing module;
[0414] Save the control information in the DSL file to the page generation module;
[0415] Call the page generation module, parse the control information, and create a control tree structure containing control instances.
[0416] Optionally, the parsing unit 402 is configured to:
[0417] Execute the initialization event of the target page;
[0418] According to the execution result of the initialization event, the initial control instance that needs to be updated is determined, and the DSL data in the determined initial control instance is updated;
[0419] Execute the rendering function of the control instance in the control tree structure, render the corresponding control, and get the target page.
[0420] Optionally, the rendering function includes a constructor; the parsing unit 402 is used to:
[0421] In the process of creating the control tree structure, the constructor of the contained control instance is executed, the corresponding control is rendered, and the target page is obtained.
[0422] Optionally, the parsing unit 402 is further configured to:
[0423] Execute the initialization event of the target page;
[0424] According to the execution result of the initialization event, the initial control instance that needs to be updated is determined, and the DSL data in the determined initial control instance is updated;
[0425] Execute the rendering function of the updated initial control instance and update the corresponding control in the rendering target page.
[0426] Optionally, the DSL parsing module includes: a DSL control parsing submodule corresponding to the control type;
[0427] The DSL control parsing submodule is used to: parse the DSL data used to describe the control instance of the corresponding control type and create the corresponding control instance;
[0428] The parsing unit 402 is used to:
[0429] For the DSL data used to describe the control instance of the target control type in the acquired DSL file, a DSL control parsing submodule corresponding to the target control type in the preset DSL parsing module is called to perform parsing.
[0430] Optionally, the DSL conversion module includes: a DSL control conversion submodule corresponding to the control type;
[0431] The DSL control conversion submodule is used to convert the control instance code of the corresponding control type into DSL data used to describe the control instance of the corresponding control type.
[0432] For detailed explanation, please refer to the above method embodiment.
[0433] As shown in FIG. 7 , FIG. 7 is a schematic structural diagram of another page rendering device according to an embodiment of the present invention.
[0434] The apparatus may include the following units.
[0435] The configuration unit 501 is used to obtain configuration information of the target page; the configuration information may include information of the control tree structure.
[0436] The conversion unit 502 is configured to convert the configuration information into a domain specific language (DSL) file for describing a target page based on a preset DSL conversion module.
[0437] Optionally, the parsing result of the DSL file can be used to create a control tree structure containing control instances; the created control tree structure is used to render the target page.
[0438] Optionally, the control instance in the control tree structure may include: a rendering function and DSL properties.
[0439] Optionally, the value of a DSL attribute may include: DSL data used to describe the corresponding control instance; the rendering function may be used to: determine the current attribute value of the corresponding control instance based on the DSL data in the current value of the DSL attribute, and render the corresponding control based on the current attribute value of the corresponding control instance.
[0440] For detailed explanation, please refer to the above method embodiment.
[0441] As shown in FIG8 , FIG8 is a structural diagram of a page rendering system according to an embodiment of the present invention.
[0442] The system may include a development end 601 and a rendering end 602 .
[0443] The development end 601 can be used to: obtain configuration information of the target page; the configuration information may include information of the control tree structure; based on a preset DSL conversion module, convert the configuration information into a domain specific language DSL file for describing the target page.
[0444] The rendering end 602 can be used to: obtain a DSL file, and parse the obtained DSL file based on a preset DSL parsing module to create a control tree structure containing control instances; and render a target page according to the created control tree structure.
[0445] Optionally, the control instance in the control tree structure may include: a rendering function and DSL properties.
[0446] Optionally, the value of a DSL attribute may include: DSL data used to describe the corresponding control instance; the rendering function may be used to: determine the current attribute value of the corresponding control instance based on the DSL data in the current value of the DSL attribute, and render the corresponding control based on the current attribute value of the corresponding control instance.
[0447] For detailed explanation, please refer to the above method embodiment.
[0448] An embodiment of the present invention further provides a computer device, which includes at least a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, any one of the above method embodiments is implemented.
[0449] An embodiment of the present invention also provides an electronic device, comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions that can be executed by the one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute any of the above-mentioned method embodiments.
[0450] FIG9 is a schematic diagram of the hardware structure of a computer device configured to implement the method according to an embodiment of the present invention, according to an embodiment of the present invention. The device may include: a processor 1010, a memory 1020, an input / output interface 1030, a communication interface 1040, and a bus 1050. The processor 1010, the memory 1020, the input / output interface 1030, and the communication interface 1040 are connected to each other within the device via the bus 1050.
[0451] The processor 1010 can be implemented using a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided by the embodiments of the present invention.
[0452] The memory 1020 can be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage devices, dynamic storage devices, etc. The memory 1020 can store an operating system and other application programs. When the technical solutions provided by the embodiments of the present invention are implemented through software or firmware, the relevant program codes are stored in the memory 1020 and are called and executed by the processor 1010.
[0453] The input / output interface 1030 is used to connect input / output modules to implement information input and output. The input / output modules can be configured as components within the device (not shown in the figure) or can be externally connected to the device to provide corresponding functions. Input devices may include a keyboard, mouse, touch screen, microphone, various sensors, etc., and output devices may include a display, speaker, vibrator, indicator light, etc.
[0454] The communication interface 1040 is used to connect to a communication module (not shown) to enable communication between the device and other devices. The communication module can communicate via a wired method (such as USB, network cable, etc.) or a wireless method (such as mobile network, WiFi, Bluetooth, etc.).
[0455] The bus 1050 comprises a path for transmitting information between the various components of the device (eg, the processor 1010 , the memory 1020 , the input / output interface 1030 , and the communication interface 1040 ).
[0456] It should be noted that although the above device only shows the processor 1010, the memory 1020, the input / output interface 1030, the communication interface 1040, and the bus 1050, in a specific implementation, the device may also include other components necessary for normal operation. In addition, those skilled in the art will understand that the above device may only include the components necessary to implement the embodiments of the present invention, and does not necessarily include all the components shown in the figure.
[0457] An embodiment of the present invention further provides a computer-readable storage medium having a computer program stored thereon, which implements any of the above method embodiments when executed by a processor.
[0458] An embodiment of the present invention further provides a computer-readable storage medium storing a computer program, wherein the computer program implements any of the above method embodiments when executed by a processor.
[0459] Computer-readable media includes permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. The 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 disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, 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 herein, computer-readable media does not include transitory media such as modulated data signals and carrier waves.
[0460] Through the description of the above embodiments, it can be seen that those skilled in the art can clearly understand that the embodiments of the present invention can be implemented by means of software plus the necessary general hardware platform. Based on this understanding, the technical solution of the embodiments of the present invention can essentially or in other words, the contributing part can be embodied in the form of a software product. The computer software product can be stored in a storage medium such as ROM / RAM, a magnetic disk, an optical disk, etc., and includes a number of instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in various embodiments or certain parts of the embodiments of the present invention.
[0461] The systems, devices, modules, or units described in the above embodiments may be implemented by computer chips or entities, or by products having certain functions. A typical implementation device is a computer, which may be in the form of a personal computer, laptop computer, cellular phone, camera phone, smartphone, personal digital assistant, media player, navigation device, email transceiver, game console, tablet computer, wearable device, or any combination of these devices.
[0462] 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 device 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. The device embodiment described above is merely illustrative, wherein the modules described as separate components may or may not be physically separated, and when implementing the embodiment of the present invention, the functions of each module can be implemented in the same one or more software and / or hardware. It is also possible to select some or all of the modules according to actual needs to achieve the purpose of the embodiment. A person of ordinary skill in the art can understand and implement it without paying any creative work.
[0463] The above description is only a specific implementation of the embodiment of the present invention. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the embodiment of the present invention. These improvements and modifications should also be regarded as protection for the embodiment of the present invention.
[0464] In the present invention, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance. The term "plurality" refers to two or more, unless otherwise clearly defined.
[0465] Those skilled in the art will readily appreciate other embodiments of the present invention after considering the specification and practicing the disclosure disclosed herein. The present invention is intended to cover any variations, uses, or adaptations of the present invention that follow the general principles of the present invention and include common knowledge or customary techniques in the art not disclosed herein. The description and examples are to be considered as exemplary only, and the true scope and spirit of the present invention are indicated by the following claims. It should be understood that the present invention is not limited to the precise structure described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from the scope thereof. The scope of the present invention is limited only by the appended claims.
Claims
1. A page rendering method, characterized in that: include: Obtaining a domain specific language DSL file for describing a target page; the target page includes controls; Based on the preset DSL parsing module, the obtained DSL file is parsed to create a control tree structure containing control instances; Render the target page according to the created control tree structure; The control instance in the control tree structure includes: rendering function and DSL attributes; The value of the DSL attribute includes: DSL data for describing the corresponding control instance; the rendering function is used to: determine the current attribute value of the corresponding control instance according to the DSL data in the current value of the DSL attribute, and render the corresponding control according to the current attribute value of the corresponding control instance.
2. The method according to claim 1, characterized in that Also includes: Updating the target page specifically includes: acquiring control update data, determining a target control instance that needs to be updated according to the acquired control update data, and updating DSL data in the target control instance; The rendering function in the updated target control instance is executed to update and render the control corresponding to the target control instance in the target page.
3. The method according to claim 2, characterized in that Also includes: When a control instance is created, a corresponding state instance is created; different control instances correspond to different state instances; The state instance has the ability to execute the rendering function in the corresponding control instance; The rendering function in the target control instance after executing the update includes: The state instance corresponding to the target control instance is called to execute the rendering function in the updated target control instance.
4. The method according to claim 3, characterized in that The state instance is also used to update the DSL property value of the corresponding control instance; The updating of the DSL data in the target control instance includes: The state instance corresponding to the target control instance is called to execute: updating the DSL data in the target control instance according to the control update data.
5. The method according to claim 2, characterized in that: The obtaining of control update data includes: Obtain control update data based on local event execution results; and / or Get the control update data sent by the external device.
6. The method according to any one of claims 1 to 5, characterized in that The root node of the control tree structure includes a notification center control instance; The notification center control instance is used to: send information of the interacted control instance to the event analysis processing module according to the received control interaction event, trigger the event analysis processing module to execute the corresponding operation event, and obtain the event execution result; The event analysis processing module includes: a set of corresponding relationships between control instance information and operation events.
7. The method according to claim 2, characterized in that: The method for generating control update data includes: Get the property update information of the control to be updated; Based on a preset DSL conversion module, the attribute update information is converted into control update data in DSL format.
8. The method according to claim 1, characterized in that The method for generating the DSL file comprises: Obtaining configuration information of the target page; the configuration information includes information of the control tree structure; Based on a preset DSL conversion module, the configuration information is converted into the DSL file.
9. The method according to claim 1, characterized in that: The DSL file includes at least one of the following: control information, event binding information, and data binding information for describing a control tree structure; The method further comprises: Initialization generation: data analysis and processing module, event analysis and processing module and page generation module; Saving the event binding information in the DSL file to the event parsing processing module; Saving the data binding information in the DSL file to the data parsing processing module; Saving the control information in the DSL file to the page generation module; The DSL file obtained by parsing is created to create a control tree structure containing control instances, including: The page generation module is called to parse the control information and create a control tree structure including control instances.
10. The method according to claim 1, characterized in that The rendering of the target page according to the created control tree structure includes: Execute the initialization event of the target page; According to the execution result of the initialization event, determine the initial control instance that needs to be updated, and update the DSL data in the determined initial control instance; Execute the rendering function of the control instance in the control tree structure, render the corresponding control, and obtain the target page.
11. The method according to claim 1, characterized in that: The rendering function includes a constructor; The rendering of the target page according to the created control tree structure includes: In the process of creating the control tree structure, the constructor of the included control instance is executed, the corresponding control is rendered, and the target page is obtained.
12. The method according to claim 11, characterized in that Also includes: Execute the initialization event of the target page; According to the execution result of the initialization event, determine the initial control instance that needs to be updated, and update the DSL data in the determined initial control instance; Execute the rendering function of the updated initial control instance to update and render the corresponding control in the target page.
13. The method according to claim 1, characterized in that The DSL parsing module includes: a DSL control parsing submodule corresponding to the control type; The DSL control parsing submodule is used to: parse DSL data used to describe a control instance of a corresponding control type, and create a corresponding control instance; The step of parsing the acquired DSL file based on a preset DSL parsing module includes: For the DSL data used to describe the control instance of the target control type in the acquired DSL file, a DSL control parsing submodule corresponding to the target control type in the preset DSL parsing module is called to perform parsing.
14. The method according to claim 8, characterized in that The DSL conversion module includes: a DSL control conversion submodule corresponding to the control type; The DSL control conversion submodule is used to convert the control instance code of the corresponding control type into DSL data for describing the control instance of the corresponding control type.
15. A page rendering method, characterized in that: Applied to the development side, including: Obtaining configuration information of the target page; the configuration information includes information of the control tree structure; Based on a preset DSL conversion module, convert the configuration information into a domain specific language DSL file for describing the target page; The parsing result of the DSL file is used to create a control tree structure including control instances; the created control tree structure is used to render the target page; The control instance in the control tree structure includes: rendering function and DSL attributes; The value of the DSL attribute includes: DSL data for describing the corresponding control instance; the rendering function is used to: determine the current attribute value of the corresponding control instance according to the DSL data in the current value of the DSL attribute, and render the corresponding control according to the current attribute value of the corresponding control instance.
16. A page rendering method, characterized in that: include: The development end obtains configuration information of the target page; the configuration information includes information of the control tree structure; The development end converts the configuration information into a domain specific language DSL file for describing the target page based on a preset DSL conversion module; The rendering end obtains the DSL file, and based on a preset DSL parsing module, parses the obtained DSL file to create a control tree structure including control instances; Render the target page according to the created control tree structure; The control instance in the control tree structure includes: rendering function and DSL attributes; The value of the DSL attribute includes: DSL data for describing the corresponding control instance; the rendering function is used to: determine the current attribute value of the corresponding control instance according to the DSL data in the current value of the DSL attribute, and render the corresponding control according to the current attribute value of the corresponding control instance.
17. A page rendering device, characterized in that: include: An acquisition unit, used to acquire a domain specific language DSL file for describing a target page; the target page includes a control; A parsing unit, used for parsing the acquired DSL file based on a preset DSL parsing module, and creating a control tree structure including control instances; Render the target page according to the created control tree structure; The control instance in the control tree structure includes: rendering function and DSL attributes; The value of the DSL attribute includes: DSL data for describing the corresponding control instance; the rendering function is used to: determine the current attribute value of the corresponding control instance according to the DSL data in the current value of the DSL attribute, and render the corresponding control according to the current attribute value of the corresponding control instance.
18. A page rendering device, characterized in that: Applied to the development side, including: A configuration unit, used to obtain configuration information of a target page; the configuration information includes information of a control tree structure; A conversion unit, configured to convert the configuration information into a domain specific language DSL file for describing the target page based on a preset DSL conversion module; The parsing result of the DSL file is used to create a control tree structure including control instances; the created control tree structure is used to render the target page; The control instance in the control tree structure includes: rendering function and DSL attributes; The value of the DSL attribute includes: DSL data for describing the corresponding control instance; the rendering function is used to: determine the current attribute value of the corresponding control instance according to the DSL data in the current value of the DSL attribute, and render the corresponding control according to the current attribute value of the corresponding control instance.
19. A page rendering system, characterized in that: Including development side and rendering side; The development end is used to: obtain configuration information of a target page; the configuration information includes information of a control tree structure; based on a preset DSL conversion module, convert the configuration information into a domain specific language DSL file for describing the target page; The rendering end is used to: obtain the DSL file, and parse the obtained DSL file based on a preset DSL parsing module to create a control tree structure including control instances; Render the target object according to the created control tree structure Label page; The control instance in the control tree structure includes: rendering function and DSL attributes; The value of the DSL attribute includes: DSL data for describing the corresponding control instance; the rendering function is used to: determine the current attribute value of the corresponding control instance according to the DSL data in the current value of the DSL attribute, and render the corresponding control according to the current attribute value of the corresponding control instance.
20. An electronic device, characterized in that: include: at least one processor; as well as, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the one processor, and the instructions are executed by the at least one processor so as to enable the at least one processor to perform the method according to any one of claims 1 to 15.
21. A computer-readable storage medium storing a computer program, characterized in that: The computer program implements the method according to any one of claims 1 to 15 when executed by a processor.
Citation Information
Cited By
Browser rendering engine specification drive code generation method and system and computer readable storage medium
CN122593760A
