CN115033228A

CN115033228A - Method and device for associating functional components of visual page

Info

Publication number: CN115033228A
Application number: CN202210688888.7A
Authority: CN
Inventors: 齐雅楠
Original assignee: Beijing Jindi Technology Co Ltd
Current assignee: Beijing Jindi Technology Co Ltd
Priority date: 2022-06-16
Filing date: 2022-06-16
Publication date: 2022-09-09

Abstract

The embodiment of the invention discloses a method and a device for associating functional components of a visual page, a storage medium and electronic equipment, wherein the method comprises the following steps: selecting a plurality of functional components for a visual page to be generated; rendering each functional component in the plurality of functional components to generate a final page element of each functional component; performing final page element operations through the scripting language to determine component I D values for the associated functional components; the component I D value of the associated functional component is populated in the configuration area of the functional component to be associated with the associated functional component, completing the component association. By automatically assigning the unique I D to the functional component, the problem of difficult and repeated naming of the functional component is avoided, and the development amount is saved under the condition of ensuring the unique value of the global component I D. And the user-defined component I D is provided to realize the component association interaction effect the user wants to achieve, thereby greatly improving the satisfaction degree of the user experience.

Description

Method and device for associating functional components of visual page

Technical Field

The invention relates to the technical field of computer information processing, in particular to a method and a device for associating functional components of a visual page, a storage medium and electronic equipment.

Background

In the prior art, a user is supported to perform corresponding configuration of components by selecting the components through various developed functional components such as single pictures, carousel pictures, buttons, rich texts, videos and the like on line, and finally, a page effect desired by the user is realized in a jigsaw-like manner. However, as the demand of user experience increases, sometimes it is not only intended to simply splice the components into one page for display, but it is desirable that when one component is clicked, a pop-up box is provided, corresponding content can be displayed therein, and clicking a button may jump to the page or locate the component in a certain page, which involves interaction between components and pages and between components. How to realize the association and interaction among page functional components according to the special requirements of users becomes a problem which needs to be solved urgently.

Disclosure of Invention

The invention aims to solve the problem of how to realize the interaction between components and pages and between components and components by associating the functional components in the pages when a user selects a plurality of functional components on line to generate a visual page.

The present invention has been made to solve the above problems. The embodiment of the invention provides a method and a device for associating functional components of a visual page, a storage medium and an electronic device.

According to an aspect of the embodiments of the present invention, there is provided a method for associating functional components of a visual page, including:

selecting a plurality of functional components for a visualization page to be generated, wherein a data structure of each of the plurality of functional components includes a component ID;

rendering each functional component in the plurality of functional components to generate a final page element corresponding to each functional component in a visual page to be generated;

performing final page element operation through a j script language, and determining a component ID value of a first functional component, wherein the first functional component is an associated functional component;

and filling the configuration area of a second functional component with the component ID value of the first functional component to complete the association of the first functional component and the second functional component, wherein the second functional component is the functional component to be associated with the first functional component.

Optionally, in the foregoing method embodiments of the present invention, before selecting a plurality of functional components for a visual page to be generated, the method further includes:

defining a data structure for generating each functional component of a visualization page, wherein the data structure comprises a component ID;

and setting default values for other data except the component ID in the data structure of each functional component.

Optionally, in the foregoing method embodiments of the present invention, after defining the data structure of each functional component for generating the visualization page, the method further includes:

generating a component ID value for each of the functional components.

Optionally, in the foregoing method embodiments of the present invention, generating a component ID value of each of the functional components includes:

executing a UUID method to randomly generate a non-repeated character string ID as a component ID value; or

And generating a random character string with a custom length as a component ID value through a hash algorithm.

Optionally, in the above method embodiments of the present invention, generating a final page element corresponding to each functional component in the visual page to be generated includes:

dynamically generating an ID value of a final page element corresponding to each functional component in the visual page to be generated based on the component ID value of each functional component in the plurality of functional components; or

And dynamically generating class of a corresponding final page element of each functional component in the visual page to be generated based on the component ID value of each functional component in the plurality of functional components.

Optionally, in the foregoing method embodiments of the present invention, rendering each functional component in the multiple functional components, and generating a final page element corresponding to each functional component in the visual page to be generated includes:

rendering each functional assembly except the first functional assembly and the second functional assembly in the plurality of functional assemblies to generate a final page element corresponding to each functional assembly except the first functional assembly and the second functional assembly in a visual page to be generated;

receiving the component ID values of a first functional component and a second functional component which are customized by a user;

rendering the first functional component and the second functional component with the self-defined component ID values to generate final page elements corresponding to the first functional component and the second functional component in the visual page to be generated.

Optionally, in the foregoing method embodiments of the present invention, after customizing the component ID values of the first functional component and the second functional component by the user, the method further includes:

step 1, comparing a self-defined component ID value of a first functional component and a self-defined component ID value of a second functional component with historical component ID values in a database, wherein the database is used for storing the component ID values of the functional components self-defined by a user;

step 2, when the component ID value of the first self-defined functional component is different from the historical component ID value, storing the first self-defined functional component value into a database; when the component ID value of the customized second functional component is different from the historical component ID value, storing the customized second functional component value into a database;

step 3, when the self-defined component ID value of the first functional component is the same as the historical component ID value, redefining the component ID value of the first functional component, and returning to the step 1; and when the self-defined component ID value of the second functional component is the same as the historical component ID value, redefining the component ID value of the second functional component, and returning to the step 1.

Optionally, in the foregoing method embodiments of the present invention, performing a final page element operation through a scripting language, and determining a component ID value of the first functional component includes:

for a first functional component, acquiring an ID value of a final page element corresponding to the first functional component by executing a document.getElementsById instruction in a javascript language, wherein the ID value of the final page element corresponding to the first functional component is a component ID value of the first functional component; or

For the first functional component, obtaining a class value of a final page element corresponding to the first functional component by executing a document. querystYEctor instruction in a javascript language, wherein the class value of the final page element corresponding to the first functional component is a component ID value of the first functional component.

According to another aspect of the embodiments of the present invention, there is provided an apparatus for associating functional components of a visual page, including:

the system comprises a component selection module, a component selection module and a display module, wherein the component selection module is used for selecting a plurality of functional components for a visual page to be generated, and the data structure of each functional component in the functional components comprises a component ID;

the component rendering module is used for rendering each functional component in the plurality of functional components and generating a final page element corresponding to each functional component in the visual page to be generated;

the first operation module is used for performing final page element operation through the scripting language and determining a component ID value of a first function component, wherein the first function component is an associated function component;

and the second operation module is used for filling the component ID value of the first functional component in the configuration area of the second functional component to complete the association of the first functional component and the second functional component, wherein the second functional component is a functional component to be associated with the first functional component.

Optionally, in each of the above apparatus embodiments of the present invention, the apparatus further includes a parameter setting module, which defines a data structure of each functional component used for generating the visualization page, and sets a default value for data other than the component ID in the data structure of each functional component, where the data structure includes the component ID.

Optionally, in the above embodiments of the apparatus of the present invention, the apparatus further includes an ID assignment module, configured to generate a component ID value of each functional component of the visual page.

Optionally, in the above apparatus embodiments of the present invention, the generating, by the ID assignment module, a component ID value of each functional component of the visual page includes:

Optionally, in the above apparatus embodiments of the present invention, generating a final page element corresponding to each functional component in the visual page to be generated includes:

dynamically generating an ID value of a final page element corresponding to each functional component in the visual page to be generated based on the component ID value of each functional component in the plurality of functional components; or alternatively

Optionally, in the above apparatus embodiments of the present invention, the rendering module renders each functional component in the multiple functional components, and generates a final page element corresponding to each functional component in the visual page to be generated, including:

rendering each functional assembly except the first functional assembly and the second functional assembly in the plurality of functional assemblies, and generating a final page element corresponding to each functional assembly except the first functional assembly and the second functional assembly in a visual page to be generated;

Optionally, in the above embodiments of the apparatus of the present invention, the apparatus further includes an ID checking module, configured to check a user-defined component ID value, where the ID checking module includes:

Optionally, in the above apparatus embodiments of the present invention, the performing, by the first operation module, a final page element operation through a scripting language, and determining a component ID value of the first functional component includes:

According to a further aspect of the embodiments of the present invention, there is provided a computer-readable storage medium storing a computer program for executing the method according to any one of the above embodiments of the present invention.

According to still another aspect of an embodiment of the present invention, there is provided an electronic apparatus including:

a processor;

a memory for storing the processor-executable instructions;

the processor is configured to read the executable instructions from the memory and execute the instructions to implement the method according to any of the above embodiments of the present invention.

Based on the method and the device for associating the functional components of the visual page, the storage medium and the electronic device provided by the above embodiment of the present invention, the method includes: selecting a plurality of functional components for a visualization page to be generated, wherein a data structure of each of the plurality of functional components includes a component ID; rendering each functional component in the plurality of functional components to generate a final page element corresponding to each functional component in a visual page to be generated; performing final page element operation through a scripting language, and determining a component ID value of a first functional component, wherein the first functional component is an associated functional component; and filling the component ID value of the first functional component in the configuration area of a second functional component to complete the association of the first functional component and the second functional component, wherein the second functional component is a functional component to be associated with the first functional component. According to the method and the device for associating the functional components of the visual page, the storage medium and the electronic device, a globally unique ID character string-component ID value is dynamically generated for the functional components to be associated in the visual page to be generated, the ID value or class of the corresponding page element can be generated through the component ID value, and interaction of the functional components to be associated can be realized through page element operation through a scripting language. Compared with the prior art that page development is carried out, developers need to name each functional component in a visual page to be generated, and therefore naming is difficult or naming is repeated when too many functional components are in the page or types of the functional components are too many. Furthermore, the invention also allows the user to define the ID value of the functional component by user, and guarantees the uniqueness of the functional component ID through ID verification, thereby providing more implementation modes for guaranteeing the uniqueness of the component ID for the user. By ensuring the uniqueness of each functional component ID in the visual page, the javascript language can bind the relationship between the functional components through the component IDs, so that the effect that a user wants to achieve is achieved, and the satisfaction degree of user experience is greatly improved.

The technical solution of the present invention is further described in detail by the accompanying drawings and embodiments.

Drawings

The above and other objects, features and advantages of the present invention will become more apparent by describing in more detail embodiments of the present invention with reference to the attached drawings. The accompanying drawings are included to provide a further understanding of the embodiments of the invention and are incorporated in and constitute a part of this specification, illustrate embodiments of the invention and together with the description serve to explain the principles of the invention and not to limit the invention. In the drawings, like reference numbers generally indicate like parts or steps.

FIG. 1 is a flowchart illustrating a method for associating functional components of a visualization page according to an exemplary embodiment of the present invention;

FIG. 2 is a data structure diagram of a button assembly provided by an exemplary embodiment of the present invention;

FIG. 3 is a diagram of functional component associations provided by an exemplary embodiment of the present invention;

FIG. 4 is a schematic structural diagram of an apparatus for associating functional components of a visual page according to an exemplary embodiment of the present invention;

fig. 5 is a structure of an electronic device provided by an exemplary embodiment of the present invention.

Detailed Description

Hereinafter, example embodiments according to the present invention will be described in detail with reference to the accompanying drawings. It should be understood that the described embodiments are only some of the embodiments of the present invention, and not all of the embodiments of the present invention, and it should be understood that the present invention is not limited by the exemplary embodiments described herein.

It should be noted that: the relative arrangement of the components and steps, the numerical expressions and numerical values set forth in these embodiments do not limit the scope of the present invention unless specifically stated otherwise.

It will be understood by those of skill in the art that the terms "first," "second," and the like in the embodiments of the present invention are used merely to distinguish one element, step, device, module, or the like from another element, and do not denote any particular technical or logical order therebetween.

It should also be understood that in embodiments of the present invention, "a plurality" may refer to two or more and "at least one" may refer to one, two or more.

It is also to be understood that any reference to any component, data, or structure in the embodiments of the invention may be generally understood as one or more, unless explicitly defined otherwise or stated to the contrary hereinafter.

In addition, the term "and/or" in the present invention is only one kind of association relationship describing the associated object, and means that there may be three kinds of relationships, for example, a and/or B, which may mean: a exists alone, A and B exist simultaneously, and B exists alone. In the present invention, the character "/" generally indicates that the preceding and following related objects are in an "or" relationship.

It should also be understood that the description of the embodiments of the present invention emphasizes the differences between the embodiments, and the same or similar parts may be referred to each other, so that the descriptions thereof are omitted for brevity.

Meanwhile, it should be understood that the sizes of the respective portions shown in the drawings are not drawn in an actual proportional relationship for the convenience of description.

The following description of at least one exemplary embodiment is merely illustrative in nature and is in no way intended to limit the invention, its application, or uses.

Techniques, methods, and apparatus known to those of ordinary skill in the relevant art may not be discussed in detail, but are intended to be part of the specification where appropriate.

It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be discussed further in subsequent figures.

Embodiments of the invention are operational with numerous other general purpose or special purpose computing system environments or configurations, and with numerous other electronic devices, such as terminal devices, computer systems, servers, etc. Examples of well known terminal devices, computing systems, environments, and/or configurations that may be suitable for use with electronic devices, such as terminal devices, computer systems, servers, and the like, include, but are not limited to: personal computer systems, server computer systems, thin clients, thick clients, hand-held or laptop devices, microprocessor-based systems, set-top boxes, programmable consumer electronics, networked personal computers, minicomputer systems, mainframe computer systems, distributed cloud computing environments that include any of the above, and the like.

Electronic devices such as terminal devices, computer systems, servers, etc. may be described in the general context of computer system-executable instructions, such as program modules, being executed by a computer system. Generally, program modules may include routines, programs, objects, components, logic, data structures, etc. that perform particular tasks or implement particular abstract data types. The computer system/server may be practiced in distributed cloud computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed cloud computing environment, program modules may be located in both local and remote computer system storage media including memory storage devices.

Exemplary method

Fig. 1 is a flowchart illustrating a method for associating functional components of a visualized page according to an exemplary embodiment of the present invention. The embodiment can be applied to an electronic device, as shown in fig. 1, the method includes the following steps:

step 101, selecting a plurality of functional components for a visual page to be generated, wherein a data structure of each functional component in the plurality of functional components comprises a component ID.

Preferably, before selecting the plurality of functional components for the visual page to be generated, the method further comprises:

setting default values for data other than the component ID in the data structure of each of the functional components.

Fig. 2 is a data structure diagram of a button assembly according to an exemplary embodiment of the present invention. As shown in fig. 2, the data structure of the function component button includes a component ID, a component type, a component name, a component parameter, a component style parameter, and the like. The module parameters comprise a button file, a click trigger event type, an anchor point, a click jump link and the like, and the module style parameters comprise a button width, a button height, a button centering mode, a button background color, a character size and the like. And a default value is set for each item except for the component ID in the data structure of the button component. For example, the button centering mode is left, the click trigger event type is 0, and no jump is represented. As can be seen by this example, a functional component can be defined and generated by defining a data structure for the functional component and assigning values to attributes of each item in the data structure.

Preferably, after defining the data structure of each functional component for generating the visualization page, the method further comprises:

generating a component ID value for each of the functional components.

Preferably, generating a component ID value for each of the functional components comprises:

In fig. 2, as can be seen from the note, the button component assigns adsjsoh1jd10dsjf to the component ID by executing the UUID method. Therefore, non-repeated numbers can be generated by executing the UUID, similarly, a random character function with a certain length can be generated in a self-defining way by a hash algorithm, and the generated numbers or characters represent the ID values of the functional components, so that the uniqueness of the component ID values of the functional components is ensured.

Further, the embodiment may also provide a function of customizing the ID value of the component ID of the functional component to be associated by the user for the functional component introduced into the visual page, and in this way, the user may not only input the number and/or character that is easy to be recognized by the user, but also may input the text. The user can realize the interaction between the components only by directly inputting or selecting the user-defined ID value of the component interacting with the current component at the interaction place, and the method is simpler and more convenient for the user.

Preferably, the user customizing the component ID values of the first functional component and the second functional component further comprises:

Further, for the component ID value of the user-defined functional component, the present embodiment may also provide an ID check function. When a user inputs an ID value of a functional component, the ID value is automatically compared with a historical component ID value stored in a database, when the ID value is repeated, the user is prohibited from interacting the components, and the next functional component can be associated to realize binding interaction only under the condition that the ID value of the component is guaranteed to be globally unique through ID verification.

And 102, rendering each functional component in the plurality of functional components, and generating a final page element corresponding to each functional component in the visual page to be generated.

Preferably, generating a final page element corresponding to each functional component in the visual page to be generated includes:

Preferably, rendering each of the plurality of functional components, and generating a final page element corresponding to each functional component in the visual page to be generated includes:

preferably, the final page element may be a dom element.

Further, after generating a final page element corresponding to the first functional component and the second functional component in the visual page to be generated, dynamically generating an ID value of the final page element corresponding to the first functional component and the second functional component in the visual page to be generated based on the self-defined component ID values of the first functional component and the second functional component; or dynamically generating class of final page elements corresponding to the first functional component and the second functional component in the visual page to be generated based on the self-defined component ID values of the first functional component and the second functional component.

In this embodiment, two ways of assigning a component ID are provided for a user, one is to automatically generate non-repeating random characters as a component ID value by executing a UUID method or by a hash algorithm; and secondly, in the visual page to be generated, the user self-defines the component ID value of the associated functional component.

Corresponding to the first approach, when rendering each of a plurality of functional components selected in a visualization page, the component ID in each functional component data structure is dynamically bound to generate the ID or class of the component page element. In the html page, the ID of one page element can only be used once, and the class of the page element, i.e., the element class name, can be used many times in the html page, but since the ID value of the functional component is globally unique in this embodiment, the class name of the page element is also unique.

Corresponding to the second approach, for functional components that do not need to be associated, since binding by component IDs is not needed, rendering is directly performed to generate page elements. For the functional components needing to be associated, since association binding can be performed only through the component ID, when the functional components needing to be associated are rendered, the ID or the close of the corresponding final page element in the visual page to be generated needs to be dynamically generated according to the user-defined component ID value.

And 103, performing final page element operation through the scripting language, and determining a component ID value of a first functional component, wherein the first functional component is an associated functional component.

Preferably, the determining the component ID value of the first functional component by performing a final page element operation in a scripting language comprises:

for a first functional component, acquiring an ID value of a final page element corresponding to the first functional component by executing a document.getElementsById instruction in a javascript language, wherein the ID value of the final page element corresponding to the first functional component is a component ID value of the first functional component; or alternatively

For the first functional component, obtaining a class value of a final page element corresponding to the first functional component by executing a document.

In this embodiment, the association of the functional component in the visual page to be generated must be realized only by binding the component ID value, and therefore, when the component association is performed, the component ID value must be known first. Because the ID or class of the final page element generated after rendering the functional component to be associated is obtained according to the component ID value of the corresponding functional component, the ID or class of the page element of the associated functional component can be obtained through the related page element operation instruction in the javascript script language, and the ID or class of the page element of the associated functional component is the component ID value of the associated functional component.

And 104, filling a component ID value of the first functional component in a configuration area of a second functional component to complete the association of the first functional component and the second functional component, wherein the second functional component is a functional component to be associated with the first functional component.

FIG. 3 is a diagram illustrating functional component associations that is provided in accordance with an exemplary embodiment of the present invention. As shown in fig. 3, in the visual page to be generated, it is now necessary to implement a button click to position the page view to the single graph a, where the single graph a is the associated functional component, i.e. the first functional component, and the button is the second functional component to be associated with the single graph a. As can be seen from fig. 2 and 3, in the configuration area of the button assembly, the initial values of the button width, the button height, the background color, and the like in the button style parameter are all set default values. Since the component ID value of the first functional component is already obtained through the related page element operation instruction in the javascript language in the step of rendering the functional component, the association and interaction between the button and the single diagram a can be realized by inputting the component ID value of the single diagram a to be located in the "jump position" option in the configuration area of the button shown on the right side of fig. 3.

In summary, in the method for associating functional components of a visual page provided in this embodiment, a globally unique ID string, i.e., a component ID value, is dynamically generated for the functional components to be associated in the visual page to be generated, the ID value or class of the corresponding page element can be generated through the component ID value, and then the interaction of the functional components to be associated can be realized by performing page element operation through javascript scripting language. The invention automatically assigns the unique ID to the functional component, thereby avoiding the problems of difficult and repeated naming of the functional component and saving the development amount under the condition of ensuring the unique ID value of the global component. Furthermore, the invention also allows the user to define the ID value of the functional component by user, and guarantees the uniqueness of the functional component ID through ID verification, thereby providing more implementation modes for guaranteeing the uniqueness of the component ID for the user. By ensuring the uniqueness of each functional component ID in the visual page, the javascript language can bind the relationship between the functional components through the component IDs, so that the interaction effect which a user wants to achieve is realized, and the satisfaction degree of user experience is greatly improved.

Exemplary devices

Fig. 4 is a schematic structural diagram of an apparatus for associating functional components of a visualized page according to an exemplary embodiment of the present invention. As shown in fig. 4, the present embodiment includes:

a component selection module 401, configured to select a plurality of functional components for a visual page to be generated, where a data structure of each of the plurality of functional components includes a component ID;

a component rendering module 402, configured to render each functional component of the multiple functional components, and generate a final page element corresponding to each functional component in the to-be-generated visual page;

a first operation module 403, configured to perform a final page element operation through a scripting language, and determine a component ID value of a first function component, where the first function component is an associated function component;

a second operation module 404, configured to fill the component ID value of the first functional component in the configuration area of the second functional component, and complete association between the first functional component and the second functional component, where the second functional component is a functional component to be associated with the first functional component.

Preferably, the apparatus further includes a parameter setting module, which defines a data structure of each functional component used for generating the visualization page, and sets a default value for data other than the component ID in the data structure of each functional component, where the data structure includes the component ID.

Preferably, the apparatus further comprises an ID assignment module, configured to generate a component ID value of each of the functional components of the visualization page.

Preferably, the ID assignment module generating the component ID value of each functional component of the visual page includes:

Preferably, the component rendering module 402 generates a corresponding final page element of each functional component in the visual page to be generated, including:

Preferably, the component rendering module 402 renders each of the plurality of functional components, and generates a corresponding final page element of each functional component in the visual page to be generated, including:

Further, based on the self-defined component ID values of the first functional component and the second functional component, dynamically generating the ID values of the final page elements corresponding to the first functional component and the second functional component in the visual page to be generated; or dynamically generating class of final page elements corresponding to the first functional component and the second functional component in the visual page to be generated based on the self-defined component ID values of the first functional component and the second functional component.

Preferably, the apparatus further includes an ID checking module, configured to check a user-defined component ID value, including:

Preferably, the first operation module 403 performs a final page element operation through a scripting language, and determines a component ID value of the first functional component, including:

The device for associating functional components of a visual page according to the embodiment of the present invention renders a plurality of functional components in a visual page to be generated, and the step of implementing association interaction between the components by executing an instruction in a javascript language is the same as the step employed in the method for associating functional components of a visual page according to the embodiment of the present invention, so that the technical effect is the same, and further description is omitted here.

Exemplary electronic device

Fig. 5 is a structure of an electronic device provided by an exemplary embodiment of the present invention. The electronic device may be either or both of the first device and the second device, or a stand-alone device separate from them, which stand-alone device may communicate with the first device and the second device to receive the acquired input signals therefrom. FIG. 5 illustrates a block diagram of an electronic device in accordance with an embodiment of the disclosure. As shown in fig. 5, the electronic device includes one or more processors 501 and memory 502.

The processor 501 may be a Central Processing Unit (CPU) or other form of processing unit having data processing capabilities and/or instruction execution capabilities, and may control other components in the electronic device to perform desired functions.

Memory 502 may include one or more computer program products that may include various forms of computer-readable storage media, such as volatile memory and/or non-volatile memory. The volatile memory may include, for example, Random Access Memory (RAM), cache memory (cache), and/or the like. The non-volatile memory may include, for example, Read Only Memory (ROM), hard disk, flash memory, etc. One or more computer program instructions may be stored on the computer-readable storage medium and executed by the processor 501 to implement the above-described method for associating functional components of a visualized page of the software program of the various embodiments of the present disclosure and/or other desired functions. In one example, the electronic device may further include: an input device 503 and an output device 504, which are interconnected by a bus system and/or other form of connection mechanism (not shown).

The input device 503 may also include, for example, a keyboard, a mouse, and the like.

The output device 504 can output various information to the outside. The output devices 504 may include, for example, a display, speakers, printer, and communication network and remote output devices connected thereto, among others.

Of course, for simplicity, only some of the components of the electronic device relevant to the present disclosure are shown in fig. 5, omitting components such as buses, input/output interfaces, and the like. In addition, the electronic device may include any other suitable components, depending on the particular application.

Exemplary computer program product and computer-readable storage Medium

In addition to the above-described methods and apparatus, embodiments of the present disclosure may also be a computer program product comprising computer program instructions that, when executed by a processor, cause the processor to perform the steps in a method of associating functional components of a visualized page according to various embodiments of the present disclosure described in the "exemplary methods" section of this specification above.

The computer program product may write program code for carrying out operations for embodiments of the present disclosure in any combination of one or more programming languages, including an object oriented programming language such as Java, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device, or entirely on the remote computing device or server.

Furthermore, embodiments of the present disclosure may also be a computer-readable storage medium having stored thereon computer program instructions which, when executed by a processor, cause the processor to perform steps in a method of associating functional components of a visualized page according to various embodiments of the present disclosure described in the "exemplary methods" section above of this specification.

The computer-readable storage medium may take any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may include, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

The foregoing describes the general principles of the present disclosure in conjunction with specific embodiments, however, it is noted that the advantages, effects, etc. mentioned in the present disclosure are merely examples and are not limiting, and they should not be considered essential to the various embodiments of the present disclosure. Furthermore, the foregoing disclosure of specific details is for the purpose of illustration and description and is not intended to be limiting, since the disclosure is not intended to be limited to the specific details so described.

In the present specification, the embodiments are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same or similar parts in the embodiments are referred to each other. For the system embodiment, since it basically corresponds to the method embodiment, the description is relatively simple, and for the relevant points, reference may be made to the partial description of the method embodiment.

The block diagrams of devices, apparatuses, systems referred to in this disclosure are only given as illustrative examples and are not intended to require or imply that the connections, arrangements, configurations, etc. must be made in the manner shown in the block diagrams. These devices, apparatuses, devices, systems may be connected, arranged, configured in any manner, as will be appreciated by those skilled in the art. Words such as "including," "comprising," "having," and the like are open-ended words that mean "including, but not limited to," and are used interchangeably therewith. As used herein, the words "or" and "refer to, and are used interchangeably with, the word" and/or, "unless the context clearly dictates otherwise. The word "such as" is used herein to mean, and is used interchangeably with, the phrase "such as but not limited to".

The methods and apparatus of the present disclosure may be implemented in a number of ways. For example, the methods and apparatus of the present disclosure may be implemented by software, hardware, firmware, or any combination of software, hardware, and firmware. The above-described order for the steps of the method is for illustration only, and the steps of the method of the present disclosure are not limited to the order specifically described above unless specifically stated otherwise. Further, in some embodiments, the present disclosure may also be embodied as programs recorded in a recording medium, the programs including machine-readable instructions for implementing the methods according to the present disclosure. Thus, the present disclosure also covers a recording medium storing a program for executing the method according to the present disclosure.

It is also noted that in the devices, apparatuses, and methods of the present disclosure, each component or step can be decomposed and/or recombined. These decompositions and/or recombinations are to be considered equivalents of the present disclosure. The previous description of the disclosed aspects is provided to enable any person skilled in the art to make or use the present disclosure. Various modifications to these aspects will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other aspects without departing from the scope of the disclosure. Thus, the present disclosure is not intended to be limited to the aspects shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

The foregoing description has been presented for purposes of illustration and description. Furthermore, this description is not intended to limit embodiments of the disclosure to the form disclosed herein. While a number of example aspects and embodiments have been discussed above, those of skill in the art will recognize certain variations, modifications, alterations, additions and sub-combinations thereof.

Claims

1. A method of associating functional components of a visual page, the method comprising:

performing final page element operation through a scripting language, and determining a component ID value of a first functional component, wherein the first functional component is an associated functional component;

2. The method of claim 1, wherein selecting a plurality of functional components for a visualization page to be generated further comprises:

3. The method of claim 2, wherein defining the data structure for generating the functional components of the visualization page further comprises:

generating a component ID value for each of the functional components.

4. The method of claim 3, wherein generating a component ID value for each of the functional components comprises:

5. The method of claim 4, wherein generating a corresponding final page element for each functional component in the visualization page to be generated comprises:

6. The method of claim 2, wherein rendering each of the plurality of functional components, and wherein generating a final page element for each functional component corresponding to the visual page to be generated comprises:

7. The method of claim 6, wherein the user customizing the component ID values of the first functional component and the second functional component further comprises:

8. The method of claim 5 or 6, wherein determining the component ID value of the first functional component by performing a final page element operation in a scripting language comprises:

9. An apparatus for associating functional components of a visual page, the apparatus comprising:

the system comprises a component selection module, a display module and a display module, wherein the component selection module is used for selecting a plurality of functional components for a visual page to be generated, and the data structure of each functional component in the functional components comprises a component ID;

10. A computer-readable storage medium, characterized in that the storage medium stores a computer program for performing the method of any of the preceding claims 1-8.

11. An electronic device, characterized in that the electronic device comprises:

a processor;

a memory for storing the processor-executable instructions;

the processor is configured to read the executable instructions from the memory and execute the instructions to implement the method of any one of claims 1 to 8.