CN114780196B - User interface form rendering method and device, electronic equipment and storage medium - Google Patents
User interface form rendering method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN114780196B CN114780196B CN202210472862.9A CN202210472862A CN114780196B CN 114780196 B CN114780196 B CN 114780196B CN 202210472862 A CN202210472862 A CN 202210472862A CN 114780196 B CN114780196 B CN 114780196B
- Authority
- CN
- China
- Prior art keywords
- sub
- component
- rendering
- list
- components
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 96
- 238000000034 method Methods 0.000 title claims abstract description 53
- 230000008859 change Effects 0.000 claims abstract description 40
- 238000012545 processing Methods 0.000 claims abstract description 11
- 230000001960 triggered effect Effects 0.000 claims description 6
- 230000001419 dependent effect Effects 0.000 claims description 3
- 230000004044 response Effects 0.000 claims description 3
- 238000013461 design Methods 0.000 abstract description 3
- 238000000429 assembly Methods 0.000 abstract 1
- 238000004590 computer program Methods 0.000 description 12
- 238000010586 diagram Methods 0.000 description 11
- 238000004891 communication Methods 0.000 description 8
- 230000008569 process Effects 0.000 description 7
- 101000939676 Androctonus crassicauda Toxin a Proteins 0.000 description 6
- 238000005516 engineering process Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 206010063385 Intellectualisation Diseases 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 238000013473 artificial intelligence Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 125000004122 cyclic group Chemical group 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The disclosure provides a user interface form rendering method, a device, electronic equipment and a storage medium, relates to the technical fields of Internet of things, data processing and computers, and particularly relates to the technical field of front-end application design. The specific implementation scheme comprises the following steps: rendering the form to be rendered according to the form data of the form to be rendered to obtain a current form page; wherein, the form data is stored in the form of Ref objects; and determining a first list sub-component with data change in the current page, and re-rendering the first list sub-component. In the scheme, when a certain form sub-assembly is changed, only the changed form sub-assembly is re-rendered, and not all the form sub-assemblies of the current form page are re-rendered, so that the number of invalid rendering times can be greatly reduced.
Description
Technical Field
The present disclosure relates to the field of internet of things, data processing, and computer technologies, and in particular, to the field of front end application design technologies, and in particular, to a user interface form rendering method, apparatus, electronic device, storage medium, and computer program product.
Background
With the popularity of intellectualization and platformization, more and more requirements for platformization are proposed, for example, by triggering and collecting/displaying specified information through a page of a platform, and for such front-end requirements, forms are often used in the development process.
Disclosure of Invention
The present disclosure provides a form rendering method, apparatus, electronic device, storage medium, and computer program product.
According to an aspect of the present disclosure, there is provided a form rendering method including:
rendering the form to be rendered according to the form data of the form to be rendered to obtain a current form page; wherein, the form data is stored in the form of Ref objects;
and determining a first list sub-component with data change in the current page, and re-rendering the first list sub-component.
According to an aspect of the present disclosure, there is provided a form rendering apparatus including:
the first rendering module is used for rendering the to-be-rendered form according to the form data of the to-be-rendered form to obtain a current form page; wherein, the form data is stored in the form of Ref objects;
and the second rendering module is used for determining a first list sub-component with data change in the current page and re-rendering the first list sub-component.
According to another aspect of the present disclosure, there is provided an electronic device including:
at least one processor; and
a memory communicatively coupled to the at least one processor; wherein,,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the form rendering method of any of the embodiments of the present disclosure.
According to another aspect of the present disclosure, there is provided a non-transitory computer-readable storage medium storing computer instructions for causing a computer to perform a form rendering method of any embodiment of the present disclosure.
According to another aspect of the present disclosure, there is provided a computer program product comprising a computer program which, when executed by a processor, implements a form rendering method of any embodiment of the present disclosure.
According to the technology disclosed by the invention, when a certain list sub-component is changed, only the changed list sub-component is re-rendered, and not all list sub-components of the current list page are re-rendered, so that the number of invalid rendering times can be greatly reduced.
It should be understood that the description in this section is not intended to identify key or critical features of the embodiments of the disclosure, nor is it intended to be used to limit the scope of the disclosure. Other features of the present disclosure will become apparent from the following specification.
Drawings
The drawings are for a better understanding of the present solution and are not to be construed as limiting the present disclosure. Wherein:
fig. 1 is a flowchart of a form rendering method according to an embodiment of the present disclosure;
FIG. 2 is a flow diagram of yet another form rendering method provided by an embodiment of the present disclosure;
FIG. 3a is a flow diagram of yet another form rendering method provided by an embodiment of the present disclosure;
FIG. 3b is a logic flow diagram of form rendering provided by an embodiment of the present disclosure;
fig. 4 is a schematic structural diagram of a form rendering apparatus according to an embodiment of the present disclosure;
fig. 5 is a block diagram of an electronic device used to implement a form rendering method of an embodiment of the present disclosure.
Detailed Description
Exemplary embodiments of the present disclosure are described below in conjunction with the accompanying drawings, which include various details of the embodiments of the present disclosure to facilitate understanding, and should be considered as merely exemplary. Accordingly, one of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the present disclosure. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
Fig. 1 is a flow chart of a form rendering method according to an embodiment of the present disclosure, where the embodiment may be applicable to a case of rendering and displaying a form of an internet of things platform. The method may be performed by a form rendering device implemented in software and/or hardware and integrated on an electronic device.
Specifically, referring to fig. 1, the form rendering method is as follows:
s101, rendering a to-be-rendered form according to form data of the to-be-rendered form to obtain a current form page; wherein, the form data is stored in the form of a Ref object.
S102, determining a first list sub-component with data change in the current page, and re-rendering the first list sub-component.
In the embodiment of the disclosure, the form to be rendered comprises a plurality of form sub-components, and the presentation effect of the form to be rendered depends on the presentation content of the form sub-components. When the form to be rendered is rendered according to the form data of the form to be rendered, optionally, a rendering template corresponding to each form sub-component is firstly obtained, and then the form data corresponding to each form sub-component is combined for rendering, and the obtained current form page is optionally a form page taking a webpage as a carrier.
It should be noted that, the solution of the present disclosure is implemented under a React framework, where act is an open source library used to construct a user interface. The compact framework provides two ways of storing form data, namely in context and in Ref objects. In the scheme of the disclosure, form data of a form to be rendered is stored in the form of a Ref object. The form data is not stored in a context mode, because once a certain form sub-component changes data, a new form is generated and all form sub-components of the new form are triggered to be re-rendered, so that the form sub-components which are unnecessarily refreshed are re-rendered, namely, a large number of invalid rendering exists in the re-rendering process, and the front-end operation efficiency is affected. In contrast, form data is stored in the form of a Ref object, and when a certain form sub-component changes data based on the inherent characteristics of the Ref object, a new form is not generated, that is, all sub-components of the whole form are not triggered to be re-rendered. In addition, the Ref object is used for storing form data, and the method has the advantages that after a certain form sub-assembly is destroyed, corresponding memory is automatically released, and memory leakage is avoided.
Based on the above, for the current form page, the first form sub-component with data change in the current form page can be monitored in real time, wherein the data change is optionally caused by the fact that a user inputs data in the first form sub-component, and further, the changed form data corresponding to the first form sub-component and a rendering template for the first form sub-component are obtained, and the first form sub-component is re-rendered.
In the embodiment of the disclosure, because the form data is stored in a Ref object mode, when a certain form sub-component is changed, not all the form sub-components of the current form page are re-rendered, but only the changed form sub-components are re-rendered, so that the number of invalid rendering times can be greatly reduced, and the operation efficiency of the front end is further ensured.
Fig. 2 is a flow diagram of yet another form rendering method according to an embodiment of the present disclosure. Referring to fig. 2, the form rendering method is specifically as follows:
s201, wrapping the high-order assembly by the list sub-assembly of the to-be-rendered form.
The high-order component comprises an update configuration item which triggers the wrapped form sub-component to render and update, and the update configuration item is a logic code which can force the form sub-component to be triggered to re-render. In this way, with a single sub-component as the minimum update granularity, the update rendering of each sub-component is triggered based on a high-order component wrapping the sub-component, that is, the control of the rendering time of the sub-component can be realized by wrapping the high-order component.
S202, rendering the to-be-rendered form according to form data of the to-be-rendered form to obtain a current form page, wherein the form data is stored in a Ref object mode.
Specific processes can be referred to the above embodiments, and will not be described herein.
S203, determining a first list sub-component with data change in the current page, and triggering the first list sub-component to re-render by wrapping an update configuration item included in a high-order component of the first list sub-component.
In the embodiment of the disclosure, after the first sub-component with the data change in the current page is determined, the update configuration item included in the high-order component wrapping the first sub-component is operated to trigger the rendering update of the first sub-component, so that the updating rendering of the first sub-component does not affect other sub-components.
In the embodiment of the disclosure, the higher-order component is wrapped for each form sub-component, so that when the form update rendering is performed, only the update configuration item included in the higher-order component wrapping the form sub-component is required to be operated, and other sub-components are not affected.
Fig. 3a is a flow diagram of yet another form rendering method according to an embodiment of the present disclosure. Referring to fig. 3a, the form rendering method is specifically as follows:
s301, rendering the to-be-rendered form according to form data of the to-be-rendered form to obtain a current form page; wherein, the form data is stored in the form of Ref objects.
S302, determining a first list sub-component with data change in the current page, and re-rendering the first list sub-component.
S303, determining a second sheet sub-component according to the dependency relationship among different sheet sub-components, and re-rendering the second sheet sub-component.
In the implementation of the disclosure, the form data corresponding to the second sheet sub-component depends on the form data corresponding to the first sheet sub-component, that is, when the first sheet sub-component changes data, the second sheet sub-component depending on the first sheet sub-component also changes data, and at this time, the second sheet sub-component needs to be re-rendered. When the method is implemented, the component dependency relationship among different list sub-components can be registered first, and then the second list sub-component is determined according to the component dependency relationship, and the second list sub-component is rendered again.
Wherein determining the second form sub-component is as follows: registering subscription relations of broadcast events among different form sub-components according to the dependency relations among the different form sub-components; illustratively, a form includes the form sub-components A, B and C, if the form sub-component B depends on the form sub-component A, the registry sub-component B subscribes to the data change event broadcast by the form sub-component A, wherein the data change event can include the data field which changes from the form sub-component A to the form sub-component B and is needed by the form sub-component B; if the form sub-component C depends on the form sub-component B, the registry sub-component C subscribes to the data change event broadcasted by the form sub-component B; in the scheme, subscription events are registered only in the affected list sub-components, and subscription requirements are not required to be mounted on both sides, so that the situation of cyclic rendering is avoided. Further, a data change event broadcasted by the first form sub-component is received, and the form sub-component registered and subscribed to the data change event is used as a second form sub-component according to a subscription relation, wherein the number of the second form sub-components is one or more.
Further, the data change event is sent to the second sub-components, wherein if the number of the second sub-components is multiple, the data change event is sent to the second sub-components simultaneously through multicast technology, and then for each second sub-component, the second sub-components are re-rendered through wrapping the update configuration items included in the higher-order components of the second sub-components.
It should be noted that, because each form sub-component is wrapped by a high-order component in advance, an event sending configuration item for triggering the wrapped form sub-component to send a data change event and a receiving configuration item for receiving the data change event are also written in the high-order component in advance; thus, each form sub-component may broadcast data change events out through the event send configuration item of the higher-order component of the outer-wrap, and may receive subscribed data change events through the receive configuration item of the higher-order component of the outer-wrap. In addition, the second list sub-component influenced by the first list sub-component is indicated to re-render in an event subscription mode, so that logic codes forming each configuration item, which are included in a high-order component wrapping the list sub-component, can be reused, and therefore the code quantity of the list can be reduced. In addition, after the re-rendering of the second table sub-component is completed, it may be further determined whether there are other sub-components that rely on the second table sub-component, and if not, ending; if so, re-rendering other sub-components, the specific implementation process is similar to the re-rendering process of the second sub-component, and will not be repeated here.
In yet another alternative embodiment, a dependency tree is constructed from dependencies between the different table sub-components; traversing the dependency tree by taking the first sub-list component as a starting node, determining a second sub-list component according to the traversing result, and re-rendering the second sub-list component.
For a detailed description of the form rendering process, reference is made to FIG. 3b, which shows a logic flow diagram for form rendering. A, B and C are all the list sub-components of the form to be rendered, and all the list sub-components are rendered when the form to be rendered is rendered for the first time; then, according to the dependency relationship between the different sub-components, registering the subscription relationship of the broadcast event between the different sub-components in the subscription control module, for example, if the sub-component B depends on the sub-component A, the registration sub-component B subscribes to the data change event broadcasted by the sub-component A. Triggering the sub-sheet component A to re-render if the sub-sheet component A changes data; meanwhile, the form sub-assembly A sends a data change event to the subscription control module; and the subscription control module determines that the sub-list sub-component B subscribes to the data change event according to the event subscription relation, and sends the data change event generated by the sub-list sub-component A to the sub-list sub-component B so as to instruct the sub-list sub-component B to re-render.
In the embodiment of the disclosure, when the changed first list sub-assembly is re-rendered, the second list sub-assembly influenced by the first list sub-assembly is re-rendered, so that the display effect of the list page is ensured; and the re-rendering is not performed for other sub-components not affected by the first sub-component, so that the number of invalid rendering times is greatly reduced compared with the case that all components of the form are re-rendered.
Further, when the current form page needs special processing, the method can be realized by adding a custom component to the current form page, and optionally, the custom form component is added to the current form page in a form nesting or form nesting mode in response to a request for adding the custom form sub-component. Wherein the custom form may follow the attributes provided by the development framework to ensure ease of component addition.
Fig. 4 is a schematic structural diagram of a form rendering device according to an embodiment of the present disclosure, where the embodiment may be applicable to a case of rendering and displaying a form of an internet of things platform. Referring to fig. 4, comprising:
the first rendering module 401 is configured to render the to-be-rendered form according to form data of the to-be-rendered form, so as to obtain a current form page; wherein, the form data is stored in the form of Ref objects;
a second rendering module 402, configured to determine a first table sub-component in which a data change occurs in the current page, and re-render the first table sub-component.
On the basis of the above embodiment, optionally, the method further includes:
the component processing module is used for wrapping the high-order components of the list sub-components of the list to be rendered; the high-order component comprises an update configuration item for triggering the wrapped form sub-component to render and update;
the second rendering module is further configured to:
and determining a first list sub-component with data change in the current page, and triggering the first list sub-component to re-render by wrapping an update configuration item included in a high-order component of the first list sub-component.
On the basis of the above embodiment, optionally, the method further includes:
the third rendering module is used for determining a second sub-list component according to the dependency relationship among different sub-list components and re-rendering the second sub-list component; the form data corresponding to the second form sub-component is dependent on the form data corresponding to the first form sub-component.
On the basis of the above embodiment, optionally, the third rendering module is further configured to:
registering subscription relations of broadcast events among different form sub-components according to the dependency relations among the different form sub-components;
receiving a data change event broadcasted by the first form sub-component, and taking the form sub-component registered and subscribed to the data change event as a second form sub-component according to a subscription relation;
and sending the data change event to the second sub-list component, and re-rendering the second sub-list component through an update configuration item included in a higher-order component wrapping the second sub-list component.
On the basis of the above embodiment, optionally, the method further includes:
and the component adding module is used for adding the custom form sub-components to the current form page in a form nesting or nested form mode in response to a request for adding the custom form sub-components.
The form rendering device provided by the embodiment of the disclosure can execute the form rendering method provided by any embodiment of the disclosure, and has the corresponding functional modules and beneficial effects of the executing method. Reference is made to the description of any method embodiment of the disclosure for details not explicitly described in this embodiment.
In the technical scheme of the disclosure, the acquisition, storage, application and the like of the related user personal information all conform to the regulations of related laws and regulations, and the public sequence is not violated.
According to embodiments of the present disclosure, the present disclosure also provides an electronic device, a readable storage medium and a computer program product.
Fig. 5 illustrates a schematic block diagram of an example electronic device 500 that may be used to implement embodiments of the present disclosure. Electronic devices are intended to represent various forms of digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular telephones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be exemplary only, and are not meant to limit implementations of the disclosure described and/or claimed herein.
As shown in fig. 5, the apparatus 500 includes a computing unit 501 that can perform various suitable actions and processes according to a computer program stored in a Read Only Memory (ROM) 502 or a computer program loaded from a storage unit 508 into a Random Access Memory (RAM) 503. In the RAM503, various programs and data required for the operation of the device 500 can also be stored. The computing unit 501, ROM502, and RAM503 are connected to each other by a bus 504. An input/output (I/O) interface 505 is also connected to bus 504.
Various components in the device 500 are connected to the I/O interface 505, including: an input unit 506 such as a keyboard, a mouse, etc.; an output unit 507 such as various types of displays, speakers, and the like; a storage unit 508 such as a magnetic disk, an optical disk, or the like; and a communication unit 509 such as a network card, modem, wireless communication transceiver, etc. The communication unit 509 allows the device 500 to exchange information/data with other devices via a computer network such as the internet and/or various telecommunication networks.
The computing unit 501 may be a variety of general and/or special purpose processing components having processing and computing capabilities. Some examples of computing unit 501 include, but are not limited to, a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), various specialized Artificial Intelligence (AI) computing chips, various computing units running machine learning model algorithms, a Digital Signal Processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 501 performs the respective methods and processes described above, such as a form rendering method. For example, in some embodiments, the form rendering method may be implemented as a computer software program tangibly embodied on a machine-readable medium, such as storage unit 508. In some embodiments, part or all of the computer program may be loaded and/or installed onto the device 500 via the ROM502 and/or the communication unit 509. When the computer program is loaded into RAM503 and executed by computing unit 501, one or more steps of the form rendering method described above may be performed. Alternatively, in other embodiments, the computing unit 501 may be configured to perform the form rendering method by any other suitable means (e.g., by means of firmware).
Various implementations of the systems and techniques described here above can be implemented in digital electronic circuitry, integrated circuit systems, field Programmable Gate Arrays (FPGAs), application Specific Integrated Circuits (ASICs), application Specific Standard Products (ASSPs), systems On Chip (SOCs), complex Programmable Logic Devices (CPLDs), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs, the one or more computer programs may be executed and/or interpreted on a programmable system including at least one programmable processor, which may be a special purpose or general-purpose programmable processor, that may receive data and instructions from, and transmit data and instructions to, a storage system, at least one input device, and at least one output device.
Program code for carrying out methods of the present disclosure may be written in any combination of one or more programming languages. These program code may be provided to a processor or controller of a general purpose computer, special purpose computer, or other programmable data processing apparatus such that the program code, when executed by the processor or controller, causes the functions/operations specified in the flowchart and/or block diagram to be implemented. The program code may execute entirely on the machine, partly on the machine, as a stand-alone software package, partly on the machine and partly on a remote machine or entirely on the remote machine or server.
In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. The machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to a user; and a keyboard and pointing device (e.g., a mouse or trackball) by which a user can provide input to the computer. Other kinds of devices may also be used to provide for interaction with a user; for example, feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form, including acoustic input, speech input, or tactile input.
The systems and techniques described here can be implemented in a computing system that includes a background component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such background, middleware, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local Area Networks (LANs), wide Area Networks (WANs), and the internet.
The computer system may include a client and a server. The client and server are typically remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. The server may be a cloud server, a server of a distributed system, or a server incorporating a blockchain.
It should be appreciated that various forms of the flows shown above may be used to reorder, add, or delete steps. For example, the steps recited in the present disclosure may be performed in parallel or sequentially or in a different order, provided that the desired results of the technical solutions of the present disclosure are achieved, and are not limited herein.
The above detailed description should not be taken as limiting the scope of the present disclosure. It will be apparent to those skilled in the art that various modifications, combinations, sub-combinations and alternatives are possible, depending on design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present disclosure are intended to be included within the scope of the present disclosure.
Claims (10)
1. A form rendering method, comprising:
rendering the form to be rendered according to the form data of the form to be rendered to obtain a current form page; wherein, the form data is stored in the form of Ref objects;
determining a first form sub-component with data change in the current form page, and re-rendering the first form sub-component;
wherein, still include:
wrapping a high-order component on the list sub-component of the form to be rendered; the high-order component comprises an update configuration item for triggering the wrapped form sub-component to render and update, so that the update rendering of each form sub-component is triggered based on the high-order component wrapping the form sub-component;
determining a first form sub-component with data change in the current form page, and re-rendering the first form sub-component, wherein the method comprises the following steps:
determining a first sub-list component with data change in the current form page, triggering the first sub-list component to re-render by wrapping an update configuration item included in a high-order component of the first sub-list component, so that the update rendering of the first sub-list component does not affect other sub-list components.
2. The method of claim 1, further comprising:
determining a second sub-sheet component according to the dependency relationship among different sub-sheet components, and re-rendering the second sub-sheet component; the form data corresponding to the second form sub-component is dependent on the form data corresponding to the first form sub-component.
3. The method of claim 2, wherein determining a second sub-component from dependencies between different sub-components and re-rendering the second sub-component comprises:
registering subscription relations of broadcast events among different form sub-components according to the dependency relations among the different form sub-components;
receiving a data change event broadcasted by the first form sub-component, and taking the form sub-component registered and subscribed to the data change event as the second form sub-component according to the subscription relation;
and sending the data change event to the second form sub-component, and re-rendering the second form sub-component through wrapping an update configuration item included in a high-order component of the second form sub-component.
4. The method of claim 1, further comprising:
in response to a request to add a custom form sub-component, the custom form sub-component is added to the current form page by way of a form nest or nested form.
5. A form rendering apparatus comprising:
the first rendering module is used for rendering the form to be rendered according to the form data of the form to be rendered to obtain a current form page; wherein, the form data is stored in the form of Ref objects;
the second rendering module is used for determining a first form sub-component with data change in the current form page and re-rendering the first form sub-component;
wherein, still include:
the component processing module is used for wrapping the high-order components of the list sub-components of the list to be rendered; the high-order component comprises an update configuration item for triggering the wrapped form sub-component to render and update, so that the update rendering of each form sub-component is triggered based on the high-order component wrapping the form sub-component;
the second rendering module is further configured to:
determining a first sub-list component with data change in the current form page, triggering the first sub-list component to re-render by wrapping an update configuration item included in a high-order component of the first sub-list component, so that the update rendering of the first sub-list component does not affect other sub-list components.
6. The apparatus of claim 5, further comprising:
the third rendering module is used for determining a second sub-list component according to the dependency relationship among different sub-list components and re-rendering the second sub-list component; the form data corresponding to the second form sub-component is dependent on the form data corresponding to the first form sub-component.
7. The apparatus of claim 6, wherein the third rendering module is further to:
registering subscription relations of broadcast events among different form sub-components according to the dependency relations among the different form sub-components;
receiving a data change event broadcasted by the first form sub-component, and taking the form sub-component registered and subscribed to the data change event as the second form sub-component according to the subscription relation;
and sending the data change event to the second form sub-component, and re-rendering the second form sub-component through wrapping an update configuration item included in a high-order component of the second form sub-component.
8. The apparatus of claim 5, further comprising:
and the component adding module is used for responding to the request of adding the custom list sub-components and adding the custom list sub-components into the current list page in a form nesting or nested form mode.
9. An electronic device, comprising:
at least one processor; and
a memory communicatively coupled to the at least one processor; wherein,,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-4.
10. A non-transitory computer readable storage medium storing computer instructions for causing the computer to perform the method of any one of claims 1-4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210472862.9A CN114780196B (en) | 2022-04-29 | 2022-04-29 | User interface form rendering method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210472862.9A CN114780196B (en) | 2022-04-29 | 2022-04-29 | User interface form rendering method and device, electronic equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114780196A CN114780196A (en) | 2022-07-22 |
| CN114780196B true CN114780196B (en) | 2023-07-28 |
Family
ID=82434819
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210472862.9A Active CN114780196B (en) | 2022-04-29 | 2022-04-29 | User interface form rendering method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114780196B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112418997B (en) * | 2020-12-03 | 2023-06-20 | 政采云有限公司 | User interface display method, device, equipment and medium |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10049625B1 (en) * | 2016-12-21 | 2018-08-14 | Amazon Technologies, Inc. | Context-based rendering |
| CN110321120A (en) * | 2019-07-15 | 2019-10-11 | 珠海格力电器股份有限公司 | Data processing method, data processing apparatus, and computer-readable storage medium |
| CN111178012A (en) * | 2019-12-03 | 2020-05-19 | 腾讯云计算（北京）有限责任公司 | Form rendering method, device and equipment and storage medium |
| CN111352682A (en) * | 2018-12-24 | 2020-06-30 | 北京嘀嘀无限科技发展有限公司 | Page rendering method, device, server and readable storage medium |
| US11003330B1 (en) * | 2018-11-30 | 2021-05-11 | BlueOwl, LLC | Vehicular telematic systems and methods for generating interactive animated guided user interfaces |
| CN113342340A (en) * | 2021-05-31 | 2021-09-03 | 北京达佳互联信息技术有限公司 | Component rendering method and device |
| CN113742628A (en) * | 2021-09-08 | 2021-12-03 | 北京沃东天骏信息技术有限公司 | Form processing method and device, computer readable storage medium and electronic equipment |
| CN113835737A (en) * | 2021-08-24 | 2021-12-24 | 交控科技股份有限公司 | Method and system for adding authority to front-end project |
| CN114048415A (en) * | 2021-11-18 | 2022-02-15 | 北京沃东天骏信息技术有限公司 | Form generation method and device, electronic equipment and computer readable storage medium |
-
2022
- 2022-04-29 CN CN202210472862.9A patent/CN114780196B/en active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10049625B1 (en) * | 2016-12-21 | 2018-08-14 | Amazon Technologies, Inc. | Context-based rendering |
| US11003330B1 (en) * | 2018-11-30 | 2021-05-11 | BlueOwl, LLC | Vehicular telematic systems and methods for generating interactive animated guided user interfaces |
| CN111352682A (en) * | 2018-12-24 | 2020-06-30 | 北京嘀嘀无限科技发展有限公司 | Page rendering method, device, server and readable storage medium |
| CN110321120A (en) * | 2019-07-15 | 2019-10-11 | 珠海格力电器股份有限公司 | Data processing method, data processing apparatus, and computer-readable storage medium |
| CN111178012A (en) * | 2019-12-03 | 2020-05-19 | 腾讯云计算（北京）有限责任公司 | Form rendering method, device and equipment and storage medium |
| CN113342340A (en) * | 2021-05-31 | 2021-09-03 | 北京达佳互联信息技术有限公司 | Component rendering method and device |
| CN113835737A (en) * | 2021-08-24 | 2021-12-24 | 交控科技股份有限公司 | Method and system for adding authority to front-end project |
| CN113742628A (en) * | 2021-09-08 | 2021-12-03 | 北京沃东天骏信息技术有限公司 | Form processing method and device, computer readable storage medium and electronic equipment |
| CN114048415A (en) * | 2021-11-18 | 2022-02-15 | 北京沃东天骏信息技术有限公司 | Form generation method and device, electronic equipment and computer readable storage medium |
Non-Patent Citations (2)
| Title |
|---|
| 前后端分离的终端自适应动态表单设计;喻莹莹;李新;陈远平;;计算机系统应用(第04期);全文 * |
| 基于React组件快速构建网站前端;张根;蔡永香;高静文;;电脑知识与技术(第15期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114780196A (en) | 2022-07-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9678723B2 (en) | Application programming interface (API) engine | |
| CN112506602B (en) | Page generation method and device, electronic equipment and computer readable medium | |
| CN112540806A (en) | Applet page rendering method and device, electronic equipment and storage medium | |
| CN113453073B (en) | Image rendering method and device, electronic equipment and storage medium | |
| CN113791875A (en) | Input device virtualization method and device, electronic device and storage medium | |
| CN114780196B (en) | User interface form rendering method and device, electronic equipment and storage medium | |
| CN112596854A (en) | Method and device for continuously integrating running of assembly line | |
| KR102710506B1 (en) | Method for generating dependency graph, device, apparatus, storage medium and computer program | |
| CN113572833B (en) | Cloud mobile phone maintenance method and device, electronic equipment and storage medium | |
| CN114461658A (en) | Name determination method, apparatus, device, program product, and storage medium | |
| CN112947916B (en) | Method, apparatus, device and storage medium for implementing online canvas | |
| CN114398023A (en) | File generation method and page configuration method and device | |
| CN112817992A (en) | Method, device, electronic equipment and readable storage medium for executing change task | |
| CN113722037B (en) | User interface refreshing method and device, electronic equipment and storage medium | |
| CN114995800A (en) | Project development method and device, electronic equipment and storage medium | |
| CN111782995B (en) | Graphics paging loading method and device | |
| CN113760487B (en) | Service processing method and device | |
| CN114661402A (en) | Interface rendering method and device, electronic equipment and computer readable medium | |
| CN114218313A (en) | Data management method, device, electronic equipment, storage medium and product | |
| CN113590419A (en) | Function management method and device | |
| CN113361235B (en) | HTML file generation method and device, electronic equipment and readable storage medium | |
| CN116431108B (en) | Object type processing method and device, electronic equipment and storage medium | |
| CN113031962B (en) | Compiling method, compiling apparatus, electronic device, storage medium, and program product | |
| CN115761094A (en) | Image rendering method, device and equipment and storage medium | |
| CN117931195A (en) | Data dictionary processing method and device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |