CN113031947A - Configuration data management method and device used in interface design tool - Google Patents

Configuration data management method and device used in interface design tool Download PDF

Info

Publication number
CN113031947A
CN113031947A CN202110246925.4A CN202110246925A CN113031947A CN 113031947 A CN113031947 A CN 113031947A CN 202110246925 A CN202110246925 A CN 202110246925A CN 113031947 A CN113031947 A CN 113031947A
Authority
CN
China
Prior art keywords
component
designer
configuration data
code
module
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.)
Granted
Application number
CN202110246925.4A
Other languages
Chinese (zh)
Other versions
CN113031947B (en
Inventor
杨朝
马志骋
姚建峰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Suzhou Dibo Information Technology Co ltd
Original Assignee
Suzhou Dibo Information Technology Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Suzhou Dibo Information Technology Co ltd filed Critical Suzhou Dibo Information Technology Co ltd
Priority to CN202110246925.4A priority Critical patent/CN113031947B/en
Publication of CN113031947A publication Critical patent/CN113031947A/en
Application granted granted Critical
Publication of CN113031947B publication Critical patent/CN113031947B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/40Transformation of program code
    • G06F8/41Compilation
    • G06F8/44Encoding

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)

Abstract

The invention provides a method and a device for managing configuration data used in an interface design tool. The method comprises the following steps: saving all data of a designer in a nested storage mode, wherein the all data are saved in a JSON format, and the method comprises the following steps: the unique designer code of the designer and the configuration data of the designer corresponding to the code comprise: all information of the components contained in the designer, and other necessary information data other than the component information; all information of each component is stored in a nested structure, and the content comprises: the unique component code of the component and the configuration data of the component corresponding to the component code; wherein the unique designer code for each designer and the unique component code for each component are preset; and a data management module is added, and the management of the configuration data is realized by calling the data management module.

Description

Configuration data management method and device used in interface design tool
Technical Field
The invention relates to the technical field of computers, in particular to a configuration data management method and device used in an interface design tool.
Background
In software development work, designing an interface through a visual interface design tool has become one of effective ways to improve interface design efficiency and interface programming efficiency. A program developer can arrange the components through a visual interface design tool, input configuration data, dynamically render a usable interface based on the configuration data and automatically generate corresponding codes.
However, the processing of the configuration data of the visual interface design tool is complex, the decoupling requirement between the service modules is high, and the problems commonly existing in the configuration data management method used by the existing visual interface design tool are as follows:
1) the configuration data is messy and is inconvenient for structured management;
2) only a single designer is supported, which makes it difficult for one page to integrate multiple designers to collaborate with each other to accomplish more complex design tasks;
3) there is no unified management mode for the configuration data of different function modules, and the newly added function module cannot be integrated into the interface design tool by using the same standard, so the expansibility is poor.
Disclosure of Invention
It is an object of the present invention to provide a method and apparatus for configuration data management for use in an interface design tool to ameliorate the above problems.
A first embodiment of the present invention provides a configuration data management method for use in a visual interface design tool, wherein the visual interface design tool includes one or more designers, each designer including one or more components, the configuration data management method including:
saving all data of a designer in a nested storage mode, wherein the all data are saved in a JSON format, and the method comprises the following steps: the unique designer code of the designer and the configuration data of the designer corresponding to the code comprise: all information of the components contained in the designer, and other necessary information data other than the component information; all information of each component is stored in a nested structure, and all information of each component comprises: the unique component code of the component and the configuration data of the component corresponding to the component code; wherein the unique designer code for each designer is preset, each designer setting the unique component code for each component it contains;
adding a data management module, the data management module comprising: the designer module for initializing, the module for changing designer configuration data, the module for changing component configuration data and the module for removing component configuration data, and the management of the configuration data is realized by calling a target module in the data management module and the designer code or the designer code and the component code transmitted to the target module.
Wherein the method further comprises: constructing a data connector module corresponding to the component, wherein the data connector module comprises an entry parameter, a component configuration parameter field, a get method and a set method, and the entry parameter comprises: the designer code and the component code, the component configuration parameter field stores the configuration data of the current component, and the management of the configuration data is realized through the data connector module, which comprises the following steps:
synchronizing the configuration data of the corresponding component indicated by the entry parameter into the component configuration parameter field by using a get method, thereby realizing reading operation; and
and calling the module for changing the component configuration data by using a set method, and covering the configuration data of the corresponding component indicated by the entry parameter with the configuration data in the component configuration parameter field by using the entry parameter, thereby realizing the write operation.
Wherein the method further comprises: adding a new component and configuration parameters thereof for a designer by using a modified component configuration data module, setting a unique component code for the added new component by the designer, introducing a data connector module and hanging the data connector module in the added new component, writing the configuration data of the new component in a component configuration parameter field in the new component, calling the modified component configuration data module by using a set method, and adding the component code of the new component and the configuration data in the component configuration parameter field to the designer corresponding to the designer code by using an entry parameter containing the designer code and the component code of the new component.
Wherein the method further comprises:
when the configuration data of the designer is updated, the designer code of the designer to be updated is utilized, and the change designer configuration data module is used for completing the updating of the configuration data of the designer corresponding to the designer code, including the addition and the change of the configuration data;
when the configuration data of the component is updated, utilizing the component code of the component to be updated and the designer code of the designer where the component to be updated is located, and completing the updating of the configuration data of the component by using a component configuration data changing module, wherein the updating comprises the addition and the change of the configuration data;
when the component and the configuration data thereof are deleted, the component code of the component to be deleted and the designer code of the designer where the component to be deleted is located are utilized, and the deletion of the component and the configuration data thereof is completed by using a component configuration data removing module.
Wherein the method further comprises: adding a new designer instance in the visual interface design tool is accomplished by invoking a designer initialization module to perform initialization.
A second embodiment of the present invention provides a configuration data management apparatus for use in a visual interface design tool, wherein the visual interface design tool includes one or more designers, each designer including one or more components, the configuration data management apparatus comprising:
a data storage area for storing all data of the designer, wherein all data of the designer is stored in a nested storage manner, wherein all data is stored in a JSON format, comprising: the unique designer code of the designer and the configuration data of the designer corresponding to the code comprise: all information of the components contained in the designer, and other necessary information data other than the component information; all information of each component is stored in a nested structure, and all information of each component comprises: the unique component code of the component and the configuration data of the component corresponding to the component code; wherein the unique designer code for each designer is preset, each designer setting the unique component code for each component it contains;
a data management module, the data management module comprising: the designer module for initializing, the module for changing designer configuration data, the module for changing component configuration data and the module for removing component configuration data, and the management of the configuration data is realized by calling a target module in the data management module and the designer code or the designer code and the component code transmitted to the target module.
Wherein the apparatus further comprises: a data connector module comprising an entry parameter, a component configuration parameter field, a get method, and a set method, wherein the entry parameter comprises: the designer code and the component code, the component configuration parameter field stores the configuration data of the current component, and the management of the configuration data is realized through the data connector module, which comprises the following steps:
synchronizing the configuration data of the corresponding component indicated by the entry parameter into the component configuration parameter field by using a get method, thereby realizing reading operation; and
and calling the module for changing the component configuration data by using a set method, and covering the configuration data of the corresponding component indicated by the entry parameter with the configuration data in the component configuration parameter field by using the entry parameter, thereby realizing the write operation.
The designer sets a unique component code for the added new component, introduces a data connector module and hangs the module in the added new component, writes the configuration data of the new component in a component configuration parameter field in the module, calls the module for changing the component configuration data by using a set method, and adds the component code of the new component and the configuration data in the component configuration parameter field to a designer corresponding to the designer code by using an entry parameter containing the designer code and the component code of the new component.
The designer configuration data changing module is used for adding or changing configuration data of a designer corresponding to the to-be-updated designer code;
the change component configuration data module is used for adding or changing the configuration data of the component to be updated;
the remove component configuration data module is used for deleting the specified component and the configuration data thereof.
The designer initialization module is used for executing configuration data initialization of the designer, and adding a new designer instance in the visual interface design tool is realized by executing the data initialization.
According to the configuration data management method and device used in the interface design tool provided by the invention, the defects that the configuration data is messy and the structured management is inconvenient in the existing visual interface design tool are overcome, due to the structural management of the configuration data and the unified management of the configuration data of different functional modules, a plurality of designers can be supported to cooperate with each other to complete more complex design tasks, and can also use the same standard to integrate the newly added function module into the interface design tool, has strong expansibility, is convenient for the program developers of the newly added team to directly carry out module development work, the working principle of a designer in the interface design tool, the processing and storage of the designer on the configuration data, the coupling relation between the configuration data and the like do not need to be known, and the development efficiency of subsequent successors is saved.
Drawings
FIG. 1 is a flow chart of a configuration data management method for use in a visualization interface design tool according to a first embodiment of the present invention;
FIG. 2 is a flow chart of a configuration data management method for use in a visualization interface design tool according to a second embodiment of the present invention;
FIG. 3 is a schematic block diagram of a configuration data management device used in a visual interface design tool according to a third embodiment of the present invention
FIG. 4 is a schematic block diagram of a configuration data management apparatus for use in a visualization interface design tool according to a fourth embodiment of the present invention;
FIG. 5 is a schematic diagram of an exemplary graphical interface configuration page including a designer;
FIG. 6 is a schematic diagram of an exemplary graphical interface configuration page containing a designer and corresponding components.
Detailed Description
The technical solutions proposed by the present invention will be clearly and completely described below with reference to specific embodiments and the accompanying drawings, and it is to be understood that the described exemplary embodiments are for illustrative purposes only and are not limiting.
Fig. 1 is a flowchart of a configuration data management method used in a visual interface design tool according to a first embodiment of the present invention. As shown in fig. 1, a first embodiment of the present invention provides a method for managing configuration data used in a visual interface design tool, where the visual interface design tool includes one or more designers, each designer includes one or more components, and the method includes:
s1: saving all data of a designer in a nested storage mode, wherein the all data are saved in a JSON format, and the method comprises the following steps: the unique designer code of the designer and the configuration data of the designer corresponding to the code comprise: all information of the components contained in the designer, and other necessary information data other than the component information; all information of each component is stored in a nested structure, and all information of each component comprises: a unique component code for a component and configuration data for the component; wherein the unique designer code for each designer is preset, each designer setting the unique component code for each component it contains.
When a program developer develops the above-mentioned designers, each designer may be given a function of setting a unique component code for the component included therein, including setting a unique component code for a newly added component.
The visual interface design tool may include a graphical interface configuration page, and when multiple pages or multiple functions can be designed on the same page displayed by the design tool, the interface design tool may include multiple designers. For example, an interface design tool instance (e.g., a graphical interface configuration page) may include a plurality of functional modules, such as a list page, a form page, a detail page, an export and import, and may provide configuration operations, dynamic rendering, and corresponding code generation functions for the functional modules, respectively, with one designer for each functional module, and thus, in this example, the interface design tool includes 5 designers, a list page designer, a form page designer, a detail page designer, an export designer, and an import designer. Thus, a unique designer code needs to be set for each designer in the visual interface design tool, and a unique designer code can be set for each designer by a program developer, for example, the designer code of a list page can be set to "listPage". Clicking on the "List Page" button on the design page displays a number of component modules and corresponding parameter configurations, as shown in FIGS. 5 and 6. In order to distinguish and query different components, a unique component code needs to be set for the component contained by each designer.
The functionality of the designers may be developed by a program developer to enable each designer to automatically set a unique component code for all of the components that it contains. Unique component codes may also be manually set by the program developer for the components that each designer contains.
The following describes a nested storage manner of configuration data of the construction designer by an example of JSON format.
Figure BDA0002964421480000061
In this example, the only designer code for the designer is "listPage". "modelconfigmap" is a key storage value that functions like a pointer to indicate storage location information for all components and configuration information thereof contained in the designer listPage. The parenthesis in the parenthesis "xxx 1" and "xxx 2" are the component numbers of the components, the parenthesis after xxx1 records the configuration data contained in the component corresponding to the component code xxx1, for example, the configuration data of the component module with the component code "xxx 1" contains "name": zhangsan "; the parenthesis behind xxx2 records the configuration data contained in the component corresponding to this component code xxx2, for example, the configuration data of the component module whose component code is "xxx 1" contains "title": demo ". "xxx 1" and "xxx 2" are also key storage values that function like pointers to indicate the storage location information of the respective configuration data that can be found by "xxx 1" and "xxx 2", respectively. As can be seen by this example, the data structure of the component is stored nested within the data structure of the designer.
In addition, the configuration data of the designer may include other necessary information data besides the component module and the corresponding configuration data, for example, information data representing the current interface theme of the designer, list information data of components, and currently active components in the designer.
This is detailed below by the list page designer example in JSON format.
Figure BDA0002964421480000071
Figure BDA0002964421480000081
According to the technical scheme, all data of the designer are saved in a nested storage mode, and all data of the designer are saved in a JSON format. All data for the designer includes: the unique designer code for the designer and the configuration data for the designer corresponding to that code. And the designer's configuration data includes: all information of the components contained in the designer, and other necessary information data other than the component information. In the above example, the designer contains components "xxx 1" and "xxx 2", and the necessary information data other than the component information includes: the currently active component, the subject of the current designer interface, the list of components that the current designer contains, although there may be other information stored by other key values for the current designer, etc.
When all the information of the components is stored, the information is stored in a nested structure, and all the information of each component comprises: a unique component code for a component and configuration data for the component. The function or action of each component is different, and the corresponding configuration data is not exactly the same. Such as:
the configuration data of the title bar component can contain information of the content, font color, font size, character centering, background color and the like of the title;
the configuration data of the self-defined button assembly can comprise the title, the type, the behavior after clicking and the like of the button;
further configuration data of the component may be the interface address of the data source, etc.
In the invention, all information of the components is stored separately in a nested structure, especially object data represented by the component codes as keys are stored in independent storage spaces, namely configuration data contained in the components corresponding to the unique component codes of each component are stored in the independent storage spaces. Therefore, independent storage of the configuration data of the designer and the configuration data of the component contained in the designer is achieved, and the required target configuration data can be easily read, written, updated and deleted through the entry parameters of the designer code and the component code, so that the development of a more complex visualization module is supported.
S2: adding a data management module, the data management module comprising: the designer module for initializing, the module for changing designer configuration data, the module for changing component configuration data and the module for removing component configuration data, and the management of the configuration data is realized by calling a target module in the data management module and the designer code or the designer code and the component code transmitted to the target module.
When a designer and configuration data thereof, a component and configuration data thereof need to be added or changed, a data management module is needed, and therefore a data management module is needed to be added, wherein the data management module comprises a designer initialization module, a designer configuration data change module, a component configuration data removal module and the like.
Adding a new designer instance in the visual interface design tool may be accomplished by invoking a designer initialization module to perform initialization. The designer initialization module herein may use, for example, an initConfigMap function, and by this method, the initialization operation of all data of the designer is realized, and the purpose of adding a new designer may also be realized in the initialization process, for example, when the designer initialization module is called to initialize the visual interface design tool, since the data to be initialized includes all the data of the added new designer instance, the purpose of adding a new designer is realized in the data initialization process.
When the configuration data of the designer is updated, the designer code of the designer to be updated is utilized, and the change designer configuration data module is used for completing the updating of the configuration data of the designer corresponding to the designer code, including the addition and the change of the configuration data. The change designer configuration data module can use the updateConfigMap function, for example, to implement the new addition and change of component modules and corresponding parameter configuration items contained in the designer, and other contained information data, such as information data of the current interface theme, list information data of the components, and the like. For example,
Figure BDA0002964421480000101
key represents designer code of the designer;
the state represents a data root node and stores all configuration data;
the configMap represents all configuration data of the designer instance corresponding to the current key.
The content different from the configuration item data of the original designer can realize data updating, and the corresponding configuration data can be automatically added to the configuration item which is not provided by the original designer.
When the configuration data of the component is updated, the component code of the component to be updated and the designer code of the designer where the component to be updated is located are utilized, and the updating of the configuration data of the component, including the addition and the change of the configuration data, is completed by using the component configuration data changing module. The module for changing the component configuration data can use setModuleConfig function, for example, and the corresponding configuration data of the module for newly adding and changing the component is realized through the method. For example,
Figure BDA0002964421480000102
the state represents a data root node and stores all configuration data;
key represents designer code of the designer;
uuid denotes the unique component code for a component, such as "xxx 1", "xxx 2" as mentioned in the above examples;
configMap [ uuid ] represents configuration data of a component corresponding to uuid in the designer instance corresponding to the current key.
The content different from the configuration data of the original component can realize data updating, and the corresponding configuration data can be automatically added to the configuration data which is not available in the original component.
When the component and the configuration data thereof are deleted, the component code of the component to be deleted and the designer code of the designer where the component to be deleted is located are utilized, and the deletion of the component and the configuration data thereof is completed by using a component configuration data removing module. The module for removing the component configuration data may use, for example, a removeConfig function, and delete the component module and its corresponding configuration data is implemented by this method. For example:
Figure BDA0002964421480000111
the state represents a data root node and stores all configuration data;
key represents designer code of the designer;
uuid denotes the unique component code for a component, such as "xxx 1", "xxx 2" as mentioned in the above examples;
whereby a specified component [ uuid ] and its configuration data in a certain designer can be deleted.
As can be seen from the above, if necessary, the target module in the data management module may be called, for example, a module for changing the component configuration data (for example, setModuleConfig function), and the designer code and the component code are transmitted to the target module, so that management operations on the configuration data of the component, such as management operations of adding and modifying, may be implemented. For another example, the designer code is transmitted to the target module by calling, for example, a change designer configuration data module (e.g., updateConfigMap function) in the data management module, so that the management operation on the configuration data of the designer can be realized.
The configuration data management method can realize the management operation of the configuration data in the visual interface design tool.
Fig. 2 is a flowchart of a configuration data management method used in a visual interface design tool according to a second embodiment of the present invention. As shown in fig. 2, the method for managing configuration data used in the visual interface design tool further includes:
s3: constructing a data connector module corresponding to the component, wherein the data connector module comprises an entry parameter, a component configuration parameter field, a get method and a set method, and the entry parameter comprises: the designer code and the component code, the component configuration parameter field stores the configuration data of the current component, and the management of the configuration data is realized through the data connector module, which comprises the following steps:
synchronizing the configuration data of the corresponding component indicated by the entry parameter into the component configuration parameter field by using a get method, thereby realizing reading operation; and
and calling the module for changing the component configuration data by using a set method, and covering the configuration data of the corresponding component indicated by the entry parameter with the configuration data in the component configuration parameter field by using the entry parameter, thereby realizing the write operation.
In order to realize the unified management of the configuration data of different component modules or functional modules, in order to enable a program developer to directly and manually carry out module development work under the conditions of not knowing the working principle of a designer, not paying attention to the processing and storage of the configuration data by the designer, the coupling relation between the configuration data and the like in the component module development process, the configuration data can be managed by constructing a data connector module so as to realize the purpose. The use of the data connector module is illustrated below by way of specific examples, in which the get method and the set method are used.
Figure BDA0002964421480000121
Wherein the entry parameters are: designer code this, component code this, uuid;
the reading mode is state [ ], and the state [ this.code ] transmits the designer code this.code in to read all the configuration data of the current designer (namely, the designer corresponding to the designer code), and then reads all the configuration data of all the components under the current designer through the modeleconfigmap and puts the configuration data into the configMap; and finally, transmitting the component code this.uuid into the configMap through a return configMap [ this.uuid ], and reading the configuration data of the component corresponding to the component code this.uuid.
Figure BDA0002964421480000122
Wherein: value is new configuration data which needs to update the component corresponding to the component code this.uuid;
the var configMap statement functions as: all configuration data of all components of the current designer (i.e., the designer corresponding to the designer code) is acquired.
The role of the configMap [ this.uuid ] ═ value statement is: and writing the new configuration data value into a storage position of the configuration data of the current component (namely the component corresponding to the component code this. uuid) in the component configuration parameter field to update the configuration data of the current component.
the function of this. update ConfigMap ({ key: this. code, configMap: configMap }) statement is: the change designer configuration data module updateConfigMap in the data management module is called in this way, and the configuration data of the current designer is updated by introducing the current designer code.
Similarly, if the modified component configuration data module setModuleConfig in the data management module is called, the configuration data of the corresponding component indicated by the entry parameter (component code this.uuid) is updated by importing the current component code this.uuid.
In addition, when a component and its configuration data need to be newly added to a certain designer, the following method can also be used to implement addition management of the new component and its configuration data. Namely, the configuration data management method used in the visual interface design tool further comprises the following steps:
adding a new component and configuration data thereof for a designer by using a modified component configuration data module, setting a unique component code for the added new component by the designer, introducing a data connector module and hanging the data connector module in the added new component, writing the configuration data of the new component in a component configuration parameter field in the new component, calling the modified component configuration data module by using a set method, and adding the component code of the new component and the configuration data in the component configuration parameter field to a designer corresponding to the designer code by using an entry parameter containing the designer code and the component code of the new component.
As described above, the functionality of the designer may be developed by a programmer to enable each designer to automatically set unique component codes for the components that they contain. Through the steps, the addition management of the new component and the configuration data thereof can be realized.
Based on the first embodiment and the second embodiment, the method for managing configuration data used in a visual interface design tool provided by the invention overcomes the defects of messy configuration data and inconvenience for structural management in the existing visual interface design tool, can support a plurality of designers to cooperate with each other to complete more complicated design tasks because the configuration data is subjected to structural management and the configuration data of different functional modules are uniformly managed, can also use the same standard to integrate the newly added functional modules into the interface design tool, has strong expansibility, is convenient for a newly added team program developer to directly develop modules without knowing the working principle of the designers in the interface design tool, the processing and storage of the designers on the configuration data, the coupling relationship between the configuration data and the like, the development efficiency of subsequent successor personnel is saved.
Fig. 3 is a schematic block diagram of a configuration data management apparatus used in a visual interface design tool according to a third embodiment of the present invention. As shown in fig. 3, a configuration data management apparatus for use in a visual interface design tool according to a third embodiment of the present invention, where the visual interface design tool includes one or more designers, each designer including one or more components, includes:
a data storage area 1 for storing all data of a designer, wherein all data of the designer is stored in a nested storage manner, wherein the all data is stored in a JSON format, comprising: the unique designer code of the designer and the configuration data of the designer corresponding to the code comprise: all information of the components contained in the designer, and other necessary information data other than the component information; all information of each component is stored in a nested structure, and all information of each component comprises: the unique component code of the component and the configuration data of the component corresponding to the component code; wherein the unique designer code for each designer is preset, each designer setting the unique component code for each component it contains;
a data management module 2, the data management module comprising: the designer module for initializing, the module for changing designer configuration data, the module for changing component configuration data and the module for removing component configuration data, and the management of the configuration data is realized by calling a target module in the data management module and the designer code or the designer code and the component code transmitted to the target module.
The designer configuration data changing module is used for adding or changing configuration data of a designer corresponding to the to-be-updated designer code.
The change component configuration data module is used for adding or changing the configuration data of the component to be updated.
The remove component configuration data module is used for deleting the specified component and the configuration data thereof.
The designer initialization module is used for executing configuration data initialization of the designer, and adding a new designer instance in the visual interface design tool is realized by executing the data initialization.
It is clear to those skilled in the art that for the convenience and brevity of description, the specific operation of the apparatus described in the third embodiment above can be explained by referring to the corresponding process in the first embodiment, the example and the related description listed in the first embodiment and the corresponding preferred embodiment, and the operation of the apparatus described in the third embodiment is also applicable, and will not be repeated herein.
In order to realize the unified management of the configuration data of different functional modules and to enable a program developer to directly and directly carry out module development work in the component module development process under the working modes of not knowing the working principle of a designer and not paying attention to the processing, storage and the like of the designer on the configuration data, the aim can be realized by constructing a data connector module to manage the configuration data. Thus, the fourth embodiment of the present invention provides a modified structure regarding the configuration data management apparatus.
Fig. 4 is a schematic block diagram of a configuration data management apparatus used in a visual interface design tool according to a fourth embodiment of the present invention. As shown in fig. 4, a configuration data management apparatus for use in a visualization interface design tool according to a fourth embodiment of the present invention further includes: the data connector module (3) is provided with a data connector,
the data connector module 3 comprises an entry parameter, a component configuration parameter field, a get method and a set method, wherein the entry parameter comprises: the designer code and the component code, the component configuration parameter field stores the configuration data of the current component, and the management of the configuration data is realized through the data connector module, which comprises the following steps:
synchronizing the configuration data of the corresponding component indicated by the entry parameter into the component configuration parameter field by using a get method, thereby realizing reading operation; and
and calling the module for changing the component configuration data by using a set method, and covering the configuration data of the corresponding component indicated by the entry parameter with the configuration data in the component configuration parameter field by using the entry parameter, thereby realizing the write operation.
The designer sets a unique component code for the added new component, introduces a data connector module and hangs the module in the added new component, writes the configuration data of the new component in a component configuration parameter field in the module, calls the module for changing the component configuration data by using a set method, and adds the component code of the new component and the configuration data in the component configuration parameter field to a designer corresponding to the designer code by using an entry parameter containing the designer code and the component code of the new component.
It is clear to those skilled in the art that for the convenience and brevity of description, the specific operation of the apparatus described in the fourth embodiment above can be referred to the corresponding process in the second embodiment above, and the examples and related descriptions listed in the second embodiment above and the corresponding preferred embodiments above are also applicable to explain the operation of the apparatus described in the fourth embodiment above, and will not be repeated here.
Based on the third embodiment and the fourth embodiment, the configuration data management device used in the visual interface design tool provided by the invention overcomes the defects of messy configuration data and inconvenience for structural management in the existing visual interface design tool, can support a plurality of designers to cooperate with each other to complete more complicated design tasks because the configuration data is subjected to structural management and the configuration data of different functional modules are uniformly managed, can also use the same standard to integrate the newly added functional modules into the interface design tool, has strong expansibility, is convenient for a newly added team program developer to directly develop modules without knowing the working principle of the designers in the interface design tool, the processing and storage of the designers on the configuration data, the coupling relationship between the configuration data and the like, the development efficiency of subsequent successor personnel is saved.
A configuration data management method and apparatus for use in a visualization interface design tool according to exemplary embodiments of the present application has been described above with reference to fig. 1 to 6. However, it should be understood that: the apparatuses and unit modules thereof shown in fig. 3 and 4 may be respectively configured as software, hardware, firmware, or any combination thereof to perform a specific function. For example, these means or unit modules may correspond to dedicated integrated circuits, to pure software code, or to a combination of software and hardware. Furthermore, one or more functions implemented by these means or unit modules may also be uniformly executed by components in a physical entity device (e.g., processor, client or server, etc.).
Further, the above-described configuration data management method may be realized by a program recorded on a computer-readable storage medium, for example, according to the exemplary embodiments of the present application, a computer-readable storage medium may be provided, on which a computer program is recorded that, when executed by a processor, realizes the method as described in the first embodiment or a combination thereof with the respective preferred embodiments. Furthermore, a computer-readable storage medium may also be provided, wherein a computer program is recorded on the computer-readable storage medium, which when executed by a processor implements the method according to the second embodiment or the combination thereof with the respective preferred embodiments.
The computer program in the computer-readable storage medium may be executed in an environment deployed in a computer device such as a client, a host, a proxy device, a server, etc., and it should be noted that the computer program may also be used to perform additional steps other than or in addition to the above steps, and the content of the additional steps and further processing is mentioned in the description of the related method with reference to fig. 1 and 2, and thus will not be described again here to avoid repetition.
Further, the above-described configuration data management method may also be realized by a program recorded on a computing device. The computing device comprises a storage means and a processor, the storage means having stored therein a set of computer-executable instructions which, when executed by the processor, perform the method steps as described in the first embodiment or in combination with the respective preferred embodiments; or to carry out the method steps as described in the second embodiment or a combination thereof with the respective preferred embodiments.
In particular, the computing devices may be deployed in servers or clients, as well as on node devices in a distributed network environment. Further, the computing device may be a PC computer, tablet device, personal digital assistant, smart phone, web application, or other device capable of executing the set of instructions described above.
The computing device need not be a single computing device, but can be any device or collection of circuits capable of executing the instructions (or sets of instructions) described above, individually or in combination. The computing device may also be part of an integrated control system or system manager, or may be configured as a portable electronic device that interfaces with local or remote (e.g., via wireless transmission).
In the computing device, the processor may include a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), a programmable logic device, a special purpose processor system, a microcontroller, or a microprocessor. By way of example, and not limitation, processors may also include analog processors, digital processors, microprocessors, multi-core processors, processor arrays, network processors, and the like.
Some of the operations described in the method according to the exemplary embodiments of the present application may be implemented by software, some of the operations may be implemented by hardware, and furthermore, the operations may be implemented by a combination of hardware and software.
The processor may execute instructions or code stored in one of the memory components, which may also store data. Instructions and data may also be transmitted and received over a network via a network interface device, which may employ any known transmission protocol.
The memory component may be integral to the processor, e.g., having RAM or flash memory disposed within an integrated circuit microprocessor or the like. Further, the storage component may comprise a stand-alone device, such as an external disk drive, storage array, or any other storage device usable by a database system. The storage component and the processor may be operatively coupled or may communicate with each other, such as through an I/O port, a network connection, etc., so that the processor can read files stored in the storage component.
Further, the computing device may also include a video display (such as a liquid crystal display) and a user interaction interface (such as a keyboard, mouse, touch input device, etc.). All components of the computing device may be connected to each other via a bus and/or a network.
The operations involved in the methods according to the exemplary embodiments of the present application may be described as various interconnected or coupled functional blocks or functional diagrams. However, these functional blocks or functional diagrams may be equally integrated into a single logic device or operated on by non-exact boundaries.
While exemplary embodiments of the present application are described above, it should be understood that: the above description is exemplary only and not exhaustive. The present application is not limited to the disclosed exemplary embodiments, and many modifications and variations will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the application. Therefore, the protection scope of the present application shall be subject to the scope of the claims.

Claims (10)

1. A configuration data management method for use in a visual interface design tool, wherein the visual interface design tool comprises one or more designers, each designer comprising one or more components, the configuration data management method comprising:
saving all data of a designer in a nested storage mode, wherein the all data are saved in a JSON format, and the method comprises the following steps: the unique designer code of the designer and the configuration data of the designer corresponding to the code comprise: all information of the components contained in the designer, and other necessary information data other than the component information; all information of each component is stored in a nested structure, and all information of each component comprises: the unique component code of the component and the configuration data of the component corresponding to the component code; wherein the unique designer code for each designer is preset, each designer setting the unique component code for each component it contains;
adding a data management module, the data management module comprising: the designer module for initializing, the module for changing designer configuration data, the module for changing component configuration data and the module for removing component configuration data, and the management of the configuration data is realized by calling a target module in the data management module and the designer code or the designer code and the component code transmitted to the target module.
2. The method of claim 1, wherein the method further comprises: constructing a data connector module corresponding to the component, wherein the data connector module comprises an entry parameter, a component configuration parameter field, a get method and a set method, and the entry parameter comprises: the designer code and the component code, the component configuration parameter field stores the configuration data of the current component, and the management of the configuration data is realized through the data connector module, which comprises the following steps:
synchronizing the configuration data of the corresponding component indicated by the entry parameter into the component configuration parameter field by using a get method, thereby realizing reading operation; and
and calling the module for changing the component configuration data by using a set method, and covering the configuration data of the corresponding component indicated by the entry parameter with the configuration data in the component configuration parameter field by using the entry parameter, thereby realizing the write operation.
3. The method of claim 2, wherein the method further comprises: adding a new component and configuration parameters thereof for a designer by using a modified component configuration data module, setting a unique component code for the added new component by the designer, introducing a data connector module and hanging the data connector module in the added new component, writing the configuration data of the new component in a component configuration parameter field in the new component, calling the modified component configuration data module by using a set method, and adding the component code of the new component and the configuration data in the component configuration parameter field to the designer corresponding to the designer code by using an entry parameter containing the designer code and the component code of the new component.
4. The method of claim 1, wherein the method further comprises:
when the configuration data of the designer is updated, the designer code of the designer to be updated is utilized, and the change designer configuration data module is used for completing the updating of the configuration data of the designer corresponding to the designer code, including the addition and the change of the configuration data;
when the configuration data of the component is updated, utilizing the component code of the component to be updated and the designer code of the designer where the component to be updated is located, and completing the updating of the configuration data of the component by using a component configuration data changing module, wherein the updating comprises the addition and the change of the configuration data;
when the component and the configuration data thereof are deleted, the component code of the component to be deleted and the designer code of the designer where the component to be deleted is located are utilized, and the deletion of the component and the configuration data thereof is completed by using a component configuration data removing module.
5. The method of claim 1, wherein the method further comprises: adding a new designer instance in the visual interface design tool is accomplished by invoking a designer initialization module to perform initialization.
6. A configuration data management apparatus for use in a visual interface design tool, wherein the visual interface design tool comprises one or more designers, each designer comprising one or more components, the configuration data management apparatus comprising:
a data storage area for storing all data of the designer, wherein all data of the designer is stored in a nested storage manner, wherein all data is stored in a JSON format, comprising: the unique designer code of the designer and the configuration data of the designer corresponding to the code comprise: all information of the components contained in the designer, and other necessary information data other than the component information; all information of each component is stored in a nested structure, and all information of each component comprises: the unique component code of the component and the configuration data of the component corresponding to the component code; wherein the unique designer code for each designer is preset, each designer setting the unique component code for each component it contains;
a data management module, the data management module comprising: the designer module for initializing, the module for changing designer configuration data, the module for changing component configuration data and the module for removing component configuration data, and the management of the configuration data is realized by calling a target module in the data management module and the designer code or the designer code and the component code transmitted to the target module.
7. The apparatus of claim 6, wherein the apparatus further comprises: a data connector module comprising an entry parameter, a component configuration parameter field, a get method, and a set method, wherein the entry parameter comprises: the designer code and the component code, the component configuration parameter field stores the configuration data of the current component, and the management of the configuration data is realized through the data connector module, which comprises the following steps:
synchronizing the configuration data of the corresponding component indicated by the entry parameter into the component configuration parameter field by using a get method, thereby realizing reading operation; and
and calling the module for changing the component configuration data by using a set method, and covering the configuration data of the corresponding component indicated by the entry parameter with the configuration data in the component configuration parameter field by using the entry parameter, thereby realizing the write operation.
8. The apparatus of claim 7, wherein the change component configuration data module is further configured to add a new component and its configuration parameters to a designer, the designer sets a unique component code for the added new component, introduces a data connector module and hangs the new component, writes configuration data of the new component in a component configuration parameter field therein, calls the change component configuration data module using a set method, and adds the component code of the new component and the configuration data in the component configuration parameter field to the designer corresponding to the designer code by using an entry parameter including the designer code and the component code of the new component.
9. The apparatus of claim 6, wherein the change designer configuration data module is configured to add or change configuration data of a designer corresponding to the to-be-updated designer code;
the change component configuration data module is used for adding or changing the configuration data of the component to be updated;
the remove component configuration data module is used for deleting the specified component and the configuration data thereof.
10. The apparatus of claim 6, wherein a designer initialization module is to perform configuration data initialization of a designer and to enable adding a new designer instance in the visual interface design tool by performing data initialization.
CN202110246925.4A 2021-03-05 2021-03-05 Configuration data management method and device used in interface design tool Active CN113031947B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110246925.4A CN113031947B (en) 2021-03-05 2021-03-05 Configuration data management method and device used in interface design tool

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110246925.4A CN113031947B (en) 2021-03-05 2021-03-05 Configuration data management method and device used in interface design tool

Publications (2)

Publication Number Publication Date
CN113031947A true CN113031947A (en) 2021-06-25
CN113031947B CN113031947B (en) 2024-06-18

Family

ID=76468303

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110246925.4A Active CN113031947B (en) 2021-03-05 2021-03-05 Configuration data management method and device used in interface design tool

Country Status (1)

Country Link
CN (1) CN113031947B (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114942819A (en) * 2022-07-22 2022-08-26 浙江中控技术股份有限公司 Data field processing method, electronic device and computer readable storage medium

Citations (23)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20050198285A1 (en) * 2004-01-27 2005-09-08 Sun Microsystems, Inc. Overload management in an application-based server
CN102737128A (en) * 2012-06-20 2012-10-17 深圳市远行科技有限公司 Dynamic webpage processing method and device based on browser
CN103581123A (en) * 2012-07-20 2014-02-12 中兴通讯股份有限公司 Processing method, processing device, release method and release system of network data
CN104572096A (en) * 2014-12-29 2015-04-29 中国科学院计算机网络信息中心 Multi-model data visualization development method based on WEB and platform thereof
CN105760440A (en) * 2016-02-02 2016-07-13 广州市科南软件有限公司 Achievement method and system of online form designer
US20170228552A1 (en) * 2016-02-08 2017-08-10 Hytrust, Inc. Harmonized governance system for heterogeneous agile information technology environments
CN109542878A (en) * 2018-11-21 2019-03-29 广州华多网络科技有限公司 A kind of list creation techniques and device
CN109614100A (en) * 2018-10-26 2019-04-12 阿里巴巴集团控股有限公司 Page display method, device, server, front end and storage medium
CN110688117A (en) * 2019-09-30 2020-01-14 厦门荆艺软件有限公司 Interface designer and platform based on JavaWeb and page configuration method thereof
CN110968317A (en) * 2019-12-02 2020-04-07 广州鲁邦通物联网科技有限公司 Method and system for automatically generating vue page component through UCI/USI configuration file
CN111045655A (en) * 2019-12-18 2020-04-21 广州市百果园信息技术有限公司 Page rendering method and device, rendering server and storage medium
CN111241454A (en) * 2020-01-21 2020-06-05 优信拍(北京)信息科技有限公司 Method, system and device for generating webpage code
CN111367686A (en) * 2020-02-28 2020-07-03 平安医疗健康管理股份有限公司 Service interface calling method and device, computer equipment and storage medium
CN111488148A (en) * 2020-03-09 2020-08-04 北京健康之家科技有限公司 Webpage source code generation method and device
CN111506298A (en) * 2020-03-10 2020-08-07 南京行者易智能交通科技有限公司 Method for carrying out interface visual configuration based on JSON object
CN111538498A (en) * 2020-04-14 2020-08-14 北京宝兰德软件股份有限公司 Application creation method and device, electronic equipment and storage medium
CN111930381A (en) * 2020-09-21 2020-11-13 知学云(北京)科技有限公司 Personalized page configuration method supporting SaaS multi-tenant system
CN111930378A (en) * 2020-08-11 2020-11-13 上海亿锎智能科技有限公司 Method, device and system for realizing Web end project form designer
CN111966345A (en) * 2020-08-21 2020-11-20 西安寰宇卫星测控与数据应用有限公司 Drag-type webpage design method and device, computer equipment and storage medium
CN111984248A (en) * 2019-05-22 2020-11-24 腾讯科技(深圳)有限公司 Page editing method and device, storage medium and electronic device
CN112130856A (en) * 2020-09-29 2020-12-25 重庆紫光华山智安科技有限公司 Method, system, medium and terminal for generating front-end visual interface with strong expansibility
CN112416339A (en) * 2020-02-17 2021-02-26 上海哔哩哔哩科技有限公司 Page development method and device and computer equipment
CN112433727A (en) * 2020-12-10 2021-03-02 建信金融科技有限责任公司 User interface configuration method and device, electronic equipment and readable storage medium

Patent Citations (23)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20050198285A1 (en) * 2004-01-27 2005-09-08 Sun Microsystems, Inc. Overload management in an application-based server
CN102737128A (en) * 2012-06-20 2012-10-17 深圳市远行科技有限公司 Dynamic webpage processing method and device based on browser
CN103581123A (en) * 2012-07-20 2014-02-12 中兴通讯股份有限公司 Processing method, processing device, release method and release system of network data
CN104572096A (en) * 2014-12-29 2015-04-29 中国科学院计算机网络信息中心 Multi-model data visualization development method based on WEB and platform thereof
CN105760440A (en) * 2016-02-02 2016-07-13 广州市科南软件有限公司 Achievement method and system of online form designer
US20170228552A1 (en) * 2016-02-08 2017-08-10 Hytrust, Inc. Harmonized governance system for heterogeneous agile information technology environments
CN109614100A (en) * 2018-10-26 2019-04-12 阿里巴巴集团控股有限公司 Page display method, device, server, front end and storage medium
CN109542878A (en) * 2018-11-21 2019-03-29 广州华多网络科技有限公司 A kind of list creation techniques and device
CN111984248A (en) * 2019-05-22 2020-11-24 腾讯科技(深圳)有限公司 Page editing method and device, storage medium and electronic device
CN110688117A (en) * 2019-09-30 2020-01-14 厦门荆艺软件有限公司 Interface designer and platform based on JavaWeb and page configuration method thereof
CN110968317A (en) * 2019-12-02 2020-04-07 广州鲁邦通物联网科技有限公司 Method and system for automatically generating vue page component through UCI/USI configuration file
CN111045655A (en) * 2019-12-18 2020-04-21 广州市百果园信息技术有限公司 Page rendering method and device, rendering server and storage medium
CN111241454A (en) * 2020-01-21 2020-06-05 优信拍(北京)信息科技有限公司 Method, system and device for generating webpage code
CN112416339A (en) * 2020-02-17 2021-02-26 上海哔哩哔哩科技有限公司 Page development method and device and computer equipment
CN111367686A (en) * 2020-02-28 2020-07-03 平安医疗健康管理股份有限公司 Service interface calling method and device, computer equipment and storage medium
CN111488148A (en) * 2020-03-09 2020-08-04 北京健康之家科技有限公司 Webpage source code generation method and device
CN111506298A (en) * 2020-03-10 2020-08-07 南京行者易智能交通科技有限公司 Method for carrying out interface visual configuration based on JSON object
CN111538498A (en) * 2020-04-14 2020-08-14 北京宝兰德软件股份有限公司 Application creation method and device, electronic equipment and storage medium
CN111930378A (en) * 2020-08-11 2020-11-13 上海亿锎智能科技有限公司 Method, device and system for realizing Web end project form designer
CN111966345A (en) * 2020-08-21 2020-11-20 西安寰宇卫星测控与数据应用有限公司 Drag-type webpage design method and device, computer equipment and storage medium
CN111930381A (en) * 2020-09-21 2020-11-13 知学云(北京)科技有限公司 Personalized page configuration method supporting SaaS multi-tenant system
CN112130856A (en) * 2020-09-29 2020-12-25 重庆紫光华山智安科技有限公司 Method, system, medium and terminal for generating front-end visual interface with strong expansibility
CN112433727A (en) * 2020-12-10 2021-03-02 建信金融科技有限责任公司 User interface configuration method and device, electronic equipment and readable storage medium

Non-Patent Citations (5)

* Cited by examiner, † Cited by third party
Title
HUSSACHAI PURIPUNPINYO: "A framework for building type-safe configurations for JVM using code generation techniques", 《2017 SYSTEMS AND INFORMATION ENGINEERING DESIGN SYMPOSIUM (SIEDS)》, 1 June 2017 (2017-06-01), pages 1 - 8 *
刘一田: "可视化Web设计器", 《计算机***应用》, 15 October 2015 (2015-10-15), pages 80 - 84 *
徐小夕: "如何基于jsoneditor二次封装一个可实时预览的json编辑器组件?(react版)", pages 1 - 9, Retrieved from the Internet <URL:《https://zhuanlan.zhihu.com/p/104256346》> *
王宁: "面向大屏的图表展示***设计与实现", 《中国优秀硕士学位论文全文数据库 (信息科技辑)》, 15 February 2020 (2020-02-15), pages 138 - 904 *
耿森: "面向雷达目标识别应用的算法可视化管理平台的设计与实现", 《万方》, 7 May 2020 (2020-05-07), pages 1 - 67 *

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114942819A (en) * 2022-07-22 2022-08-26 浙江中控技术股份有限公司 Data field processing method, electronic device and computer readable storage medium
CN114942819B (en) * 2022-07-22 2022-11-11 浙江中控技术股份有限公司 Data field processing method, electronic device and computer readable storage medium

Also Published As

Publication number Publication date
CN113031947B (en) 2024-06-18

Similar Documents

Publication Publication Date Title
US6466973B2 (en) Method and system for managing storage devices over a network
EP0339220A2 (en) File management system for a computer
CN109471626B (en) Page logic structure, page generation method, page data processing method and device
US20080098309A1 (en) Managing virtual machines and hosts by property
KR101512010B1 (en) Combining interfaces of shell applications and sub-applications
JP2002511161A (en) Emulator for visual display object file and method of operation
JP2005346722A (en) Method and apparatus for generating form using form type
CA2564389C (en) Multi-source, multi-destination data transfers
KR20080106550A (en) Declarative definition enabling graphical designer reuse
CN110968305A (en) Applet visualization generation method, device, equipment and storage medium
CA2679494C (en) Consolidating related task data in process management solutions
US20120079009A1 (en) Method and apparatus for choosing resources based on context and inheritance
EP3522004A2 (en) Code execution and data processing pipeline
CN112464120A (en) Data visualization display method and device, electronic equipment and storage medium
CN114036443A (en) Page generation method and device
US7337407B1 (en) Automatic application programming interface (API) generation for functional blocks
CN114489648A (en) Page generation method, system, terminal and medium
CN113031947B (en) Configuration data management method and device used in interface design tool
US20090248740A1 (en) Database form and report creation and reuse
CN111191174A (en) Method, system and device for integrating Spanish Bitums
CN112286557A (en) Method and device for updating code content in non-covering mode
CN115145559A (en) Configuration management method, device and equipment based on Flutter
JP2012133567A (en) Information processor, control method thereof, and program
CN111813454A (en) Electronic device, startup picture display method and computer readable storage medium
JP7473007B2 (en) DISPLAY CONTROL SYSTEM, DISPLAY CONTROL METHOD, AND DISPLAY CONTROL PROGRAM

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant