Low-code layout method and system

Abstract

The invention discloses a low-code layout method and system. The invention relates to the technical field of application development. According to page design, collecting layout information of all elements, including positions, sizes and arrangement sequences of the elements; the method comprises the following steps: collecting layout information, analyzing a nesting relationship among elements, namely which elements are sub-elements of other elements and which elements are independent, and then arranging the collected layout information and the nesting relationship into structured Schema data. And the data are used as input of subsequent layout processing. According to the method, page elements and attributes thereof are clarified in a data preparation stage, and a foundation is laid for subsequent automatic layout processing. The application of Schema data enables layout information to be structured, and management and modification are facilitated. And the layout engine can analyze the Schema data and automatically generate the layout structure, so that the layout efficiency is remarkably improved. And according to the equipment resolution and the element minimum width parameter set by the user, the layout engine can automatically carry out equal-ratio scaling.

Description

Technical Field

[0001] The present invention relates to the field of application development technology, specifically to the field of application interface layout technology, and in particular to a low-code layout method and system. Background Art

[0002] In the traditional application development process, the implementation of interface layout mainly relies on manually writing a lot of code. This method requires developers to have a deep programming foundation and a precise grasp of layout details. Developers need to accurately specify the position, size and relative relationship of each element to ensure that the application interface can be displayed correctly on different devices and screen sizes. However, this hard-coding method is not only time-consuming and labor-intensive, but also lacks flexibility and scalability.

[0003] In traditional application development, interface layout often faces a series of challenges and problems. Among them, the most notable is the problem of inflexible and difficult to adjust layout. Because the interface layout code is tightly coupled with the business logic code, any modification to the interface layout may trigger a large number of code changes, which not only increases maintenance costs but also prolongs the development cycle.

[0004] With the popularity of mobile devices and the development of multi-terminal applications, users' expectations for application interfaces are also increasing. They hope that applications can provide consistent and high-quality user experience on devices of different sizes and resolutions. However, traditional interface layout methods are difficult to meet this demand. Developers need to spend a lot of time and energy to adapt to different devices and screen sizes, and it is often difficult to achieve perfect adaptation effects.

[0005] Therefore, developers are more urgently in need of an intelligently adaptive and flexible interface layout solution. This solution should be able to automatically adjust the interface layout according to the device's screen size and resolution to ensure that the application can provide a consistent and high-quality user experience on different devices. At the same time, this solution should also be easy to use and highly customizable to reduce development costs and improve development efficiency.

[0006] To this end, the present invention proposes a low-code layout method and system. Summary of the invention

[0007] In view of this, the present invention hopes to provide a low-code layout method and system to solve or alleviate the technical problems existing in the prior art, that is, how to achieve intelligent adaptive and flexible interface layout of application development under the restriction of low code, and at least provide a beneficial option for this; the technical solution of the present invention is implemented as follows:

[0008] First, a low-code layout approach:

[0009] 1. Overview:

[0010] The present invention aims to solve the problem of inflexible and difficult-to-adjust interface layout in traditional application development. It adopts grid layout and grid layout operations to achieve adaptive element width and height, as well as flexible layout with unlimited nesting. At the same time, the solution also supports free layout, allowing elements to be separated from the document flow and overlaid on other elements, realizing more personalized page design.

[0011] In order to adapt to different devices and screen sizes, the solution also provides a multi-terminal adaptation function, which can be scaled proportionally according to the device resolution to ensure that the page can be fully displayed at any size. In addition, the solution also supports the export and fine-tuning of layout data, which is convenient for reuse and adjustment of layouts in different pages or projects. In summary, this interface layout solution, with its intelligent adaptation, high flexibility and easy reuse, brings a more convenient and efficient interface layout experience to application developers.

[0012] (II) Technical solution:

[0013] To achieve the above technical objectives, the present invention selects to execute the following steps.

[0014] 2.1 Step S1, data preparation:

[0015] Enter the elements and their attributes that need to be displayed on the page, including width, height, and whether to be out of the document flow.

[0016] Prepare or generate the initial Schema data for the page layout, including the layout information and nested relationships of all elements.

[0017] 2.1.1 Step S100, determine page elements and their attributes:

[0018] Read all the elements that need to be displayed on the page, including text, images, buttons, and input boxes.

[0019] For each element, read its properties, including width, height, and whether it is out of the document flow. These properties will directly affect the layout and display of the element.

[0020] 2.1.2 Step S101, generate initial Schema data:

[0021] According to the page design, collect the layout information of all elements, including the position, size and arrangement order of the elements. Analyze the nested relationship between elements, that is, which elements are sub-elements of other elements and which elements are independent, and then organize the collected layout information and nested relationships into structured Schema data. This data will serve as input for subsequent layout processing.

[0022] 2.2 Step S2, data input:

[0023] The prepared Schema data is input into the layout engine, which receives the interface operation or API call instruction executed by the user and passes in the device resolution and element minimum width parameters.

[0024] 2.2.1 Step S200, input Schema data:

[0025] Upload files directly through the interface, or send data to the layout engine through API calls to input Schema data into the layout engine;

[0026] Input the prepared Schema data into the layout engine in the selected way for subsequent layout processing.

[0027] 2.2.2 Step S201, receiving user instructions and parameters:

[0028] S2010, monitoring user operations: the layout engine monitors the user's interface operations or API call instructions and responds to the user's layout requirements;

[0029] S2011, receiving resolution parameters: when the user sets the device resolution through interface operation or API call, the layout engine receives this parameter to adjust the layout according to the screen size of the device;

[0030] S2012, receiving minimum width parameter: When the user sets the minimum width of an element, the layout engine also needs to receive this parameter to ensure that the element can maintain a reasonable display ratio under different screen sizes.

[0031] 2.3 Step S3, data processing:

[0032] The layout engine parses the input Schema data and constructs the initial layout structure of the page. According to the input device resolution and element minimum width parameters set by the user, the layout engine scales the page proportionally to adapt to screens of different sizes.

[0033] The layout engine executes the width adaptation algorithm to calculate the width of each element and divide or adjust it. For elements that need to be split, the layout engine applies the grid height adaptation algorithm to calculate the height of the element after the split. If the element is set to the out of document flow attribute, the layout engine adjusts its layout mode to free layout and handles the overlapping relationship with other elements.

[0034] 2.3.1 Step S300, parse Schema data and build initial layout structure:

[0035] Parse the input Schema data and extract the layout information and nesting relationships of all elements. Based on the parsed data, the layout engine constructs the initial layout structure of the page, including the position, size, and arrangement order of the elements.

[0036] 2.3.2 Step S301, execute width adaptive algorithm:

[0037] Execute the width adaptive algorithm to calculate the width of each element and divide or adjust it to adapt to screens of different sizes:

[0038] Suppose the total width of the page is W, the number of elements is n, and the initial width of element i is w i , the minimum width is min i , then the adjusted width w i ' is calculated as:

[0039]

[0040] Among them, ∑ j≠i (min j ) represents the sum of the minimum widths of all elements except element i.

[0041] 2.3.3 Step S302, applying the grid height adaptive algorithm:

[0042] For elements that need to be split, a grid height adaptive algorithm is executed to calculate the height of the element after the split.

[0043] That is, the height of the element after the line break is automatically calculated based on the remaining space and grid size, and the height is evenly distributed without dragging the height. If the user drags to adjust the element height, the remaining space will be redistributed to other elements. The format is:

[0044] S3020, calculate the difference between the sum of the initial heights of all elements and the total height of the page to obtain the remaining space R:

[0045] Assume the total page height is H, the number of elements is m, the grid size is g, and the initial height of element i is h i , the height after splitting or adjusting is h i ′:

[0046]

[0047] S3021: For elements that need to be split or adjusted in height, calculate their new height hi′ based on the remaining space and grid size:

[0048]

[0049] or,

[0050]

[0051] in, Represents a round-down operation, ensuring that the height adjustment is an integer multiple of the grid size.

[0052] 2.3.4 Step S303, processing the layout of elements out of the document flow:

[0053] S3030, identifying out-of-document flow elements: checking whether an out-of-document flow attribute is set for each element;

[0054] S3031, adjusting the layout mode: for the element that has been set with the out-of-document-flow attribute, adjusting its layout mode to free layout;

[0055] S3032, Processing Overlapping Relationships: Processing the overlapping relationships between free layout elements and other elements to ensure the stability and consistency of the overall layout.

[0056] 2.4 Step S4, data output:

[0057] The layout engine outputs the processed layout data as rendering instructions or a rendering tree. The rendering engine draws the corresponding elements and layout on the page according to the layout data.

[0058] 2.4.1 Step S400, generating and outputting rendering instructions or rendering trees:

[0059] After completing data processing, the layout engine generates rendering instructions containing all element layout information or builds a rendering tree. This rendering instruction or rendering tree includes the position, size, color, and font style information of each element.

[0060] The layout engine outputs rendering instructions or rendering trees to the rendering engine through internal interfaces or API calls.

[0061] 2.4.2 Step S401, the rendering engine draws the page:

[0062] The rendering engine parses the element layout information and style information, and draws the corresponding elements and layout on the page, including the element's shape, color, font, border and other visual styles.

[0063] 2.5 Step S5, interactive adjustment:

[0064] After reading the instructions passed by the user through interface operations or API calls, the layout engine updates the layout data in real time according to the user's adjustments and re-renders the page.

[0065] Export the Schema data and input it into the layout engine again to render a new page layout so that it can be reused in other pages or projects.

[0066] 2.5.1 Step S500, read the user adjustment instruction:

[0067] According to the user's instructions, the layout engine updates the layout data in memory in real time to reflect the user's adjustments. Based on the updated layout data, the layout engine generates new rendering instructions or updates the rendering tree. The rendering engine receives the new rendering instructions or updated rendering tree and redraws the page to reflect the user's layout adjustments.

[0068] 2.5.2 Step S501, export Schema data:

[0069] Serialize the updated Schema data into JSON format for export. The layout engine exports the serialized Schema data to a file.

[0070] 2.5.3 Step S502, reuse Schema data:

[0071] When the user imports the exported Schema data into the same layout engine instance or another instance, the layout engine uses the imported Schema data to render a new page layout so that the layout design can be reused in other pages or projects.

[0072] (III) Mechanism for solving technical problems:

[0073] 3.1 Grid layout and width adaptation:

[0074] The present invention adopts grid layout as the basic framework of interface layout, divides the page into multiple grid units of equal width, and each element occupies one or more grid units. This layout method makes the page structure clear and easy to manage and adjust.

[0075] Without adjusting the width of the elements, the width of each element is evenly divided among the grid cells of the row. If the user adjusts the width of an element, the remaining width will be automatically distributed to other elements to ensure the harmony and balance of the overall layout. In addition, when the width of an element reaches the set minimum width and the current row cannot accommodate it, the last element will be automatically moved to the next row to achieve intelligent line wrapping.

[0076] 3.2 Grid layout operation and height adaptation:

[0077] The overall layout adopts grid layout operation by default, with a fixed grid size (such as 10px per grid) as the layout basis, which is convenient for element boundary alignment and overall style unification. This refined layout control method makes the page design more beautiful and precise.

[0078] Based on the grid layout, the present invention also supports adaptive adjustment of element height. For elements that need to be split, the system will automatically calculate the height of the element after the split according to the remaining space, and divide the height evenly without dragging the height. If the user drags and adjusts the element height, the remaining space will be redistributed to other elements. This highly adaptive mechanism makes the page layout more flexible and changeable.

[0079] 3.3 Free layout and separation from document flow:

[0080] The present invention allows element settings to be separated from document flow attributes, thereby changing to free layout mode. In free layout mode, users can overlay elements on other elements or place them at any position to achieve a more personalized page design effect. Through a sophisticated document flow control mechanism, the present invention ensures the harmonious coexistence of free layout elements and other elements. Even if the elements are separated from the document flow, the system can ensure the stability and consistency of the overall layout.

[0081] 3.4 Multi-terminal adaptation and responsive design:

[0082] In order to adapt to the needs of different devices and screen sizes, the present invention provides a multi-terminal adaptation function. The user can set parameters such as page resolution, and the system automatically adjusts the page layout and element size according to these parameters to achieve a geometric zoom effect. This responsive design mechanism ensures that the page can be fully displayed at any size and maintains a good user experience. On small-screen devices such as mobile terminals, users can set the minimum width of each element to ensure that the element can maintain a reasonable display ratio and layout effect at different screen sizes. When the element width reaches the minimum width and the current line cannot accommodate it, the system will automatically perform a line break to maintain the rationality of the overall layout.

[0083] 3.5Schema data export and reuse:

[0084] After completing the page layout design, users can export the current Schema data so that these layout settings can be reused in other pages or projects. This data export function greatly improves development efficiency and design reusability. The exported Schema data can be fine-tuned in the renderer provided by the code engine and combined with the renderer for page rendering output. This mechanism enables developers to quickly transform design ideas into actual application interfaces and continuously optimize and improve user experience.

[0085] On the second aspect, a low-code layout system:

[0086] The system includes a processor and a memory connected to the processor, wherein the memory stores program instructions, and when the program instructions are executed by the processor, the processor executes the layout method as described above. The system also includes:

[0087] (1) A data preparation module for identifying and determining all elements and their key attributes to be displayed on the page;

[0088] (2) a data input module for importing the prepared Schema data into the layout engine;

[0089] (3) A data processing module for parsing the input Schema data and constructing the initial layout framework of the page based on the parsing results;

[0090] (4) a data output module for converting the processed layout data into rendering instructions or a rendering tree;

[0091] (5) An interactive adjustment module for reading and responding in real time to adjustment instructions issued by the user through an interface or API.

[0092] Compared with the prior art, the present invention has the following beneficial effects:

[0093] 1. Improve layout efficiency and flexibility: The present invention clarifies page elements and their attributes in the data preparation stage, laying the foundation for subsequent automated layout processing. The use of Schema data makes layout information structured, easy to manage and modify. The layout engine can parse Schema data and automatically generate layout structure, significantly improving layout efficiency.

[0094] 2. Enhance page adaptability: According to the device resolution and element minimum width parameters set by the user, the layout engine can automatically perform proportional scaling to ensure that the page presents good display effects on screens of different sizes. The application of width adaptive algorithm and grid height adaptive algorithm makes element layout more flexible and can adapt to different screen sizes and resolutions.

[0095] 3. Improve user experience: The real-time interactive adjustment function of the present invention enables users to see the layout adjustment effect instantly, improving user experience. Users can easily adjust the layout through interface operation or API call, which is convenient to operate.

[0096] 4. Promote layout reuse and consistency: The export and reuse function of the Schema data of the present invention enables the same layout to be easily applied to other pages or projects, reducing the cost of repeated layout. Structured layout data helps to maintain the consistency of page layout and enhance brand image.

[0097] 5. Reduce maintenance costs: The centralized layout engine processing of the present invention makes subsequent layout maintenance more convenient. The structured storage of layout data helps to quickly locate and modify layout problems, reducing maintenance costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0098] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or technical descriptions will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0099] Figure 1 It is a schematic diagram of the method flow of the present invention;

[0100] Figure 2 It is a schematic diagram of the system composition of the present invention. DETAILED DESCRIPTION

[0101] In order to make the above-mentioned purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are described in detail below in conjunction with the accompanying drawings. In the following description, many specific details are set forth to facilitate a full understanding of the present invention. However, the present invention can be implemented in many other ways different from those described herein, and those skilled in the art can make similar improvements without violating the connotation of the present invention. Therefore, the present invention is not limited to the specific embodiments disclosed below;

[0102] It should be noted that the various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments, and the same or similar parts between the various embodiments can be referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part description.

[0103] Embodiment 1: Figure 1 As shown, this embodiment will provide a low-code layout method, which adopts the existing Alibaba engine code platform and its layout engine, and executes the following scheme to achieve page layout adjustment of the online car-hailing APP.

[0104] In this embodiment, regarding step S1, data preparation: input the elements and their attributes that need to be displayed on the online car-hailing APP page, including width, height, and whether to be out of the document flow.

[0105] Prepare or generate the initial Schema data for the page layout, including the layout information and nested relationships of all elements.

[0106] Specifically, step S100 determines the page elements and their attributes: for the homepage of the online car-hailing APP, the elements that need to be displayed include: a search box (for entering the destination), a car type selection button (such as express, private car, etc.), a map display area, a call button, as well as a user avatar and a menu button, etc.

[0107] Read the properties of each element. For example, the search box occupies 80% of the screen width and is 50px high, and does not deviate from the document flow. The car type selection buttons are arranged in a grid, and each button is 20% of the screen width and 60px high, and does not deviate from the document flow. The map display area occupies the remaining screen space and deviates from the document flow so that it can be covered under other elements.

[0108] Specifically, step S101 generates initial Schema data: collects layout information of all elements, such as the search box is located at the top of the page, the car type selection buttons are located below the search box and arranged horizontally, the map display area covers the entire page background, and the call button is fixed at the bottom of the screen.

[0109] Analyze the nested relationship between elements. For example, the search box and car type selection button belong to the same top navigation bar container, while the call button belongs to the bottom toolbar container.

[0110] Organize this information into structured Schema data, including the element's ID, type, position, size, whether it is out of the document flow, and nested relationships.

[0111] In this embodiment, regarding step S2, data input: the prepared Schema data is input into the layout engine, and the layout engine receives the interface operation or API call instruction executed by the user, and passes in the device resolution and element minimum width parameters.

[0112] Specifically, in step S200, input Schema data:

[0113] Upload files directly through the interface, or send data to the layout engine through API calls to input Schema data into the layout engine;

[0114] Input the prepared Schema data into the layout engine in the selected way for subsequent layout processing.

[0115] Specifically, step S201, receiving user instructions and parameters:

[0116] S2010, monitor user operations: The layout engine monitors user operations on the online car-hailing APP interface, such as adjusting element positions, changing element sizes, etc.

[0117] S2011, receiving resolution parameters: The layout engine receives the device resolution parameters set by the user, such as the resolution of iPhone 13.

[0118] S2012, receiving a minimum width parameter: the layout engine receives a minimum width parameter set by a user for an element to ensure readability of the element on different screen sizes.

[0119] In this embodiment, regarding step S3, data processing: the layout engine parses the input Schema data and constructs the initial layout structure of the page. According to the input device resolution and element minimum width parameters set by the user, the layout engine scales the page proportionally to adapt to screens of different sizes.

[0120] The layout engine executes the width adaptation algorithm to calculate the width of each element and divide or adjust it. For elements that need to be split, the layout engine applies the grid height adaptation algorithm to calculate the height of the element after the split. If the element is set to the out of document flow attribute, the layout engine adjusts its layout mode to free layout and handles the overlapping relationship with other elements.

[0121] Specifically, step S300, parse the Schema data and build the initial layout structure: parse the input Schema data, extract the layout information and nested relationships of all elements, and build the initial layout structure of the online car-hailing APP homepage, including the top navigation bar, map display area, and bottom toolbar.

[0122] Specifically, in step S301, a width adaptation algorithm is executed: the width of each element is calculated according to the device resolution and the minimum width parameter of the element. For example, if the screen width is 375px, the width of the search box is calculated as 375px*80%=300px.

[0123] Suppose the total width of the page is W, the number of elements is n, and the initial width of element i is w i , the minimum width is min i , then the adjusted width w i ' is calculated as:

[0124]

[0125] Among them, ∑ j≠i (min j ) represents the sum of the minimum widths of all elements except element i.

[0126] Specifically, step S302, apply the grid height adaptive algorithm: for elements such as the car type selection button that need to be evenly distributed in height, execute the grid height adaptive algorithm. If the screen height is 812px, after removing the height of the top navigation bar and the bottom toolbar, the remaining space is evenly distributed to the car type selection button.

[0127] That is, the height of the element after the line break is automatically calculated based on the remaining space and grid size, and the height is evenly distributed without dragging the height. If the user drags to adjust the element height, the remaining space will be redistributed to other elements. The format is:

[0128] S3020, calculate the difference between the sum of the initial heights of all elements and the total height of the page to obtain the remaining space R:

[0129] Assume the total page height is H, the number of elements is m, the grid size is g, and the initial height of element i is h i , the height after splitting or adjusting is h i ′:

[0130]

[0131] S3021: For elements that need to be split or adjusted in height, calculate their new height hi′ based on the remaining space and grid size:

[0132]

[0133] or,

[0134]

[0135] in, Represents a round-down operation, ensuring that the height adjustment is an integer multiple of the grid size.

[0136] Specifically, step S303 processes the layout of elements that are out of the document flow: identifies the map display area as an element that is out of the document flow, adjusts its layout mode to a free layout, and processes the overlapping relationship with other elements to ensure that the map can be covered under the top navigation bar and the bottom toolbar.

[0137] In this embodiment, regarding step S4, data output: the layout engine outputs the processed layout data as rendering instructions or a rendering tree. The rendering engine draws corresponding elements and layouts on the page according to the layout data.

[0138] Specifically, step S400 generates and outputs a rendering instruction or a rendering tree: after completing data processing, the layout engine generates a rendering instruction containing all element layout information or constructs a rendering tree, which includes the position, size, color, and font style information of each element.

[0139] The layout engine outputs rendering instructions or rendering trees to the rendering engine through internal interfaces or API calls.

[0140] Specifically, step S401, the rendering engine draws the page: the rendering engine parses the rendering instruction or the rendering tree, and draws the homepage layout of the online car-hailing APP on the page, including elements such as the top navigation bar, the map display area, and the bottom toolbar.

[0141] In this embodiment, regarding step S5, interactive adjustment: after reading the instructions transmitted by the user through the interface operation or API call, the layout engine updates the layout data in real time according to the user's adjustment and re-renders the page. The Schema data is exported and input into the layout engine again to perform new page layout rendering so that it can be reused in other pages or projects.

[0142] Specifically, step S500 reads user adjustment instructions: the user adjusts the element layout through interface operations or API calls, such as changing the arrangement of the car type selection buttons. The layout engine updates the layout data in real time and generates new rendering instructions or updates the rendering tree.

[0143] Specifically, step S501, exporting Schema data: serializing the updated Schema data into JSON format for export. The layout engine exports the serialized Schema data to a file.

[0144] Specifically, step S502, reuse of Schema data: the user can import the exported Schema data into other pages or projects, and the layout engine uses these data to render a new page layout, thereby achieving reuse of layout design.

[0145] Furthermore, the backend pseudo code example of the technical solution of this embodiment is as follows:

[0146]

[0147]

[0148]

[0149]

[0150] In the above procedure, it should be noted that:

[0151] (1) When the LayoutEngine class is initialized, no layout data or parameters are set.

[0152] (2) Input Schema: Use the input_schema method to input the Schema data from the front end into the layout engine.

[0153] (3) Set parameters: Set the device resolution and the minimum width of the element through the set_resolution and set_min_element_width methods.

[0154] (4) Processing layout: The process_layout method is the core of layout processing. It first parses the Schema data and builds the initial layout structure. Then, it executes the width adaptation algorithm based on the device resolution and the minimum width of the element. If necessary, the grid height adaptation algorithm is also applied. Next, it processes the layout of elements that are out of the document flow. Finally, it generates rendering instructions containing the layout information of all elements.

[0155] (5) Rendering instructions: The generated rendering instructions will be sent to the front-end, and the front-end rendering engine will parse these instructions and draw the corresponding elements and layout on the page.

[0156] (6) Interactive adjustment: In actual applications, users will adjust the layout through the front-end interface. These adjustments will be sent to the back-end through API calls. The back-end layout engine will update the layout data based on the user's adjustments and regenerate rendering instructions to send to the front-end for rendering.

[0157] Embodiment 2: Figure 2 As shown, this embodiment discloses a low-code layout system:

[0158] The system includes a processor and a memory connected to the processor, wherein the memory stores program instructions, and when the program instructions are executed by the processor, the processor executes the layout method as described above. The system also includes:

[0159] (1) A data preparation module for identifying and determining all elements and their key attributes that need to be displayed on the page: Prepare or generate Schema data that describes the initial state of the page layout. The data contains the layout details of all elements and the nested relationships between them.

[0160] (2) Data input module for importing prepared Schema data into the layout engine: The layout engine receives instructions issued by the user through the interface or API, and obtains parameters such as device resolution and minimum element width.

[0161] (3) A data processing module used to parse the input Schema data and build the initial layout framework of the page based on the parsing results: the page is scaled proportionally according to the device resolution and minimum element width set by the user to ensure that the layout can be well displayed on screens of different sizes. At the same time, a width adaptation algorithm is executed to accurately calculate the width of each element and make necessary equalization or adjustments. For elements that need to be split, a grid height adaptation algorithm is applied to accurately calculate the height of the element after the split. In addition, elements that are separated from the document flow are processed, their layout mode is adjusted to free layout, and the overlapping relationship with other elements is properly handled.

[0162] (4) A data output module for converting the processed layout data into rendering instructions or a rendering tree: The rendering engine accurately draws the corresponding elements and layout on the page based on the layout data.

[0163] (5) An interactive adjustment module for real-time reading and responding to adjustment instructions issued by users through the interface or API: Based on the user's adjustments, the layout data is updated in real time, and the page is re-rendered to ensure that the page display is consistent with the user's adjustments. The Schema data export function is provided, allowing users to export data and reuse it in other pages or projects, realizing flexible application of layout.

[0164] All the above embodiments only express the implementation methods of the relevant practical applications of the present invention, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the invention patent. It should be pointed out that, for ordinary technicians in this field, several variations and improvements can be made without departing from the concept of the present invention, which all belong to the protection scope of the present invention. Therefore, the protection scope of the patent of the present invention shall be based on the attached claims.

[0165] For those skilled in the art, it can be further appreciated that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0166] At the same time, those skilled in the art can understand that all or part of the processes in all the above-mentioned embodiments can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media provided in this application and used in the embodiments may include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (SSRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

Claims

1. A low-code layout method, characterized in that: The following solutions are included: S1, input the elements and their attributes to be displayed on the page, and generate the initial Schema data of the page layout, including the layout information and nested relationships of all elements; S2, inputting the Schema data into the layout engine, which receives the interface operation or API call instruction executed by the user, and passes in the device resolution and element minimum width parameters; S3, the layout engine parses the input Schema data and constructs the initial layout structure of the page; according to the input device resolution and element minimum width parameters set by the user, the layout engine scales the page proportionally; S4, the layout engine outputs the processed layout data as rendering instructions or a rendering tree, and the rendering engine draws corresponding elements and layouts on the page according to the layout data; S5, after reading the instructions transmitted by the user through interface operation or API call, the layout engine updates the layout data according to the user's adjustment and re-renders the page; the Schema data is exported and input into the layout engine again to render a new page layout.

2. The layout method according to claim 1, characterized in that: The implementation method of S1 includes: S100, read all elements that need to be displayed on the page, including text, pictures, buttons, and input boxes; for each element, read its attributes, including width, height, and whether it is out of the document flow; S101, according to the page design, collect the layout information of all elements, including the position, size and arrangement order of the elements; organize the collected layout information and nested relationships into structured Schema data.

3. The layout method according to claim 1, characterized in that: The implementation method of S2 includes: S200, directly uploading files through interface operations, or sending data to the layout engine through API calls, and inputting Schema data into the layout engine; S201, receiving user instructions and parameters, including: S2010, the layout engine monitors the user's interface operation or API call instruction and responds to the user's layout demand; S2011, when the user sets the device resolution through interface operation or API call, the layout engine receives this parameter; S2012: When the user sets the minimum width of an element, the layout engine also receives this parameter.

4. The layout method according to claim 1, characterized in that: In S3, the layout engine executes a width adaptive algorithm to calculate the width of each element and divides or adjusts it equally; for elements that need to be split, the layout engine applies a grid height adaptive algorithm to calculate the height of the element after the split.

5. The layout method according to claim 4, characterized in that: The implementation method of S3 includes: S300: Parse the input Schema data, extract the layout information and nested relationships of all elements, and construct the initial layout structure of the page, including the position, size, and arrangement order of the elements; S301, executing a width adaptation algorithm to calculate the width of each element and divide or adjust it to fit screens of different sizes: Suppose the total width of the page is W, the number of elements is n, and the initial width of element i is w i , the minimum width is min i , then the adjusted width w i ' is calculated as: Among them, ∑ j≠i (min j ) represents the sum of the minimum widths of all elements except element i.

6. The layout method according to claim 4, characterized in that: In S3, for the elements that need to be split, a grid height adaptive algorithm is executed to calculate the height of the elements after the split: S3020, calculate the difference between the sum of the initial heights of all elements and the total height of the page to obtain the remaining space R: Assume the total page height is H, the number of elements is m, the grid size is g, and the initial height of element i is h i , the height after splitting or adjusting is h i ′: S3021: For elements that need to be split or adjusted in height, calculate their new height hi′ based on the remaining space and grid size:

7. The layout method according to claim 1, characterized in that: The implementation method of S4 is: S400, after completing data processing, the layout engine generates rendering instructions containing layout information of all elements or constructs a rendering tree, including the position, size, color and font style information of each element; S401, the rendering engine parses the element layout information and style information, and draws the corresponding elements and layout on the page, including the visual styles such as the element shape, color, font and border.

8. The layout method according to claim 1, characterized in that: The implementation method of S5 is: S500, according to the user's instruction, the layout engine updates the layout data in the memory in real time; based on the updated layout data, the layout engine generates a new rendering instruction or updates the rendering tree, and redraws the page; S501, serialize the updated Schema data into JSON format and export it; S502: The layout engine uses the imported Schema data to render a new page layout.

9. A low-code layout system, characterized by: The system includes a processor and a memory connected to the processor, wherein program instructions are stored in the memory, and when the program instructions are executed by the processor, the processor executes the layout method according to any one of claims 1 to 8.

10. The layout system according to claim 9, characterized in that: Also included is a device connected to the processor. Data preparation module for identifying and determining all elements and their key attributes to be displayed on the page; Data input module for importing prepared Schema data into the layout engine; A data processing module used to parse the input Schema data and build the initial layout framework of the page based on the parsing results; A data output module for converting processed layout data into rendering instructions or rendering trees; An interactive adjustment module is used to read and respond to adjustment instructions issued by users through the interface or API in real time.

Images