A Visual Rendering Engine Design Method for Low-Code Platforms

Abstract

This invention pertains to low-code platforms, specifically a visual rendering engine design method for low-code platforms. The method includes the following steps: 1. Designing a page layout protocol parsing method: For the page layout protocol exported by the low-code visual editor, based on rendering specifications, the page layout protocol is parsed and converted into an object recognizable by the engine. 2. Based on the engine-recognizable object, a page layout rendering tree is constructed, including the control tree, style tree, and page control rendering tree, and the layout of each visible component element is obtained. 3. Based on the engine-recognizable object, page control interaction capabilities are constructed, completing the construction of page controls. 4. A page control adapter is constructed to achieve adaptation and dynamic expansion capabilities of the constructed page controls. 5. A page control factory is constructed to achieve lifecycle management of the constructed page controls. Using this visual rendering engine design method, visual development is achieved in a low-code or no-code manner.

Description

Technical Field

[0001] This invention pertains to low-code platforms, specifically a design method for a visualization rendering engine for low-code platforms. Background Technology

[0002] The rapid development of enterprise informatization has placed a series of high standards on the construction of informatized business, which are reflected in: shortening the construction cycle of information systems, reducing development costs, meeting the customization of informatized business, and reducing system operation and maintenance costs. Traditional software development models cannot meet this change.

[0003] Low-code platforms, as a new software development paradigm, possess core capabilities such as data model-driven development, prototyping, and canary releases. They enable information system construction through minimal manual coding, no-code, or AI-driven coding, while seamlessly integrating with cloud platforms. Low-code platforms can replace traditional development models, meet the needs of information technology construction, and achieve cost reduction and efficiency improvement.

[0004] Building a low-code platform is a massive undertaking characterized by high technical difficulty, complexity, and tediousness. Its core functionalities include a visual editor with numerous drag-and-drop controls and a visual rendering engine. The visual editor is responsible for translating business requirements into visual protocols, while the visual rendering engine renders these protocols into executable, operable, deployable, and integrable functional pages. Therefore, the visual rendering engine is the most crucial functionality of a low-code platform and a key technical metric for evaluating its performance.

[0005] Information system prototype design and development are fundamental to the construction of information systems. They rely on a vast array of technologies and visualization libraries. Currently, mainstream visualization rendering engines primarily cater to specific application scenarios or technology systems, lacking versatility and scalability. Therefore, building a visualization engine that meets the needs of mainstream technologies and visualization libraries while also possessing scalability has significant commercial value. Summary of the Invention

[0006] The purpose of this invention is to provide a design method for a visual rendering engine for low-code platforms, enabling application software prototype development in a low-code or no-code manner, while simplifying application release and deployment, supporting gray-scale release and seamless integration with cloud platforms, effectively solving a series of problems in industrial software development models such as long development cycles, high costs, and difficulty in implementing business changes, thereby achieving cost reduction and efficiency improvement.

[0007] The technical solution adopted by the present invention to achieve the above objectives is as follows:

[0008] A design method for a visualization rendering engine for low-code platforms includes the following steps:

[0009] 1) Construct page controls;

[0010] 1-1) Design a page layout protocol parsing method: For the page layout protocol exported by the low-code visual editor, parse the page layout protocol according to the rendering specifications and convert it into an object that the engine can recognize;

[0011] 1-2) Based on the objects that the engine can recognize, construct the page layout rendering tree: traverse the document object model, render component nodes in turn, construct the component tree, combine with the style tree, perform secondary rendering, construct the page rendering tree, complete the construction of the control tree, the style tree, and the page control rendering tree, and traverse the control tree and style tree, bind the control and style according to the style code CSSID, so as to obtain the layout of each visible component element;

[0012] 1-3) Based on the objects that the engine can recognize, build the interactive capabilities of the page controls and complete the construction of the page controls;

[0013] 2) Construct a page control adapter to enable the adaptation and dynamic expansion capabilities of the page controls constructed in step 1);

[0014] 3) Build a page control factory to manage the lifecycle of the page control instances built in step 1).

[0015] The page layout protocol includes: style protocol, document object model, page attributes, page state, custom functions, page lifecycle, page configuration, data source, and dependencies.

[0016] The page control interaction capabilities include page attribute settings, page state settings, custom function settings, page lifecycle function settings, importing dependencies, loading dependent resources, configuration settings, and loading data.

[0017] In step 1-1), the parsing of the page layout protocol and its conversion into an object recognizable by the engine specifically involves:

[0018] Page layout protocol parsing method f parse The format specification is expressed as:

[0019] f parse ={css,dom,props,state,methods,life,config,datasource,depends,ref}

[0020] Here, css refers to CSS styles, dom refers to the rendering object, props refers to page properties, state refers to page state, methods refers to custom functions, life refers to lifecycle functions, config refers to configuration items, datasource refers to the data source, dependencies refers to dependencies, and ref refers to referenced control objects.

[0021] The construction of the control tree includes: constructing a control tree model and a control tree construction method;

[0022] The control tree model is constructed by cascading parent and child controls into a tree model, with identical parent and child control models. The control tree model is DOM. root The format specification is expressed as:

[0023] Dom root ={id,type,name,visiable,...cssid,...,Dom children}

[0024] Where id, type, name, visible, ... are the basic properties set for the control, cssid is the style code, and DOM... children This refers to the set of child controls to which the control belongs;

[0025] The control tree construction method includes:

[0026] a. Obtain the root node and render the control based on the root node's properties;

[0027] b. Obtain the set of child nodes to which the root node belongs;

[0028] c. If the child node set is not empty, traverse the child node, draw the child node, and backtrack to step b; if the child node is empty, return.

[0029] The construction of the style tree includes: a style tree model and a style tree construction method;

[0030] The style tree model is constructed by cascading parent and child styles into a tree model. Parent and child style models are identical. The style tree model is based on CSS. root The format specification is expressed as:

[0031] CSS root ={id,...,[key:value],Css children}

[0032] Where id,...,[key:value] are the basic properties of the control, and [key:value] is the mapping relationship between style tags and style values, CSS. children This refers to the set of sub-styles to which the control belongs;

[0033] The style tree construction method includes the following steps:

[0034] Step 1: Obtain the root node and define its style based on its attributes;

[0035] Step 2: Obtain the set of child style nodes to which the root node belongs;

[0036] Step 3: If the set of child style nodes is not empty, traverse the child nodes, define the child style nodes, and backtrack to Step 2; if the set of child style nodes is empty, return.

[0037] The construction of the page control adapter specifically involves:

[0038] Define the third-party extension capabilities of page controls, including: extension interface definition;

[0039] The format specification for the Extract interface is as follows:

[0040] Extract={resourceid,name,version,comment,[mthd],[prop],[recall],[com]}

[0041] Wherein, resourceid is the dependent third-party resource package, [mthd] is the set of interfaces provided by resourceid, [prop] is the set of attributes provided by resourceid, [recall] is the set of callback interfaces provided by resourceid, and [mthd] is the set of controls provided by resourceid.

[0042] Step 3) specifically includes:

[0043] Define the ability to manage the lifecycle of page control instances, including: page control creation, page control invocation, and page control destruction.

[0044] The present invention has the following beneficial effects and advantages:

[0045] 1. The visualization rendering engine design method described in this invention enables visualization development in a low-code or no-code manner.

[0046] 2. The visualization rendering engine design method described in this invention greatly simplifies application release and deployment, enabling application gray-scale release and seamless integration with the cloud platform.

[0047] 3. The visual rendering engine design method of this invention can greatly simplify the application development process. Attached Figure Description

[0048] Figure 1 This is a schematic diagram of the design method for a visualization rendering engine for low-code platforms according to the present invention.

[0049] Figure 2 A framework diagram provided for embodiments of the present invention;

[0050] Figure 3 This is a flowchart of the runtime process of the visualization rendering engine of this invention;

[0051] Figure 4 This is a document structure model diagram of the page of the present invention. Detailed Implementation

[0052] The present invention will now be described in further detail with reference to the accompanying drawings and embodiments.

[0053] To make the above-mentioned objects, features, and advantages of the present invention more apparent and understandable, specific embodiments of the present invention will be described in detail below with reference to the accompanying drawings. Many specific details are set forth in the following description to provide a thorough understanding of the present invention. However, the present invention can be practiced in many other ways different from those described herein, and those skilled in the art can make similar modifications without departing from the spirit of the invention. Therefore, the present invention is not limited to the specific embodiments disclosed below.

[0054] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this invention pertains. The terminology used herein in the description of the invention is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention.

[0055] like Figure 1 As shown, a design method for a visualization rendering engine for low-code platforms includes the following steps:

[0056] 1) Construct page controls;

[0057] 1-1) Design a page layout protocol parsing method: For the page layout protocol exported by the low-code visual editor, parse the page layout protocol according to the rendering specifications and convert it into an object that the engine can recognize;

[0058] 1-2) Based on the objects that the engine can recognize, construct the page layout rendering tree: traverse the document object model, render component nodes in turn, construct the component tree, combine with the style tree, perform secondary rendering, construct the page rendering tree, complete the construction of the control tree, the style tree, and the page control rendering tree, and traverse the control tree and style tree, bind the control and style according to the style code CSSID, so as to obtain the layout of each visible component element;

[0059] 1-3) Based on the objects that the engine can recognize, build the interactive capabilities of the page controls and complete the construction of the page controls;

[0060] 2) Construct a page control adapter to enable the adaptation and dynamic expansion capabilities of the page controls constructed in step 1);

[0061] 3) Build a page control factory to manage the lifecycle of the page control instances built in step 1).

[0062] The page layout protocol parsing method, specifically for page layout protocols exported by low-code visual editors, parses various protocols according to rendering specifications, including style protocols, document object model (DOM) protocols, page attributes, page states, custom functions, page lifecycle management protocols, page configuration protocols, data sources, and dependencies, converting them into objects recognizable by the engine. This includes parsing of style protocols, document object model protocols, page attribute protocols, page state protocols, custom function protocols, page lifecycle management protocols, page configuration information protocols, data source protocols, and dependency protocols.

[0063] Page layout protocol parsing method f parse The format specification is expressed as:

[0064] f parse ={css,dom,props,state,methods,life,config,datasource,depends,ref}

[0065] Here, css refers to CSS styles, dom refers to the rendering object, props refers to page properties, state refers to page state, methods refers to custom functions, life refers to lifecycle functions, config refers to configuration items, datasource refers to the data source, dependencies refers to dependencies, and ref refers to referenced control objects.

[0066] The page layout rendering tree design method includes the control tree construction method, the style tree construction method, and the page control rendering tree construction method.

[0067] The control tree construction method includes: constructing the control tree model and the control tree construction method. The control tree model is a tree model constructed by cascading parent and child controls. The parent and child control models are identical. DOM root The format specification is expressed as:

[0068] Dom root ={id,type,name,visiable,...cssid,...,Dom children}

[0069] Where id, type, name, visible, ... are the basic properties of the control, cssid is the style code, and DOM... children This refers to the set of child controls to which this control belongs. The control tree construction method includes three steps:

[0070] Step 1: Obtain the root node and render the control based on the root node's attributes;

[0071] Step 2: Obtain the set of child nodes to which the root node belongs.

[0072] Step 3: If the child node set is not empty, traverse the child node, draw the child node, and backtrack to Step 2; if the child node is empty, return.

[0073] The style tree construction method includes the style tree model and the style tree construction method. The style tree model is a tree model constructed by cascading parent and child styles. The parent and child style models are identical. (CSS) root The format specification is expressed as:

[0074] CSS root ={id,...,[key:value],Css children}

[0075] Where id, ..., [key:value] are the basic properties of the control, and [key:value] represents the mapping relationship between style tags and style values, CSS. children This refers to the sub-style set to which the control belongs. The style tree construction method includes three steps:

[0076] Step 1: Obtain the root node and define its style based on its attributes;

[0077] Step 2: Obtain the set of child style nodes to which the root node belongs.

[0078] Step 3: If the set of child style nodes is not empty, traverse the child nodes, define the child style nodes, and backtrack to Step 2; if the set of child style nodes is empty, return.

[0079] The method for constructing the page control rendering tree includes three steps: Step 1: Traverse the control tree and style tree, and bind the controls and styles according to the CSSID; Step 2: Recalculate the layout of each control.

[0080] The method for building page control interaction capabilities refers to defining all controls within the page, the visual transformation mechanism and data dependencies between the page itself and between pages, based on different interaction events. This includes: methods for setting page attributes, page states, custom functions, page lifecycle functions, dependencies, dependent resources, configuration items, and data loading.

[0081] The page control adapter construction method refers to defining the third-party extension capabilities of page controls, including: extension interface definition. The format specification for the extension interface Extract is as follows:

[0082] Extract={resourceid,name,version,comment,[mthd],[prop],[recall],[com]}

[0083] Wherein, resourceid is the dependent third-party resource package, [mthd] is the set of interfaces provided by resourceid, [prop] is the set of attributes provided by resourceid, [recall] is the set of callback interfaces provided by resourceid, and [mthd] is the set of controls provided by resourceid.

[0084] The page control factory construction method refers to defining the lifecycle management capabilities of page control instances, including: page control creation, page control invocation, and page control destruction.

[0085] Example:

[0086] like Figure 2 The diagram shown is a framework diagram provided by an embodiment of the present invention. The present invention provides a visualization rendering engine design method for low-code platforms, the application of which includes the following processes:

[0087] Step 1: Design a page layout protocol parsing method, and describe the page control configuration capabilities and interactive behaviors;

[0088] Step 2: Design the page layout rendering tree method and render the page;

[0089] Step 3: Design a page control adapter to enable page control adaptation and dynamic expansion capabilities;

[0090] Step 4: Design a page control factory, define the usage methods of page controls, and implement lifecycle management of page control instances.

[0091] like Figure 3 The diagram shown is a flowchart of the visualization rendering engine of this invention. It is assumed that the protocol is customized for a user function page, including one input box control, one query button control, one separator control, and one data table control. Table 1 describes the document structure model parsed from the above protocol specification, as detailed below:

[0092] Table 1

[0093] input_1 Input box Name no button_1 Button Query divider_1 separator table_1 Data table

[0094] Traverse the document object model, such as Figure 4 The diagram shown is a document structure model of the page of this invention; component nodes are rendered sequentially to build a component tree, and combined with the style tree, a second rendering is performed to build a page rendering tree, completing the construction of the control tree, the style tree, and the page control rendering tree. The control tree and style tree are traversed, and the control and style are bound according to the style code CSSID to obtain the layout of each visible component element.

[0095] Table 2 describes the page control styles, as shown in Table 2:

[0096] Table 2

[0097] body {font-size:12px;} button {width:100px;color:#ff00ff}

[0098] Table 3 describes the state and props of the page control form.

[0099] Table 3

[0100]

[0101] Table 4 describes the case of user-defined functions.

[0102] Table 4

[0103] fn_1 function internal {} query function fn_2 function internal {} Page turning function

[0104] Table 5 describes the lifecycle functions of page controls.

[0105] Table 5

[0106] componentmount function {} Control initialization function componentupdate function {} Control property change function … … … …

[0107] Table 6 describes the page control interactivity. The method for building page control interactivity refers to defining all controls within the page, the page itself, and the visual transition mechanisms and data dependencies between pages, based on different interaction events. This includes: page attribute setting methods, page state setting methods, custom function setting methods, page lifecycle function setting methods, dependency setting methods, dependency resource setting methods, configuration item setting methods, and data loading methods. See Table 6 for details.

[0108] Table 6

[0109] Page initialization page componentmount Control initialization function Page attribute changes page componentupdate Control property change function onclick button_1 fn_1 Query button click event pageonchange table_1 fn_2 Turn the page

[0110] Table 7 describes the runtime process of the visualization rendering engine, specifically executing steps 1 to 4 of this invention, as shown in Table 7:

[0111] In steps 3 and 4: design a page control adapter to implement page control adaptation and dynamic expansion capabilities; and design a page control factory to define page control usage methods and implement page control instance lifecycle management. Specifically, instantiation is implemented in steps one, two, and five of Table 7.

[0112] In step 1: the third step in Table 7 is shown; finally, this embodiment demonstrates the design page layout rendering tree method and rendering page design method process in step 2 of the present invention through the control example in step 4;

[0113] Table 7

[0114]

[0115] This invention designs a page layout protocol parsing method, a page layout rendering tree method, a page control adapter, and a page control factory to achieve application software prototype development in a low-code or no-code manner. At the same time, it simplifies application release and deployment methods, supports gray-scale release and seamless integration with cloud platforms, and effectively solves a series of problems in industrial software development models, such as long development cycles, high costs, and difficulty in implementing business changes, thereby achieving cost reduction and efficiency improvement.

[0116] The above description is merely an embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, extensions, etc., made within the spirit and principles of the present invention are included within the scope of protection of the present invention.

Claims

1. A design method for a visualization rendering engine for low-code platforms, characterized in that, Includes the following steps: 1) Construct page controls; 1-1) Design a page layout protocol parsing method: For the page layout protocol exported by the low-code visual editor, parse the page layout protocol according to the rendering specifications and convert it into an object that the engine can recognize; 1-2) Based on the objects that the engine can recognize, construct the page layout rendering tree: traverse the document object model, render component nodes in turn, construct the component tree, combine with the style tree, perform secondary rendering, construct the page rendering tree, complete the construction of the control tree, the style tree, and the page control rendering tree, and traverse the control tree and style tree, bind the control and style according to the style code CSSID, so as to obtain the layout of each visible component element; 1-3) Based on the objects that the engine can recognize, build the interactive capabilities of the page controls and complete the construction of the page controls; 2) Construct a page control adapter to enable the adaptation and dynamic expansion capabilities of the page controls constructed in step 1); 3) Build a page control factory to manage the lifecycle of the page control instances built in step 1).

2. The method for designing a visualization rendering engine for low-code platforms according to claim 1, characterized in that, The page layout protocol includes: style protocol, document object model, page attributes, page state, custom functions, page lifecycle, page configuration, data source, and dependencies.

3. The method for designing a visualization rendering engine for low-code platforms according to claim 1, characterized in that, The page control interaction capabilities include page attribute settings, page state settings, custom function settings, page lifecycle function settings, importing dependencies, loading dependent resources, configuration settings, and loading data.

4. The method for designing a visualization rendering engine for low-code platforms according to claim 1, characterized in that, In step 1-1), the parsing of the page layout protocol and its conversion into an object recognizable by the engine specifically involves: Page layout protocol parsing method f parse The format specification is expressed as: f parse ={css,dom,props,state,methods,life,config,datasource,depences,ref} Here, css refers to CSS styles, dom refers to the rendering object, props refers to page properties, state refers to page state, methods refers to custom functions, life refers to lifecycle functions, config refers to configuration items, datasource refers to the data source, dependencies refers to dependencies, and ref refers to referenced control objects.

5. The method for designing a visualization rendering engine for low-code platforms according to claim 1, characterized in that, The construction of the control tree includes: constructing a control tree model and a control tree construction method; The control tree model is constructed by cascading parent and child controls into a tree model, with identical parent and child control models. The control tree model is DOM. root The format specification is expressed as: Dom root ={id,type,name,visiable,...cssid,...,Dom children } Where id, type, name, visible, ... are the basic properties set for the control, cssid is the style code, and DOM... children This refers to the set of child controls to which the control belongs; The control tree construction method includes: a. Obtain the root node and render the control based on the root node's properties; b. Obtain the set of child nodes to which the root node belongs; c. If the child node set is not empty, traverse the child node, draw the child node, and backtrack to step b; if the child node is empty, return.

6. The method for designing a visualization rendering engine for low-code platforms according to claim 1, characterized in that, The construction of the style tree includes: a style tree model and a style tree construction method; The style tree model is constructed by cascading parent and child styles into a tree model. Parent and child style models are identical. The style tree model is based on CSS. root The format specification is expressed as: Css root ={id,...,[key:value],Css children } Where id,...,[key:value] are the basic properties of the control, and [key:value] is the mapping relationship between style tags and style values, CSS. children This refers to the set of sub-styles to which the control belongs; The style tree construction method includes the following steps: Step 1: Obtain the root node and define its style based on its attributes; Step 2: Obtain the set of child style nodes to which the root node belongs; Step 3: If the set of child style nodes is not empty, traverse the child nodes, define the child style nodes, and backtrack to Step 2; if the set of child style nodes is empty, return.

7. The method for designing a visualization rendering engine for low-code platforms according to claim 1, characterized in that, The construction of the page control adapter specifically involves: Define the third-party extension capabilities of page controls, including: extension interface definition; The format specification for the Extract interface is as follows: Extract={resourceid,name,version,comment,[mthd],[prop],[recall],[com]} Wherein, resourceid is the dependent third-party resource package, [mthd] is the set of interfaces provided by resourceid, [prop] is the set of attributes provided by resourceid, [recall] is the set of callback interfaces provided by resourceid, and [mthd] is the set of controls provided by resourceid.

8. The method for designing a visualization rendering engine for low-code platforms according to claim 1, characterized in that, Step 3) specifically includes: Define the ability to manage the lifecycle of page control instances, including: page control creation, page control invocation, and page control destruction.

Images