CN114780196A - 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
- CN114780196A CN114780196A CN202210472862.9A CN202210472862A CN114780196A CN 114780196 A CN114780196 A CN 114780196A CN 202210472862 A CN202210472862 A CN 202210472862A CN 114780196 A CN114780196 A CN 114780196A
- Authority
- CN
- China
- Prior art keywords
- subcomponent
- rendering
- sub
- component
- data
- 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.)
- Granted
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 97
- 238000000034 method Methods 0.000 title claims abstract description 54
- 230000008859 change Effects 0.000 claims abstract description 43
- 238000012545 processing Methods 0.000 claims abstract description 11
- 238000004590 computer program Methods 0.000 claims description 13
- 230000004044 response Effects 0.000 claims description 2
- 238000013461 design Methods 0.000 abstract description 2
- 230000008569 process Effects 0.000 description 9
- 238000004891 communication Methods 0.000 description 8
- 238000010586 diagram Methods 0.000 description 8
- 101000939676 Androctonus crassicauda Toxin a Proteins 0.000 description 7
- 230000001960 triggered effect Effects 0.000 description 4
- 230000006870 function Effects 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 238000000429 assembly Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000005516 engineering process Methods 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
- 230000000712 assembly Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000006872 improvement Effects 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
Images
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 and device, electronic equipment and a storage medium, and relates to the technical field of Internet of things, data processing and computers, in particular 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; the form data is stored in the form of Ref objects; and determining a first form subcomponent with data change in the current page, and re-rendering the first form subcomponent. In the scheme disclosed by the invention, when a certain form sub-component is changed, only the changed form sub-component is re-rendered, and not all the form sub-components of the current form page are re-rendered, so that the times of invalid rendering can be greatly reduced.
Description
Technical Field
The present disclosure relates to the technical field of internet of things, data processing, and computers, and in particular, to a method and apparatus for rendering a user interface form, an electronic device, a storage medium, and a computer program product.
Background
With the popularization of intellectualization and platform, more and more platform requirements are put forward, for example, specific information is collected/displayed through platform page triggering, 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; the form data is stored in the form of Ref objects;
and determining a first form subcomponent with data change in the current page, and re-rendering the first form subcomponent.
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 form to be rendered according to the form data of the form to be rendered to obtain a current form page; the form data is stored in a form of Ref objects;
and the second rendering module is used for determining the first form sub-component with data change in the current page and re-rendering the first form 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 embodiment of the 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 the form rendering method of any embodiment of the present disclosure.
According to the technology disclosed by the invention, when a certain form sub-component is changed, only the changed form sub-component is re-rendered, and not all the form sub-components of the current form page are re-rendered, so that the number of invalid rendering times can be greatly reduced.
It should be understood that the statements in this section are not intended to identify key or critical features of the embodiments of the present disclosure, nor are they intended to limit the scope of the present disclosure. Other features of the present disclosure will become apparent from the following description.
Drawings
The drawings are included to provide a better understanding of the present solution and are not to be construed as limiting the present disclosure. Wherein:
fig. 1 is a schematic flowchart of a form rendering method according to an embodiment of the present disclosure;
FIG. 2 is a flowchart illustrating another form rendering method provided by the embodiment of the disclosure;
FIG. 3a is a flowchart illustrating a further form rendering method according to an embodiment of the 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 for implementing a form rendering method of an embodiment of the present disclosure.
Detailed Description
Exemplary embodiments of the present disclosure are described below with reference to the accompanying drawings, in which various details of embodiments of the present disclosure are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those 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 schematic flow diagram of a form rendering method according to an embodiment of the present disclosure, where the embodiment is applicable to a case of rendering and displaying a form of an internet of things platform. The method can be executed by a form rendering device which is realized in a software and/or hardware mode and is integrated on the electronic equipment.
Specifically, referring to fig. 1, the form rendering method is as follows:
s101, 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.
S102, determining a first form sub-component with data change in the current page, and re-rendering the first form 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 display contents 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 subcomponent is obtained first, and then rendering is performed by combining the form data corresponding to each form subcomponent, and the obtained current form page is optionally a form page taking a webpage as a carrier.
It should be noted that the scheme of the present disclosure is implemented under an act framework, and an act is an open source library for constructing a user interface. The reach framework provides two ways to store form data, respectively in context and Ref objects. In the scheme of the disclosure, the form data of the form to be rendered is stored in the form of Ref objects. The reason why the form data is not stored in the mode of context is that once data change occurs to a certain form subcomponent, a new form is generated and re-rendering is triggered to all form subcomponents of the new form, so that unnecessary refreshed form subcomponents are re-rendered, that is, a large amount of invalid renderings exist in the re-rendering process, and the efficiency of front-end operation is affected. On the contrary, the form data is stored in the form of the Ref object, and based on the inherent characteristics of the Ref object, when data change occurs in a certain form subcomponent, a new form cannot be generated, that is, all subcomponents of the whole form cannot be triggered to be re-rendered. In addition, the Ref object is used for storing the form data, so that after one form subassembly is destroyed, the corresponding memory is automatically released, and the memory leakage cannot be caused.
On the basis, a first form subcomponent with data change in the current form page can be monitored in real time for the current form page, wherein the data change can be caused by data input in the first form subcomponent by a user, so that changed form data corresponding to the first form subcomponent and a rendering template used by the first form subcomponent are obtained, and the first form subcomponent is re-rendered.
In the embodiment of the disclosure, because the form data is stored in a Ref object manner, based on the inherent characteristics of the Ref object, when a certain form subcomponent is changed, all form subcomponents of the current form page are not re-rendered, but only the changed form subcomponents are re-rendered, so that the number of times of invalid rendering can be greatly reduced, and the running efficiency of the front end is further ensured.
FIG. 2 is a flowchart illustrating a further method for rendering a form according to an embodiment of the disclosure. Referring to fig. 2, the form rendering method specifically includes:
s201, wrapping the form sub-assemblies of the forms to be rendered by the high-order assemblies.
The high-order component comprises an update configuration item for triggering the wrapped form sub-component to perform rendering and updating, and the update configuration item can be selected from logic codes for forcibly triggering the form sub-component to perform re-rendering. Therefore, a single form subassembly is taken as the minimum updating granularity, the updating and rendering of each form subassembly are triggered based on the high-order component wrapping the form subassembly, and the rendering time of the form subassembly can be controlled by wrapping the high-order component.
S202, 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 a Ref object form.
For a specific process, reference may be made to the above embodiments, which are not described herein again.
S203, determining a first form sub-component with data change in the current page, and triggering re-rendering of the first form sub-component through an update configuration item included in a high-order component wrapping the first form sub-component.
In the embodiment of the disclosure, after a first form subcomponent with data change in a current page is determined, a rendering update of the first form subcomponent can be triggered by running an update configuration item included in a high-level component wrapping the first form subcomponent, so that the updated rendering of the first form subcomponent does not affect other form subcomponents.
In the embodiment of the disclosure, each form subcomponent is wrapped by a high-order component, so that when the form is updated and rendered, only the update configuration item included in the high-order component wrapping the form subcomponent needs to be run, and other subcomponents are not affected.
FIG. 3a is a flowchart illustrating a further method for rendering a form according to an embodiment of the disclosure. Referring to fig. 3a, the form rendering method specifically includes the following steps:
s301, 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.
S302, determining a first form sub-component with data change in the current page, and re-rendering the first form sub-component.
S303, determining a second form sub-component according to the dependency relationship among different form sub-components, and re-rendering the second form sub-component.
In the implementation of the present disclosure, the form data corresponding to the second form subcomponent depends on the form data corresponding to the first form subcomponent, that is, when the data of the first form subcomponent is changed, the data of the second form subcomponent depending on the first form subcomponent is also changed, and at this time, the second form subcomponent needs to be re-rendered. When the method is implemented, the component dependency relationship among different form sub-components can be registered, then a second form sub-component is determined according to the component dependency relationship, and the second form sub-component is re-rendered.
Wherein the process of determining the second form sub-component is as follows: registering a subscription relation of a broadcast event between different form sub-components according to a dependency relation between the different form sub-components; illustratively, one form includes form sub-components A, B and C, if form sub-component B depends on form sub-component a, then register form sub-component B to subscribe to the data change event broadcast by form sub-component a, where the data change event may include data fields that form sub-component a changes and are needed by form sub-component B; if the form sub-component C depends on the form sub-component B, the registered form sub-component C subscribes to a data change event broadcasted by the form sub-component B; that is, in the scheme of the present disclosure, only the subscription event is registered in the affected form subcomponent, and the subscription requirement does not need to be mounted on both sides, thereby avoiding the circular rendering. And then, receiving a data change event broadcasted by the first form subcomponent, and taking the form subcomponent registered and subscribed to the data change event as a second form subcomponent according to a subscription relation, wherein the number of the second form subcomponent is one or more.
And further, sending the data change event to second form subcomponents, wherein if the number of the second form subcomponents is multiple, the data change event is simultaneously sent to the second form subcomponents through a multicast technology, and further, for each second form subcomponent, the second form subcomponents are re-rendered through the update configuration items included in the high-order components wrapping the second form subcomponents.
It should be noted that, because each form subcomponent is wrapped in advance by a high-order component, an event sending configuration item for triggering the wrapped form subcomponent to send a data change event and a receiving configuration item for receiving the data change event are also written in advance in the high-order component; thus, each form subcomponent can broadcast data change events out through the event sending configuration items of the high-level component of the outer-wrap, and can receive subscribed data change events through the receiving configuration items of the high-level component of the outer-wrap. In addition, through an event subscription mode, a second form subcomponent influenced by the first form subcomponent is instructed to be re-rendered, so that logic codes forming configuration items included in a high-order component wrapping the form subcomponents can be reused, and therefore the code amount of a developed form can be further reduced. In addition, after the second form sub-component is re-rendered, whether other sub-components depending on the second form sub-component exist can be determined, and if not, the process is ended; if the form sub-component exists, re-rendering is performed on other form sub-components, and the specific implementation process is similar to the process for re-rendering the second form sub-component, which is not described herein again.
In another alternative embodiment, a dependency tree is constructed according to the dependency relationship between different form sub-components; and traversing the dependency tree by taking the first form sub-component as a starting node, determining a second form sub-component according to a traversal result, and further re-rendering the second form sub-component.
To illustrate the form rendering process in detail, refer to FIG. 3b, which illustrates a logic flow diagram of form rendering. A, B and C are all form subcomponents of the form to be rendered, and all form subcomponents are rendered when the form to be rendered is rendered for the first time; then, according to the dependency relationship between different form sub-components, a subscription relationship for subscribing to a broadcast event between different form sub-components is registered in the subscription control module, for example, if form sub-component B depends on form sub-component a, then registration form sub-component B subscribes to a data change event broadcast by form sub-component a. If the form sub-assembly A has data change, triggering to re-render the form sub-assembly A; meanwhile, the form subcomponent A sends a data change event to the subscription control module; and the subscription control module determines that the form sub-component B subscribes to the data change event according to the event subscription relation, and then sends the data change event generated by the form sub-component A to the form sub-component B to indicate to re-render the form sub-component B.
In the embodiment of the disclosure, when the first form subcomponent which is changed is re-rendered, the second form subcomponent which is affected by the first form subcomponent is re-rendered, so that the display effect of a form page is ensured; and the re-rendering is not performed on other form sub-components which are not affected by the first form sub-component, so that compared with the situation that all the components of the form are re-rendered, the number of invalid rendering times is greatly reduced.
Further, when the current form page needs special processing, the user-defined form page can be realized by adding a user-defined component to the current form page, and optionally, the user-defined form sub-component is added to the current form page in a form nesting or nested form mode in response to a request for adding the user-defined form sub-component. The custom form can follow the properties provided by the development framework to ensure the convenience of adding the components.
Fig. 4 is a schematic structural diagram of a form rendering device according to an embodiment of the present disclosure, where the embodiment is applicable to a case of rendering and displaying a form of an internet of things platform. Referring to fig. 4, including:
the first rendering module 401 is configured to render the form to be rendered according to the form data of the form to be rendered, so as to obtain a current form page; the form data is stored in the form of Ref objects;
and the second rendering module 402 is configured to determine a first form subcomponent with data change in the current page, and re-render the first form subcomponent.
On the basis of the above embodiment, optionally, the method further includes:
the component processing module is used for wrapping high-order components of the form sub-components of the form to be rendered; the high-order component comprises an updating configuration item for triggering the wrapped form sub-component to render and update;
the second rendering module is further to:
determining a first form subcomponent with data change in the current page, and triggering re-rendering of the first form subcomponent through an update configuration item included in a high-order component wrapping the first form subcomponent.
On the basis of the above embodiment, optionally, the method further includes:
the third rendering module is used for determining a second form sub-component according to the dependency relationship among different form sub-components and re-rendering the second form sub-component; and the form data corresponding to the second form subcomponent depends on the form data corresponding to the first form subcomponent.
On the basis of the foregoing embodiment, optionally, the third rendering module is further configured to:
registering a subscription relation of the broadcast events among different form sub-components according to the dependency relation among the different form sub-components;
receiving a data change event broadcasted by a first form subcomponent, and taking a form subcomponent registered and subscribed to the data change event as a second form subcomponent according to a subscription relation;
and sending the data change event to a second form subcomponent, and re-rendering the second form subcomponent through an update configuration item included by a higher-order component wrapping the second form subcomponent.
On the basis of the above embodiment, optionally, the method further includes:
and the component adding module is used for responding to a request for adding the user-defined form sub-components and adding the user-defined form sub-components into the current form page in a form nesting or nested form mode.
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 corresponding functional modules and beneficial effects of the execution method. Reference may be made to the description of any method embodiment of the disclosure for a matter not explicitly described in this embodiment.
In the technical scheme of the disclosure, the acquisition, storage, application and the like of the personal information of the related user all accord with the regulations of related laws and regulations, and do not violate the good customs of the public order.
The present disclosure also provides an electronic device, a readable storage medium, and a computer program product according to embodiments of the present disclosure.
FIG. 5 illustrates a schematic block diagram of an example electronic device 500 that can 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 phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be examples only, and are not intended to limit implementations of the disclosure described and/or claimed herein.
As shown in fig. 5, the apparatus 500 comprises a computing unit 501 which may perform various appropriate actions and processes in accordance with 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 calculation unit 501, the ROM502, and the RAM503 are connected to each other by a bus 504. An input/output (I/O) interface 505 is also connected to bus 504.
A number of components in the device 500 are connected to the I/O interface 505, including: an input unit 506 such as a keyboard, a mouse, or the like; an output unit 507 such as various types of displays, speakers, and the like; a storage unit 508, such as a magnetic disk, 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 through 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 with processing and computing capabilities. Some examples of the computing unit 501 include, but are not limited to, a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), various dedicated Artificial Intelligence (AI) computing chips, various computing units running machine learning model algorithms, a Digital Signal Processor (DSP), and any suitable processor, controller, microcontroller, and so forth. The computing unit 501 performs the various 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 in 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 device 500 via ROM502 and/or communications 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 may be implemented in digital electronic circuitry, integrated circuitry, Field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), system on a 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 that are executable and/or interpretable on a programmable system including at least one programmable processor, which may be special or general purpose, receiving data and instructions from, and transmitting data and instructions to, a storage system, at least one input device, and at least one output device.
Program code for implementing the methods of the present disclosure may be written in any combination of one or more programming languages. These program codes 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 codes, when executed by the processor or controller, cause the functions/operations specified in the flowchart and/or block diagram to be performed. 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. A 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 a pointing device (e.g., a mouse or a 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 can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form, including acoustic, speech, or tactile input.
The systems and techniques described here can be implemented in a computing system that includes a back-end 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 back-end, 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 clients and servers. A client and server are generally 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 combining a blockchain.
It should be understood that various forms of the flows shown above, reordering, adding or deleting steps, may be used. For example, the steps described in the present disclosure may be executed in parallel, sequentially, or in different orders, as long as the desired results of the technical solutions disclosed in the present disclosure can be achieved, and the present disclosure is not limited herein.
The above detailed description should not be construed as limiting the scope of the disclosure. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may be made, depending on design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present disclosure should be included in the protection scope of the present disclosure.
Claims (13)
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;
and determining a first form subcomponent with data change in the current page, and re-rendering the first form subcomponent.
2. The method of claim 1, further comprising:
wrapping a high-order component of the form sub-component of the form to be rendered; the high-order component comprises an update configuration item which triggers the wrapped form sub-component to render and update;
determining a first form subcomponent with data change in the current page, and re-rendering the first form subcomponent, including:
determining a first form subcomponent with data change in the current page, and triggering re-rendering of the first form subcomponent through an update configuration item included in a high-order component wrapping the first form subcomponent.
3. The method of claim 2, further comprising:
determining a second form sub-component according to the dependency relationship among different form sub-components, and re-rendering the second form sub-component; and the form data corresponding to the second form sub-component depends on the form data corresponding to the first form sub-component.
4. The method of claim 3, wherein determining a second form sub-component from dependencies between different form sub-components and re-rendering the second form sub-component comprises:
registering a subscription relation of a broadcast event between different form sub-components according to a dependency relation between the different form sub-components;
receiving a data change event broadcasted by the first form subcomponent, and taking a form subcomponent registered and subscribed to the data change event as the second form subcomponent according to the subscription relation;
and sending the data change event to the second form subcomponent, and re-rendering the second form subcomponent through an update configuration item included in a high-order component wrapping the second form subcomponent.
5. The method of claim 1, further comprising:
in response to a request to add a custom form subcomponent, the custom form subcomponent is added to the current form page by form nesting or nesting forms.
6. 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;
and the second rendering module is used for determining the first form subcomponent with data change in the current page and re-rendering the first form subcomponent.
7. The apparatus of claim 6, further comprising:
the component processing module is used for wrapping high-order components of the form sub-components of the form to be rendered; the high-order component comprises an update configuration item which triggers the wrapped form sub-component to render and update;
the second rendering module is further to:
determining a first form subcomponent with data change in the current page, and triggering re-rendering of the first form subcomponent through an update configuration item included in a high-order component wrapping the first form subcomponent.
8. The apparatus of claim 7, further comprising:
the third rendering module is used for determining a second form sub-component according to the dependency relationship among different form sub-components and re-rendering the second form sub-component; and the form data corresponding to the second form sub-component depends on the form data corresponding to the first form sub-component.
9. The apparatus of claim 8, wherein the third rendering module is further to:
registering a subscription relation of a broadcast event between different form sub-components according to a dependency relation between the different form sub-components;
receiving a data change event broadcasted by the first form subcomponent, and taking a form subcomponent registered and subscribed to the data change event as the second form subcomponent according to the subscription relation;
and sending the data change event to the second form subcomponent, and re-rendering the second form subcomponent through an update configuration item included in a high-order component wrapping the second form subcomponent.
10. The apparatus of claim 6, further comprising:
and the component adding module is used for responding to a request for adding the user-defined form sub-components and adding the user-defined form sub-components into the current form page in a form nesting or nested form mode.
11. 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-5.
12. A non-transitory computer readable storage medium having stored thereon computer instructions for causing the computer to perform the method of any one of claims 1-5.
13. A computer program product comprising a computer program which, when executed by a processor, implements the method according to any one of claims 1-5.
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 true CN114780196A (en) | 2022-07-22 |
| CN114780196B 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) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112418997A (en) * | 2020-12-03 | 2021-02-26 | 政采云有限公司 | 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 |
|---|
| 喻莹莹;李新;陈远平;: "前后端分离的终端自适应动态表单设计", 计算机系统应用, no. 04 * |
| 张根;蔡永香;高静文;: "基于React组件快速构建网站前端", 电脑知识与技术, no. 15 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112418997A (en) * | 2020-12-03 | 2021-02-26 | 政采云有限公司 | User interface display method, device, equipment and medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114780196B (en) | 2023-07-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113791875A (en) | Input device virtualization method and device, electronic device and storage medium | |
| CN113377890B (en) | Map quality inspection method and device, electronic equipment and storage medium | |
| CN115686499A (en) | Method, device, storage medium and electronic equipment for generating request message | |
| CN113138827A (en) | Method, device, electronic equipment and medium for displaying data | |
| CN114780196A (en) | User interface form rendering method and device, electronic equipment and storage medium | |
| CN114490126A (en) | Page processing method and device, electronic equipment and storage medium | |
| CN114398023A (en) | File generation method and page configuration method and device | |
| CN113312560A (en) | Group detection method and device and electronic equipment | |
| CN113656533A (en) | Tree control processing method and device and electronic equipment | |
| CN112947916A (en) | Method, device, equipment and storage medium for realizing online canvas | |
| CN112926008A (en) | Method and device for generating form page, electronic equipment and storage medium | |
| CN112925522A (en) | Dependency graph generation method, dependency graph generation device, dependency graph generation apparatus, storage medium, and program product | |
| CN113378346A (en) | Method and device for model simulation | |
| CN113722007B (en) | Configuration method, device and system of VPN branch equipment | |
| CN114036249A (en) | Map data processing method, map data processing device, electronic equipment and medium | |
| CN114218313A (en) | Data management method, device, electronic equipment, storage medium and product | |
| CN114610701A (en) | Task data processing method and device, electronic equipment and medium | |
| CN113722037A (en) | User interface refreshing method and device, electronic equipment and storage medium | |
| CN114564268A (en) | Equipment management method and device, electronic equipment and storage medium | |
| CN113031962B (en) | Compiling method, compiling apparatus, electronic device, storage medium, and program product | |
| CN114995800A (en) | Project development method and device, electronic equipment and storage medium | |
| CN114528444B (en) | Graph data processing method and device, electronic equipment and storage medium | |
| CN114281655A (en) | Application display method, device, equipment and storage medium | |
| CN115761094A (en) | Image rendering method, device and equipment and storage medium | |
| CN117667098A (en) | Project management 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 |