WO2025246773A1 - 页面编排方法、装置、介质和设备 - Google Patents
页面编排方法、装置、介质和设备Info
- Publication number
- WO2025246773A1 WO2025246773A1 PCT/CN2025/091776 CN2025091776W WO2025246773A1 WO 2025246773 A1 WO2025246773 A1 WO 2025246773A1 CN 2025091776 W CN2025091776 W CN 2025091776W WO 2025246773 A1 WO2025246773 A1 WO 2025246773A1
- Authority
- WO
- WIPO (PCT)
- Prior art keywords
- module
- data
- association
- relationship
- function
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
Definitions
- This disclosure relates to a page layout method, apparatus, medium, and device.
- Low-code platforms are development platforms that use a graphical interface to allow developers to create applications through simple drag-and-drop and selection operations, eliminating the need for tedious programming.
- low-code platforms have gained widespread use, leading to the emergence of various building platforms. For example, developers can easily build pages visually using these platforms, significantly lowering the barrier to entry and simplifying the page development process. In practical applications, developers can often build static page layouts quite well using low-code platforms.
- issues such as data control and business logic orchestration still need to be addressed.
- the embodiments of this disclosure describe a page arrangement method and apparatus that can realize data control, business logic arrangement, etc. in page generation, thereby simplifying the page generation process and improving page generation efficiency.
- a page arrangement method executed by a client of the aforementioned low-code platform.
- the server of the low-code platform predefines data and a first function, the first function being used to update the data.
- the method includes: displaying a configuration interface for the UI module based on a user-selected UI module used to construct the target page; sending a relationship association request input by the user through the UI module's configuration interface to the server, so that the server can establish and store various association relationships based on the relationship association request, wherein the association relationship includes a first association relationship between the data and a first attribute of a first UI module of the target page, and a second association relationship between the first function and an event of a second UI module of the target page; wherein the second association relationship is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module; and the first association relationship is used to instruct the updating of the first attribute of the first UI module after the data has been updated.
- the target page operates by: receiving operation information from a user using the target page regarding the second UI module; generating the event based on the operation information; in response to the generation of the event, executing the first function according to the second association relationship and updating the data; and in response to the update of the data, updating the first attribute of the first UI module according to the first association relationship.
- displaying a configuration interface for a UI component selected by the user for constructing a target page includes: displaying a first configuration interface for a first UI module selected by the user for constructing the target page, wherein the first configuration interface is used to configure a first attribute of the first UI module; and sending a relationship association request input by the user through the configuration interface of the UI module to the server includes: receiving first reference relationship information for the first attribute of the first UI module input by the user through the first configuration interface, wherein the first reference relationship information includes a reference identifier and an identifier of the data; and sending a first relationship association request to the server based on the first reference relationship information, so that the server can establish and store a first association relationship between the data and the first attribute of the first UI module based on the first relationship association request.
- the user can input first reference relationship information through the first configuration interface corresponding to the first UI module, and the server can establish a first association relationship between the data and the first attribute of the first UI module based on the first relationship association request
- the server-side of the low-code platform further predefines a second function, which is used to obtain the latest updated data and perform calculations.
- the association relationships established and stored by the server-side include a third association relationship between the second function and the second attribute of the third UI module of the target page. This third association relationship is used to update the second attribute of the third UI module based on the execution result of the second function. Therefore, the attributes of the UI module can be updated by executing the second function after the data is updated.
- the first UI module includes a display UI module
- the first attribute of the display UI module includes a display attribute
- the first association is used to instruct the display UI module to retrieve and display the latest updated value of the data when it is displayed on the target page.
- the display UI module can display the latest updated data.
- the second UI module includes a button UI module
- the events of the second UI module include click events.
- the second association is used to instruct the execution of the first function to update the data in response to a click event generated when a user clicks the button UI module on the target page.
- the first function can be executed when the button UI module is clicked.
- the third UI module includes a button UI module
- the second attribute of the button UI module includes a disabled attribute
- the second function is used to compare the data with a preset value, and determine whether to disable the button UI module based on the comparison result; the third association is used to update the disabled attribute of the button UI module according to the execution result of the second function. Therefore, the second function can be used to determine whether the button UI module is disabled.
- a page arrangement method executed by a server corresponding to the aforementioned low-code platform.
- the server predefines data and a first function, the first function being used to update the data.
- the method includes: receiving a relationship association request sent by the client through the configuration interface of a UI module, wherein the relationship association request includes a first request for associating the data with a first attribute of a first UI module, and a second request for associating the first function with an event of a second UI module; establishing and storing a first association relationship and a second association relationship based on the first request and the second request; wherein the second association relationship is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module on the target page; and the first association relationship is used to instruct the updating of the first attribute of the first UI module after the data is updated.
- a page arrangement apparatus deployed on a client of the aforementioned low-code platform.
- the server of the low-code platform predefines data and a first function, the first function being used to update the data.
- the apparatus includes: a display unit configured to display a configuration interface for a UI module selected by the user for constructing a target page; and a sending unit configured to send a relationship association request input by the user through the configuration interface of the UI module to the server, so that the server can establish and store various relationships based on the relationship association request.
- the relationships include a first association between the data and a first attribute of a first UI module of the target page, and a second association between the first function and an event of a second UI module of the target page.
- the second association is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module; the first association is used to instruct the updating of the first attribute of the first UI module after the data has been updated.
- a page arrangement apparatus deployed on a server corresponding to the aforementioned low-code platform.
- the server predefines data and a first function, the first function being used to update the data.
- the apparatus includes: a receiving unit configured to receive a relationship association request sent by the client through the configuration interface of a UI module, wherein the relationship association request includes a first request for associating the data with a first attribute of a first UI module, and a second request for associating the first function with an event of a second UI module; and a storage unit configured to establish and store a first association relationship and a second association relationship based on the first request and the second request; wherein the second association relationship is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module on the target page; and the first association relationship is used to instruct the updating of the first attribute of the first UI module after the data has been updated.
- a computer program product comprising a computer program that, when executed by a processor, implements the method described in any one of the first or second aspects.
- a computer-readable storage medium on which a computer program is stored, which, when executed in a computer, causes the computer to perform the method described in either the first or second aspect.
- an electronic device including a memory and a processor, wherein the memory stores executable code, and when the processor executes the executable code, it implements the method described in either the first aspect or the second aspect.
- Figure 1 illustrates a schematic diagram of an application scenario in which the embodiments of this disclosure can be applied
- Figure 2 shows a flowchart of a page layout method according to one embodiment
- Figure 3 illustrates a diagram of calling data and functions through a global interface set
- Figure 4 illustrates a user inputting reference relationship information through the configuration interface
- Figure 5 shows a flowchart of a page layout method according to yet another embodiment
- Figure 6 shows a schematic block diagram of a page layout apparatus according to one embodiment
- Figure 7 shows a schematic block diagram of a page layout apparatus according to yet another embodiment.
- Figure 8 shows a schematic diagram of the structure of an electronic device suitable for implementing embodiments of the present disclosure.
- a prompt message is sent to the user to explicitly inform them that the requested operation will require the acquisition and use of the user's personal information.
- This allows the user to independently choose whether to provide personal information to the software or hardware, such as the electronic device, application, server, or storage medium performing the operations of this disclosed technical solution, based on the prompt message.
- sending a prompt message to the user can be done via a pop-up window, where the prompt message can be presented in text format.
- the pop-up window can also include a selection control allowing the user to choose "agree” or “disagree” to provide personal information to the electronic device.
- page generation is not limited to building a static page layout.
- issues such as data control and business logic orchestration also need to be addressed.
- FIG. 1 shows a schematic diagram of an application scenario in which this disclosure embodiment can be applied.
- the server 101 of the low-code platform predefines data (Data) and a first function (Method).
- the first function (Method) can perform business logic arrangement to update the value of data (Data).
- Users can select UI (User Interface) modules for building the target page through the client 102 of the low-code platform.
- the client 102 can display a configuration interface for the UI module selected by the user, so that the user can configure the selected UI module in the configuration interface.
- the client 102 can send the relationship association request entered by the user through the configuration interface of the UI module to the server 101, so that the server 101 can establish and store various relationships according to the relationship information.
- the UI modules of the target page selected by the user may include a display UI module and a button UI module for displaying information.
- the association can include a first association between data (Data) and the display attributes of the UI module, and a second association between a first function (Method) and the click event of the button UI module. Therefore, when a user on the target page triggers a click operation through the button UI module on the target page, the first function (Method) can be executed according to the second association.
- the first function can perform business logic processing to update the value of data (Data).
- the display attributes of the UI module can be updated according to the first association; that is, the data (Data) displayed by the UI module on the target page can be updated.
- this method can be executed by a client on a low-code platform.
- the page arrangement method may include the following steps 201 and 202, specifically:
- Step 201 Based on the UI module selected by the user for building the target page, display the configuration interface for the UI module.
- a low-code platform can include a client and a server.
- the client is the part where the user directly interacts with the low-code platform, including the user interface.
- the server provides backend services to the client.
- the server can predefine data (Data) and a first function.
- data (Data) can be used to express the data state of the application to which the page belongs, such as rendering data, interaction state, application configuration, business data, etc.
- Data (Data) can have responsive characteristics, meaning that when data (Data) changes, the state of UI modules associated with it will be updated.
- the first function can also be called a Method, which can orchestrate business logic to update the value of data (Data). Furthermore, the first function can also retrieve remote data via HTTP requests. Additionally, the server of the low-code platform can predefine a second function, which can be used to retrieve the latest updated data for computation. In this example, the second function can also be called Computed. As an example, the computation in the second function can refer to various pre-defined computational logics.
- predefined Data, Computed, and Method attributes can be called directly, or the interfaces corresponding to Data, Computed, and Method can be centralized into a global interface set before being called. For instance, first, a reference relationship is created for each Data, Computed, and Method attribute. This reference relationship can include the correspondence between the interface corresponding to the data (or function) and the identifier of that data (or function). These reference relationships are then stored in a global interface set for the UI module to call. Figure 3 illustrates this process of calling data and functions through a global interface set.
- predefined Data attributes could include 100Data, 101Data, 102Data, 103Data, etc.
- predefined Computed attributes could include 200Computed, 201Computed, etc.
- predefined Method attributes could include 300Method, 301Method, etc.
- UI modules for building target pages through the low-code platform's client.
- These UI modules can be HTML UI components, such as buttons, input fields, text boxes, dropdown menus, radio buttons, checkboxes, etc.
- the client's user interface can display various UI modules. Users can select these modules by dragging, clicking, or double-clicking. The selected UI modules are then displayed in a preset page layout area. Users can then select UI modules again in the layout area for configuration. The client can then display a configuration interface for the selected UI module. Through this interface, users can configure various information about the UI module, such as its properties and events.
- UI module properties can include various attributes, such as display attributes, copyability, links, and text styles.
- Step 202 Send the relationship association request entered by the user through the configuration interface of the UI module to the server so that the server can establish and store each relationship according to the relationship association request.
- users can configure various information about the UI module through its configuration interface.
- predefined data and functions can be configured for the UI module's attributes and events.
- the configurations related to the predefined data and functions can be presented as relationship association requests.
- the client can then send the user-input relationship association requests to the server, allowing the server to establish and store the various relationships based on these requests.
- the association can include a first association between data and a first attribute of a first UI module of the target page, and a second association between a first function and an event of a second UI module of the target page.
- the second association can be used to instruct the execution of the first function to update the data when a user of the target page triggers an event through the second UI module.
- the first association can be used to instruct the updating of the first attribute of the first UI module after the data has been updated.
- Step 201 above can specifically include the following: based on the first UI module selected by the user for constructing the target page, displaying a first configuration interface for the first UI module, which can be used to configure the first attribute of the first UI module. Based on this, step 202 above can include steps 1) and 2), specifically:
- Step 1) Receive the first reference relationship information of the first attribute of the first UI module, which is input by the user through the first configuration interface.
- the first reference relationship information may include a reference identifier and a data identifier.
- the reference identifier can be used to indicate a reference to predefined data or a function, and the data identifier can be used to uniquely identify the data.
- the first reference relationship information may indicate that the first property of the first UI module references predefined data.
- the reference identifier can be represented using various symbols, such as ⁇ , #, [[]], etc. Taking the predefined data identifier as Data and the reference identifier as ⁇ as an example, the first reference relationship information can be represented as ⁇ Data ⁇ .
- Figure 4 illustrates a user inputting reference information through a configuration interface.
- the target page is a music playback page, and the currently playing song is "xxx" sung by Zhang San.
- the target page also includes a text box 401, which is used to display lyrics.
- a configuration interface 402 for the text box 401 can be displayed.
- the configuration interface 402 can be used to configure various attributes of the text box 401.
- configurable attributes may include text display, whether it is copyable, links, icons, code, various text styles, whether it is hidden, etc.
- the reference identifier is ⁇
- data.11 is the predefined lyrics corresponding to "xxx”
- the user can predefine data.11 through the client, and then the server will store it.
- ⁇ data.11 ⁇ becomes a reference relationship for the input in text box 401.
- This reference relationship information can be used to establish the association between data.11 and the text display attributes of text box 401. Therefore, when displayed on the target page, lyrics can be displayed in text box 401.
- Step 2) Based on the first reference relationship information, send a first relationship association request to the server so that the server can establish and store the first association relationship between the data and the first attribute of the first UI module according to the first relationship association request.
- users can input first reference relationship information through the first configuration interface corresponding to the first UI module, and the server can establish a first association relationship between the data and the first attribute of the first UI module based on the first reference relationship information.
- the low-code platform client can display a second configuration interface for the second UI module selected by the user.
- This second configuration interface can be used to configure predetermined events for the second UI module.
- the client can receive second reference relationship information for the predetermined events of the second UI module, input by the user through the second configuration interface.
- This second reference relationship information may include a reference identifier and an identifier for a first function.
- the reference identifier can be used to indicate a reference to predefined data or a function, and the identifier for the first function can be used to uniquely identify the first function.
- the second reference relationship information can indicate that the predetermined events of the second UI module reference a predefined first function.
- the client can send a second relationship association request to the server based on the second reference relationship information, so that the server can establish and store the second association relationship between the first function and the predetermined events of the second UI module based on the second relationship association request.
- the server-side of the aforementioned low-code platform can also predefine a second function, which can be used to retrieve the latest updated data and perform calculations.
- the second function can also be called ⁇ Computed ⁇ .
- the calculations in the second function can refer to various pre-defined computational logics.
- the association relationships established and stored by the server according to the relational association request can also include a third association relationship between the second function and the second attribute of the third UI module of the target page.
- the third association relationship can be used to update the second attribute of the third UI module according to the execution result of the second function.
- the attributes of the UI module can be updated by executing the second function.
- the first UI module may include a display UI module.
- a display UI module can refer to various UI modules capable of displaying information, such as labels, text boxes, text areas, buttons, etc.
- the first attribute of the display UI module may include a display attribute, which can refer to attributes that display information.
- the first association is used to instruct the displayer to retrieve and display the latest updated value of the data when the aforementioned display UI module is displayed on the target page.
- the second UI module may include a button UI module, and the events of the second UI module may include click events, such as single-click events, double-click events, etc.
- the second association can be used to instruct the execution of the first function to update the data in response to a click event generated when the user clicks the button UI module on the target page.
- the third UI module may include the button UI module. It's understood that the first, second, and third UI modules can be the same module or different modules; this is not limited here.
- the second attribute of the button UI module may include a disable attribute, which indicates whether the button UI module is disabled.
- the second function can be used to compare data with preset values and determine whether to disable the button UI module based on the comparison result. In this case, the third association can be used to update the disable attribute of the button UI module according to the execution result of the second function.
- This application can include a text box UI module and a button UI module.
- the text box UI module can be used to display the accumulated result, and the button UI module can be clicked by the user.
- the number in the text box increases by 1, until the accumulated result equals a predetermined value, at which point the button is disabled.
- the data set ⁇ Data ⁇ can be named ⁇ count ⁇ , and its initial value is 0.
- the first function can be named ⁇ onAdd ⁇ , and its content can be ⁇ count.setValue(count+1) ⁇ , where ⁇ count.setValue(count+1) ⁇ updates the value of ⁇ count ⁇ to ⁇ count+1 ⁇ .
- a reference relationship can be created for the predefined data (Data), the first function, and the second function.
- Data predefined data
- These reference relationships can be stored in a global interface collection. This global interface collection can be used to manage predefined data and functions, so that they can be invoked after being associated with UI module properties or events. Then, the following three association relationships (a), b), and c) are established, specifically:
- onAdd the following operations a, b, and c are executed:
- the disabled function is executed.
- the disabled function can obtain the latest updated count for calculation.
- step (2) after the text box UI module is updated, the display property will reread count, so the content displayed by the text box UI module is 1.
- Step (3) After the button UI module is updated, the disabled attribute of the button UI module will reread the calculation result of the disabled function. At this time, the calculation result of disabled is false, so the button UI module is not disabled.
- step (4) the user clicks the button UI module again, triggering the button UI module's click event, which executes onAdd.
- the following operations a, b, and c are executed:
- the disabled function is executed.
- step (5) after the text box UI module is updated, the display property will reread count, so the content displayed by the text box UI module is 2.
- step (6) after the button UI module is updated, the disabled attribute of the button UI module will reread the calculation result of the disabled function. At this time, the calculation result of the disabled function is true, so the button UI module is disabled and cannot be clicked.
- the target page constructed based on the method shown in Figure 2 can be run through the following steps S1-S4, specifically:
- Step S1 Receive operation information from the user using the target page regarding the second UI module.
- the target page constructed based on the method shown in Figure 2 may include a first UI module and a second UI module. Users of the target page can interact with the second UI module on the target page to obtain operation information.
- Step S2 Generate an event based on the operation information.
- events for the second UI module can be generated based on the user's operation information on the second UI module on the target page.
- Step S3 In response to the generation of the event, execute the first function according to the second association relationship to update the data.
- the second association is the association between the first function and the events of the second UI module of the target page. Therefore, when generating events based on operation information, the first function can be executed according to the second association to update the data.
- Step S4 In response to the data update, update the first attribute of the first UI module according to the first association relationship.
- the first association relationship is the association between data and the first attribute of the first UI module of the target page. Therefore, when updating data in step S3, the first attribute of the first UI module of the target page can be updated according to the first association relationship.
- This implementation achieves business logic processing, data control, and more during the operation of the target page. For example, taking a text box as the first UI module, a display attribute as the first attribute of the first UI module, a button as the second UI module, a click event as the event of the second UI module, and a click operation as the operation information for the button, a user can click the button on the target page. Then, based on the operation information of the user's click operation on the button, a click event for the button is generated.
- the first function is executed according to the association relationship between the first function in the second association relationship and the button's click event, updating the data.
- the data displayed in the text box can be updated according to the association relationship between the data and the display attribute of the text box in the first association relationship to display the latest data.
- the server corresponding to the low-code platform can predefine data and a first function, which can be used to update the data.
- the client corresponding to the low-code platform can display a configuration interface for the UI module selected by the user for building the target page. Then, the client can send the relationship association request entered by the user through the configuration interface of the UI module to the server, so that the server can establish and store each relationship according to the relationship association request.
- the relationship can include a first relationship between data and a first attribute of a first UI module of the target page, and a second relationship between the first function and an event of a second UI module of the target page.
- the first function can be executed according to the second relationship to update the data.
- the first attribute of the first UI module can be updated according to the first relationship.
- FIG. 5 shows a flowchart of a page arrangement method according to yet another embodiment. This method can be executed via a server-side application corresponding to a low-code platform. As shown in Figure 5, this page arrangement method may include the following steps 501 and 502, specifically:
- Step 501 Receive relationship association requests sent by the client through the configuration interface of the UI module.
- the low-code platform may include a client and a server.
- the client is the part where the user directly interacts with the low-code platform, including the user interface.
- the server can provide backend services to the client.
- the server may predefine data (Data) and a first function.
- the user can select a UI module for building a target page through the client of the low-code platform.
- the client can display a configuration interface for the selected UI module.
- the user can configure various information of the UI module through the configuration interface. For example, predefined data, functions, etc., can be configured for the UI module's attributes and events.
- the configuration related to the predefined data and functions can be used as a relationship association request.
- the client can send the relationship association request input by the user to the server.
- the relationship association request may include a first request for associating data with a first attribute of the first UI module, and a second request for associating the first function with an event of the second UI module.
- Step 502 Establish and store the first association and the second association based on the first request and the second request.
- the server can establish a first association between data (Data) and a first attribute of a first UI module on the target page based on a first request, and establish a second association between a first function and an event of a second UI module on the target page based on a second request. Therefore, the second association can be used to instruct the execution of the first function to update the data when a user triggers an event through the second UI module on the target page.
- the first association can be used to instruct the updating of the first attribute of the first UI module after the data has been updated.
- this second association can specifically include: calling the first function when it is determined that the target event has occurred.
- the first association also records the association between data (Data) and a first attribute of the first UI module on the target page, and this first association can specifically include: changing the first attribute when it is determined that Data meets a preset condition. Therefore, when a user triggers an event through the second UI module on the target page, the first function can be called and executed according to the second association, and the execution of the first function can update the data. After the data is updated, the first attribute of the first UI module can be updated according to the first association.
- the target page constructed based on the method shown in Figure 5 can be run in the following ways:
- the first function is executed according to the second association to update the data.
- the first property of the first UI module is updated based on the first association.
- the server-side of the low-code platform can predefine a second function, which can be used to perform operations on data.
- the relationship association request can also include a third request to associate the second function with a second attribute of a third UI module.
- the page arrangement method described above can also include: establishing and storing a third association based on the third request. For example, a third association between the second function and a second attribute of a third UI module of the target page can be established based on the third request. This third association can be used to update the second attribute of the third UI module according to the execution result of the second function.
- a page orchestration apparatus can be deployed on a client side of a low-code platform.
- the server side of the low-code platform predefines data and a first function, the first function being used to update the data.
- Figure 6 shows a schematic block diagram of a page arrangement apparatus according to one embodiment.
- the apparatus shown in Figure 6 is used to perform the method shown in Figure 2.
- the page arrangement apparatus 600 includes: a display unit 601 configured to display a configuration interface for a UI module selected by a user for constructing a target page; and a sending unit 602 configured to send a relationship association request input by the user through the configuration interface of the UI module to a server, so that the server can establish and store various association relationships according to the relationship association request, wherein the association relationship includes a first association relationship between the data and a first attribute of a first UI module of the target page, and a second association relationship between the first function and an event of a second UI module of the target page; wherein the second association relationship is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module; and the first association relationship is used to instruct the updating of the first attribute of the first UI module after the data is updated.
- the target page operates in the following manner: receiving operation information of the user using the target page on the second UI module; generating the event based on the operation information; in response to the generation of the event, executing the first function according to the second association relationship and updating the data; and in response to the update of the data, updating the first attribute of the first UI module according to the first association relationship.
- the display unit 601 is further configured to: display a first configuration interface for the first UI module selected by the user for constructing the target page, wherein the first configuration interface is used to configure the first attribute of the first UI module;
- the sending unit 602 is further configured to: receive first reference relationship information for the first attribute of the first UI module input by the user through the first configuration interface, wherein the first reference relationship information includes a reference identifier and an identifier of the data; and send a first relationship association request to the server according to the first reference relationship information, so that the server can establish and store the first association relationship between the data and the first attribute of the first UI module according to the first relationship association request.
- the server of the low-code platform further predefines a second function, which is used to obtain the latest updated data and perform calculations; and the association relationship established and stored by the server also includes: a third association relationship between the second function and the second attribute of the third UI module of the target page; the third association relationship is used to update the second attribute of the third UI module according to the execution result of the second function.
- the first UI module includes a display UI module
- the first attribute of the display UI module includes a display attribute
- the first association is used to indicate that the latest updated value of the data is obtained and displayed when the display UI module is displayed on the target page.
- the second UI module includes a button UI module
- the events of the second UI module include click events
- the second association is used to instruct the execution of the first function to update the data in response to a click event generated when the user clicks the button UI module on the target page.
- the third UI module includes a button UI module
- the second attribute of the button UI module includes a disabled attribute
- the second function is used to compare the data with a preset value and determine whether to disable the button UI module based on the comparison result
- the third association is used to update the disabled attribute of the button UI module according to the execution result of the second function.
- yet another page orchestration apparatus is provided.
- This page orchestration apparatus can be deployed on a server-side low-code platform.
- the server-side predefines data and a first function, the first function being used to update the data.
- Figure 7 shows a schematic block diagram of a page arrangement apparatus according to yet another embodiment.
- the apparatus shown in Figure 7 is used to perform the method shown in Figure 5.
- the page arrangement apparatus 700 includes: a receiving unit 701 configured to receive a relationship association request sent by the client through the configuration interface of a UI module, wherein the relationship association request includes a first request for associating the data with a first attribute of a first UI module, and a second request for associating the first function with an event of a second UI module; a storage unit 702 configured to establish and store a first association relationship and a second association relationship based on the first request and the second request; wherein the second association relationship is used to instruct the execution of the first function to update the data when the user triggers the event through the second UI module on the target page; the first association relationship is used to instruct the updating of the first attribute of the first UI module after the data is updated.
- the user's operation information on the second UI module using the target page is received; the event is generated based on the operation information; in response to the generation of the event, the first function is executed according to the second association relationship to update the data; in response to the update of the data, the first attribute of the first UI module is updated according to the first association relationship.
- the server further predefines a second function, which is used to perform calculations on the data;
- the relationship association request also includes a third request for associating the second function with the second attribute of the third UI module; and the device further includes: an establishment and storage unit (not shown in the figure), configured to establish and store a third association relationship according to the third request; wherein the third association relationship is used to update the second attribute of the third UI module according to the execution result of the second function.
- a computer-readable storage medium on which a computer program is stored, which, when executed in a computer, causes the computer to perform the methods described in Figures 2 and 5.
- an electronic device including a memory and a processor, characterized in that the memory stores executable code, and when the processor executes the executable code, it implements the method described in FIG2 and FIG5.
- FIG8 a schematic diagram of the structure of an electronic device 800 suitable for implementing embodiments of the present disclosure is shown.
- the electronic device shown in FIG8 is merely an example and should not impose any limitation on the functionality and scope of use of embodiments of the present disclosure.
- the electronic device 800 may include a processing device (e.g., a central processing unit, a graphics processor, etc.) 801, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 802 or a program loaded from a storage device 808 into a random access memory (RAM) 803.
- the RAM 803 also stores various programs and data required for the operation of the electronic device 800.
- the processing device 801, ROM 802, and RAM 803 are interconnected via a bus 804.
- An input/output (I/O) interface 805 is also connected to the bus 804.
- I/O interface 805 input devices 806, including, for example, touchscreens, touchpads, keyboards, mice, etc.; output devices 807, including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 808, including, for example, magnetic tapes, hard disks, etc.; and communication devices 809.
- Communication device 809 allows electronic device 800 to communicate wirelessly or wiredly with other devices to exchange data.
- FIG8 shows an electronic device 800 with various devices, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively. Each box shown in FIG8 may represent one device, or multiple devices may be represented as needed.
- embodiments of this disclosure include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts.
- the computer program can be downloaded and installed from a network via a communication device 809, or installed from a storage device 808, or installed from a ROM 802.
- the computer program When the computer program is executed by a processing device 801, it performs the functions defined in the methods of embodiments of this disclosure.
- This disclosure also provides a computer-readable storage medium having a computer program stored thereon, which, when executed in a computer, causes the computer to perform the methods provided in this disclosure.
- the computer-readable medium described in the embodiments of this disclosure can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof.
- a computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof.
- a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.
- a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof.
- a computer-readable signal medium may be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device.
- the program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (Radio Frequency), etc., or any suitable combination thereof.
- the aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device.
- the aforementioned computer-readable medium carries one or more programs that, when executed by the electronic device, cause the electronic device to: display a configuration interface for the UI module selected by the user for constructing the target page; send a relationship association request input by the user through the configuration interface of the UI module to a server, so that the server can establish and store various association relationships according to the relationship association request, wherein the association relationship includes a first association relationship between the aforementioned data and a first attribute of the first UI module of the target page, and a second association relationship between the aforementioned first function and an event of the second UI module of the target page; wherein the second association relationship is used to instruct the execution of the aforementioned first function to update the aforementioned data when the user triggers the aforementioned event through the aforementioned second UI module; and the first association relationship is used to instruct the updating of the aforementioned first attribute of the a
- Computer program code for performing the operations of embodiments of this disclosure can be written in one or more programming languages or a combination thereof, including object-oriented programming languages such as Java, Smalltalk, and C++, and conventional procedural programming languages such as the "C" language or similar programming languages.
- the program code can be executed entirely on a user's computer, partially on a user's computer, as a standalone software package, partially on a user's computer and partially on a remote computer, or entirely on a remote computer or electronic device.
- the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).
- LAN local area network
- WAN wide area network
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本公开实施例提供了一种页面编排方法、装置、介质和设备。低代码平台的服务端定义有数据和第一函数,第一函数用于更新数据。该页面编排方法的一具体实施方式包括:基于用户选取的、用于构建目标页面的UI模块,显示针对UI模块的配置界面;将用户通过UI模块的配置界面输入的关系关联请求,发送给服务端,以供服务端根据关系关联请求建立和存储各关联关系,关联关系包括数据与目标页面的第一UI模块的第一属性的第一关联关系,以及第一函数与目标页面的第二UI模块的事件的第二关联关系;第二关联关系用于,在用户通过第二UI模块触发事件时指示执行第一函数,以更新数据;第一关联关系用于,在数据被更新后指示更新第一UI模块的第一属性。
Description
本申请要求于2024年5月27日递交的中国专利申请第202410666585.4号的优先权,在此全文引用上述中国专利申请公开的内容以作为本申请的一部分。
本公开实施例涉及一种页面编排方法、装置、介质和设备。
低代码平台是一种通过图形化界面,使开发人员能够通过简单的拖放、选择等操作来完成应用程序的开发,而不再需要进行繁琐的编程工作的开发平台。近几年低代码平台得到了广泛使用,出现了各类搭建平台。举例来说,开发人员可以借助搭建平台可视化轻松的完成页面搭建,从而大大降低了开发页面的上手门槛,简化了页面开发流程。在实际应用场景中,开发人员通常可以通过低代码平台较好的完成静态页面布局的构建,然而,想要根据业务需求完整实现一个页面开发,还需要解决数据控制、业务逻辑编排等等问题。
本公开的实施例描述了一种页面编排方法和装置,可以实现生成页面中数据控制、业务逻辑编排等等,从而简化了页面生成过程,提高了页面生成效率。
根据第一方面,提供了一种页面编排方法,由上述低代码平台的客户端执行,上述低代码平台的服务端预先定义有数据和第一函数,上述第一函数用于更新上述数据,上述方法包括:基于用户选取的、用于构建目标页面的UI模块,显示针对UI模块的配置界面;将用户通过UI模块的配置界面输入的关系关联请求,发送给服务端,以供上述服务端根据上述关系关联请求建立和存储各关联关系,其中,关联关系包括上述数据与上述目标页面的第一UI模块的第一属性的第一关联关系,以及上述第一函数与上述目标页面的第二UI模块的事件的第二关联关系;其中,上述第二关联关系用于,在用户通过上述第二UI模块触发上述事件时指示执行上述第一函数,以更新上述数据;上述第一关联关系用于,在上述数据被更新后指示更新上述第一UI模块的上述第一属性。
在一个实施例中,上述目标页面通过以下方式运行:接收使用上述目标页面的用户对上述第二UI模块的操作信息;根据上述操作信息生成上述事件;响应于上述事件的生成,根据上述第二关联关系执行上述第一函数,更新上述数据;响应于上述数据的更新,根据上述第一关联关系更新上述第一UI模块的上述第一属性。通过本实现方式,在目标页面的运行中,实现了业务逻辑处理、数据控制等等。
在一个实施例中,上述基于上述用户选取的、用于构建目标页面的UI组件,显示针对UI组件的配置界面,包括:基于上述用户选取的、用于构建目标页面的第一UI模块,显示针对上述第一UI模块的第一配置界面,其中,上述第一配置界面用于对上述第一UI模块的第一属性进行配置;以及,上述将用户通过UI模块的配置界面输入的关系关联请求,发送给服务端,包括:接收上述用户通过上述第一配置界面输入的、针对上述第一UI模块的第一属性的第一引用关系信息,其中,上述第一引用关系信息包括引用标识和上述数据的标识;根据上述第一引用关系信息,向服务端发送第一关系关联请求,以供上述服务端根据上述第一关系关联请求,建立并存储上述数据与上述第一UI模块的第一属性的第一关联关系。由此,用户可以通过第一UI模块对应的第一配置界面输入第一引用关系信息,并由服务端根据第一引用关系信息建立数据与第一UI模块的第一属性的第一关联关系。
在一个实施例中,上述低代码平台的服务端还预先定义有第二函数,上述第二函数用于获取最新更新的上述数据进行运算;以及,上述服务端建立和存储的关联关系还包括:上述第二函数与上述目标页面的第三UI模块的第二属性的第三关联关系;上述第三关联关系用于,根据上述第二函数的执行结果指示更新上述第三UI模块的第二属性。由此,可以在数据更新之后,通过执行第二函数更新UI模块的属性。
在一个实施例中,上述第一UI模块包括显示UI模块,上述显示UI模块的第一属性包括展示属性,上述第一关联关系用于,在上述目标页面上显示上述显示UI模块时,指示获取上述数据最新被更新的值进行展示。由此,可以使显示UI模块显示最新被更新的数据。
在一个实施例中,上述第二UI模块包括按钮UI模块,上述第二UI模块的事件包括点击事件,上述第二关联关系用于,响应于在用户通过上述目标页面上的上述按钮UI模块进行点击操作时生成的点击事件,指示执行上述第一函数,以更新上述数据。由此,可以在按钮UI模块被点击的时候,执行第一函数。
在一个实施例中,上述第三UI模块包括按钮UI模块,上述按钮UI模块的第二属性包括禁用属性,上述第二函数用于将上述数据与预设值进行比较运算,并基于比较运算结果判断是否对上述按钮UI模块进行禁用;上述第三关联关系用于,根据上述第二函数的执行结果指示更新上述按钮UI模块的上述禁用属性。由此,可以通过第二函数判断按钮UI模块是否被禁用。
根据第二方面,提供了一种页面编排方法,由上述低代码平台对应的服务端执行,上述服务端预先定义有数据和第一函数,上述第一函数用于更新上述数据,上述方法包括:接收上述客户端通过UI模块的配置界面发送的关系关联请求,其中,关系关联请求包括用于对上述数据与第一UI模块的第一属性进行关联的第一请求,以及用于对上述第一函数与第二UI模块的事件进行关联的第二请求;根据上述第一请求和上述第二请求建立并存储第一关联关系和第二关联关系;其中,上述第二关联关系用于,在用户通过上述目标页面上的上述第二UI模块触发上述事件时指示执行上述第一函数,以更新上述数据;上述第一关联关系用于,在上述数据被更新后指示更新上述第一UI模块的上述第一属性。
根据第三方面,提供了一种页面编排装置,部署于上述低代码平台的客户端,上述低代码平台的服务端预先定义有数据和第一函数,上述第一函数用于更新上述数据,上述装置包括:显示单元,配置为,基于用户选取的、用于构建目标页面的UI模块,显示针对UI模块的配置界面;发送单元,配置为,将用户通过UI模块的配置界面输入的关系关联请求,发送给服务端,以供上述服务端根据上述关系关联请求建立和存储各关联关系,其中,关联关系包括上述数据与上述目标页面的第一UI模块的第一属性的第一关联关系,以及上述第一函数与上述目标页面的第二UI模块的事件的第二关联关系;其中,上述第二关联关系用于,在用户通过上述第二UI模块触发上述事件时指示执行上述第一函数,以更新上述数据;上述第一关联关系用于,在上述数据被更新后指示更新上述第一UI模块的上述第一属性。
根据第四方面,提供了一种页面编排装置,部署于上述低代码平台对应的服务端,上述服务端预先定义有数据和第一函数,上述第一函数用于更新上述数据,上述装置包括:接收单元,配置为,接收上述客户端通过UI模块的配置界面发送的关系关联请求,其中,关系关联请求包括用于对上述数据与第一UI模块的第一属性进行关联的第一请求,以及用于对上述第一函数与第二UI模块的事件进行关联的第二请求;存储单元,配置为,根据上述第一请求和上述第二请求建立并存储第一关联关系和第二关联关系;其中,上述第二关联关系用于,在用户通过上述目标页面上的上述第二UI模块触发上述事件时指示执行上述第一函数,以更新上述数据;上述第一关联关系用于,在上述数据被更新后指示更新上述第一UI模块的上述第一属性。
根据第五方面,提供了一种计算机程序产品,包括计算机程序,上述计算机程序被处理器执行时实现如第一方面或者第二方面中任一项上述的方法。
根据第六方面,提供了一种计算机可读存储介质,其上存储有计算机程序,当上述计算机程序在计算机中执行时,令上述计算机执行第一方面或者第二方面中任一项上述的方法。
根据第七方面,提供了一种电子设备,包括存储器和处理器,上述存储器中存储有可执行代码,上述处理器执行上述可执行代码时,实现第一方面或者第二方面中任一项上述的方法。
图1示出了本本公开实施例可以应用于其中的一个应用场景的示意图;
图2示出了根据一个实施例的页面编排方法的流程示意图;
图3示出了通过全局接口集合调用数据和函数的示意图;
图4示出了用户通过配置界面输入引用关系信息的示意图;
图5示出了根据又一个实施例的页面编排方法的流程示意图;
图6示出了根据一个实施例的页面编排装置的示意性框图;
图7示出了根据又一个实施例的页面编排装置的示意性框图;以及
图8示出了适于用来实现本公开实施例的电子设备的结构示意图。
可以理解的是,在使用本公开各实施例公开的技术方案之前,均应当依据相关法律法规通过恰当的方式对本公开所涉及个人信息的类型、使用范围、使用场景等告知用户并获得用户的授权。
例如,在响应于接收到用户的主动请求时,向用户发送提示信息,以明确地提示用户,其请求执行的操作将需要获取和使用到用户的个人信息。从而,使得用户可以根据提示信息来自主地选择是否向执行本公开技术方案的操作的电子设备、应用程序、服务端或存储介质等软件或硬件提供个人信息。
作为一种可选的但非限定性的实现方式,响应于接收到用户的主动请求,向用户发送提示信息的方式例如可以是弹窗的方式,弹窗中可以以文字的方式呈现提示信息。此外,弹窗中还可以承载供用户选择“同意”或者“不同意”向电子设备提供个人信息的选择控件。
可以理解的是,上述通知和获取用户授权过程仅是示意性的,不对本公开的实现方式构成限定,其它满足相关法律法规的方式也可应用于本公开的实现方式中。
下面结合附图和实施例,对本公开提供的技术方案做进一步的详细描述。可以理解的是,此处所描述的具体实施例仅仅用于解释相关发明,而非对该发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与有关发明相关的部分。需要说明的是,在不冲突的情况下,本公开的实施例及实施例中的特征可以相互组合。
如前所述,页面的生成并不仅仅局限于静态页面布局的构建,想要根据业务需求完整实现一个页面开发,还需要解决数据控制、业务逻辑编排等等问题。
为此,本公开实施例提供了一种页面编排方法,可以实现生成页面中数据控制、业务逻辑编排等等。图1示出了本公开实施例可以应用于其中的一个应用场景的示意图。如图1所示,低代码平台的服务端101预先定义有数据Data和第一函数Method,第一函数Method可以进行业务逻辑编排,以更新数据Data的值。用户可以通过低代码平台的客户端102选取用于构建目标页面的UI(User Interface,用户界面)模块。客户端102可以基于用户选取的UI模块,显示针对UI模块的配置界面,以便于用户在配置界面对选取的UI模块进行配置。之后,客户端102可以将用户通过UI模块的配置界面输入的关系关联请求发送给服务端101,以供服务端101可以根据关联关系信息建立和存储各种关联关系。在本例中,用户选取的目标页面的UI模块可以包括用于显示信息的显示UI模块和按钮UI模块。关联关系可以包括数据Data与显示UI模块的展示属性之间的第一关联关系,还可以包括第一函数Method与按钮UI模块的点击事件之间的第二关联关系。由此,当使用目标页面的用户通过目标页面上的按钮UI模块触发点击操作时,可以根据第二关联关系执行第一函数Method,第一函数Method可以进行业务逻辑处理,以更新数据Data的值。而响应于数据Data的更新,可以根据第一关联关系更新显示UI模块的展示属性,即,更新目标页面中显示UI模块所展示的数据Data。
继续参见图2,图2示出了根据一个实施例的页面编排方法的流程示意图。该方法可以通过低代码平台的客户端执行。如图2所示,该页面编排方法,可以包括以下步骤201和步骤202,具体的:
步骤201,基于用户选取的、用于构建目标页面的UI模块,显示针对UI模块的配置界面。
在本实施例中,用户可以是指通过低代码平台开发页面的开发者。通常,低代码平台可以包括客户端和服务端,其中,客户端是用户直接与低代码平台交互的部分,包括用户界面。服务端可以为客户端提供后端服务。服务端可以预先定义有数据Data和第一函数,举例来说,用户可以通过客户端预先定义数据Data和第一函数,之后由服务器进行存储。这里,数据Data,可以用于表达页面所属应用的数据状态,例如,可以包括渲染数据、交互状态、应用配置、业务数据等等。数据Data可以具有响应式特征,也就是,在数据Data发生改变后,会更新与数据Data具有关联关系的UI模块的状态。第一函数还可以称为Method/方法,第一函数可以进行业务逻辑编排,以更新数据Data的值。此外,第一函数还可以通过HTTP请求获取远程数据。此外,上述低代码平台的服务端还可以预先定义有第二函数,该第二函数可以用于获取最新更新的数据进行运算。本例中,第二函数还可以称为Computed/计算。作为示例,第二函数中的运算可以是指预设的各种运算逻辑。
作为示例,预先定义的Data/数据、Computed/计算和Method/方法可以直接被调用,或者可以将Data/数据、Computed/计算和Method/方法对应的接口先集中到一个全局接口集合,然后再调用。举例来说,首先分别为各Data、Computed/计算和Method/方法创建一条引用关系,引用关系可以包括数据(或函数)对应的接口与该数据(或函数)的标识之间的对应关系,然后将这些引用关系存储在一个全局接口集合中,以提供给UI模块进行调用。如图3所示,图3示出了通过全局接口集合调用数据和函数的示意图。本例中,预先定义的Data/数据可以包括100Data、101Data、102Data、103Data等等,预先定义的Computed/计算可以包括200Computed、201Computed等等,预先定义的Method/方法可以包括300Method、301Method等等。
用户可以通过低代码平台的客户端选取用于构建目标页面的UI模块,这里,UI模块可以是指HTML UI组件,举例来说,HTML UI组件可以包括按钮、输入框、文本框、下拉菜单、单选按钮、复选框等等。作为示例,客户端的用户界面上,可以显示有各种UI模块,用户可以通过拖拽、点选、双击等方式选中用于构建目标页面的UI模块,被用户选中的UI模块可以被显示在预设页面布局区域。之后,用户可以在页面布局区域再次选取UI模块,以进行配置。客户端可以基于用户选取的UI模块,显示针对该UI模块的配置界面。通过UI模块的配置界面,用户可以配置该UI模块的各种信息,例如,配置UI模块对应的属性,配置UI模块对应的事件,等等。这里,UI模块的属性可以包括各种属性,例如,展示属性、是否可拷贝、链接、文本样式等等。
步骤202,将用户通过UI模块的配置界面输入的关系关联请求,发送给服务端,以供服务端根据关系关联请求建立和存储各关联关系。
在本实施例中,用户可以通过UI模块的配置界面,配置UI模块的各种信息。举例来说,可以为UI模块的属性、事件等配置预先定义的数据、函数等等。这里,可以将与预先定义的数据和函数相关的配置,作为关系关联请求。之后,客户端可以将用户输入的关系关联请求发送给服务端,以供服务端根据关系关联请求建立和存储各关联关系。
这里,关联关系可以包括数据Data与目标页面的第一UI模块的第一属性之间的第一关联关系,还可以包括第一函数与目标页面的第二UI模块的事件之间的第二关联关系。这里,第二关联关系可以用于,在使用目标页面的用户通过第二UI模块触发事件时指示执行第一函数,以更新数据。第一关联关系可以用于,在数据被更新后指示更新第一UI模块的第一属性。
在一些实现方式中,不同的UI模块可以对应不同的配置界面。上述步骤201可以具体包括以下内容:基于用户选取的、用于构建目标页面的第一UI模块,显示针对第一UI模块的第一配置界面,该第一配置界面可以用于对第一UI模块的第一属性进行配置。基于此,上述步骤202可以具备包括步骤1)和步骤2),具体的:
步骤1),接收用户通过第一配置界面输入的、针对第一UI模块的第一属性的第一引用关系信息。
在本实现方式中,第一引用关系信息可以包括引用标识和数据的标识。其中,引用标识可以用于表示引用预先定义的数据或者函数,数据的标识可以用于唯一标识数据。本例中,第一引用关系信息可以表示第一UI模块的第一属性引用预先定义的数据。作为示例,引用标识可以使用各种符号表示,例如,{{}}、#、[[]]等等。以预先定义的数据的标识为Data,引用标识为{{}}为例,第一引用关系信息可以表示为{{Data}}。
如图4所示,图4示出了用户通过配置界面输入引用关系信息的示意图。在图4所示的例子中,目标页面为一个音乐播放的页面,当前播放的歌曲为张三演唱的《xxx》,目标页面还包括一个文本框401,该文本框用于显示歌词。用户选中该文本框401之后,可以显示针对该文本框401的配置界面402,配置界面402可以用于对文本框401的各种属性进行配置,本例中,可以配置的属性可以包括文本展示、是否可拷贝、链接、图标、代码、各种文本样式、是否隐藏等等。本例中,假设引用标识为{{}},data.11为预先定义的《xxx》对应的歌词,举例来说,用户可以通过客户端预先定义data.11,之后由服务器进行存储。以文本展示为例,通过在文本展示对应的区域4021输入{{data.11}},则{{data.11}}为针对文本框401输入的引用关系信息,该引用关系信息可以用于建立data.11与文本框401的文本展示属性之间的关联关系。由此,在目标页面展示时,文本框401中可以展示歌词。
步骤2),根据第一引用关系信息,向服务端发送第一关系关联请求,以供服务端根据第一关系关联请求,建立并存储数据与第一UI模块的第一属性的第一关联关系。
由此,用户可以通过第一UI模块对应的第一配置界面输入第一引用关系信息,并由服务端根据第一引用关系信息建立数据与第一UI模块的第一属性的第一关联关系。
此外,对于用于构建目标页面的第二UI模块,低代码平台的客户端可以基于用户选取的、用于构建目标页面的第二UI模块,显示针对第二UI模块的第二配置界面,该第二配置界面可以用于对第二UI模块的预定事件进行配置。之后,客户端可以接收用户通过第二配置界面输入的、针对第二UI模块的预定事件的第二引用关系信息。该第二引用关系信息可以包括引用标识和第一函数的标识。引用标识可以用于表示引用预先定义的数据或者函数,第一函数的标识可以用于唯一标识第一函数。本例中,第二引用关系信息可以表示第二UI模块的预定事件引用预先定义的第一函数。然后,客户端可以根据第二引用关系信息,向服务端发送第二关系关联请求,以供服务端根据第二关系关联请求,建立并存储第一函数与第二UI模块的预定事件之间的第二关联关系。
在一些实现方式中,上述低代码平台的服务端还可以预先定义有第二函数,该第二函数可以用于获取最新更新的数据进行运算。本例中,第二函数还可以称为Computed/计算。作为示例,第二函数中的运算可以是指预设的各种运算逻辑。基于此,服务端根据关系关联请求建立和存储的关联关系还可以包括:第二函数与目标页面的第三UI模块的第二属性的第三关联关系。第三关联关系可以用于,根据第二函数的执行结果指示更新第三UI模块的第二属性。由此,可以在数据更新之后,通过执行第二函数更新UI模块的属性。
在一些实现方式中,第一UI模块可以包括显示UI模块,这里,显示UI模块可以是指能够显示信息的各种UI模块,例如,标签、文本框、文本区域、按钮等等。显示UI模块的第一属性可以包括展示属性,展示属性可以是指展示信息的属性。此时,第一关联关系用于,在目标页面上显示上述显示UI模块时,指示获取数据最新被更新的值进行展示。
在一些实现方式中,第二UI模块可以包括按钮UI模块,第二UI模块的事件可以包括点击事件,例如,单击事件、双击事件等等。此时,第二关联关系可以用于,响应于在用户通过目标页面上的按钮UI模块进行点击操作时生成的点击事件,指示执行第一函数,以更新数据。
在一些实现方式中,第三UI模块可以包括按钮UI模块,可以理解,第一UI模块、第二UI模块和第三UI模块可以是同一个模块,或者可以是不同的模块,此处不做限定。按钮UI模块的第二属性可以包括禁用属性,禁用属性可以是指是否对按钮UI模块进行禁用的属性。第二函数可以用于将数据与预设值进行比较运算,并基于比较运算结果判断是否对按钮UI模块进行禁用。此时,第三关联关系可以用于,根据第二函数的执行结果指示更新按钮UI模块的禁用属性。
举例来说,假设想在目标页面上创建一个可以对数字实现累加的应用,该应用可以包括一个文本框UI模块和一个按钮UI模块。其中,文本框UI模块可以用于进行累加结果的显示,按钮UI模块可以供用户进行点击,用户每点击一下按钮,文本框中的数字加1,直至累加结果等于某个预定值之后,按钮被禁用。
为在目标页面上实现该应用,可以预先定义一个数据Data、一个第一函数和一个第二函数。本例中,定义的数据Data的名称可以为count(计数),count的初始内容为0。定义的第一函数的名称可以为onAdd,第一函数的内容可以是count.setValue(count+1),其中,count.setValue(count+1)可以是指将count的值更新为count+1。定义的第二函数的名称可以为disabled,第二函数的内容可以是return count>=2,其中,return count>=2可以返回一个布尔值(true或false),可以表示变量count是否大于或者等于2。
为了方便调用,在目标页面的创建阶段,可以分别为预先定义的数据Data、第一函数和第二函数创建一条引用关系,这些引用关系可以存储在一个全局接口集合中,该全局接口集合可以用于管理预先定义的数据和函数,以供与UI模块的属性或者事件等进行关联之后,被调用。之后,建立以下a)、b)和c)三种关联关系,具体的:
a),对于文本框UI模块的展示属性,填入{{count}},以建立count与文本框UI模块的展示属性的关联关系。
b),对于按钮UI模块的点击事件,例如,单击(onClick)事件,建立onAdd与按钮UI模块的点击事件之间的关联关系。
c),对于按钮UI模块的禁用属性,填入{{disabled}},以建立disabled与按钮UI模块的禁用属性的关联关系。
在目标页面的运行阶段,使用目标页面的用户可以通过以下步骤(1)-步骤(6)操作目标页面,具体的:
步骤(1),用户点击按钮UI模块,触发按钮UI模块的点击事件。基于预先建立的onAdd与按钮UI模块的点击事件之间的关联关系,可以执行onAdd,onAdd的内容为count.setValue(count+1)。由于当前count为0,因此count+1=1,执行结果为count.setValue(1)。响应于onAdd的执行结果,执行以下a,b,c操作:
a.根据onAdd的执行结果,更新数据count内容为1;
b.在数据count更新之后,执行disabled函数,disabled函数可以获取最新更新的count进行运算,disabled函数的内容为return count>=2,由此,更新disabled的运算结果为false;
c.在数据count更新之后,根据预先建立的count与文本框UI模块的展示属性的关联关系,更新文本框UI模块的展示属性。
步骤(2),文本框UI模块更新后,展示属性会重新读取count,由此,文本框UI模块展示的内容为1。
步骤(3),按钮UI模块更新后,按钮UI模块的禁用属性,会重新读取disabled函数的运算结果,此时disabled的运算结果为false,因此按钮UI模块没有被禁用。
步骤(4),用户再次点击按钮UI模块,触发按钮UI模块的点击事件,可以执行onAdd,onAdd内容为count.setValue(count+1),此时count为1,因此,count+1=2,执行结果为count.setValue(2)。响应于onAdd的执行结果,执行以下a,b,c操作:
a.根据onAdd的执行结果,更新数据count内容为2。
b.在数据count更新之后,执行disabled函数,disabled函数的内容为return count>=2,由此,更新disabled的运算结果为true。
c.在数据count更新之后,更新文本框UI模块。
步骤(5),文本框UI模块更新后,展示属性会重新读取count,由此,文本框UI模块展示的内容为2。
步骤(6),按钮UI模块更新后,按钮UI模块的禁用属性,会重新读取disabled函数的运算结果,此时,disabled函数的运算结果为true,因此按钮UI模块禁用不可点击。
在一些实现方式中,基于图2所示方法构建的目标页面可以通过以下步骤S1-S4运行,具体的:
步骤S1,接收使用目标页面的用户对第二UI模块的操作信息。
在本实现方式中,基于图2所示方法构建的目标页面可以包括第一UI模块和第二UI模块。而使用目标页面的用户,可以对目标页面上的第二UI模块进行操作,得到操作信息。
步骤S2,根据操作信息生成事件。
在本实现方式中,可以根据用户对目标页面上的第二UI模块的操作信息,生成第二UI模块的事件。
步骤S3,响应于事件的生成,根据第二关联关系执行第一函数,更新数据。
在本实现方式中,第二关联关系为第一函数与目标页面的第二UI模块的事件之间的关联关系,因此,在根据操作信息生成事件时,可以根据第二关联关系执行第一函数,更新数据。
步骤S4,响应于数据的更新,根据第一关联关系更新第一UI模块的第一属性。
在本实现方式中,第一关联关系为数据与目标页面的第一UI模块的第一属性之间的关联关系,因此,在步骤S3更新数据时,可以根据第一关联关系,更新目标页面的第一UI模块的第一属性。通过本实现方式,在目标页面的运行中,实现了业务逻辑处理、数据控制等等。举例来说,以第一UI模块为文本框、第一UI模块的第一属性为展示属性、第二UI模块为按钮、第二UI模块的事件为单击事件、操作信息为针对按钮的单击操作为例,用户可以在目标页面对按钮进行单击。之后,根据用户针对按钮的单击操作的操作信息,生成针对按钮的单击事件。在针对按钮的单击事件生成后,根据第二关联关系中第一函数与按钮的单击事件之间的关联关系,执行第一函数,更新数据。在数据更新之后,根据第一关联关系中数据与文本框的展示属性之间的关联关系,可以对文本框中展示的数据进行更新,以展示最新的数据。
回顾以上过程,在本公开的上述实施例中,低代码平台对应的服务端可以预先定义有数据和第一函数,该第一函数可以用于更新数据。低代码平台对应的客户端可以基于用户选取的、用于构建目标页面的UI模块,显示针对UI模块的配置界面。然后,将客户端可以将用户通过UI模块的配置界面输入的关系关联请求发送给服务端,以供服务端根据关系关联请求建立和存储各关联关系。这里,关联关系可以包括数据与目标页面的第一UI模块的第一属性的第一关联关系,以及第一函数与目标页面的第二UI模块的事件的第二关联关系。这样,当使用目标页面的用户通过第二UI模块触发事件时,根据第二关联关系可以执行第一函数,以更新数据。而响应于数据的更新,根据第一关联关系可以更新第一UI模块的第一属性。由此,通过预先定义数据和函数,以及建立关联关系,可以实现目标页面中数据控制、业务逻辑编排等等,从而简化了页面生成过程,提高了页面生成效率。
继续参见图5,图5示出了根据又一个实施例的页面编排方法的流程示意图。该方法可以通过低代码平台对应的服务端执行。如图5所示,该页面编排方法,可以包括以下步骤501和步骤502,具体的:
步骤501,接收客户端通过UI模块的配置界面发送的关系关联请求。
在本实施例中,低代码平台可以包括客户端和服务端,其中,客户端是用户直接与低代码平台交互的部分,包括用户界面。服务端可以为客户端提供后端服务。服务端可以预先定义有数据Data和第一函数。用户可以通过低代码平台的客户端选取用于构建目标页面的UI模块,客户端可以基于用户选取的UI模块,显示针对该UI模块的配置界面。用户可以通过UI模块的配置界面,配置UI模块的各种信息。举例来说,可以为UI模块的属性、事件等配置预先定义的数据、函数等等。这里,可以将与预先定义的数据和函数相关的配置,作为关系关联请求。之后,客户端可以将用户输入的关系关联请求发送给服务端。这里,关系关联请求可以包括用于对数据与第一UI模块的第一属性进行关联的第一请求,以及用于对第一函数和第二UI模块的事件进行关联的第二请求。
步骤502,根据第一请求和第二请求建立并存储第一关联关系和第二关联关系。
在本实施例中,服务端可以根据第一请求建立数据Data与目标页面的第一UI模块的第一属性之间的第一关联关系,可以根据第二请求建立第一函数与目标页面的第二UI模块的事件之间的第二关联关系。由此,第二关联关系可以用于,在用户通过目标页面上的第二UI模块触发事件时指示执行第一函数,以更新数据。第一关联关系可以用于,在数据被更新后指示更新第一UI模块的第一属性。具体而言,由于第二关联关系中记录的是第一函数与目标页面的第二UI模块的目标事件之间的关联关系,该第二关联关系具体可以包括:在确定发生上述目标事件的情况下,调用第一函数。第一关联关系中记录的是数据Data与目标页面的第一UI模块的第一属性之间的关联关系,该第一关联关系具体可以包括:在确定Data满足预设条件的情况下,更改上述第一属性。因此,当用户通过目标页面上的第二UI模块触发事件时,可以根据第二关联关系调用和执行第一函数,第一函数的执行可以更新数据。在数据更新后,根据第一关联关系可以更新第一UI模块的第一属性。
在一些实现方式中,基于图5所示方法构建的目标页面可以通过以下方式运行:
首先,接收使用目标页面的用户对第二UI模块的操作信息。
其次,根据操作信息生成事件。
然后,响应于事件的生成,根据第二关联关系执行第一函数,更新数据。
最后,响应于数据的更新,根据第一关联关系更新第一UI模块的第一属性。
在一些实现方式中,低代码平台的服务端还可以预先定义有第二函数,第二函数可以用于对数据进行运算。关系关联请求还可以包括用于关联第二函数与第三UI模块的第二属性的第三请求。以及,上述页面编排方法,还可以包括:根据第三请求建立并存储第三关联关系。举例来说,可以根据第三请求建立第二函数与目标页面的第三UI模块的第二属性的第三关联关系。该第三关联关系可以用于,根据所述第二函数的执行结果指示更新所述第三UI模块的第二属性。
根据另一方面的实施例,提供了一种页面编排装置。上述页面编排装置可以部署于低代码平台的客户端。所述低代码平台的服务端预先定义有数据和第一函数,所述第一函数用于更新所述数据。
图6示出了根据一个实施例的页面编排装置的示意性框图。图6所示装置用于执行图2所示方法。如图6所示,该页面编排装置600包括:显示单元601,配置为,基于用户选取的、用于构建目标页面的UI模块,显示针对UI模块的配置界面;发送单元602,配置为,将用户通过UI模块的配置界面输入的关系关联请求,发送给服务端,以供上述服务端根据上述关系关联请求建立和存储各关联关系,其中,关联关系包括上述数据与上述目标页面的第一UI模块的第一属性的第一关联关系,以及上述第一函数与上述目标页面的第二UI模块的事件的第二关联关系;其中,上述第二关联关系用于,在用户通过上述第二UI模块触发上述事件时指示执行上述第一函数,以更新上述数据;上述第一关联关系用于,在上述数据被更新后指示更新上述第一UI模块的上述第一属性。
在本实施例的一些可选的实现方式中,上述目标页面通过以下方式运行:接收使用上述目标页面的用户对上述第二UI模块的操作信息;根据上述操作信息生成上述事件;响应于上述事件的生成,根据上述第二关联关系执行上述第一函数,更新上述数据;响应于上述数据的更新,根据上述第一关联关系更新上述第一UI模块的上述第一属性。
在本实施例的一些可选的实现方式中,显示单元601进一步配置为:基于上述用户选取的、用于构建目标页面的第一UI模块,显示针对上述第一UI模块的第一配置界面,其中,上述第一配置界面用于对上述第一UI模块的第一属性进行配置;发送单元602进一步配置为:接收上述用户通过上述第一配置界面输入的、针对上述第一UI模块的第一属性的第一引用关系信息,其中,上述第一引用关系信息包括引用标识和上述数据的标识;根据上述第一引用关系信息,向服务端发送第一关系关联请求,以供上述服务端根据上述第一关系关联请求,建立并存储上述数据与上述第一UI模块的第一属性的第一关联关系。
在本实施例的一些可选的实现方式中,上述低代码平台的服务端还预先定义有第二函数,上述第二函数用于获取最新更新的上述数据进行运算;以及,上述服务端建立和存储的关联关系还包括:上述第二函数与上述目标页面的第三UI模块的第二属性的第三关联关系;上述第三关联关系用于,根据上述第二函数的执行结果指示更新上述第三UI模块的第二属性。
在本实施例的一些可选的实现方式中,上述第一UI模块包括显示UI模块,上述显示UI模块的第一属性包括展示属性,上述第一关联关系用于,在上述目标页面上显示上述显示UI模块时,指示获取上述数据最新被更新的值进行展示。
在本实施例的一些可选的实现方式中,上述第二UI模块包括按钮UI模块,上述第二UI模块的事件包括点击事件,上述第二关联关系用于,响应于在用户通过上述目标页面上的上述按钮UI模块进行点击操作时生成的点击事件,指示执行上述第一函数,以更新上述数据。
在本实施例的一些可选的实现方式中,上述第三UI模块包括按钮UI模块,上述按钮UI模块的第二属性包括禁用属性,上述第二函数用于将上述数据与预设值进行比较运算,并基于比较运算结果判断是否对上述按钮UI模块进行禁用;上述第三关联关系用于,根据上述第二函数的执行结果指示更新上述按钮UI模块的上述禁用属性。
上述装置实施例与方法实施例相对应,具体说明可以参见方法实施例部分的描述,此处不再赘述。装置实施例是基于对应的方法实施例得到,与对应的方法实施例具有同样的技术效果,具体说明可参见对应的方法实施例。
根据另一方面的实施例,提供了又一种页面编排装置。上述页面编排装置可以部署于低代码平台的服务端。上述服务端预先定义有数据和第一函数,上述第一函数用于更新上述数据,
图7示出了根据又一个实施例的页面编排装置的示意性框图。图7所示装置用于执行图5所示方法。如图7所示,该页面编排装置700包括:接收单元701,配置为,接收上述客户端通过UI模块的配置界面发送的关系关联请求,其中,关系关联请求包括用于对上述数据与第一UI模块的第一属性进行关联的第一请求,以及用于对上述第一函数与第二UI模块的事件进行关联的第二请求;存储单元702,配置为,根据上述第一请求和上述第二请求建立并存储第一关联关系和第二关联关系;其中,上述第二关联关系用于,在用户通过上述目标页面上的上述第二UI模块触发上述事件时指示执行上述第一函数,以更新上述数据;上述第一关联关系用于,在上述数据被更新后指示更新上述第一UI模块的上述第一属性。
在本实施例的一些可选的实现方式中,接收使用上述目标页面的用户对上述第二UI模块的操作信息;根据上述操作信息生成上述事件;响应于上述事件的生成,根据上述第二关联关系执行上述第一函数,更新上述数据;响应于上述数据的更新,根据上述第一关联关系更新上述第一UI模块的上述第一属性。
在本实施例的一些可选的实现方式中,上述服务端还预先定义有第二函数,上述第二函数用于对上述数据进行运算;关系关联请求还包括用于关联上述第二函数与第三UI模块的第二属性的第三请求;以及,上述装置还包括:建立并存储单元(图中未示出),配置为,根据上述第三请求建立并存储第三关联关系;其中,上述第三关联关系用于,根据所述第二函数的执行结果指示更新所述第三UI模块的第二属性。
根据另一方面的实施例,还提供一种计算机可读存储介质,其上存储有计算机程序,当上述计算机程序在计算机中执行时,令计算机执行图2和图5所描述的方法。
根据再一方面的实施例,还提供一种电子设备,包括存储器和处理器,其特征在于,上述存储器中存储有可执行代码,上述处理器执行上述可执行代码时,实现图2和图5所描述的方法。
上述内容对本公开的特定实施例进行了描述,其他实施例在所附权利要求书的范围内。在一些情况下,在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行,并且仍然可以实现期望的结果。另外,在附图中描绘的过程不一定要按照示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中,多任务处理和并行处理也是可以的,或者可能是有利的。
下面参考图8,其示出了适于用来实现本公开实施例的电子设备800的结构示意图。图8示出的电子设备仅仅是一个示例,不应对本公开实施例的功能和使用范围带来任何限制。
如图8所示,电子设备800可以包括处理装置(例如中央处理器、图形处理器等)801,其可以根据存储在只读存储器(ROM)802中的程序或者从存储装置808加载到随机访问存储器(RAM)803中的程序而执行各种适当的动作和处理。在RAM803中,还存储有电子设备800操作所需的各种程序和数据。处理装置801、ROM802以及RAM803通过总线804彼此相连。输入/输出(I/O)接口805也连接至总线804。
通常,以下装置可以连接至I/O接口805:包括例如触摸屏、触摸板、键盘、鼠标等的输入装置806;包括例如液晶显示器(LCD,Liquid Crystal Display)、扬声器、振动器等的输出装置807;包括例如磁带、硬盘等的存储装置808;以及通信装置809。通信装置809可以允许电子设备800与其他设备进行无线或有线通信以交换数据。虽然图8示出了具有各种装置的电子设备800,但是应理解的是,并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。图8中示出的每个方框可以代表一个装置,也可以根据需要代表多个装置。
特别地,根据本公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信装置809从网络上被下载和安装,或者从存储装置808被安装,或者从ROM802被安装。在该计算机程序被处理装置801执行时,执行本公开的实施例的方法中限定的上述功能。
本公开实施例还提供了一种计算机可读存储介质,其上存储有计算机程序,当所述计算机程序在计算机中执行时,令计算机执行本公开所提供的所述方法。
需要说明的是,本公开的实施例所述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开的实施例中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开的实施例中,计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:电线、光缆、RF(Radio Frequency,射频)等等,或者上述的任意合适的组合。
上述计算机可读介质可以是上述电子设备中所包含的;也可以是单独存在,而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被该电子设备执行时,使得该电子设备:基于用户选取的、用于构建目标页面的UI模块,显示针对UI模块的配置界面;将用户通过UI模块的配置界面输入的关系关联请求,发送给服务端,以供上述服务端根据上述关系关联请求建立和存储各关联关系,其中,关联关系包括上述数据与上述目标页面的第一UI模块的第一属性的第一关联关系,以及上述第一函数与上述目标页面的第二UI模块的事件的第二关联关系;其中,上述第二关联关系用于,在用户通过上述第二UI模块触发上述事件时指示执行上述第一函数,以更新上述数据;上述第一关联关系用于,在上述数据被更新后指示更新上述第一UI模块的上述第一属性。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开实施例的操作的计算机程序代码,所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或电子设备上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
本公开中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于存储介质和计算设备实施例而言,由于其基本相似于方法实施例,所以描述得比较简单,相关之处参见方法实施例的部分说明即可。
本领域技术人员应该可以意识到,在上述一个或多个示例中,本公开实施例所描述的功能可以用硬件、软件、固件或它们的任意组合来实现。当使用软件实现时,可以将这些功能存储在计算机可读介质中或者作为计算机可读介质上的一个或多个指令或代码进行传输。
以上所述的具体实施方式,对本公开实施例的目的、技术方案和有益效果进行了进一步的详细说明。所应理解的是,以上所述仅为本公开实施例的具体实施方式而已,并不用于限定本公开的保护范围,凡在本公开的技术方案的基础之上所做的任何修改、等同替换、改进等,均应包括在本公开的保护范围之内。
Claims (14)
- 一种页面编排方法,由所述低代码平台的客户端执行,所述低代码平台的服务端预先定义有数据和第一函数,所述第一函数用于更新所述数据,其中,所述方法包括:基于用户选取的、用于构建目标页面的UI模块,显示针对UI模块的配置界面;将用户通过UI模块的配置界面输入的关系关联请求,发送给服务端,以供所述服务端根据所述关系关联请求建立和存储各关联关系,其中,关联关系包括所述数据与所述目标页面的第一UI模块的第一属性的第一关联关系,以及所述第一函数与所述目标页面的第二UI模块的事件的第二关联关系;其中,所述第二关联关系用于,在用户通过所述第二UI模块触发所述事件时指示执行所述第一函数,以更新所述数据;所述第一关联关系用于,在所述数据被更新后指示更新所述第一UI模块的所述第一属性。
- 根据权利要求1所述的方法,其中,所述目标页面通过以下方式运行:接收使用所述目标页面的用户对所述第二UI模块的操作信息;根据所述操作信息生成所述事件;响应于所述事件的生成,根据所述第二关联关系执行所述第一函数,更新所述数据;响应于所述数据的更新,根据所述第一关联关系更新所述第一UI模块的所述第一属性。
- 根据权利要求1或2所述的方法,其中,所述基于用户选取的、用于构建目标页面的UI组件,显示针对UI组件的配置界面,包括:基于所述用户选取的、用于构建目标页面的第一UI模块,显示针对所述第一UI模块的第一配置界面,其中,所述第一配置界面用于对所述第一UI模块的第一属性进行配置;以及,所述将用户通过UI模块的配置界面输入的关系关联请求,发送给服务端,包括:接收所述用户通过所述第一配置界面输入的、针对所述第一UI模块的第一属性的第一引用关系信息,其中,所述第一引用关系信息包括引用标识和所述数据的标识;根据所述第一引用关系信息,向服务端发送第一关系关联请求,以供所述服务端根据所述第一关系关联请求,建立并存储所述数据与所述第一UI模块的第一属性的第一关联关系。
- 根据权利要求1-3任一项所述的方法,其中,所述低代码平台的服务端还预先定义有第二函数,所述第二函数用于获取最新更新的所述数据进行运算;以及,所述服务端建立和存储的关联关系还包括:所述第二函数与所述目标页面的第三UI模块的第二属性的第三关联关系;所述第三关联关系用于,根据所述第二函数的执行结果指示更新所述第三UI模块的第二属性。
- 根据权利要求1-4任一项所述的方法,其中,所述第一UI模块包括显示UI模块,所述显示UI模块的第一属性包括展示属性,所述第一关联关系用于,在所述目标页面上显示所述显示UI模块时,指示获取所述数据最新被更新的值进行展示。
- 根据权利要求1-5任一项所述的方法,其中,所述第二UI模块包括按钮UI模块,所述第二UI模块的事件包括点击事件,所述第二关联关系用于,响应于在用户通过所述目标页面上的所述按钮UI模块进行点击操作时生成的点击事件,指示执行所述第一函数,以更新所述数据。
- 根据权利要求4所述的方法,其中,所述第三UI模块包括按钮UI模块,所述按钮UI模块的第二属性包括禁用属性,所述第二函数用于将所述数据与预设值进行比较运算,并基于比较运算结果判断是否对所述按钮UI模块进行禁用;所述第三关联关系用于,根据所述第二函数的执行结果指示更新所述按钮UI模块的所述禁用属性。
- 一种页面编排方法,由所述低代码平台对应的服务端执行,所述服务端预先定义有数据和第一函数,所述第一函数用于更新所述数据,其中,所述方法包括:接收所述客户端通过UI模块的配置界面发送的关系关联请求,其中,关系关联请求包括用于对所述数据与第一UI模块的第一属性进行关联的第一请求,以及用于对所述第一函数与第二UI模块的事件进行关联的第二请求;根据所述第一请求和所述第二请求建立并存储第一关联关系和第二关联关系;其中,所述第二关联关系用于,在用户通过所述目标页面上的所述第二UI模块触发所述事件时指示执行所述第一函数,以更新所述数据;所述第一关联关系用于,在所述数据被更新后指示更新所述第一UI模块的所述第一属性。
- 根据权利要求8所述的方法,其中,所述目标页面通过以下方式运行:接收使用所述目标页面的用户对所述第二UI模块的操作信息;根据所述操作信息生成所述事件;响应于所述事件的生成,根据所述第二关联关系执行所述第一函数,更新所述数据;响应于所述数据的更新,根据所述第一关联关系更新所述第一UI模块的所述第一属性。
- 根据权利要求9所述的方法,其中,所述服务端还预先定义有第二函数,所述第二函数用于对所述数据进行运算;关系关联请求还包括用于关联所述第二函数与第三UI模块的第二属性的第三请求;以及,所述方法还包括:根据所述第三请求建立并存储第三关联关系;其中,所述第三关联关系用于,根据所述第二函数的执行结果指示更新所述第三UI模块的第二属性。
- 一种页面编排装置,部署于所述低代码平台的客户端,所述低代码平台的服务端预先定义有数据和第一函数,所述第一函数用于更新所述数据,其中,所述装置包括:显示单元,配置为,基于用户选取的、用于构建目标页面的UI模块,显示针对UI模块的配置界面;发送单元,配置为,将用户通过UI模块的配置界面输入的关系关联请求,发送给服务端,以供所述服务端根据所述关系关联请求建立和存储各关联关系,其中,关联关系包括所述数据与所述目标页面的第一UI模块的第一属性的第一关联关系,以及所述第一函数与所述目标页面的第二UI模块的事件的第二关联关系;其中,所述第二关联关系用于,在用户通过所述第二UI模块触发所述事件时指示执行所述第一函数,以更新所述数据;所述第一关联关系用于,在所述数据被更新后指示更新所述第一UI模块的所述第一属性。
- 一种页面编排装置,部署于所述低代码平台对应的服务端,所述服务端预先定义有数据和第一函数,所述第一函数用于更新所述数据,其中,所述装置包括:接收单元,配置为,接收所述客户端通过UI模块的配置界面发送的关系关联请求,其中,关系关联请求包括用于对所述数据与第一UI模块的第一属性进行关联的第一请求,以及用于对所述第一函数与第二UI模块的事件进行关联的第二请求;存储单元,配置为,根据所述第一请求和所述第二请求建立并存储第一关联关系和第二关联关系;其中,所述第二关联关系用于,在用户通过所述目标页面上的所述第二UI模块触发所述事件时指示执行所述第一函数,以更新所述数据;所述第一关联关系用于,在所述数据被更新后指示更新所述第一UI模块的所述第一属性。
- 一种计算机可读存储介质,存储有计算机程序,其中,当所述计算机程序在计算机中执行时,令所述计算机执行权利要求1-10中任一项所述的页面编排方法。
- 一种电子设备,包括存储器和处理器,其中,所述存储器中存储有可执行代码,所述处理器执行所述可执行代码时,实现权利要求1-10中任一项所述的页面编排方法。
Applications Claiming Priority (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410666585.4 | 2024-05-27 | ||
| CN202410666585.4A CN118466948A (zh) | 2024-05-27 | 2024-05-27 | 页面编排方法、装置、介质和设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| WO2025246773A1 true WO2025246773A1 (zh) | 2025-12-04 |
Family
ID=92153838
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| PCT/CN2025/091776 Pending WO2025246773A1 (zh) | 2024-05-27 | 2025-04-28 | 页面编排方法、装置、介质和设备 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN118466948A (zh) |
| WO (1) | WO2025246773A1 (zh) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN118466948A (zh) * | 2024-05-27 | 2024-08-09 | 北京字跳网络技术有限公司 | 页面编排方法、装置、介质和设备 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116991403A (zh) * | 2023-08-03 | 2023-11-03 | 中国联合网络通信集团有限公司 | 低代码平台组件交互方法、服务器及计算机可读存储介质 |
| CN117407403A (zh) * | 2023-09-27 | 2024-01-16 | 中电金信数字科技集团有限公司 | 数据更新方法和装置 |
| CN117806633A (zh) * | 2023-12-01 | 2024-04-02 | 丰巢网络技术有限公司 | 页面交互事件配置方法、装置、计算机设备及存储介质 |
| CN118466948A (zh) * | 2024-05-27 | 2024-08-09 | 北京字跳网络技术有限公司 | 页面编排方法、装置、介质和设备 |
-
2024
- 2024-05-27 CN CN202410666585.4A patent/CN118466948A/zh active Pending
-
2025
- 2025-04-28 WO PCT/CN2025/091776 patent/WO2025246773A1/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116991403A (zh) * | 2023-08-03 | 2023-11-03 | 中国联合网络通信集团有限公司 | 低代码平台组件交互方法、服务器及计算机可读存储介质 |
| CN117407403A (zh) * | 2023-09-27 | 2024-01-16 | 中电金信数字科技集团有限公司 | 数据更新方法和装置 |
| CN117806633A (zh) * | 2023-12-01 | 2024-04-02 | 丰巢网络技术有限公司 | 页面交互事件配置方法、装置、计算机设备及存储介质 |
| CN118466948A (zh) * | 2024-05-27 | 2024-08-09 | 北京字跳网络技术有限公司 | 页面编排方法、装置、介质和设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN118466948A (zh) | 2024-08-09 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8533667B2 (en) | Call wizard for information management system (IMS) applications | |
| CN111796820B (zh) | 基于集成化组件构建前端页面的方法、装置及电子设备 | |
| US7779363B2 (en) | Enabling user control over selectable functions of a running existing application | |
| WO2020119804A1 (zh) | 页面视图的显示方法、装置、设备及存储介质 | |
| CN111309216B (zh) | 列表页面的显示方法、装置、计算机设备及存储介质 | |
| CN110069269A (zh) | 更新小程序页面的方法、装置、电子设备及存储介质 | |
| WO2025246773A1 (zh) | 页面编排方法、装置、介质和设备 | |
| WO2022184077A1 (zh) | 文档编辑的方法、装置、终端及非暂时性存储介质 | |
| CN116233769A (zh) | 5g消息的处理方法、电子设备及可读存储介质 | |
| WO2025200497A1 (zh) | 模型调用方法、装置、介质、设备及计算机程序产品 | |
| JP2017522639A (ja) | 開発システムにおける意味論的なコンテンツアクセス | |
| US8126961B2 (en) | Integration of client and server development environments | |
| CN115145560B (zh) | 业务编排方法、装置、设备、计算机可读介质和程序产品 | |
| CN116401173A (zh) | 测试用例生成方法、装置、介质及电子设备 | |
| WO2020186927A1 (zh) | 数据分享方法、装置、设备及介质 | |
| CN100437478C (zh) | 交互式无线应用程序系统和方法 | |
| WO2020119484A1 (zh) | 一种信息提示的方法、装置、电子设备及可读介质 | |
| EP3776186B1 (en) | Server for providing software platform and method of operating server | |
| CN115129315A (zh) | 定制化页面的开发方法、装置、电子设备及可读存储介质 | |
| US20250199661A1 (en) | Information display method, medium, and electronic device | |
| US20240412436A1 (en) | Effect edition method and apparatus, electronic device and storage medium | |
| CN113779468A (zh) | 用于处理页面接口数据的方法和装置 | |
| CN118585189A (zh) | 表单配置方法、装置、介质、电子设备及程序产品 | |
| WO2024160121A1 (zh) | 数据生产的方法、装置、介质和电子设备 | |
| CN115170268A (zh) | 金融产品生成方法、装置、电子设备及可读存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| 121 | Ep: the epo has been informed by wipo that ep was designated in this application |
Ref document number: 25814551 Country of ref document: EP Kind code of ref document: A1 |