A terminal dynamic form adaptive rendering and registration management method and system

Abstract

The application discloses a terminal dynamic form self-adaptive rendering and registration management method and system, and the method comprises the following steps: obtaining form structured data containing field nodes, constraint rules and dependent topologies and terminal multi-dimensional characteristic parameters, binding the two types of data and constructing a form rendering context. Relying on terminal parameters to calculate layout constraint factors, completing field grouping and position calculation, combining dependent topology sequencing to divide levels, and generating a target rendering layout tree. Traversing the layout tree to instantiate components and inject business logic, and adopting progressive rendering: visible area components are preferentially rendered, non-visible area components are delayed rendered, and components out of the visible area are released resources on demand. Building a data management context, when field data changes, updating downstream nodes in cascade according to the dependent topology; collecting form data to execute local + server dual-channel persistence, and visualizing the synchronization state on the page. The application provides reliable technical support for digital information collection standardization.

Description

Technical Field

[0001] This invention belongs to the field of computer information processing technology, and more specifically, relates to a method and system for adaptive rendering and registration management of dynamic forms on a terminal. Background Technology

[0002] Dynamic forms are a core foundation for information collection and end-to-end business processes in government and enterprise offices, finance, and healthcare. They widely support various digital scenarios such as government approvals, public service data reporting, financial qualification verification, and medical record archiving. Their terminal adaptability, logical layout standardization, page smoothness, and data closed-loop management level directly determine the overall efficiency of digital office work and the ability to ensure the security of sensitive business data in various industries. With the continuous deepening of full-domain digital construction, the widespread adoption of cross-terminal hybrid office work, and the continuous expansion of complex and interconnected business form application scenarios, traditional dynamic form technologies can no longer meet the needs of high-quality development in various industries.

[0003] Existing technologies have low overall compatibility across terminals. Most of them use simple responsive adaptation logic to adjust the interface style, without conducting unified modeling and control for input interaction modes that differ in the pixel display density of terminal screens. The consistency of form interface display is extremely poor across different models and types of devices, and layout errors and touch adaptation anomalies occur frequently, making it difficult to adapt to the normalized business operations of multi-terminal collaboration.

[0004] The form layout lacks a deep understanding of business logic. Traditional layout algorithms rely solely on the horizontal size of the container to allocate field positions, completely ignoring the inherent hierarchical relationships between business fields. This can easily disrupt the order of compliant business data entry, violate the daily work habits of operators, significantly increase the probability of information entry errors, and undermine the rigor of the inherent logic of business data flow.

[0005] Large-scale complex form rendering performance is insufficient. Industry-standard technologies all adopt a one-time global full-scale rendering mode, resulting in excessively high initial screen response latency on mobile devices. Long-term operation will consume a large amount of device memory resources, easily leading to memory overflow, page lag, and crashes, making it unsuitable for high-frequency mobile daily business data entry scenarios.

[0006] Meanwhile, the full-cycle management of form registration lacks a complete closed-loop system. Existing solutions generally emphasize front-end page rendering while neglecting back-end data control. Field linkage verification mechanisms are imperfect, offline data security retention capabilities are weak, and the synchronization status of business data cannot be visualized. There are significant technical gaps, which can easily lead to the loss and disorder of business data, seriously hindering the standardized, secure, and long-term development of digital information collection in key industries. Summary of the Invention

[0007] This invention aims to solve the problems of low terminal adaptability, lack of logical awareness in layout, poor performance in large-scale rendering, and lack of closed-loop registration management in existing dynamic form technologies. It provides a dynamic form processing solution that is cross-terminal adaptive, logically ordered, performance optimized, and data closed-loop, thereby improving the efficiency and stability of information collection in multiple scenarios.

[0008] To address the aforementioned deficiencies or improvement needs of existing technologies, as a first aspect of this invention, the present invention provides a method for adaptive rendering and registration management of dynamic forms on a terminal, comprising: S1. Obtain the structured description data of the form and the multidimensional feature parameters of the current terminal, associate and bind the structured description data with the multidimensional feature parameters, and construct a form rendering context object; wherein, the structured description data includes multiple field nodes of the form, field constraint rules, and the dependency relationship topology between the field nodes; S2. Based on the multidimensional feature parameters, determine the target column number constraint value, scaling ratio, and interaction hot zone factor. Then, combine the dependency relationship of the field nodes to calculate the actual rendering size and relative arrangement position of each field node. At the same time, perform topological sorting on the multiple field nodes according to the dependency relationship topology to determine the dependency level. Arrange the field nodes in a hierarchical order according to the dependency level to generate the target rendering layout tree. S3. Perform dynamic component instantiation according to the hierarchical traversal of the target rendering layout tree, and dynamically inject business logic corresponding to the field constraint rules into the rendering component during the instantiation process; in the rendering process, combine visual state monitoring to perform progressive rendering, the progressive rendering includes: prioritizing the rendering of rendering components in the visible area, adding rendering components in the non-visible area to the waiting queue for delayed rendering, and performing resource release on rendered components that have left the visible area and meet the preset conditions. S4. Establish a form registration management context to uniformly maintain the field data model. When a change in the data of a field node is detected, the status update of the downstream dependent field node is triggered according to the dependency relationship topology cascading. The changed form data is collected to generate a registration record, and a dual-channel persistence operation including local caching and server synchronous upload is performed. The registration status identifier is updated according to the persistence result, and the registration status identifier is fed back to the corresponding rendering component for visualization.

[0009] Furthermore, in step S1, associating and binding the structured description data with the multidimensional feature parameters specifically includes: The screen physical size and resolution in the collected multidimensional feature parameters are normalized, the device pixel ratio and logical rendering size are calculated, and the original hardware parameters are converted into standardized logical rendering features. The global rendering configuration in the structured description data is parsed, and the logical rendering features and the input interaction mode parameters in the multi-dimensional feature parameters are matched with the global rendering configuration to determine the rendering strategy identifier and interaction event mapping table of the current terminal. Using the form identifier in the structured description data as the root node, the logical rendering features, the rendering strategy identifier, the interaction event mapping table, the multiple field nodes, and the dependency relationship topology are encapsulated into a tree-structured form rendering context object according to a preset hierarchical nesting rule, and the form rendering context object is injected into the global state management storage.

[0010] Furthermore, the dependency topology in S1 is a directed acyclic graph, and the structured description data also includes edge triggering conditions; the construction process of the dependency topology includes: The multiple field nodes are used as vertices of the graph, and the business dependencies between the field nodes are used as directed edges, with the direction of the directed edges pointing from the dependent field node to the dependent field node. When constructing the directed acyclic graph, a loop detection algorithm is executed. If a closed-loop dependency is detected, the construction is blocked and an abnormal configuration prompt is output. The edge triggering condition is bound to the directed edge, and the edge triggering condition is used as a prerequisite verification condition for cascading the update of the state of the downstream dependent field node.

[0011] Further, in step S2, the target column number constraint value, scaling ratio, and interaction hotspot factor are determined based on the multi-dimensional feature parameters. Then, the actual rendering size and relative arrangement position of each field node are calculated in combination with the dependency relationship of the field nodes. Specifically, this includes: Obtain the available rendering area width and the current device pixel ratio from the screen physical feature parameters; round down the ratio of the available rendering area width to the preset standard field baseline width to obtain the initial column number; multiply the initial column number by the preset density weight corresponding to the current device pixel ratio to obtain the basic column number constraint value; and determine the ratio of the current device pixel ratio to the baseline pixel density as the scaling ratio. The interaction type of the current terminal is identified based on the input interaction mode parameters. If it is a touch interaction mode, the minimum touch safety size preset by the system is obtained, and the ratio of the minimum touch safety size to the height of the standard interaction component is used as the interaction hot zone factor. If it is a keyboard and mouse interaction mode, the interaction hot zone factor is set to 1. Divide the basic column number constraint value by the interactive hot zone factor and round down to obtain the candidate column number; calculate the actual single column width of the available rendering area divided by the candidate column number; if the actual single column width is less than the minimum touch safety size, decrease the candidate column number until the actual single column width is greater than or equal to the minimum touch safety size, and use the finally determined candidate column number as the target column number constraint value; Field nodes with direct dependencies are grouped into the same logical group, and the cross-column attribute values ​​configured for each field node within the logical group are obtained. The width of the available rendering area is divided equally according to the target column number constraint value to obtain the single column base width. The single column base width is multiplied by the cross-column attribute value and combined with the scaling ratio to calculate the actual rendering width and height of each field node. According to the dependency hierarchy of the field nodes, the width occupied by the current row is accumulated sequentially using a fluid layout algorithm. When the accumulated value exceeds the width of the available rendering area, a line break operation is performed, and the X-axis and Y-axis coordinates of each field node in the two-dimensional coordinate system are recorded as the relative arrangement position.

[0012] Further, in step S2, the field nodes are arranged hierarchically according to the dependency hierarchy to generate the target rendering layout tree, including: According to the dependency hierarchy from low to high, the field nodes are divided into multiple rendering levels; within the same rendering level, the visual weight attribute and estimated rendering size of the field nodes are obtained, and the field nodes of the same level are initially sorted according to the visual weight attribute from high to low. Traverse the field nodes after the initial sorting. When assigning the current field node to the current rendering line, calculate the remaining available width of the current rendering line. If the estimated rendering size of the current field node is greater than the remaining available width, trigger the space fragment filling mechanism. Among the candidate field nodes in the initial sorting sequence that are after the current field node and whose estimated rendering size is less than or equal to the remaining available width, select the target candidate field node with the highest visual weight and assign it to the current rendering line first. Then, extend the current field node to the next rendering line to update the sorting result. Based on the updated sorting and position calculation results, an initial rendering layout tree containing root nodes, hierarchical nodes, and leaf nodes is constructed from top to bottom, wherein the leaf nodes correspond to specific rendering components, and the hierarchical nodes correspond to logical grouping containers. Obtain the virtual node hierarchy depth of the rendering component corresponding to each leaf node. When the sum of the virtual node hierarchy depths of the leaf nodes attached to the same level node exceeds the preset rendering depth threshold, mark the level node as a recombined node. The recombined node is subjected to structural flattening processing, which involves moving the leaf nodes under the recombined node to the parent node of the recombined node, or splitting the recombined node into multiple parallel sub-level nodes, to obtain the target rendering layout tree after depth reduction.

[0013] Further, in step S3, resource release is performed on rendered components that have moved out of the visible area and meet preset conditions, including: The intersection ratio and separation time of the rendered component relative to the visible area are obtained in real time through the visual status monitoring interface. When the intersection ratio is zero and the separation time exceeds a preset time threshold, it is determined that the preset condition is met. For rendered components that meet the preset conditions, DOM node unloading is performed, and their current component state data and user input data are serialized and saved to the memory state pool in the form registration management context; When the rendered component is detected to re-enter the visible area, the component state data and user input data are read from the memory state pool, and the DOM node mounting and state restoration are re-executed.

[0014] Furthermore, in S4, when a change in the data of a field node is detected, the state update of the downstream dependent field node is triggered according to the dependency relationship topology cascading, including: When a change in the data of the source field node is detected, the affected downstream dependent field nodes are extracted according to the dependency relationship topology. Based on the current visibility status of each downstream dependent field node in the target rendering layout tree, high priority is assigned to downstream dependent field nodes in the visible area, and low priority is assigned to downstream dependent field nodes in the non-visible area. An update task queue with priority identifiers is constructed. The tasks in the update task queue are subjected to debouncing merging processing based on state coverage rules. If multiple state update requests are generated for the same downstream dependent field node within a preset time window, the final target state is calculated according to the preset state transition matrix, and redundant requests that cause side effects of intermediate states are discarded to generate merged update tasks. The merged update tasks are then executed sequentially according to the topological sorting order of the dependency relationship topology and the priority identifier. Before executing the current update task, the edge triggering conditions between the current node and the upstream node are verified. If the verification fails or the upstream node is in a hidden or disabled state, a cascading pruning operation is performed on the current node and all its downstream dependent field nodes, skipping subsequent updates. If the verification passes, the visible or hidden state or disabled state of the downstream dependent field nodes is updated, and when it is necessary to re-fetch option data, the real-time interface request or local cache data is selected based on the network status parameters of the current terminal.

[0015] Furthermore, in step S4, a dual-channel persistence operation involving local caching and server-side synchronous upload is performed, including: The registration record is serialized and written to the local IndexedDB or SQLite database on the terminal, and a local persistence success identifier is generated. Simultaneously, the registration record is uploaded to the server via an asynchronous network request; If the network request is successful, receive the server persistence success flag and globally unique record ID returned by the server, write the globally unique record ID back to the local database, and update the registration status flag to "synchronized". If a network request fails or the network is in a weak network environment, the registration status identifier is updated to "pending synchronization" and the registration record is marked as dirty data. When the network environment is detected to be restored, the background retry mechanism is automatically triggered to upload the dirty data to the server.

[0016] As a second aspect of the present invention, a terminal dynamic form adaptive rendering and registration management system is also provided, comprising: The form rendering context object construction unit is used to obtain the structured description data of the form and the multi-dimensional feature parameters of the current terminal, and associate and bind the structured description data with the multi-dimensional feature parameters to construct the form rendering context object; wherein, the structured description data includes multiple field nodes of the form, field constraint rules, and the dependency relationship topology between the field nodes; The rendering layout tree generation unit is used to determine the target column number constraint value, scaling ratio and interaction hot zone factor based on the multi-dimensional feature parameters, and then calculate the actual rendering size and relative arrangement position of each field node in combination with the dependency relationship of the field nodes; at the same time, it performs topological sorting on the multiple field nodes according to the dependency relationship topology to determine the dependency level, and arranges the field nodes in hierarchical order according to the dependency level to generate the target rendering layout tree. A progressive rendering unit is used to dynamically instantiate components according to the hierarchical traversal of the target rendering layout tree, and dynamically inject business logic corresponding to the field constraint rules into the rendering components during the instantiation process; progressive rendering is performed in conjunction with visual state monitoring during the rendering process, and the progressive rendering includes: prioritizing the rendering of rendering components within the visible area, adding rendering components within the non-visible area to the rendering queue for delayed rendering, and releasing resources for rendered components that have left the visible area and meet preset conditions. The data management and persistence unit is used to establish a form registration management context to uniformly maintain the field data model. When a change in the data of a field node is detected, the unit triggers the status update of downstream dependent field nodes according to the dependency relationship topology cascading. The unit collects the changed form data to generate registration records, performs a dual-channel persistence operation including local caching and server-side synchronous upload, updates the registration status identifier according to the persistence result, and feeds back the registration status identifier to the corresponding rendering component for visualization.

[0017] As a third aspect of the present invention, a computer-readable storage medium is also provided, on which a computer program is stored, the computer program being executed by a processor of any one of the terminal dynamic form adaptive rendering and registration management methods.

[0018] In summary, compared with the prior art, the above-described technical solutions conceived by this invention can achieve the following beneficial effects: 1. The terminal dynamic form adaptive rendering and registration management method of the present invention obtains the structured description data of the form and the multi-dimensional feature parameters of the current terminal, associates and binds the structured description data and the multi-dimensional feature parameters to construct a form rendering context object, calculates the layout constraint factor based on the multi-dimensional feature parameters, and performs grouping, aggregation and position calculation on multiple field nodes based on the layout constraint factor. At the same time, it performs topological sorting on multiple field nodes according to the dependency relationship topology to determine the dependency level, and arranges the field nodes in a hierarchical order according to the dependency level to generate a target rendering layout tree. This achieves consistent adaptation of forms across terminals, solves the problems of low terminal adaptation accuracy and lack of logical awareness in the existing technology, ensures the uniformity of form presentation on different devices, maintains the business logic order between fields, avoids information input errors caused by layout chaos, improves the standardization and rationality of form layout, provides a clear structural foundation for subsequent component rendering, and ensures the orderliness and stability of the overall form operation.

[0019] 2. The terminal dynamic form adaptive rendering and registration management method of the present invention instantiates dynamic components by traversing the target rendering layout tree in hierarchical order, and dynamically injects business logic corresponding to field constraint rules into the rendering components during the instantiation process. During the rendering process, progressive rendering is performed in conjunction with visual status monitoring, prioritizing the rendering of rendering components within the visible area, adding rendering components outside the visible area to the waiting queue for delayed rendering, and releasing resources for rendered components that have left the visible area and meet preset conditions. This reduces the first-screen loading delay of large-scale forms, reduces device memory usage, avoids page lag or memory overflow issues in mobile scenarios, improves the smoothness and stability of form operation, adapts to high-frequency mobile business filling scenarios, ensures smooth user interaction, optimizes form rendering performance, and provides reliable technical support for the efficient operation of complex forms.

[0020] 3. The terminal dynamic form adaptive rendering and registration management method of the present invention establishes a form registration management context to uniformly maintain the field data model. When a change in the data of a field node is detected, the method triggers the status update of downstream dependent field nodes according to the dependency relationship topology cascading, collects the changed form data to generate a registration record, performs a dual-channel persistence operation including local caching and server-side synchronous upload, updates the registration status identifier according to the persistence result, and feeds back the registration status identifier to the corresponding rendering component for visualization. This realizes the linkage verification of field data and offline data retention, ensures data security in weak network or network outage scenarios, provides clear synchronous status feedback, eliminates technical gaps in data management, constructs a complete closed loop for form registration management, improves the reliability and security of data flow, and provides stable technical support for information collection in key industries. Attached Figure Description

[0021] Figure 1 This is a flowchart of a terminal dynamic form adaptive rendering and registration management method according to an embodiment of the present invention; Figure 2 This is a schematic diagram of the system units in an embodiment of the present invention. Detailed Implementation

[0022] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the invention. Furthermore, the technical features involved in the various embodiments of this invention described below can be combined with each other as long as they do not conflict with each other.

[0023] Example 1 Please refer to Figure 1This embodiment 1 provides a method for adaptive rendering and registration management of dynamic forms on a terminal, including: S1. Obtain the structured description data of the form and the multidimensional feature parameters of the current terminal, associate and bind the structured description data with the multidimensional feature parameters, and construct a form rendering context object; wherein, the structured description data includes multiple field nodes of the form, field constraint rules, and the dependency relationship topology between the field nodes; S2. Based on the multidimensional feature parameters, determine the target column number constraint value, scaling ratio, and interaction hot zone factor. Then, combine the dependency relationship of the field nodes to calculate the actual rendering size and relative arrangement position of each field node. At the same time, perform topological sorting on the multiple field nodes according to the dependency relationship topology to determine the dependency level. Arrange the field nodes in a hierarchical order according to the dependency level to generate the target rendering layout tree. S3. Perform dynamic component instantiation according to the hierarchical traversal of the target rendering layout tree, and dynamically inject business logic corresponding to the field constraint rules into the rendering component during the instantiation process; in the rendering process, combine visual state monitoring to perform progressive rendering, the progressive rendering includes: prioritizing the rendering of rendering components in the visible area, adding rendering components in the non-visible area to the waiting queue for delayed rendering, and performing resource release on rendered components that have left the visible area and meet the preset conditions. S4. Establish a form registration management context to uniformly maintain the field data model. When a change in the data of a field node is detected, the status update of the downstream dependent field node is triggered according to the dependency relationship topology cascading. The changed form data is collected to generate a registration record, and a dual-channel persistence operation including local caching and server synchronous upload is performed. The registration status identifier is updated according to the persistence result, and the registration status identifier is fed back to the corresponding rendering component for visualization.

[0024] This embodiment 1 further elaborates on the above steps.

[0025] (1) Form rendering context object construction In this embodiment, the structured description data of the form and the multidimensional feature parameters of the current terminal are first obtained. The structured description data includes multiple field nodes of the form, field constraint rules, and the dependency topology between field nodes. For example, the structured description data can be a JSON-formatted configuration file, defining "Name" and "Age" as basic field nodes, with the constraint rule for the "Age" node being "numerical and greater than 0," and the "Education Level" node depending on the value of the "Age" node to construct a topological relationship. The multidimensional feature parameters include the screen physical size. Screen resolution and input interaction mode parameters By using this basic data as input, we can associate and bind it to construct a form rendering context object.

[0026] For the collected screen physical size and screen resolution Normalization is performed to calculate logical rendering features. First, the screen resolution is utilized. With respect to the physical size of the screen Perform calculations using formulas Resulting in device pixel ratio Then, using the screen resolution Compared to the device pixel ratio Through formula Calculate the logical rendering size Finally, the device pixel ratio is... and the logical rendering size The combined features are transformed into standardized logical rendering characteristics.

[0027] After obtaining the standardized features, the global rendering configuration in the structured description data is parsed. The logical rendering features and the input interaction mode parameters are then combined. A capability match is performed with the global rendering configuration. This matching process determines the current terminal's rendering strategy identifier and, based on the input interaction mode parameters... Construct a corresponding interactive event mapping table to establish the rendering and interaction benchmark for the terminal.

[0028] While determining the rendering strategy, the dependency topology is constructed. This dependency topology is defined as a directed acyclic graph (DAG). First, multiple field nodes from the structured description data are used as vertices of the graph, and the business dependencies between these field nodes are used as directed edges, with the direction of each edge pointing from the dependent field node to the dependent field node. During construction, a loop detection algorithm is executed. If a closed-loop dependency is detected, construction is halted and an abnormal configuration message is output. If no closed loop is detected, a trigger condition is applied to the directed edge. This trigger condition serves as a prerequisite for cascading downlink updates to the state of dependent field nodes, thus completing the construction of the dependency topology.

[0029] Finally, the form rendering context object is encapsulated and injected. Using the form identifier in the structured description data as the root node, the logical rendering features, the rendering strategy identifier, the interaction event mapping table, the multiple field nodes, and the dependency topology are encapsulated into a tree-structured form rendering context object according to a preset hierarchical nesting rule. After construction, the form rendering context object is injected into the global state management storage, thus completing the entire context construction process.

[0030] (2) Rendering layout tree generation After constructing the entire context, adaptive rendering is achieved through the quantization calculation of multi-dimensional feature parameters and the hierarchical arrangement of the layout tree. The available rendering area width is obtained from the screen's physical feature parameters. Compared to the current device's pixel ratio Set the preset standard field baseline width. Through calculation and The ratio is then rounded down to obtain the initial number of columns. The calculation process is expressed as follows: Acquisition and Corresponding preset density weights ,Will and Multiplying yields the basic column number constraint value. , represented as Set the baseline pixel density. ,Will and The ratio is determined as the scaling factor. , represented as .

[0031] Based on the input interaction mode parameters Identify the current terminal's interaction type. If it is identified as a touch interaction mode, obtain the system's preset minimum touch safety size. and standard interactive component height ,Will and The ratio of the two is used as the interactive thermal zone factor. ,Right now If it is identified as a keyboard and mouse interaction mode, then Set the unit value to 1. Divide by Then round down to obtain the number of candidate columns. , represented as .calculate Divide by Actual single column width ,Right now .like ,Will Decrease and recalculate until satisfied The conditions will eventually be met. As a constraint value for the target number of columns .

[0032] Based on the dependency topology, the multiple field nodes are topologically sorted to determine the dependency level, and field nodes with direct dependencies are grouped into the same logical group. The cross-column attribute values ​​configured for each field node within the logical group are then obtained. .Will according to Divide into equal parts to obtain the base width of a single column ,Right now Set the preset baseline component height. Calculate the actual rendering width of each field node. and actual rendered height , respectively represented as as well as Following the dependency hierarchy of field nodes, a flow layout algorithm is used to sequentially accumulate the width occupied by the current row. When accumulated lead to Perform a newline operation and reset. It also accumulates the row height and records the X-axis coordinates of each field node in the two-dimensional coordinate system. and Y-axis coordinates , as a relative arrangement position.

[0033] The topological sorting to determine the dependency level specifically adopts a breadth-first search method based on in-degree: First, it initializes the in-degree counters of all field nodes and counts the number of direct predecessor nodes when each node is a dependent node; it adds all root nodes with an in-degree of 0 to the queue to be processed and marks them as level 0; then it iterates through the queue, takes out the current node and decrements the in-degree of all its direct successor nodes by 1. If the in-degree of a successor node drops to 0, its level is marked as the current node's level plus 1 and added to the queue, until all nodes have been visited, thus outputting an ordered sequence of nodes arranged in ascending order of dependency depth and the corresponding level index.

[0034] According to dependency hierarchy The field nodes are divided into multiple rendering levels from low to high. Within the same rendering level, the visual weight attribute of the field node is obtained. and estimated rendering size ,according to Initially sort the field nodes at the same level from highest to lowest. Iterate through the initially sorted field nodes, and when assigning the current field node to the current rendering line, calculate the remaining available width of the current rendering line. ,Right now If the current field node This triggers the space fragmentation filling mechanism, where the node is located after the current field node in the initial sorting sequence and satisfies... Select from the candidate field nodes The highest-ranking candidate field node is assigned to the current rendering row first, and the current field node is then moved to the next rendering row to update the sorting results.

[0035] Based on the updated sorting results and and Build from top to bottom, including the root node Hierarchical nodes and leaf nodes The initial rendering layout tree, in which Corresponding to specific rendering components, Corresponding logical group container. Retrieve each The virtual node hierarchy depth of the corresponding rendering component Calculate the same All mounted of The sum of these yields the total depth. ,Right now When detected Exceeding the preset rendering depth threshold At that time, the Marked as a recombination node .right Perform structural flattening, Below Upgraded to In the parent node, or will The target rendering layout tree is obtained by splitting it into multiple parallel sub-level nodes.

[0036] (3) Progressive rendering After generating the target rendering layout tree, each node in the form is dynamically instantiated sequentially according to the hierarchical traversal order of the target rendering layout tree. During instantiation, pre-acquired field constraint rules are parsed, and the corresponding validation logic, linkage logic, and other business code are injected into the generated rendering components through runtime reflection or dynamic proxy technology, thereby ensuring that each component has complete business processing capabilities from the outset. Specifically, for validation logic, the system encapsulates regular expressions or threshold parameters in the structured description data into independent validation function objects and binds them to the component's input listener events. When the user triggers an interaction, validation is automatically executed and the result is fed back. For linkage logic, a reactive data flow is constructed based on the dependency relationship topology between field nodes. The publish-subscribe pattern is used to transmit the change events of upstream nodes to downstream related components in real time, driving their state updates or display / hiding switches, thereby achieving dynamic business behavior adaptation without hard coding.

[0037] As components are instantiated, progressive rendering is performed using a visual state monitoring mechanism. The physical coordinates of each component on the screen are calculated in real time, prioritizing DOM node mounting and drawing for components within the current visible area. Components outside the visible area are added to a rendering queue for deferred rendering, thus avoiding loading too many nodes at once and blocking the main thread, ensuring the initial rendering frequency and smoothness of the page.

[0038] During rendering, rendered components are continuously tracked via a visual state monitoring interface to execute resource release strategies. The intersection ratio of rendered components with the current visible area is obtained in real time. and the duration of absence Wherein, the intersection ratio The percentage of a component's visible area relative to its total area, and the detachment duration. This indicates the duration during which a component completely leaves the visible area. When the intersection ratio is detected... The value is zero, and the duration of the separation is... Exceeding the preset time threshold At that time, that is and When the component meets the preset conditions for resource release, the release mechanism is triggered.

[0039] For rendered components that meet the above preset conditions, immediately perform a DOM node unloading operation to remove them from the browser's render tree to reduce memory usage. Simultaneously, retrieve the component's current state data. And user-entered data Perform serialization processing and save it to the memory state pool in the form registration management context. Within. When the rendered component is subsequently detected to have re-entered the visible area, it will be directly retrieved from the memory state pool. Read the component status data and the user-input data Then, re-execute the DOM node mounting and state restoration.

[0040] (4) Data management and persistence After progressive rendering is completed, a form registration management context is first established to uniformly maintain the field data model. Specifically, the form registration management context is constructed using a reactive state management mechanism, internally maintaining a globally unique field state registry. This registry uses the field's unique identifier as the key to store the current value, validation status, linkage dependencies, and metadata information of each field node. When any field component experiences a data change, a state update event is triggered through a publish-subscribe pattern. The dependency resolver in the context automatically identifies the affected downstream fields based on the preset dependency topology and performs cascading state updates.

[0041] Among them, when the source field node is detected When data changes, based on dependency topology Extract the set of affected downstream dependency field nodes Combined with the target rendering layout tree Get Current visible state of each downstream dependent field node .like If the indicator node is within the visible area, then assign a high-priority identifier to that node. ;like If the node is located outside the line of sight, then assign a low-priority identifier to that node. The downstream dependency nodes with priority identifiers are sorted according to their priority, and an update task queue is constructed. .

[0042] Update the task queue Task execution within the process is based on debouncing and merging processes using state coverage rules. This occurs within a preset time window. If a set of state update requests is generated for the same downstream dependent field node... ,and If there are multiple state update requests, then obtain the preset state transition matrix. .Will Substitute the request sequence in Perform matrix mapping calculations to obtain the final target state. The calculation process is expressed as follows: Identify and discard side effects that lead to intermediate states. Redundant requests, only those pointing to A valid request generates a merged update task. Get the dependency topology Topological sorting order Based on the aforementioned priority identifiers, for Perform a comprehensive sort, and execute the sorted results sequentially. .

[0043] In executing the current First, obtain the current node and its corresponding upstream node. Edge triggering conditions .right Perform logical validation; if the validation fails, or if a check is detected... Hidden Or disabled status Then, a cascading pruning operation is performed on the current node and all its downstream dependent field nodes. If so, skip subsequent update calculations. Validation passed and If it is in a normal activation state, then according to Update the visible / hidden or disabled status of the current downstream dependent field nodes. During the status update process, if it is determined that the current node needs to re-fetch option data, obtain the network status parameters of the current terminal. and preset network quality thresholds .Compare and The size, if If so, then execute a real-time interface request to obtain the latest option data; If so, then read the local cached data to complete the loading of the option data, thereby completing the entire cascading state update process.

[0044] After completing the cascading status update, registration records are generated and dual-channel persistence is performed. First, the registration records are serialized and written to the local IndexedDB or SQLite database on the terminal, generating a local persistence success flag. Simultaneously, the registration records are uploaded to the server via an asynchronous network request. If the network request succeeds, the server's persistence success flag and globally unique record ID are received. The globally unique record ID is written back to the local database, and the registration status flag is updated to synchronized. If the network request fails or the network environment is weak, the registration status flag is updated to pending synchronization, and the registration record is marked as dirty data. Upon subsequent detection that the network environment has recovered, a background retry mechanism is automatically triggered to upload the dirty data to the server. Finally, the updated registration status flag is fed back to the corresponding rendering component for visual presentation, thus completing the entire form registration management process.

[0045] Example 2 Please refer to Figure 2 This embodiment 2 provides a terminal dynamic form adaptive rendering and registration management system, including: The form rendering context object construction unit is used to obtain the structured description data of the form and the multi-dimensional feature parameters of the current terminal, and associate and bind the structured description data with the multi-dimensional feature parameters to construct the form rendering context object; wherein, the structured description data includes multiple field nodes of the form, field constraint rules, and the dependency relationship topology between the field nodes; The rendering layout tree generation unit is used to determine the target column number constraint value, scaling ratio and interaction hot zone factor based on the multi-dimensional feature parameters, and then calculate the actual rendering size and relative arrangement position of each field node in combination with the dependency relationship of the field nodes; at the same time, it performs topological sorting on the multiple field nodes according to the dependency relationship topology to determine the dependency level, and arranges the field nodes in hierarchical order according to the dependency level to generate the target rendering layout tree. A progressive rendering unit is used to dynamically instantiate components according to the hierarchical traversal of the target rendering layout tree, and dynamically inject business logic corresponding to the field constraint rules into the rendering components during the instantiation process; progressive rendering is performed in conjunction with visual state monitoring during the rendering process, and the progressive rendering includes: prioritizing the rendering of rendering components within the visible area, adding rendering components within the non-visible area to the rendering queue for delayed rendering, and releasing resources for rendered components that have left the visible area and meet preset conditions. The data management and persistence unit is used to establish a form registration management context to uniformly maintain the field data model. When a change in the data of a field node is detected, the unit triggers the status update of downstream dependent field nodes according to the dependency relationship topology cascading. The unit collects the changed form data to generate registration records, performs a dual-channel persistence operation including local caching and server-side synchronous upload, updates the registration status identifier according to the persistence result, and feeds back the registration status identifier to the corresponding rendering component for visualization.

[0046] Example 3 This embodiment 3 also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, can implement any step of a terminal dynamic form adaptive rendering and registration management method.

[0047] The computer-readable storage medium may include various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0048] For a description of the computer-readable storage medium provided in this application, please refer to the above method embodiments; further details will not be repeated here.

[0049] Those skilled in the art will readily understand that the above description is merely a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

Claims

1. A method for adaptive rendering and registration management of dynamic forms on a terminal, characterized in that, include: S1. Obtain the structured description data of the form and the multidimensional feature parameters of the current terminal, associate and bind the structured description data with the multidimensional feature parameters, and construct a form rendering context object; wherein, the structured description data includes multiple field nodes of the form, field constraint rules, and the dependency relationship topology between the field nodes; S2. Based on the multidimensional feature parameters, determine the target column number constraint value, scaling ratio, and interaction hot zone factor. Then, combine the dependency relationship of the field nodes to calculate the actual rendering size and relative arrangement position of each field node. At the same time, perform topological sorting on the multiple field nodes according to the dependency relationship topology to determine the dependency level. Arrange the field nodes in a hierarchical order according to the dependency level to generate the target rendering layout tree. S3. Perform dynamic component instantiation according to the hierarchical traversal of the target rendering layout tree, and dynamically inject business logic corresponding to the field constraint rules into the rendering component during the instantiation process; in the rendering process, combine visual state monitoring to perform progressive rendering, the progressive rendering includes: prioritizing the rendering of rendering components in the visible area, adding rendering components in the non-visible area to the waiting queue for delayed rendering, and performing resource release on rendered components that have left the visible area and meet the preset conditions. S4. Establish a form registration management context to uniformly maintain the field data model. When a change in the data of a field node is detected, the status update of the downstream dependent field node is triggered according to the dependency relationship topology cascading. The changed form data is collected to generate a registration record, and a dual-channel persistence operation including local caching and server synchronous upload is performed. The registration status identifier is updated according to the persistence result, and the registration status identifier is fed back to the corresponding rendering component for visualization.

2. The terminal dynamic form adaptive rendering and registration management method according to claim 1, characterized in that, In step S1, associating and binding the structured description data with the multidimensional feature parameters specifically includes: The screen physical size and resolution in the collected multidimensional feature parameters are normalized, the device pixel ratio and logical rendering size are calculated, and the original hardware parameters are converted into standardized logical rendering features. The global rendering configuration in the structured description data is parsed, and the logical rendering features and the input interaction mode parameters in the multi-dimensional feature parameters are matched with the global rendering configuration to determine the rendering strategy identifier and interaction event mapping table of the current terminal. Using the form identifier in the structured description data as the root node, the logical rendering features, the rendering strategy identifier, the interaction event mapping table, the multiple field nodes, and the dependency relationship topology are encapsulated into a tree-structured form rendering context object according to a preset hierarchical nesting rule, and the form rendering context object is injected into the global state management storage.

3. The terminal dynamic form adaptive rendering and registration management method according to claim 1, characterized in that, The dependency topology in S1 is a directed acyclic graph, and the structured description data also includes edge triggering conditions. The process of constructing the dependency topology includes: The multiple field nodes are used as vertices of the graph, and the business dependencies between the field nodes are used as directed edges, with the direction of the directed edges pointing from the dependent field node to the dependent field node. When constructing the directed acyclic graph, a loop detection algorithm is executed. If a closed-loop dependency is detected, the construction is blocked and an abnormal configuration prompt is output. The edge triggering condition is bound to the directed edge, and the edge triggering condition is used as a prerequisite verification condition for cascading the update of the state of the downstream dependent field node.

4. The terminal dynamic form adaptive rendering and registration management method according to claim 1, characterized in that, In step S2, the target column number constraint value, scaling ratio, and interaction hotspot factor are determined based on the multi-dimensional feature parameters. Then, the actual rendering size and relative arrangement position of each field node are calculated in combination with the dependency relationship of the field nodes. Specifically, this includes: Obtain the available rendering area width and the current device pixel ratio from the screen physical feature parameters; round down the ratio of the available rendering area width to the preset standard field baseline width to obtain the initial column number; multiply the initial column number by the preset density weight corresponding to the current device pixel ratio to obtain the basic column number constraint value; and determine the ratio of the current device pixel ratio to the baseline pixel density as the scaling ratio. The interaction type of the current terminal is identified based on the input interaction mode parameters. If it is a touch interaction mode, the minimum touch safety size preset by the system is obtained, and the ratio of the minimum touch safety size to the height of the standard interaction component is used as the interaction hot zone factor. If it is a keyboard and mouse interaction mode, the interaction hot zone factor is set to 1. Divide the basic column number constraint value by the interactive hot zone factor and round down to obtain the candidate column number; calculate the actual single column width of the available rendering area divided by the candidate column number; if the actual single column width is less than the minimum touch safety size, decrease the candidate column number until the actual single column width is greater than or equal to the minimum touch safety size, and use the finally determined candidate column number as the target column number constraint value; Field nodes with direct dependencies are grouped into the same logical group, and the cross-column attribute values ​​configured for each field node within the logical group are obtained. The width of the available rendering area is divided equally according to the target column number constraint value to obtain the single column base width. The single column base width is multiplied by the cross-column attribute value and combined with the scaling ratio to calculate the actual rendering width and height of each field node. According to the dependency hierarchy of the field nodes, the width occupied by the current row is accumulated sequentially using a fluid layout algorithm. When the accumulated value exceeds the width of the available rendering area, a line break operation is performed, and the X-axis and Y-axis coordinates of each field node in the two-dimensional coordinate system are recorded as the relative arrangement position.

5. The terminal dynamic form adaptive rendering and registration management method according to claim 1, characterized in that, In step S2, the field nodes are arranged hierarchically according to the dependency hierarchy to generate the target rendering layout tree, including: According to the dependency hierarchy from low to high, the field nodes are divided into multiple rendering levels; within the same rendering level, the visual weight attribute and estimated rendering size of the field nodes are obtained, and the field nodes of the same level are initially sorted according to the visual weight attribute from high to low. Traverse the field nodes after the initial sorting. When assigning the current field node to the current rendering line, calculate the remaining available width of the current rendering line. If the estimated rendering size of the current field node is greater than the remaining available width, trigger the space fragment filling mechanism. Among the candidate field nodes in the initial sorting sequence that are after the current field node and whose estimated rendering size is less than or equal to the remaining available width, select the target candidate field node with the highest visual weight and assign it to the current rendering line first. Then, extend the current field node to the next rendering line to update the sorting result. Based on the updated sorting and position calculation results, an initial rendering layout tree containing root nodes, hierarchical nodes, and leaf nodes is constructed from top to bottom, wherein the leaf nodes correspond to specific rendering components, and the hierarchical nodes correspond to logical grouping containers. Obtain the virtual node hierarchy depth of the rendering component corresponding to each leaf node. When the sum of the virtual node hierarchy depths of the leaf nodes attached to the same level node exceeds the preset rendering depth threshold, mark the level node as a recombined node. The recombined node is subjected to structural flattening processing, which involves moving the leaf nodes under the recombined node to the parent node of the recombined node, or splitting the recombined node into multiple parallel sub-level nodes, to obtain the target rendering layout tree after depth reduction.

6. The terminal dynamic form adaptive rendering and registration management method according to claim 1, characterized in that, In step S3, resource release is performed on rendered components that have moved out of the visible area and meet preset conditions, including: The intersection ratio and separation time of the rendered component relative to the visible area are obtained in real time through the visual status monitoring interface. When the intersection ratio is zero and the separation time exceeds a preset time threshold, it is determined that the preset condition is met. For rendered components that meet the preset conditions, DOM node unloading is performed, and their current component state data and user input data are serialized and saved to the memory state pool in the form registration management context; When the rendered component is detected to re-enter the visible area, the component state data and user input data are read from the memory state pool, and the DOM node mounting and state restoration are re-executed.

7. The terminal dynamic form adaptive rendering and registration management method according to claim 1, characterized in that, In step S4, when a change in the data of a field node is detected, the state update of downstream dependent field nodes is triggered according to the dependency relationship topology cascading, including: When a change in the data of the source field node is detected, the affected downstream dependent field nodes are extracted according to the dependency relationship topology. Based on the current visibility status of each downstream dependent field node in the target rendering layout tree, high priority is assigned to downstream dependent field nodes in the visible area, and low priority is assigned to downstream dependent field nodes in the non-visible area. An update task queue with priority identifiers is constructed. The tasks in the update task queue are subjected to debouncing merging processing based on state coverage rules. If multiple state update requests are generated for the same downstream dependent field node within a preset time window, the final target state is calculated according to the preset state transition matrix, and redundant requests that cause side effects of intermediate states are discarded to generate merged update tasks. The merged update tasks are then executed sequentially according to the topological sorting order of the dependency relationship topology and the priority identifier. Before executing the current update task, the edge triggering conditions between the current node and the upstream node are verified. If the verification fails or the upstream node is in a hidden or disabled state, a cascading pruning operation is performed on the current node and all its downstream dependent field nodes, skipping subsequent updates. If the verification passes, the visible or hidden state or disabled state of the downstream dependent field nodes is updated, and when it is necessary to re-fetch option data, the real-time interface request or local cache data is selected based on the network status parameters of the current terminal.

8. The terminal dynamic form adaptive rendering and registration management method according to claim 1, characterized in that, In step S4, a dual-channel persistence operation is performed, including local caching and server-side synchronous upload, comprising: The registration record is serialized and written to the local IndexedDB or SQLite database on the terminal, and a local persistence success identifier is generated. Simultaneously, the registration record is uploaded to the server via an asynchronous network request; If the network request is successful, receive the server persistence success flag and globally unique record ID returned by the server, write the globally unique record ID back to the local database, and update the registration status flag to "synchronized"; If a network request fails or the network is in a weak network environment, the registration status identifier is updated to "pending synchronization" and the registration record is marked as dirty data. When the network environment is detected to be restored, the background retry mechanism is automatically triggered to upload the dirty data to the server.

9. A terminal dynamic form adaptive rendering and registration management system, characterized in that, include: The form rendering context object construction unit is used to obtain the structured description data of the form and the multidimensional feature parameters of the current terminal, associate and bind the structured description data with the multidimensional feature parameters, and construct the form rendering context object; wherein, the structured description data includes multiple field nodes of the form, field constraint rules, and the dependency relationship topology between the field nodes; The rendering layout tree generation unit is used to determine the target column number constraint value, scaling ratio and interaction hot zone factor based on the multi-dimensional feature parameters, and then calculate the actual rendering size and relative arrangement position of each field node in combination with the dependency relationship of the field nodes; at the same time, it performs topological sorting on the multiple field nodes according to the dependency relationship topology to determine the dependency level, and arranges the field nodes in hierarchical order according to the dependency level to generate the target rendering layout tree. A progressive rendering unit is used to dynamically instantiate components according to the hierarchical traversal of the target rendering layout tree, and dynamically inject business logic corresponding to the field constraint rules into the rendering components during the instantiation process; progressive rendering is performed in conjunction with visual state monitoring during the rendering process, and the progressive rendering includes: prioritizing the rendering of rendering components within the visible area, adding rendering components within the non-visible area to the rendering queue for delayed rendering, and releasing resources for rendered components that have left the visible area and meet preset conditions. The data management and persistence unit is used to establish a form registration management context to uniformly maintain the field data model. When a change in the data of a field node is detected, the unit triggers the status update of downstream dependent field nodes according to the dependency relationship topology cascading. The unit collects the changed form data to generate registration records, performs a dual-channel persistence operation including local caching and server-side synchronous upload, updates the registration status identifier according to the persistence result, and feeds back the registration status identifier to the corresponding rendering component for visualization.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, The computer program is executed by a processor as described in any one of claims 1-8: a terminal dynamic form adaptive rendering and registration management method.

Images