A method, device, equipment and medium for setting an interactive interface

Abstract

This specification discloses a method, apparatus, device, and medium for setting an interactive interface, comprising: determining a preset area corresponding to a specified control in the interactive interface, the preset area including an event selection area, a controller setting area, a controller strategy area, and a parameter configuration area; determining a description of an event corresponding to the specified control through the event selection area, the event description being used to determine events supported by a specified component, the event being used to trigger the controller corresponding to the specified control; determining a description of the controller corresponding to the specified control through the controller setting area, the controller description including the classification and built-in methods of the controller corresponding to the specified control; determining the relevant strategies of the controller corresponding to the specified control through the controller strategy area; and configuring parameters for the controller corresponding to the specified control through the parameter configuration area to complete the setting of the interactive interface.

Description

Technical Field

[0001] This specification relates to the field of computer technology, and in particular to a method, apparatus, device, and medium for setting up an interactive interface. Background Technology

[0002] In web front-end development, the interaction logic between interfaces is essential. To enable customization of controls and interfaces, developers inevitably need to write a significant amount of code to implement specific interactive functions. Existing technologies often require developers to independently create events and define the parameters for the interaction logic to be passed, then store the values ​​in JSON data. If an error occurs, it becomes very difficult to pinpoint the cause. Furthermore, the coding process is complex and demands a high level of skill from the developer. Summary of the Invention

[0003] This specification provides one or more embodiments of a method, apparatus, device, and medium for setting up an interactive interface, which is used to solve the technical problems raised in the background art.

[0004] One or more embodiments of this specification employ the following technical solutions:

[0005] This specification provides a method for setting an interactive interface through one or more embodiments, including:

[0006] In the interactive interface, a preset area corresponding to a specified control is determined. The preset area includes an event selection area, a controller setting area, a controller strategy area, and a parameter configuration area.

[0007] The event description corresponding to the specified control is determined through the event selection area. The event description is used to determine the events supported by the specified component. The event is used to trigger the controller corresponding to the specified control.

[0008] The controller description corresponding to the specified control is determined through the controller setting area. The controller description includes the classification and built-in methods of the controller corresponding to the specified control.

[0009] The relevant policy of the controller corresponding to the specified control is determined through the controller policy area;

[0010] The interactive interface is set up by configuring the controller parameters corresponding to the specified control in the parameter configuration area.

[0011] This specification provides an interactive interface setting device according to one or more embodiments, the device comprising:

[0012] The region determination unit determines a preset region corresponding to a specified control in the interactive interface. The preset region includes an event selection area, a controller setting area, a controller strategy area, and a parameter configuration area.

[0013] An event selection unit determines the description of an event corresponding to a specified control through the event selection area. The event description is used to determine the events supported by the specified component, and the event is used to trigger the controller corresponding to the specified control.

[0014] The controller setting unit determines the description of the controller corresponding to the specified control through the controller setting area. The description of the controller includes the classification and built-in methods of the controller corresponding to the specified control.

[0015] The controller policy unit determines the relevant policy of the controller corresponding to the specified control through the controller policy area;

[0016] The parameter configuration unit configures the controller parameters corresponding to the specified control through the parameter configuration area to complete the setting of the interactive interface.

[0017] This specification provides one or more embodiments of an interactive interface setting device, comprising:

[0018] At least one processor; and,

[0019] A memory communicatively connected to the at least one processor; wherein,

[0020] The memory stores instructions executable by the at least one processor, which, when executed by the at least one processor, enable the at least one processor to:

[0021] In the interactive interface, a preset area corresponding to a specified control is determined. The preset area includes an event selection area, a controller setting area, a controller strategy area, and a parameter configuration area.

[0022] The event description corresponding to the specified control is determined through the event selection area. The event description is used to determine the events supported by the specified component. The event is used to trigger the controller corresponding to the specified control.

[0023] The controller description corresponding to the specified control is determined through the controller setting area. The controller description includes the classification and built-in methods of the controller corresponding to the specified control.

[0024] The relevant policy of the controller corresponding to the specified control is determined through the controller policy area;

[0025] The interactive interface is set up by configuring the controller parameters corresponding to the specified control in the parameter configuration area.

[0026] This specification provides one or more embodiments of a non-volatile computer storage medium storing computer-executable instructions, wherein the computer-executable instructions are configured as follows:

[0027] In the interactive interface, a preset area corresponding to a specified control is determined. The preset area includes an event selection area, a controller setting area, a controller strategy area, and a parameter configuration area.

[0028] The event description corresponding to the specified control is determined through the event selection area. The event description is used to determine the events supported by the specified component. The event is used to trigger the controller corresponding to the specified control.

[0029] The controller description corresponding to the specified control is determined through the controller setting area. The controller description includes the classification and built-in methods of the controller corresponding to the specified control.

[0030] The relevant policy of the controller corresponding to the specified control is determined through the controller policy area;

[0031] The interactive interface is set up by configuring the controller parameters corresponding to the specified control in the parameter configuration area.

[0032] The above-described at least one technical solution adopted in the embodiments of this specification can achieve the following beneficial effects:

[0033] The embodiments in this manual enable basic developers to quickly get started and configure simple or complex business scenarios, and have the following features:

[0034] It provides a convenient and smooth method for configuring control event interactions;

[0035] A space-saving built-in controller display rule is provided;

[0036] It provides an interface for developers to customize controller methods, improving the flexibility of control interaction configuration;

[0037] It provides an interface for reusing bound methods and stores parameters edited by the developer for easy and quick configuration next time.

[0038] It provides a parameter editing page that monitors data changes in real time, eliminating the need for developers to manually save and synchronize data multiple times.

[0039] It provides a selection area for target controls, helping developers quickly select and configure interactive objects. Attached Figure Description

[0040] To more clearly illustrate the technical solutions in the embodiments or prior art of this specification, the drawings used in the description of the embodiments or prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in this specification. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort. In the drawings:

[0041] Figure 1 A flowchart illustrating a method for setting an interactive interface provided in one or more embodiments of this specification;

[0042] Figure 2 A schematic diagram illustrating bindable events provided in one or more embodiments of this specification;

[0043] Figure 3 A schematic diagram of a controller policy area provided for one or more embodiments of this specification;

[0044] Figure 4 A schematic diagram illustrating the categories of the import built-in controller pop-up window provided for one or more embodiments of this specification;

[0045] Figure 5 A schematic diagram illustrating the categories of the import built-in controller pop-up window provided for one or more embodiments of this specification;

[0046] Figure 6 A schematic diagram of a code editing area provided for one or more embodiments of this specification;

[0047] Figure 7 A schematic diagram of a bound method pop-up window provided for one or more embodiments of this specification;

[0048] Figure 8 A schematic diagram of a parameter configuration area provided for one or more embodiments of this specification;

[0049] Figure 9 A schematic diagram of the structure of an interactive interface setting device provided in one or more embodiments of this specification;

[0050] Figure 10 This is a schematic diagram of the structure of a setting device for an interactive interface provided in one or more embodiments of this specification. Detailed Implementation

[0051] This specification provides an embodiment of a method, apparatus, device, and medium for setting up an interactive interface.

[0052] In web front-end development, the interaction logic between interfaces is essential. Current low-code development tools still lack a dedicated event interaction interface to help developers quickly implement interactive functions. Even existing interfaces that allow editing event interactions often have excessively high barriers to entry, requiring developers to possess specialized knowledge. Furthermore, in some cases, developers find that no method has been set when binding events, requiring them to add the method from built-in components before binding the event. This makes the development process disjointed and significantly impacts the user experience.

[0053] Most current web front-ends cannot easily and smoothly configure control event interactions according to developers' operating habits. For example, existing event interaction functions are not decoupled. When a developer finds that the selected option is empty in the event panel, they need to switch to the page for defining built-in methods, set the method and configure the parameters, and then switch back to the event interaction panel to bind the event and method. The entire operation process is not smooth and is inconvenient for developers to understand the operation logic.

[0054] At the same time, most current web front-ends do not allow developers to write custom methods for configuration according to their needs. For example, most existing event interaction functions have built-in commonly used methods, but do not support developers to develop the methods they need, which limits the freedom of developers to use them.

[0055] Furthermore, most current web front-ends cannot reuse methods with parameters configured by the developer. For example, existing event interaction functions only retain the method, but not the parameters configured by the developer. When the developer uses the same method, the parameters need to be configured again.

[0056] In addition, most current web front-ends cannot monitor data changes in real time and modify event interaction logic based on the linked data.

[0057] Furthermore, current web front-ends cannot quickly select interactive objects, requiring complex code logic to implement interactions with other controls.

[0058] To enable those skilled in the art to better understand the technical solutions in this specification, the technical solutions in the embodiments of this specification will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this specification, and not all embodiments. Based on the embodiments of this specification, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of this specification.

[0059] Figure 1This diagram illustrates a method for setting an interactive interface according to one or more embodiments of this specification. This process can be executed by an interactive interface setting system. Certain input parameters or intermediate results in the process can be manually adjusted to help improve accuracy.

[0060] The method flow steps of the embodiments in this specification are as follows:

[0061] S102, determine the preset area corresponding to the specified control in the interactive interface. The preset area includes an event selection area, a controller setting area, a controller strategy area, and a parameter configuration area.

[0062] In the embodiments of this specification, a designated control can refer to the encapsulation of data and methods. A control can have predefined properties and methods, where properties can be simple accessors to the control's data, and methods can be some simple and visible functions of the control. The control creation process includes design, development, and debugging.

[0063] S104, determine the description of the event corresponding to the specified control through the event selection area. The description of the event is used to determine the events supported by the specified component. The event is used to trigger the controller corresponding to the specified control.

[0064] In the embodiments of this specification, after determining the event description corresponding to the specified control through the event selection area, the event can be encapsulated through the event selection area; wherein, the event can be encapsulated as an integrated list of events for unified display, or, through the toggle control in the property panel, the display of one or more events can be controlled.

[0065] In the embodiments of this specification, the designated component may include a "Add" button control and a table-type control with a pagination bar; wherein, the events supported by the "Add" button control may include click events, and the events supported by the table-type control with a pagination bar may include row switching events and page number switching events. Furthermore, the designated component may also include other types of controls, which are not listed in detail in the embodiments of this specification.

[0066] S106, the description of the controller corresponding to the specified control is determined through the controller setting area. The description of the controller includes the classification and built-in methods of the controller corresponding to the specified control.

[0067] In the embodiments of this specification, the classification and built-in methods of the controller corresponding to a specified control can be set according to the common items of the designer form. The built-in methods include pre-set default parameter configurations. The designer form can be a form corresponding to the interactive interface.

[0068] Furthermore, after determining the description of the controller corresponding to the specified control through the controller setting area, a preset format data structure corresponding to each controller can be generated according to the classification of the controller. The preset format data structures corresponding to each controller are then packaged and imported into the database. Through the database interface, all controllers can be called in a unified manner. By passing parameters through the database interface, the built-in methods of the controllers can be called. This makes it easier for the designer form to call all controllers and facilitates the implementation of specific interactive functions.

[0069] S108, determine the relevant policy of the controller corresponding to the specified control through the controller policy area.

[0070] In the embodiments described in this specification, the controller's related strategies may include controller display strategies, controller import strategies, custom controller strategies, and reuse of already bound strategies.

[0071] The controller display strategy can be used to pre-define the controllers displayed in the interactive interface. For the controller display strategy, this embodiment can define the built-in controllers that are prioritized for display in the event interaction panel. Since the controller strategy area is generally of a fixed size, directly displaying all controllers in S106 would make it very difficult for developers to find them. Therefore, controllers corresponding to methods bound by the developer under the current form can be prioritized for display to save developer search time. If the developer imports a new controller through the controller import strategy but does not bind a method, the controller without a bound method will not be displayed here before the area is reopened to save space.

[0072] The controller import strategy provides an interface for importing controllers that are not bound to the designer form. This strategy is related to the controller display strategy. Since the controller strategy area prioritizes displaying controllers corresponding to methods bound by the developer under the current form, methods not yet bound to the current form are not displayed in the controller settings area. In this case, an entry point for importing the controller is needed. This entry point calls the encapsulated controller interface, which displays all controllers in a pop-up window. After selecting the desired controller, the developer can click "Import Controller." To import multiple controllers, this interface can be called multiple times.

[0073] Custom controller strategies can be used to provide a jump entry point to the custom controller code editing area to edit custom methods and store them in the corresponding custom controller. For custom controller strategies, the embodiments in this specification take into account the freedom of developers. Built-in controllers may not meet the needs of all developers, so developers should be allowed to customize controller methods in the code editing area. An entry point to the custom controller code editing area is provided in the event panel, and developers can click save after editing their custom methods. One or more methods can be edited in the code editing area. After saving and returning to the event panel, all custom methods defined by the developer will be uniformly displayed in the custom controller.

[0074] The reuse of bound methods strategy can be used to retrieve the designer form, count the controllers and corresponding paths bound to all controls in the designer form, and provide an interface to view and reuse the methods and corresponding paths bound to other controls in the designer form. The key to reusing the bound methods strategy is retrieving the entire form and counting the methods and corresponding paths bound to all controls. To allow developers to quickly view and reuse methods configured on other controls in the form, an entry point should be provided in the event panel. Clicking this will bring up a pop-up window displaying all methods bound to controls on the form and their corresponding paths. For developers who want to bind the same methods to different controls, they can quickly retrieve the configured methods based on the control's path in the form and its name below. After selecting and clicking "OK," they can quickly reuse the methods configured on other controls in the form.

[0075] S110, Configure the controller parameters corresponding to the specified control through the parameter configuration area to complete the setting of the interactive interface.

[0076] In the embodiments of this specification, when configuring parameters for the controller corresponding to the specified control through the parameter configuration area, the number of parameter value items and parameter value types for the specified control corresponding to the controller can be configured through the parameter configuration area, and the target control can be determined to locate the control that needs to be interacted with.

[0077] It should be noted that the embodiments in this specification enable basic developers to quickly get started and configure simple or complex business scenarios; provide a convenient and smooth method for configuring control event interactions; provide a space-saving built-in controller display rule; provide an interface for developers to customize controller methods, improving the flexibility of control interaction configuration; provide a reusable interface for bound methods, storing parameters edited by developers for easy and quick configuration next time; provide a parameter editing page to monitor data changes in real time, eliminating the need for developers to manually save and synchronize data multiple times; and provide a selection area for target controls to help developers quickly select and configure interactive objects.

[0078] It should be noted that the above-mentioned technical features of the embodiments in this specification can be implemented in the following ways:

[0079] (I) Interface Settings

[0080] (II) Event Description and Encapsulation

[0081] (III) Controller Description and Interface Encapsulation

[0082] (iv) Built-in controller settings

[0083] (V) Setting the parameter configuration area

[0084] (vi) Interface generation and form rendering

[0085] 1. Based on step (i), the interface settings for the event interaction panel can be divided into the following four areas: event selection area, controller setting area, controller strategy area, and parameter configuration area.

[0086] a) The event selection area is used to display all events corresponding to the control currently selected by the developer, as mentioned in the event description of the subsequent step (II).

[0087] b) The controller settings area is used to display the controllers and methods mentioned in the controller description in step (iii).

[0088] c) The controller strategy area is used to display the corresponding function area of ​​the built-in controller settings in step (iv), including controller import, custom controller methods, and reuse of bound methods.

[0089] d) The parameter configuration area is used to display the parameter configuration settings in step (v).

[0090] The above four areas are described in detail in steps (II) to (V) below.

[0091] 2. Based on step (II), the event description and encapsulation mainly consist of the following two aspects:

[0092] a) The event description mainly clarifies all the events supported by the controls specified by the developer under the current form.

[0093] b) Regarding event encapsulation, there are two ways to handle all events supported by the control specified by the developer: 1) Integrate all events into a list and display them uniformly; 2) Integrate all events into a list, but the developer can control whether one or more events are displayed externally through the toggle control in the property panel.

[0094] 3. Based on step (III), controller description and interface encapsulation. Controller description mainly includes the following two steps: controller classification and built-in method settings. Built-in methods include pre-defined default parameter configurations. After the controller description, database interface integration can be performed.

[0095] a) For controller categories and built-in method settings, developers can configure them according to commonly used items in the designer form. For pre-defined default parameter configurations, the default parameter values ​​required by the method can be confirmed when setting up the built-in method. One or more default parameter values ​​can be passed, and the values ​​can be of various types such as boolean and string, as defined by the developer. When the developer does not input a parameter value, the default value is automatically filled. When the developer inputs a parameter value, the parameter value set by the developer will replace the default value and enter the method to implement the control's functionality.

[0096] b) For database interface integration, methods can be categorized and stored in the database, then uniformly invoked via the database interface. This step should be performed after step (ii). After the developer has configured all method parameters and named the methods and controllers, a JSON data structure corresponding to each controller can be generated according to the controller category. All controller files are then packaged together and imported into the database. All controllers can be invoked uniformly via the database interface. Built-in methods in the controllers can be invoked by passing parameters through the database interface.

[0097] 4. Based on step (iv), regarding the encapsulation of built-in controllers, there are mainly four strategies: controller display strategy, controller import strategy, custom controller strategy, and reuse of already bound strategies.

[0098] a) Regarding the display strategy for built-in controllers, this embodiment defines the built-in controllers that are prioritized for display in the event interaction panel. Since the controller setting area is generally of a fixed size, it would be very difficult for developers to find them if all the controllers encapsulated in step (ii) were displayed directly. Therefore, this embodiment prioritizes displaying the controllers corresponding to the methods that the developer has bound under the current form, in order to save developers' search time. If the developer introduces a new controller through step (iv) b), but does not bind a method, the controller without a bound method will not be displayed here before the area is reopened, in order to save space.

[0099] b) Regarding the controller import strategy, this strategy is related to step (iv) a). Since the controller settings area prioritizes displaying controllers corresponding to methods bound by the developer under the current form, methods not yet bound under the current form are not displayed in the controller settings area. In this case, an entry point for the controller needs to be imported. This entry point calls the controller interface encapsulated in step (ii), and all controllers are displayed in the pop-up window. After selecting the desired controller, the developer can click to import it. To import multiple controllers, this interface can be called multiple times.

[0100] c) Regarding custom controller strategies, the embodiments in this specification take into account the freedom of developers. Built-in controllers may not meet the needs of all developers, so developers should be allowed to customize controller methods in the code editing area. Similar to step (iv) b), an entry point to the custom controller code editing area is provided in the event panel. After editing a custom method, the developer clicks save. The code editing area allows editing one or more methods. After saving and returning to the event panel, all custom methods defined by the developer will be uniformly displayed in the custom controller.

[0101] d) For reusing bound methods, the key is to retrieve the entire form and count all methods bound to all controls along with their corresponding paths. To allow developers to quickly view and reuse methods configured on other form controls, an entry point should be provided in the event panel. Clicking this will bring up a pop-up window displaying all methods bound to the form controls and their corresponding paths. For developers who want to bind the same methods to different controls, they can quickly retrieve the configured methods based on the control's path in the form and its name below. After selecting and clicking "OK," they can quickly reuse methods configured on other form controls.

[0102] 5. Based on step (five), regarding the parameter configuration area settings, data monitoring and target control selection can be performed in the parameter configuration area.

[0103] a) For data monitoring, this embodiment monitors the values ​​in the parameter configuration area. When a value change is detected, the output value will be automatically saved, and the event interaction logic will be modified according to the linked data. Besides configuring the parameter values ​​manually the first time, developers can also reuse the bound method area mentioned in step (iv) d) to select already configured parameters and quickly bind existing methods. It should be noted that the controller setting area pre-sets default parameter configurations in the controller's built-in methods. When configuring parameters for the controller, the parameter configuration area replaces the default parameter configurations according to the actual situation, i.e., it monitors changes in parameter configurations.

[0104] b) For the selection of target controls, the system can automatically detect controls that require target control configuration and provide corresponding drop-down selection boxes. For example, for button controls with two or more sub-tables within a table area, when the "click" event is triggered, the interaction object may be one of the sub-tables in the table area. In this case, target control configuration is required to clarify the interaction object of the control.

[0105] 6. Based on step (VI), regarding interface generation and data storage.

[0106] a) The main steps for generating the interactive interface are: Click the control – select the event to be bound – select a specific method under the controller – configure parameters. The built-in controller section can have three selectable branches. Branch Step 1: Click the control – select the event to be bound – select Import New Controller – select a specific method under that controller – configure parameters. Branch Step 2: Click the control – select the event to be bound – select Edit New Method in the Code Area – save and select a specific method under the Developer Custom Controller – configure parameters. Branch Step 3: Click the control – select the event to be bound – select an already bound method; here you can reconfigure parameters or directly use the parameters of the already bound method. The entire operation process is smooth, with a high degree of flexibility and freedom. The interactive interface supports multiple event configurations until all events are bound.

[0107] b) Data storage primarily involves transmitting event interaction configuration data after configuration is complete. A corresponding JSON structure for the event interaction is generated and saved to the form control area. When the developer clicks the interaction panel again, the previously saved data is retrieved and displayed.

[0108] It should be noted that the embodiments in this specification have the following characteristics:

[0109] 1. It provides a separate event interaction panel, allowing basic developers to flexibly and quickly configure control interactions according to their individual needs.

[0110] 2. Allows developers to configure interactions by following the process of "clicking the control - selecting the event - selecting the method - configuring the parameters", which conforms to their common operating habits.

[0111] 3. A space-saving built-in controller display rule is provided, prioritizing the display of controllers for which developers have bound methods, and temporarily suppressing the display of controllers for which no methods are bound. In this embodiment, controllers that developers import but do not bind methods can be automatically suppressed from display. This saves display space and significantly reduces developer search time.

[0112] 4. Considering the main workflow's operational branches, the embodiments in this specification allow developers to:

[0113] a) Interact with the Properties panel and use switches to control the number of events that can be configured;

[0114] b) Import the required controllers into the built-in controllers for display;

[0115] c) Customize controller methods and independently determine the control interaction configuration scheme;

[0116] d) Reuse bound methods and configure them quickly, automatically listen for and store parameters edited by the developer;

[0117] e) The parameter editing page provides a method for real-time monitoring of data changes, eliminating the need for developers to manually save and synchronize data multiple times.

[0118] f) The selection area of ​​the target control helps developers quickly select and configure interactive objects.

[0119] All transitions between branches still follow the basic flow of "click control – select event – ​​select method – configure parameters". Compared to event interaction methods that require developers to directly modify code, the embodiments in this manual are also applicable to basic developers. While clarifying the interaction flow, these embodiments also simplify the development logic, allowing basic developers to quickly get started and use them.

[0120] Furthermore, the above-mentioned objectives, features, and advantages of the present invention will become clearer and more understandable through a detailed description of preferred embodiments of the embodiments described in this specification.

[0121] Step 1:

[0122] The interface settings in this embodiment may include the following four areas: event selection area, controller setting area, controller strategy area, and parameter configuration area.

[0123] Step Two:

[0124] The event description mainly clarifies the events corresponding to the controls. In the embodiments of this specification: 1) The events supported by the "Add" button control will include: click events (i.e., events triggered after the developer clicks the button). 2) The events supported by the table control with pagination will include: row switching events (i.e., events triggered after the developer switches to a specific row of the table), page number switching events (i.e., events triggered after the developer switches to a page number of the table), etc.

[0125] Event encapsulation involves interaction with the property panel. For example, a toggle switch can be provided in the property panel corresponding to a text control. Developers can use this toggle switch to decide whether to use hyperlinks. When the toggle switch is off, hyperlink events are not displayed in the event list; when the toggle switch is on, hyperlink events are displayed in the event list. The final encapsulated event is displayed in the event selection area. See [link to relevant documentation]. Figure 2 A schematic diagram of bindable events is shown.

[0126] Step 3:

[0127] Controller classification and built-in method settings. For example, in the embodiments of this specification, the button in the form control has the function of adding a new item after clicking, that is, the built-in method is the "Add" method; the table has the function of adding a new row after clicking, that is, the built-in method is the "Add Row" method; the built-in methods related to "Add" can be uniformly placed in the "Add Controller".

[0128] Step Four:

[0129] The built-in controller encapsulation includes the following four strategies: built-in controller display strategy, controller import strategy, custom controller strategy, and reuse of bound strategies.

[0130] Regarding the display strategy for built-in controllers, in the embodiments of this specification, if the developer has bound a data loading method to the list controller, the list controller and its internal methods will be displayed first in the built-in controller display area. See [link to documentation]. Figure 3 (A schematic diagram of the controller policy area is shown).

[0131] Regarding controller import strategies, this specification provides several basic categories of controllers commonly used by developers, including: All, Dictionary, List, Document, Data, Process, Import / Export, and Attachment controllers, etc. See [link / reference needed]. Figure 4 The diagram shown illustrates the categories of the import built-in controller pop-up, and Figure 5 The diagram illustrates the categories of the pop-up window for importing built-in controllers. Developers can quickly search for the required controller using the search bar or by switching the controller categories on the left to quickly import the desired controller. Only one controller can be imported at a time in this step. The imported controller will then... Figure 3 The area display of the controller policy area.

[0132] For custom controller strategies, the embodiments in this specification support navigation between the code editing area and the event interaction panel, with data automatically saved during the navigation process. Meanwhile, the code editing area provides a basic framework, allowing developers to edit one or more methods at a time; see [link to documentation]. Figure 6 A schematic diagram of the code editing area is shown.

[0133] For reusing bound strategies, this specification provides a pop-up area corresponding to the bound method in the embodiment. Developers can click on the bound method to enter this pop-up. The corresponding path in the pop-up is a combination of "outer container name + control name + event name bound to the control", see [link to documentation]. Figure 7 The diagram shown illustrates the bound method pop-up. Developers can use this path to quickly find previously configured events and their corresponding methods, and then reuse them directly by clicking on them.

[0134] Step 5:

[0135] Regarding parameter configuration settings. In the embodiments of this specification, the size of the parameter configuration area mainly depends on: 1) the number of parameter values ​​that the developer's method needs to pass and 2) the parameter value type. For example, if the parameter value type to be passed is Boolean, the parameter configuration area can provide a switch control; turning it on passes true, and turning it off passes false. If the parameter value type to be passed is text, the parameter configuration area can provide an input text box, where the developer inputs the parameter to be passed. In addition, the target control in the parameter configuration setting area can help the developer quickly locate the control that needs to be interacted with. Furthermore, in this invention, each parameter in the parameter configuration setting area provides a comment item, which can help the developer quickly understand the parameter value type and content to be passed. See [link to relevant documentation]. Figure 8 A schematic diagram of the parameter configuration area is shown.

[0136] Step Six: Interface Generation and Data Storage. The interface identifiers in the embodiments of this specification are defined as follows:

[0137] Table 1 defines the interface; see Table 1 for interface definitions below.

[0138]

[0139] Table 1 Interface Definition

[0140] Corresponding to the above embodiments, Figure 9 This is a schematic diagram of the structure of an interactive interface setting device provided in one or more embodiments of this specification. The device includes: a region determination unit 902, an event selection unit 904, a controller setting unit 906, a controller strategy unit 908, and a parameter configuration unit 910.

[0141] The region determination unit 902 determines a preset region corresponding to a specified control in the interactive interface. The preset region includes an event selection area, a controller setting area, a controller strategy area, and a parameter configuration area.

[0142] The event selection unit 904 determines the description of the event corresponding to the specified control through the event selection area. The description of the event is used to determine the events supported by the specified component, and the event is used to trigger the controller corresponding to the specified control.

[0143] The controller setting unit 906 determines the description of the controller corresponding to the specified control through the controller setting area. The description of the controller includes the classification and built-in methods of the controller corresponding to the specified control.

[0144] The controller policy unit 908 determines the relevant policy of the controller corresponding to the specified control through the controller policy area;

[0145] The parameter configuration unit 910 configures the controller parameters corresponding to the specified control through the parameter configuration area to complete the setting of the interactive interface.

[0146] Corresponding to the above embodiments, Figure 10 A schematic diagram of the structure of a setting device for an interactive interface provided in one or more embodiments of this specification, including:

[0147] At least one processor; and,

[0148] A memory communicatively connected to the at least one processor; wherein,

[0149] The memory stores instructions executable by the at least one processor, which, when executed by the at least one processor, enable the at least one processor to:

[0150] In the interactive interface, a preset area corresponding to a specified control is determined. The preset area includes an event selection area, a controller setting area, a controller strategy area, and a parameter configuration area.

[0151] The event description corresponding to the specified control is determined through the event selection area. The event description is used to determine the events supported by the specified component. The event is used to trigger the controller corresponding to the specified control.

[0152] The controller description corresponding to the specified control is determined through the controller setting area. The controller description includes the classification and built-in methods of the controller corresponding to the specified control.

[0153] The relevant policy of the controller corresponding to the specified control is determined through the controller policy area;

[0154] The interactive interface is set up by configuring the controller parameters corresponding to the specified control in the parameter configuration area.

[0155] This specification provides one or more embodiments of a non-volatile computer storage medium storing computer-executable instructions, wherein the computer-executable instructions are configured as follows:

[0156] In the interactive interface, a preset area corresponding to a specified control is determined. The preset area includes an event selection area, a controller setting area, a controller strategy area, and a parameter configuration area.

[0157] The event description corresponding to the specified control is determined through the event selection area. The event description is used to determine the events supported by the specified component. The event is used to trigger the controller corresponding to the specified control.

[0158] The controller description corresponding to the specified control is determined through the controller setting area. The controller description includes the classification and built-in methods of the controller corresponding to the specified control.

[0159] The relevant policy of the controller corresponding to the specified control is determined through the controller policy area;

[0160] The interactive interface is set up by configuring the controller parameters corresponding to the specified control in the parameter configuration area.

[0161] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the embodiments of apparatus, devices, and non-volatile computer storage media are basically similar to the method embodiments, so the descriptions are relatively simple; relevant parts can be referred to the descriptions of the method embodiments.

[0162] The foregoing has described specific embodiments of this specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than that shown in the embodiments and may still achieve the desired result. Furthermore, the processes depicted in the drawings do not necessarily require the specific or sequential order shown to achieve the desired result. In some embodiments, multitasking and parallel processing are possible or may be advantageous.

[0163] The above description is merely one or more embodiments of this specification and is not intended to limit this specification. Various modifications and variations can be made to the one or more embodiments of this specification by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principle of one or more embodiments of this specification should be included within the scope of the claims of this specification.

Claims

1. A setting method of an interactive interface, characterized by, The method includes: In the interactive interface, a preset area corresponding to a specified control is determined. The preset area includes an event selection area, a controller setting area, a controller strategy area, and a parameter configuration area. The event description corresponding to the specified control is determined through the event selection area. The event description is used to determine the events supported by the specified component. The event is used to trigger the controller corresponding to the specified control. The controller description corresponding to the specified control is determined through the controller setting area. The controller description includes the classification and built-in methods of the controller corresponding to the specified control. The relevant policy of the controller corresponding to the specified control is determined through the controller policy area; The parameter configuration area is used to configure the controller parameters corresponding to the specified control to complete the setting of the interactive interface; The step of determining the description of the controller corresponding to the specified control through the controller setting area includes: The controller's category and built-in methods are set according to the designer form's common items, and the built-in methods include pre-set default parameter configurations; After determining the description of the controller corresponding to the specified control through the controller setting area, the method further includes: Based on the classification of the controllers, a preset format data structure is generated for each controller, and the preset format data structure for each controller is packaged and imported into the database. The database interface is then used to call all controllers in a unified manner, and the built-in methods of the controllers are called by passing parameters through the database interface. The controller's related policies include controller display policies, controller import policies, custom controller policies, and reuse of already bound policies; among which... The controller display strategy is used to pre-set the controller displayed on the interactive interface; The controller import strategy is used to provide an interface for importing controllers to import controllers that are not bound to the designer form; The custom controller strategy is used to provide a jump entry point to the custom controller code editing area to edit custom methods and store the custom methods in the corresponding custom controller; The reuse of bound strategies is used to retrieve the designer form, count the controllers and corresponding paths to which all controls in the designer form are bound, and provide an interface to view and reuse the binding methods and corresponding paths of other controls in the designer form.

2. The method of claim 1, wherein, After determining the event description corresponding to the specified control through the event selection area, the method further includes: The event is encapsulated through the event selection area; wherein... The events are encapsulated into a list for unified display, or the display of one or more events can be controlled via a toggle control in the properties panel.

3. The method of claim 1, wherein, The specified components include a new button control and a table control with a pagination bar; the events supported by the new button control include click events, and the events supported by the table control with a pagination bar include row switching events and page number switching events.

4. The method of claim 1, wherein, The step of configuring the controller parameters corresponding to the specified control through the parameter configuration area includes: The parameter configuration area allows you to configure the number of parameter value items and the parameter value type for the specified control corresponding to the controller, and to determine the target control in order to locate the control that needs to be interacted with.

5. A device for setting an interactive interface, characterized in that, The device includes: The region determination unit determines a preset region corresponding to a specified control in the interactive interface. The preset region includes an event selection area, a controller setting area, a controller strategy area, and a parameter configuration area. An event selection unit determines the description of an event corresponding to a specified control through the event selection area. The event description is used to determine the events supported by the specified component, and the event is used to trigger the controller corresponding to the specified control. The controller setting unit determines the description of the controller corresponding to the specified control through the controller setting area. The description of the controller includes the classification and built-in methods of the controller corresponding to the specified control. The controller policy unit determines the relevant policy of the controller corresponding to the specified control through the controller policy area; The parameter configuration unit configures parameters for the controller corresponding to the specified control through the parameter configuration area to complete the setting of the interactive interface; The step of determining the description of the controller corresponding to the specified control through the controller setting area includes: The controller's category and built-in methods are set according to the designer form's common items, and the built-in methods include pre-set default parameter configurations; After determining the description of the controller corresponding to the specified control through the controller setting area, the method further includes: Based on the classification of the controllers, a preset format data structure is generated for each controller, and the preset format data structure for each controller is packaged and imported into the database. The database interface is then used to call all controllers in a unified manner, and the built-in methods of the controllers are called by passing parameters through the database interface. The controller's related policies include controller display policies, controller import policies, custom controller policies, and reuse of already bound policies; among which... The controller display strategy is used to pre-set the controller displayed on the interactive interface; The controller import strategy is used to provide an interface for importing controllers to import controllers that are not bound to the designer form; The custom controller strategy is used to provide a jump entry point to the custom controller code editing area to edit custom methods and store the custom methods in the corresponding custom controller; The reuse of bound strategies is used to retrieve the designer form, count the controllers and corresponding paths to which all controls in the designer form are bound, and provide an interface to view and reuse the binding methods and corresponding paths of other controls in the designer form.

6. A device for setting up an interactive interface, characterized in that, include: At least one processor; as well as, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, which, when executed by the at least one processor, enable the at least one processor to: In the interactive interface, a preset area corresponding to a specified control is determined. The preset area includes an event selection area, a controller setting area, a controller strategy area, and a parameter configuration area. The event description corresponding to the specified control is determined through the event selection area. The event description is used to determine the events supported by the specified component. The event is used to trigger the controller corresponding to the specified control. The controller description corresponding to the specified control is determined through the controller setting area. The controller description includes the classification and built-in methods of the controller corresponding to the specified control. The relevant policy of the controller corresponding to the specified control is determined through the controller policy area; The parameter configuration area is used to configure the controller parameters corresponding to the specified control to complete the setting of the interactive interface; The step of determining the description of the controller corresponding to the specified control through the controller setting area includes: The controller's category and built-in methods are set according to the designer form's common items, and the built-in methods include pre-set default parameter configurations; After determining the description of the controller corresponding to the specified control through the controller setting area, the method further includes: Based on the classification of the controllers, a preset format data structure is generated for each controller, and the preset format data structure for each controller is packaged and imported into the database. The database interface is then used to call all controllers in a unified manner, and the built-in methods of the controllers are called by passing parameters through the database interface. The controller's related policies include controller display policies, controller import policies, custom controller policies, and reuse of already bound policies; among which... The controller display strategy is used to pre-set the controller displayed on the interactive interface; The controller import strategy is used to provide an interface for importing controllers to import controllers that are not bound to the designer form; The custom controller strategy is used to provide a jump entry point to the custom controller code editing area to edit custom methods and store the custom methods in the corresponding custom controller; The reuse of bound strategies is used to retrieve the designer form, count the controllers and corresponding paths to which all controls in the designer form are bound, and provide an interface to view and reuse the binding methods and corresponding paths of other controls in the designer form.

7. A non-volatile computer storage medium, characterized in that, The computer-executable instructions are stored thereon and are configured as follows: In the interactive interface, a preset area corresponding to a specified control is determined. The preset area includes an event selection area, a controller setting area, a controller strategy area, and a parameter configuration area. The event description corresponding to the specified control is determined through the event selection area. The event description is used to determine the events supported by the specified component. The event is used to trigger the controller corresponding to the specified control. The controller description corresponding to the specified control is determined through the controller setting area. The controller description includes the classification and built-in methods of the controller corresponding to the specified control. The relevant policy of the controller corresponding to the specified control is determined through the controller policy area; The parameter configuration area is used to configure the controller parameters corresponding to the specified control to complete the setting of the interactive interface; The step of determining the description of the controller corresponding to the specified control through the controller setting area includes: The controller's category and built-in methods are set according to the designer form's common items, and the built-in methods include pre-set default parameter configurations; After determining the description of the controller corresponding to the specified control through the controller setting area, the method further includes: Based on the classification of the controllers, a preset format data structure is generated for each controller, and the preset format data structure for each controller is packaged and imported into the database. The database interface is then used to call all controllers in a unified manner, and the built-in methods of the controllers are called by passing parameters through the database interface. The controller's related policies include controller display policies, controller import policies, custom controller policies, and reuse of already bound policies; among which... The controller display strategy is used to pre-set the controller displayed on the interactive interface; The controller import strategy is used to provide an interface for importing controllers to import controllers that are not bound to the designer form; The custom controller strategy is used to provide a jump entry point to the custom controller code editing area to edit custom methods and store the custom methods in the corresponding custom controller; The reuse of bound strategies is used to retrieve the designer form, count the controllers and corresponding paths to which all controls in the designer form are bound, and provide an interface to view and reuse the binding methods and corresponding paths of other controls in the designer form.

Images