A development system supporting rapid construction of an interactive interface

Abstract

The application belongs to the technical field of software development tools, and particularly relates to a development system supporting rapid construction of an interactive interface, comprising the following steps: constructing a central state machine model, which is used to define all discrete states of the interactive interface and transition conditions between the states; providing a design view, which is used to edit properties of user interface components bound to the states in the central state machine model; and providing a logic view, which is used to edit data processing logic for realizing state transition conditions and state accompanying actions in a node programming manner. The application can introduce the central state machine model as a "single data source" of the interactive interface, and construct a powerful synchronization engine, so as to seamlessly connect and synchronously realize the user interface, the business logic and the state model in real time, thereby significantly improving the maintainability, the cooperation efficiency and the debugging experience of the interactive interface development, and reducing the development threshold.

Description

Technical Field

[0001] This invention belongs to the field of software development tools technology, specifically relating to a development system that supports the rapid construction of interactive interfaces. Background Technology

[0002] Modern software applications, especially web and mobile applications, generally have complex interaction logic. Traditional user interface (UI) development typically separates user interface (UI) design, business logic implementation, and state management into different files or modules. For example, a designer provides the UI design, and developers write the control logic and state update code in different component files. This separated development model has the following problems: Maintenance difficulties: When the interaction flow needs to be modified, developers need to find and update the relevant UI states and logic in multiple locations of the code, which can easily lead to omissions or inconsistencies.

[0003] Inefficient collaboration: Designers and developers need to communicate and synchronize frequently, and design changes are difficult to be directly and accurately reflected in the logic code, and vice versa.

[0004] Debugging is complex: Due to the dispersed states, it is very difficult to trace the complete chain of state changes and interface updates triggered by an interaction, resulting in low debugging efficiency.

[0005] High barrier to entry: Building complex, state-driven interactive interfaces requires developers to have good state management architecture design capabilities, which is not friendly to beginners.

[0006] Some existing low-code platforms or visual logic editors attempt to simplify this process, but they often bind the UI and logic to specific components or pages, lacking a global, unified state control center. This results in high coupling between different parts of the system, making it difficult to modularize and reuse, and it is prone to getting out of control in complex interaction scenarios. Summary of the Invention

[0007] The purpose of this invention is to provide a development system that supports the rapid construction of interactive interfaces. By introducing a central state machine model as the "single data source" for the interactive interface and building a powerful synchronization engine, the user interface, business logic and state model are seamlessly connected and synchronized in real time, thereby significantly improving the maintainability, collaboration efficiency and debugging experience of interactive interface development and lowering the development threshold.

[0008] The specific technical solution adopted by this invention is as follows: A method for quickly building interactive interfaces includes the following steps: Construct a central state machine model, which is used to define all discrete states of the interactive interface and the transition conditions between each state. Provides a design view for editing the properties of user interface components that are bound to states in the central state machine model; Provides a logical view for editing the data processing logic that implements state transition conditions and accompanying state actions in a node-based programming manner; Through the synchronization engine, a bidirectional mapping relationship is established and dynamically maintained between the central state machine model, the interface component attributes in the design view, and the logical nodes in the logical view; The synchronization engine is configured to: in response to an edit operation in any view, update the central state machine model based on the bidirectional mapping relationship, and then synchronously drive other related views to perform consistent updates of the model change; Based on the edited central state machine model, interface component definitions, logical node flows, and their mapping relationships, a deployable interactive interface containing a lightweight runtime state machine framework is generated. The runtime state machine framework is used to load the central state machine model during application runtime and perform state adjudication, state transition driving, and interface state synchronization.

[0009] The synchronization engine includes a central data bus, a mapping registry, and a status arbiter. The bidirectional mapping and synchronization steps specifically include: The association between interface components, logical nodes, and state machine states or state transitions is registered through the mapping registry. When any view generates an edit event, a change message containing the operation type and target identifier is published through the central data bus; The state arbitrator listens to the change message and determines the validity of the edit event based on the current state of the central state machine model and the state machine rules. If effective, the central state machine model is updated, and the model change is converted into update instructions for other views according to the mapping registry, and distributed for execution via the central data bus.

[0010] The status arbiter is configured to perform at least one of the following decisions: When a logical node in the logical view attempts to trigger a state transition, it verifies whether the transition is allowed under the current state of the central state machine model. When editing the interactive properties of an interface component in the design view, operations that exceed the scope are restricted or prompted based on the available set of operations in the current binding state of the component. When editing state transition rules in the state machine view, verify the logical completeness of the source state, target state, and triggering event to prevent the creation of invalid or contradictory transition paths.

[0011] The method further includes: A debug view is provided, which is connected to the synchronization engine, for obtaining real-time data from the synchronization engine during interactive interface simulation runtime, and performing at least one of the following: In the logical view and state machine view, the currently executing logical node and state transition path are highlighted in the form of graphical animation; In a separate panel, the current state of the central state machine model, variable pool data, and data snapshots flowing through logic nodes are monitored and displayed in real time.

[0012] The method also includes a modular packaging step: In response to the user's selection operation of a group of associated nodes in the logical view and sub-states in the state machine, the selected object and its internal connection relationship, as well as the mapping relationship with the central state machine model, are encapsulated into an independent logical module. Define explicit input parameter interfaces and output event interfaces for the independent logic modules, and store the encapsulation results in the module repository; The independent logic module can trigger specific state transitions predefined in the central state machine model through its output event interface.

[0013] The method also includes an intelligent assisted generation step: Receive natural language descriptions or template selection instructions from users; The semantic parsing module parses the description or instruction into a structured intent object, which includes a triggering event, a target state, a conditional predicate, and an action list. Based on the intent-component mapping library, the structured intent object is converted into a pre-defined combination of logical nodes and state machine fragments; The synchronization engine is invoked to insert the generated logical node combinations and state machine fragments into the corresponding views, and the mapping relationship registration with the central state machine model is automatically completed.

[0014] A development system that supports the rapid construction of interactive interfaces and implements the method, comprising: The state machine model management module is used to create and maintain a central state machine model that defines the core discrete states and transition conditions of the interactive interface. The design view module provides an interface component editing canvas for editing the properties of user interface components that are bound to the states in the central state machine model. The logic view module provides a logic node editing canvas, which is used to edit the data processing logic that implements state transition conditions and accompanying actions in a node-based programming manner; The synchronization engine module is connected to the state machine model management module, the design view module, and the logic view module. The synchronization engine module includes: The mapping management unit is used to store and maintain the bidirectional mapping relationship between the interface components, logic nodes and the central state machine model elements; The state adjudication and synchronization unit is used to respond to the editing operation of any module, update the central state machine model based on the bidirectional mapping relationship and the validity of the current state adjudication operation of the central state machine model, and drive other modules to perform consistent updates.

[0015] Also includes: The debugging and monitoring module is connected to the synchronization engine module to visualize the runtime transitions, logic execution flow, and data changes of the central state machine model. The modular management module is used to encapsulate the combination of logic and state into reusable independent logical modules, and provides version management and repository retrieval functions. The intelligent assistance module integrates a semantic parser and an intent-component mapping library to generate initial logic and a state machine framework based on user input.

[0016] An electronic device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the method.

[0017] A computer-readable storage medium having a computer program stored thereon that, when executed by a processor, implements the method.

[0018] The technical effects achieved by this invention are as follows: This invention ensures end-to-end consistency from editing to runtime through the following methods: the bidirectional mapping relationship and state control logic established and maintained by the synchronization engine during editing will be compiled or exported as a specification executable by the interactive interface at runtime; the final generated interactive interface will contain a lightweight runtime state machine framework, which loads the definition of the central state machine model when the application runs and continues to perform the core functions of state adjudication, state transition driving, and interface state synchronization, thereby ensuring that the behavior of the interactive interface after leaving the editing environment is completely consistent with the behavior presented through multi-view synchronization during the editing stage, realizing unified control of the design, development, and operation stages.

[0019] This invention clearly defines the behavioral logic of the entire system through a central state machine, centralizing the decentralized state management, making the interaction process clear at a glance, and greatly reducing the cognitive burden of understanding and maintaining the system.

[0020] The synchronization engine in this invention ensures strong consistency between UI design, business logic, and the state model. When designers modify UI styles or states, the logical view automatically detects this; when developers adjust state transition logic, the UI state is reflected in real time. This achieves seamless collaboration between design and development.

[0021] The debugging view of this invention can display the linkage process of state, logic and data in a three-dimensional way, making bug tracking and understanding of the interaction chain more intuitive and efficient, and significantly improving the debugging experience.

[0022] This invention supports encapsulating complex sub-processes into reusable modules and provides intelligent generation capabilities, which not only improves code reusability but also enables novices to quickly build well-structured interactive interfaces, lowering the development threshold.

[0023] The state arbiter set up in this invention provides state machine-based legality verification during the editing and runtime periods, which helps to detect logical errors in advance and build a more robust interactive interface. Attached Figure Description

[0024] Figure 1 This is a flowchart of the method of the present invention; Figure 2 This is a block diagram of the development system of the present invention; Figure 3 This is a block diagram of the electronic device of the present invention. Detailed Implementation

[0025] To make the objectives and advantages of this invention clearer, the invention will be specifically described below with reference to embodiments. It should be understood that the following text is merely used to describe one or more specific embodiments of the invention and does not strictly limit the scope of protection specifically claimed by the invention.

[0026] like Figure 1 As shown, a method for quickly building interactive interfaces includes the following steps: When developers build a "user login" interactive interface, they first use a state machine model manager to define a central state machine model. The model may contain the following states: "Initial", "Verifying", "Success", and "Fail". Transitions are defined as follows: the transition from "Initial" to "Verifying" is triggered by the "Submit button click" event; the condition for transitioning from "Verifying" to "Success" is "Correct credentials"; and the condition for transitioning to "Fail" is "Incorrect credentials". The central state machine model, interface component tree, logical node flow, and mapping relationships established during the above editing process; when the user clicks "Publish" or "Export," the development system will perform the following operations to generate the final runnable system: Code / Configuration Generation: Compile the central state machine model into a state machine definition file (such as JSON or XML format); convert the node flow in the logical view into executable functions or code blocks for the target platform; generate the component and property binding relationships in the design view into an interface description file; Embedded runtime framework: The generated code package will contain a lightweight runtime state machine framework; when the application starts, this framework will load the aforementioned state machine definition file and initialize a state machine instance that behaves consistent with the editing environment; Runtime synchronization: When the application runs, UI events trigger the execution of corresponding logic code. The logic code no longer directly manipulates the UI, but instead sends a "trigger transfer" request to the runtime state machine framework. The miniature state arbiter within this framework verifies the state based on the loaded model. If allowed, the state transfer is executed. After the state transfer is completed, the framework automatically notifies the UI layer to update the state of the corresponding components, including show / hide and enable / disable, based on the mapping relationship loaded at runtime. This mechanism ensures that the interactive behaviors designed and debugged through multi-view synchronization in the development system are completely consistent with the runtime behaviors of the final generated application, achieving a closed-loop process from design and development to deployment.

[0027] Next, in the design view editor, drag and drop a login form, including username, password input fields, and a submit button; in the properties panel, bind the "enabled" property of the "submit button" to "initial state", meaning that the button can only be clicked in the "initial state"; bind the "visible" property of the "error message text" component to the "login failed" state; Then, in the logic view editor, construct the logic node flow: a "Button Click Event" node listens for the submit button; then connects to the "Data Collection" node to get the input box value; then connects to the "API Call" node to simulate verification; based on the API return result, through the "Condition Judgment" node branch, connect to two "Trigger State Transition" nodes respectively, with the targets pointing to the "Login Successful" and "Login Failed" states respectively; at the same time, when entering the "Verification in Progress" state, a loading animation can be displayed through the accompanying action node; During this editing process, the synchronization engine continues to work; when the "API call successful" branch is connected to the "Trigger state transition -> Login successful" node in the logical view, the synchronization engine will verify through the state arbitrator whether the transition from "Verification in progress" to "Login successful" exists in the state machine model; if it exists, the connection is allowed, and the mapping relationship between this logical node and the corresponding state transition is recorded in the mapping registry; at the same time, when the error message text is bound to the "Login failed" state in the design view, the mapping relationship is also recorded. During the simulation phase, the user clicks the submit button; the event node in the logical view is triggered, and data flows through the API call node; the synchronization engine detects that the state is about to transition from "initial state" to "verification" and immediately notifies the design view through the mapping relationship: disable the submit button, as it is bound to the "initial state"; when the API returns an error, the logical node is triggered to transition to "login failed"; the synchronization engine updates the current state of the central state machine to "login failed" and immediately notifies the design view: display the error message text, as it is bound to this state; the entire process is uniformly driven by the central state machine model, and the states between views are strictly synchronized.

[0028] The synchronization engine internally includes a central data bus, a mapping registry, and a status arbiter; In the design view, the developer attempts to add an animation effect that is only available in state B to a button that is already bound to state A; this operation generates an edit event for "updating component property bindings". The design view module encapsulates events as messages and publishes them through the central data bus; the message format is as follows: {type:"UPDATE_BINDING",target:"Button1",newBinding:{state:"StateB",property:"animation"}}; The state arbiter listens for and intercepts this message; it queries the current central state machine model and finds that "state B" exists; it further checks whether the "animation effect" is valid for the button under "state B" according to preset rules, such as the rule base defining the set of attributes available for the button in "state B"; assuming the check passes; The state arbiter determines that the event is valid, and then updates the meta-information about "state B" in the central state machine model, recording the associated UI component properties. The synchronization engine searches for all items that need to be synchronized based on the mapping registry. Although the current main task is to update the model, this change may affect the rendering when state B is activated in the future. At the same time, in order to maintain information consistency, the synchronization engine may send a "binding successful" confirmation instruction to the design view, or send an update instruction to a possible "state details view" to show that state B is now associated with the animation property of Button1.

[0029] Debug view: The tool enters debug mode, and the synchronization engine begins broadcasting runtime messages; The debugging monitoring module subscribes to these messages. In the logic view and state machine view, when a user clicks a button to trigger an event, the corresponding event node will be highlighted and flashing, followed by the condition nodes and action nodes on the execution path being highlighted in sequence; at the same time, in the state machine view, a transition edge from the current state to the next state will be animated and highlighted.

[0030] In the independent debugging panel, the left side displays the current state path of the central state machine in real time in a tree structure, such as: Application State -> Authentication Module -> Logged In; the middle panel displays the global variable pool in table form, such as the current value of {userName:“Alice”, token:“xyz123”}; the right panel displays “data snapshots”, where the input and output data of a logical node marked as a “monitoring point” are captured and displayed when data flows through it.

[0031] Modular encapsulation; the developer built an "image carousel" function; in the logical view, he selected a group of nodes: "timer node", "image index calculation node", and "image switching animation trigger node"; in the state machine model, he selected the "carousel in progress" state and its internal transitions such as "switch to next image" and "switch to previous image"; He clicked the "Package as Module" button in the toolbar; the modular management module performs the following operations: Analyze the internal data flow connections between the selected nodes; Analyze the transition connections between the selected state and the external state, and transform them into the module's external event interface; for example, transform the external trigger of "Start Carousel" into the module's "Start" input event; transform the internal transition from the "Carousel in Progress" state to the external "Homepage" into the module's "Return to Homepage" output event. A dialog box pops up, allowing the user to define the module name "ImageCarousel", input parameters including an array of image URLs and the carousel interval; it outputs a list of events, including "Start", "Stop", "Image Switch", and "Back". Package the node set, state subgraph, mapping relationship, and interface definition to generate a module description file and store it in the module repository. After that, other projects can directly drag this module from the repository, configure the parameters, and use the full carousel function. Its output events can be connected to the state machine of the new project to drive new state transitions.

[0032] The user enters natural language in the intelligent assistance dialog box: "If the user enters the wrong password three times in a row, the account will be locked for one hour." Semantic parsing: The semantic parser of the intelligent assistance module analyzes the sentence, identifies the trigger condition "entering the wrong password three times in a row", the action "locking the account", and the parameter "one hour", and converts them into a structured intent object; Intent Mapping: Based on the intent-component mapping library, the above intents are mapped to executable component combinations; "N consecutive times" is mapped to a "counter" node and a "condition judgment" node; "lock account" is mapped to an "update user status field" node and a "trigger status transition to 'locked'" node; "one hour" is mapped to a "set timer" node; Generation and Insertion: The tool automatically creates the above nodes in the logical view and connects them into a logical chain; at the same time, in the state machine model, a "Locked" state is added next to the "Login" state, and a transition edge is created from "Login" to "Locked" with the triggering event being "Password error exceeded"; it may also automatically add a transition edge from "Locked" back to the "Login" state via the "Timer expired" event; Automatic mapping registration: The synchronization engine automatically registers mapping relationships for all newly generated elements; it associates the "trigger state transition to 'locked'" node with the ID of the transition edge that was just created; When a user enters "Clear fields after submitting form", the semantic parsing module performs the following steps: Word segmentation and keyword extraction: Extract "Submit Form" and "Clear Field"; Template matching: In the mapping library, the keyword "submit form" matches the "button click" event node template; the keyword "clear field" matches the "set component property" action node template, and the property is "value", while the target value is "empty"; Structured intent object generation: Generates an intent object as {trigger:"BUTTON_CLICK",actionList:[{type:"SET_PROPERTY",targetComponent:"current form field",property:"value",value:""}]}; Node and state machine fragment generation: A "button click event" node is automatically created in the logical view and connected to a "set component properties" node, whose parameters are preset according to the intent object; if the current design view has form field components, the mapping between the action node and the corresponding component is automatically established; the synchronization engine then registers the mapping relationship between the new node and the central state machine model. This rule-based template-based implementation ensures the feasibility of the functionality and provides a foundation for more complex machine learning-based semantic understanding.

[0033] like Figure 2As shown, a development system that supports the rapid construction of interactive interfaces is provided by an implementation method, comprising: The state machine model management module is used to create and maintain a central state machine model; The design view module provides an editing canvas for interface components; The logical view module provides a canvas for editing logical nodes; The synchronization engine module is used to maintain data consistency among the state machine model management module, the design view module, and the logical view module. The synchronization engine module includes: The mapping management unit is used to store and manage the mapping relationship between each view element and the central state machine model element; The State Adjudication and Synchronization Unit is used to adjudicate the validity of edit events and drive real-time synchronization across views based on the current state of the central state machine model and the mapping relationship between various views.

[0034] It also includes: a debugging and monitoring module, which communicates with the synchronization engine module to visualize the runtime transitions, logic execution flow, and data changes of the central state machine model; The modular management module is used to encapsulate the combination of logic and state into reusable independent logical modules, and provides version management and repository retrieval functions. The intelligent assistance module integrates a semantic parser and an intent-component mapping library to generate initial logic and a state machine framework based on user input.

[0035] like Figure 3 As shown, an electronic device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and a method implemented by the processor when executing the program. The electronic device may be a workstation, a personal computer, a server, or a cloud computing instance.

[0036] A computer-readable storage medium having a computer program stored thereon, the method of which is implemented when the program is executed by a processor, the storage medium may be any medium capable of storing program code, such as a USB flash drive, external hard drive, ROM, RAM, magnetic disk or optical disk.

[0037] Example 1: Building an interactive interface based on the user login process This embodiment demonstrates how to use the aforementioned editing methods and tools to quickly build a classic "user login" interactive interface.

[0038] Constructing a central state machine model: In the state machine model management module, developers create and define a central state machine model; the model includes the following states: idle (idle / initial state), validating (validating), success (login successful), and failure (login failed). Define state transitions: idle->validating: The event that triggers is SUBMIT; validating->success: The event that triggers is VALIDATION_PASSED; validating->failure: The event that triggers is VALIDATION_FAILED; Design view editing: Open the Design View module, and drag and drop a form container, two text input boxes (username and password), a submit button, and a text label from the component library onto the canvas for error messages. Select the submit button, find its disabled property in the properties panel, and bind it to the validating state of the central state machine; this means that the button will be disabled when the state is validating. Select the error message text label and bind its visible attribute to the failure state; that is, this message will only be displayed when login fails. The synchronization engine's mapping management unit automatically records these binding relationships; Logical view editing: Switch to the logical view module; Drag and drop a "UI Events" node from the node library and configure it to listen for the "click" event of the submit button in the design view; the node will automatically output a data packet representing the SUBMIT event; Connect this node to a "Data Aggregation" node, which is configured to collect the current value of the specified input box; Connect the "Data Aggregation" node to a "Mock API Request" node for debugging purposes. This node simulates sending a verification request to the server and returning the result. Connect a "Conditional Branch" node after the "Simulate API Request" node; After the "Success" branch, connect a "Trigger Transfer" node and configure it to trigger the VALIDATION_PASSED event; After the "Failure" branch, connect another "Trigger Transfer" node, configure it to trigger the VALIDATION_FAILED event, and you can also connect a "Set Variable" node to record error information to the state machine's variable pool; The state arbiter of the synchronization engine will check whether these "trigger transition" nodes have corresponding valid transitions in the state machine model during editing, starting from validating and going to success or failure; Synchronization and Debugging: Click the "Simulate Run" button in the tool; the debug monitoring module will start. In the preview window of the design view, try entering information and clicking the submit button; at this time, the synchronization engine drive status changes from idle to validating. The submit button in the design view immediately becomes disabled, which conforms to the binding rules; In the logical view, the "UI Events" node and the "Simulated API Requests" node are highlighted in turn; In the state machine view, the transition path from idle to validating is highlighted with an animation; When a simulated request returns a failure, the status transitions to failure, and the error message text is automatically displayed in the design view; the variable pool area of ​​the debug panel displays the logged error information; Generate a deployable system: After editing, click "Export"; the tool will then perform the generation steps: Compile the central state machine model into a JSON configuration file; Convert the node flow of the logical view into a pure JavaScript function chain; Generate component code for frameworks such as React / Vue from the components and binding relationships of the design view; Package all content into a lightweight runtime state machine framework; When the generated application runs, the state machine framework loads the JSON configuration; when the user clicks a button, the corresponding JS function chain is executed, and the function chain finally calls the framework's dispatch('VALIDATION_FAILED') method; the state arbiter within the framework checks whether this transition is allowed under the current state validating. If allowed, the state is updated to failure, and the visibility of the error message text is automatically updated by calling the UI layer method according to the generated binding relationship code; the entire behavior is completely consistent with the simulated run in the editing environment.

[0039] Example 2: Shopping cart sidebar overlay interaction, including modularity and intelligent assistance This embodiment demonstrates a more complex e-commerce application scenario, involving modular packaging and intelligent assisted generation; Constructing a state machine model: Define a state machine to manage the shopping cart overlay; the states include: cart_hidden (hidden), cart_visible (visible), and cart_updating (updating products); the transitions include: clicking the shopping cart icon triggers SHOW_CART, clicking the overlay or close button triggers HIDE_CART, adding or removing the quantity of products triggers UPDATE_ITEM (entering cart_updating), and automatically returning to cart_visible after the update is complete; Basic setup of design view and logical view: In the design view, build a shopping cart overlay UI that includes a product list, quantity increase / decrease buttons, and a total price area, and bind the overall visibility of the overlay to the cart_visible state; In the logical view, create a logical flow for the "Increase Product Quantity" button: listen for clicks -> get the product ID -> update the quantity in the shopping cart array in the state machine variable pool -> trigger the UPDATE_ITEM transition -> call the function to recalculate the total price; Modular packaging: Developers discovered that the logic for "increasing the quantity of goods" and "decreasing the quantity of goods" is highly similar and closely related to the shopping cart status; He selected all the nodes involved in these two logical flows in the logical view, and selected the cart_visible and cart_updating states and their associated UPDATE_ITEM transitions in the state machine view; Right-click and select "Encapsulate as a module"; a dialog box will pop up for the modular management module. The developer named the module CartItemQuantityAdjuster, defining its input interface as itemId (product ID) and delta (change amount, +1 or -1); and defining its output event as ITEM_UPDATED, corresponding to the internal UPDATE_ITEM transition. After encapsulation, the module is stored in the warehouse. In the design view, this module can be quickly applied to the add or remove buttons for any product. Simply configure its itemId parameter and connect its ITEM_UPDATED output to the main state machine to reuse the complete business logic and state control. Intelligent assisted generation: The developer wants to add a "clear shopping cart" feature; in the input box of the smart assistance module, he describes it as follows: "When the user long-presses the clear button, a confirmation dialog box pops up; if the user clicks confirm, the shopping cart list is cleared and the pop-up closes;" The semantic parser of the intelligent assistance module identifies the triggering condition (long press of the button), intermediate state (confirmation dialog box), and final action (clear the list, trigger HIDE_CART). Based on the intent-component mapping library, the tool automatically performs the following operations: Create a "Long Press Event" node in the logical view and connect it to the "Show Dialog Box" action node; Generate a "Dialog Confirmation Event" node, which is subsequently connected to a "Clear Array" node and a "Trigger Transfer" node, triggering HIDE_CART; In the state machine model, a transition from the cart_visible state to the cart_hidden state, triggered by the CLEAR_CONFIRMED event, is automatically added. The synchronization engine automatically establishes mapping relationships for all new elements; Integrated debugging: During the simulation, developers can trigger the "clear shopping cart" process; The debug monitoring module highlights the transition path from cart_visible to cart_hidden in the state machine view; In the logical view, the entire node execution chain from "long press event" to "trigger transfer" is highlighted; In the independent debugging panel, you can observe in real time the shopping cart array in the variable pool being cleared and the changes in the current state; this three-dimensional debugging view makes tracking and understanding complex interaction links exceptionally intuitive.

[0040] Summary of Results: Example 1 demonstrates the basic closed loop of the method from core state definition to final code generation, reflecting strong consistency between state, UI, and logic; Example 2 further demonstrates the advantages of this method in improving reusability and development efficiency, as well as its powerful visual debugging capabilities, verifying its practical value in building complex interactive interfaces.

[0041] The above description is merely a preferred embodiment of the present invention. It should be noted that those skilled in the art can make various improvements and modifications without departing from the principles of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention. Structures, devices, and operating methods not specifically described or explained in this invention are implemented according to conventional methods in the art unless otherwise specified or limited.

Claims

1. A method for supporting the rapid construction of interactive interfaces, characterized in that, Includes the following steps: Construct a central state machine model, which is used to define all discrete states of the interactive interface and the transition conditions between each state. Provides a design view for editing the properties of user interface components that are bound to states in the central state machine model; Provides a logical view for editing the data processing logic that implements state transition conditions and accompanying state actions in a node-based programming manner; Through the synchronization engine, a bidirectional mapping relationship is established and dynamically maintained between the central state machine model, the interface component attributes in the design view, and the logical nodes in the logical view; The synchronization engine is configured to: in response to an edit operation in any view, update the central state machine model based on the bidirectional mapping relationship, and then synchronously drive other related views to perform consistent updates of the model change; Based on the edited central state machine model, interface component definitions, logical node flows, and their mapping relationships, a deployable interactive interface containing a lightweight runtime state machine framework is generated. The runtime state machine framework is used to load the central state machine model during application runtime and perform state adjudication, state transition driving, and interface state synchronization.

2. The method according to claim 1, characterized in that, The synchronization engine includes a central data bus, a mapping registry, and a status arbiter. The synchronization engine is configured to perform the following operations: The association between interface components, logical nodes, and state machine states or state transitions is registered through the mapping registry. When any view generates an edit event, a change message containing the operation type and target identifier is published through the central data bus; The state arbitrator listens to the change message and determines the validity of the edit event based on the current state of the central state machine model and the state machine rules. If effective, the central state machine model is updated, and the model change is converted into update instructions for other views according to the mapping registry, and distributed for execution via the central data bus.

3. The method according to claim 2, characterized in that, The status arbiter is configured to perform at least one of the following decisions: When a logical node in the logical view attempts to trigger a state transition, it verifies whether the transition is allowed under the current state of the central state machine model. When editing the interactive properties of an interface component in the design view, operations that exceed the scope are restricted or prompted based on the available set of operations in the current binding state of the component. When editing state transition rules in the state machine view, verify the logical completeness of the source state, target state, and triggering event to prevent the creation of invalid or contradictory transition paths.

4. The method according to claim 1, characterized in that, The method further includes: A debug view is provided, which is connected to the synchronization engine, for obtaining real-time data from the synchronization engine during interactive interface simulation runtime, and performing at least one of the following: In the logical view and state machine view, the currently executing logical node and state transition path are highlighted in the form of graphical animation; In a separate panel, the current state of the central state machine model, variable pool data, and data snapshots flowing through logic nodes are monitored and displayed in real time.

5. The method according to claim 1, characterized in that, The method also includes a modular packaging step: In response to the user's selection operation of a group of associated nodes in the logical view and sub-states in the state machine, the selected object and its internal connection relationship, as well as the mapping relationship with the central state machine model, are encapsulated into an independent logical module. Define explicit input parameter interfaces and output event interfaces for the independent logic modules, and store the encapsulation results in the module repository; The independent logic module can trigger specific state transitions predefined in the central state machine model through its output event interface.

6. The method according to claim 1, characterized in that, The method also includes an intelligent assisted generation step: Receive natural language descriptions or template selection instructions from users; The semantic parsing module parses the description or instruction into a structured intent object, which includes a triggering event, a target state, a conditional predicate, and an action list. Based on the intent-component mapping library, the structured intent object is converted into a pre-defined combination of logical nodes and state machine fragments; The synchronization engine is invoked to insert the generated logical node combinations and state machine fragments into the corresponding views, and the mapping relationship registration with the central state machine model is automatically completed.

7. A development system that supports rapid construction of interactive interfaces for implementing the method of any one of claims 1-6, characterized in that, include: The state machine model management module is used to create and maintain a central state machine model that defines the core discrete states and transition conditions of the interactive interface. The design view module provides an interface component editing canvas for editing the properties of user interface components that are bound to the states in the central state machine model. The logic view module provides a logic node editing canvas, which is used to edit the data processing logic that implements state transition conditions and accompanying actions in a node-based programming manner; The synchronization engine module is connected to the state machine model management module, the design view module, and the logic view module. The synchronization engine module includes: The mapping management unit is used to store and maintain the bidirectional mapping relationship between the interface components, logic nodes and the central state machine model elements; The state adjudication and synchronization unit is used to respond to the editing operation of any module, update the central state machine model based on the bidirectional mapping relationship and the validity of the current state adjudication operation of the central state machine model, and drive other modules to perform consistent updates.

8. The tool according to claim 7, characterized in that, Also includes: The debugging and monitoring module is connected to the synchronization engine module to visualize the runtime transitions, logic execution flow, and data changes of the central state machine model. The modular management module is used to encapsulate the combination of logic and state into reusable independent logical modules, and provides version management and repository retrieval functions. The intelligent assistance module integrates a semantic parser and an intent-component mapping library to generate initial logic and a state machine framework based on user input.

9. An electronic 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 program, it implements the method as described in any one of claims 1-6.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1-6.

Images