A visual data-driven engine for changing component states
By using a visual data-driven engine, data objects are abstracted into draggable layer objects, defining JSON data object structures and event trees, generating business code, solving the problems of single event binding and complex linkage between components, and realizing unified management and flexible interaction of component states.
Patent Information
- Application Number
- CN202210124269.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-02-10
- Publication Date
- 2026-02-10
- Estimated Expiration
- 2042-02-10
AI Technical Summary
In existing technologies, the relationship between components is based on a single event binding. The component initiator cannot change its own state through the execution state of the responder. Complex linkage relationships between multiple components require multiple event bindings, resulting in complex configuration.
It adopts a visual data-driven engine, abstracts data objects into draggable layer objects, and presents them in groups in the user component layer tree. It defines the JSON data object structure, generates an event tree, and dynamically generates business code in combination with the abstract syntax tree, so as to achieve unified management and free subscription of component state.
It simplifies the event binding configuration between components, improves online coding efficiency, enables centralized management and flexible interaction of component states, and reduces the complex relationships between component objects.
Smart Images
Figure CN114461202B_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of visual designers, and in particular to a method and apparatus for changing the state of components using a visual data-driven engine. Background Technology
[0002] Most visual designs require changes to the interactions between components. Previously, changing state via events necessitated handling multiple state relationships, such as switch states (on / off states of visual components in a webpage), tab states (on / off states of visual component tabs in a webpage), and component show / hide states. Event-driven state changes required individually binding and distributing state to each component. However, with a data engine, even a small change can have far-reaching consequences. Figure 1 As shown.
[0003] The existing technology has the following drawbacks:
[0004] 1. The relationship between components is a single event binding. Typically, the bound component only responds to the events initiated by the bound component and the parameters carried by the events.
[0005] 2. The component initiator cannot change its own state through the responder's execution state.
[0006] 3. Complex inter-component relationships require multiple event bindings. Summary of the Invention
[0007] To address the aforementioned shortcomings of existing technologies, this invention provides a method and apparatus for using a visual data-driven engine to change component states, centrally manage subscriptions, avoid single event binding, and dynamically generate project source code through engine compilation.
[0008] To achieve the above objectives, the present invention adopts the following technical solution:
[0009] In one embodiment of the present invention, a method for changing the state of a component using a visual data-driven engine is proposed, the method comprising:
[0010] The data-driven engine abstracts data objects into draggable layer objects and presents them in groups in the user component layer tree, while defining component layer tree model properties for the data objects;
[0011] When a data object is involved in binding between component objects, define the JSON data object structure;
[0012] The data-driven engine generates a corresponding event tree by recording the component object binding relationships in the JSON data object structure. Interactions can be completed by using the methods defined within the component object to interact with external component objects. The data-driven engine combines the event tree with the abstract syntax tree to dynamically generate business code.
[0013] Furthermore, define component layer tree model properties for the data object, including:
[0014] Define the triggering conditions for binding component objects to data objects, define event types for data objects, and define simple expressions for data objects.
[0015] Furthermore, the structure of the JSON data object is as follows:
[0016] {"type":"Event","state":{"disabled":false,"conditions":[],"sourceId":1,"trigger":"change","id":2}, is used to record the binding relationship of component objects.
[0017] Furthermore, the data-driven engine provides a common event interface for all component objects in the component layer tree.
[0018] In one embodiment of the present invention, a device for a visual data-driven engine to change the state of a component is also provided, the device comprising:
[0019] The model property definition module is used by the data-driven engine to abstract data objects into draggable layer objects and group them in the user component layer tree, while defining the component layer tree model properties for the data objects.
[0020] The data object structure definition module is used to define the JSON data object structure when data objects are involved in binding between component objects;
[0021] The data object tree generation module is used by the data-driven engine to generate a corresponding event tree based on the component object binding relationships recorded in the JSON data object structure. Interaction can be completed by using the methods defined within the component object to interact with external component objects. The data-driven engine can then dynamically generate business code by combining the event tree with the abstract syntax tree.
[0022] Furthermore, define component layer tree model properties for the data object, including:
[0023] Define the triggering conditions for binding component objects to data objects, define event types for data objects, and define simple expressions for data objects.
[0024] Furthermore, the structure of the JSON data object is as follows:
[0025] {"type":"Event","state":{"disabled":false,"conditions":[],"sourceId":1,"trigger":"change","id":2}, is used to record the binding relationship of component objects.
[0026] Furthermore, the data-driven engine provides a common event interface for all component objects in the component layer tree.
[0027] In one embodiment of the present invention, a computer device is also proposed, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the aforementioned method of the visual data driving engine for changing the state of components.
[0028] In one embodiment of the present invention, a computer-readable storage medium is also provided, which stores a computer program that executes a method for a visual data-driven engine to change the state of a component.
[0029] Beneficial effects:
[0030] This invention provides a unified management and free subscription approach. Events are distributed to subscribed component objects based on the state of the data object to receive messages and update their states. In the past, event binding was a single behavior, and the relationship between component objects required a single binding. With the help of a data-driven engine, the configuration of some scenarios can be simplified. At the same time, the data object can also be a manually written function method, which can write processing logic for specific scenarios. Attached Figure Description
[0031] Figure 1 This is a diagram illustrating traditional event triggering.
[0032] Figure 2 This is a schematic diagram of the data-driven implementation of the present invention;
[0033] Figure 3 This is a diagram illustrating the method architecture of the visual data-driven engine of this invention for changing component states.
[0034] Figure 4 This is an example diagram of the user component layer tree of the present invention;
[0035] Figure 5 This is an example diagram of how the data object of this invention is used to bind trigger conditions;
[0036] Figure 6 This is a schematic diagram of the device structure of the visual data-driven engine of the present invention for changing the state of components;
[0037] Figure 7 This is a schematic diagram of the computer device structure of the present invention. Detailed Implementation
[0038] The principles and spirit of the present invention will now be described with reference to several exemplary embodiments. It should be understood that these embodiments are provided merely to enable those skilled in the art to better understand and implement the present invention, and are not intended to limit the scope of the present invention in any way. Rather, these embodiments are provided to make this disclosure more thorough and complete, and to fully convey the scope of this disclosure to those skilled in the art.
[0039] Those skilled in the art will recognize that embodiments of the present invention can be implemented as a system, apparatus, device, method, or computer program product. Therefore, this disclosure can be specifically implemented in the following forms: entirely hardware, entirely software (including firmware, resident software, microcode, etc.), or a combination of hardware and software.
[0040] According to embodiments of the present invention, a method and apparatus for changing component states using a visual data-driven engine are proposed. In a visual designer, to satisfy certain interactive attributes, specific data can be used to store states. Changing the data content achieves the purpose of switching states. The data content can also provide necessary parameters for key component objects. Dragging in data objects allows them to be visually displayed in the user's component layer tree, and component object logic can be named, associated, and expressions can be filled in. The data-driven engine generates a static JSON data object structure through defined expressions. Component interaction logic and source code implementation can be created using this JSON data object structure.
[0041] The principles and spirit of the present invention will be explained in detail below with reference to several representative embodiments.
[0042] Figure 2 This is a schematic diagram illustrating the data-driven implementation of the present invention. For example... Figure 2 As shown, the data-driven engine provides a common event interface for all component objects in the component layer tree. When a data object is changed, all associated component objects are changed simultaneously, i.e., UI = F(state), where UI refers to the web view, F refers to the function method, and State refers to the state. Moreover, each component object can change the state of the data object, avoiding the complex configuration of event-driven systems and thus greatly simplifying the development of visual view interaction.
[0043] Figure 3 This is a diagram illustrating the method architecture of the visual data-driven engine of this invention for changing component states. (For example...) Figure 3 As shown, the method includes:
[0044] 1. The data-driven engine abstracts data objects into draggable layer objects (since the data object itself is invisible, it is an object used to store data in the programming language. In the context of a visual editor, the data object can be dragged into the canvas as a data component, and its properties can then be edited), and is displayed in the user component layer tree (such as...). Figure 4 As shown, the component layer tree is similar to the layer manipulation panel in Photoshop. It is a tree structure, where each layer represents a component that the user drags into the canvas. The component layer tree model property is defined for the data object to distinguish it from the component object. The data object is only for processing user data. The model property will define key fields such as component object linkage, event type, and expression to handle data object interaction.
[0045] Users can define the component layer tree's `model` property, which can be any type of parameter or complex object. Data objects provide common trigger conditions for binding component objects, such as... Figure 5 As shown, when initialization occurs or data changes, such as when a data object triggers an update, the status of all bound component objects will be updated. Data objects can also be written as simple expressions, which can be method return values, ternary expressions, etc. Data objects can also be manipulated on the component layer tree, such as adding and deleting.
[0046] 2. Design the data object structure. When the data object participates in the binding between component objects, define the JSON data object structure as follows:
[0047] {"type":"Event","state":{"disabled":false,"conditions":[],"sourceId":1,"trigger":"change","id":2} (This is the event model used to define the interaction of component objects within the data-driven engine. type: type, state: property, disabled: unavailable, conditions: conditions, sourceId: bound component Id, trigger: trigger condition, id: event ID) is used to record the binding relationship of component objects.
[0048] 3. Data Object Tree Generation: The data-driven engine generates a corresponding event tree based on the recorded component object binding relationships. (The data object tree includes all the attributes needed to describe the interaction of the component object, such as the display data and attributes required by the component object. The event tree here emphasizes the data-driven engine's ability to generate event trees; the data object contains the event tree.) Interactions can be completed through methods defined within the component object to interact with external component objects (defined according to the component object's interaction, such as triggering a button component's click, which here would be the component exposing a click method). The data-driven engine combines the event tree with the Abstract Syntax Tree (AST) (an abstract representation of the source code syntax structure) to dynamically generate business code, greatly improving online coding efficiency.
[0049] It should be noted that although the operation of the method of the present invention has been described in a specific order in the above embodiments and figures, this does not require or imply that the operations must be performed in that specific order, or that all the operations shown must be performed to achieve the desired result. Additionally or alternatively, certain steps may be omitted, multiple steps may be combined into one step, and / or one step may be broken down into multiple steps.
[0050] To provide a clearer explanation of the method used by the visual data-driven engine to change component states, a specific embodiment will be described below. However, it is worth noting that this embodiment is only for better illustrating the present invention and does not constitute an improper limitation of the present invention.
[0051] Example:
[0052] This embodiment discloses a method for changing the state of a component using a visual data-driven engine. The method includes triggering the response behavior of bound component objects by changing the data object structure. The data object structure can execute a response based on the triggering conditions established by the component object. During the response execution, the data object structure can also pass its own data to the responder. Through these actions, the response of the data object managing the component object is changed, centralizing the management of interactions between component objects. This is more flexible and has a wider range of applications than traditional event binding. The specific implementation is as follows:
[0053] 1. Introduce a data-driven engine into the development project. The data-driven engine exposes hook programs, node methods, and the main plugin body by default.
[0054] 2. The data-driven engine is provided by default as a plugin that can be integrated into the main project. You need to create an engine instance using the hook program in the main project.
[0055] 3. Created through engine instances, the data-driven engine can perform operations and extensions on nodes within the current plug-in program. The exposed node methods will provide event responses between component objects, data listening and modification, trigger condition judgment, etc.
[0056] 4. The main body of the project can listen to the engine state, integrate the UI interface, and complete the state binding between component objects.
[0057] Based on the same inventive concept, this invention also proposes a device for a visual data-driven engine to change the state of components. The implementation of this device can refer to the implementation of the method described above, and repeated details will not be repeated. The term "module" as used below can be a combination of software and / or hardware that implements a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.
[0058] Figure 6 This is a schematic diagram of the device structure used by the visual data-driven engine of this invention to change the state of components. (See diagram below.) Figure 6 As shown, the device includes:
[0059] The model attribute definition module 101 is used by the data-driven engine to abstract data objects into draggable layer objects and group them in the user component layer tree. It also defines the component layer tree model attributes for the data objects, including:
[0060] Define the triggering conditions for binding component objects to data objects, define event types for data objects, and define simple expressions for data objects.
[0061] The data object structure definition module 102 is used to define the JSON data object structure when data objects participate in the binding between component objects, as follows:
[0062] {"type":"Event","state":{"disabled":false,"conditions":[],"sourceId":1,"trigger":"change","id":2}, is used to record the binding relationship of component objects.
[0063] The data object tree generation module 103 is used by the data-driven engine to generate a corresponding event tree based on the component object binding relationships recorded in the JSON data object structure. Interaction can be completed by using the methods defined within the component object to interact with external component objects. The data-driven engine can dynamically generate business code by combining the event tree with the abstract syntax tree.
[0064] The data-driven engine provides a common event interface for all component objects in the component layer tree.
[0065] It should be noted that although several modules of the visual data-driven engine for changing component states have been mentioned in the detailed description above, this division is merely exemplary and not mandatory. In fact, according to embodiments of the invention, the features and functions of two or more modules described above can be embodied in a single module. Conversely, the features and functions of a single module described above can be further divided and embodied by multiple modules.
[0066] Based on the aforementioned inventive concept, such as Figure 7 As shown, the present invention also proposes a computer device 200, including a memory 210, a processor 220, and a computer program 230 stored in the memory 210 and executable on the processor 220. When the processor 220 executes the computer program 230, it implements the aforementioned method of the visual data driving engine for changing the state of components.
[0067] Based on the aforementioned inventive concept, the present invention also proposes a computer-readable storage medium storing a computer program that executes the aforementioned visual data driving engine for changing the state of components.
[0068] As an efficient designer, simple and easy-to-use operation and interface are essential. When designing an application, users want to minimize configuration and coding while meeting most development scenarios, such as: ID change requests for multiple component data; setting timed refresh durations to refresh multiple component data simultaneously; setting initial values and parameters for components; combining multiple condition judgments; storing URL conditions, etc. This invention proposes a method and device for changing component states using a visual data-driven engine. Based on the data-driven engine, all interactions are associated with it, and data is changed through events. The unified access interface and component object binding also enable more efficient platform creation.
[0069] While the spirit and principles of the invention have been described with reference to several specific embodiments, it should be understood that the invention is not limited to the disclosed specific embodiments, and the division of aspects does not imply that features in these aspects cannot be combined for benefit; such division is merely for ease of description. The invention is intended to cover various modifications and equivalent arrangements included within the spirit and scope of the appended claims.
[0070] Regarding the limitation of the scope of protection of this invention, those skilled in the art should understand that various modifications or variations that can be made by those skilled in the art without creative effort based on the technical solution of this invention are still within the scope of protection of this invention.
Claims
1. A method for changing the state of a component using a visual data-driven engine, characterized in that, The method includes: The data-driven engine abstracts data objects into draggable layer objects and presents them in groups in the user component layer tree. It also defines component layer tree model properties for data objects, including: defining the trigger conditions for binding component objects to data objects, defining event types for data objects, and defining simple expressions for data objects. When a data object is involved in binding between component objects, define the JSON data object structure; The data-driven engine generates a corresponding event tree by recording the component object binding relationships in the JSON data object structure. Interactions can be completed by using the methods defined within the component object to interact with external component objects. The data-driven engine combines the event tree with the abstract syntax tree to dynamically generate business code.
2. The method for changing component states using a visual data-driven engine according to claim 1, characterized in that, The structure of the JSON data object is as follows: {"type":"Event","state":{"disabled":false,"conditions":[],"sourceId":1,"trigger":"change","id":2}, is used to record the binding relationship of component objects.
3. The method for changing component states using a visual data-driven engine according to claim 1, characterized in that, The data-driven engine provides a common event interface for all component objects in the component layer tree.
4. A device for using a visual data-driven engine to change the state of a component, characterized in that, The device includes: The model property definition module is used by the data-driven engine to abstract data objects into draggable layer objects and group them in the user component layer tree. It also defines the component layer tree model properties for the data objects, including: defining the trigger conditions for binding component objects to the data objects, defining the event types for the data objects, and defining simple expressions for the data objects. The data object structure definition module is used to define the JSON data object structure when data objects are involved in binding between component objects; The data object tree generation module is used by the data-driven engine to generate a corresponding event tree based on the component object binding relationships recorded in the JSON data object structure. Interaction can be completed by using the methods defined within the component object to interact with external component objects. The data-driven engine can then dynamically generate business code by combining the event tree with the abstract syntax tree.
5. The apparatus for changing component states using a visual data-driven engine according to claim 4, characterized in that, The structure of the JSON data object is as follows: {"type":"Event","state":{"disabled":false,"conditions":[],"sourceId":1,"trigger":"change","id":2}, is used to record the binding relationship of component objects.
6. The apparatus for changing component states using a visual data-driven engine according to claim 4, characterized in that, The data-driven engine provides a common event interface for all component objects in the component layer tree.
7. A computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the method according to any one of claims 1-3.
8. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that performs the method according to any one of claims 1-3.
Citation Information
Patent Citations
Visual configuration rendering method and system based on Vue modularizationand terminal
CN112711408A
Workflow data binding
US20070276689A1