CN113031947B - 在界面设计工具中使用的配置数据管理方法和装置 - Google Patents
在界面设计工具中使用的配置数据管理方法和装置 Download PDFInfo
- Publication number
- CN113031947B CN113031947B CN202110246925.4A CN202110246925A CN113031947B CN 113031947 B CN113031947 B CN 113031947B CN 202110246925 A CN202110246925 A CN 202110246925A CN 113031947 B CN113031947 B CN 113031947B
- Authority
- CN
- China
- Prior art keywords
- component
- designer
- configuration data
- code
- data
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 88
- 238000013461 design Methods 0.000 title claims abstract description 65
- 238000013523 data management Methods 0.000 title claims abstract description 61
- 238000007726 management method Methods 0.000 claims abstract description 31
- 230000000007 visual effect Effects 0.000 claims description 44
- 230000008859 change Effects 0.000 claims description 10
- 230000004048 modification Effects 0.000 claims description 7
- 238000012986 modification Methods 0.000 claims description 7
- 230000006870 function Effects 0.000 description 14
- 238000011161 development Methods 0.000 description 11
- 238000010586 diagram Methods 0.000 description 8
- 238000012545 processing Methods 0.000 description 7
- 230000008569 process Effects 0.000 description 6
- 238000004590 computer program Methods 0.000 description 4
- 230000008878 coupling Effects 0.000 description 4
- 238000010168 coupling process Methods 0.000 description 4
- 238000005859 coupling reaction Methods 0.000 description 4
- 230000007547 defect Effects 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 238000012217 deletion Methods 0.000 description 2
- 230000037430 deletion Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000008676 import Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/44—Encoding
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
本发明提供了一种在界面设计工具中使用的配置数据管理方法和装置。该方法包括：以嵌套存储方式保存设计器的全部数据，其中所述全部数据是以JSON格式进行保存的，包括：设计器的唯一设计器编码以及该编码对应的设计器的配置数据，该设计器的配置数据包括：该设计器所含组件的全部信息、和除了所述组件信息之外的其他必要信息数据；每个组件的全部信息以嵌套结构进行存储，其内容包括：组件的唯一组件编码和该组件编码对应的组件的配置数据；其中每个设计器的所述唯一设计器编码和每个组件的所述唯一组件编码都是预先设置的；添加数据管理模块，通过调用该数据管理模块来实现对配置数据的管理。
Description
技术领域
本发明涉及计算机技术领域，具体而言涉及一种在界面设计工具中使用的配置数据管理方法和装置。
背景技术
在软件开发工作中，通过可视化的界面设计工具来设计界面，已经成为提高界面设计效率和界面编程效率的有效方式之一。程序开发人员可以通过可视化的界面设计工具来编排组件，并输入配置数据，然后基于配置数据可以动态渲染成可用的界面，还能够自动生成相应代码。
但是，可视化的界面设计工具的配置数据的处理较为复杂，业务模块之间的解耦要求较高，目前现有的可视化的界面设计工具所用的配置数据管理方法普遍存在的问题是：
1)配置数据杂乱且不便于进行结构化的管理；
2)仅支持单个设计器，这使得一个页面难以集成多个设计器来相互协作完成更加复杂的设计任务；
3)对于不同功能模块的配置数据没有统一的管理方式，无法使用同一标准来将新增的功能模块集成到界面设计工具中，扩展性较差。
发明内容
本发明的目的在于提供一种在界面设计工具中使用的配置数据管理方法和装置，以改善上述问题。
本发明的第一实施例提供了一种在可视化界面设计工具中使用的配置数据管理方法，其中所述可视化界面设计工具包含一个或多个设计器，每个设计器包含一个或多个组件，所述配置数据管理方法包括：
以嵌套存储方式保存设计器的全部数据，其中所述全部数据是以JSON格式进行保存的，包括：设计器的唯一设计器编码以及该编码对应的设计器的配置数据，该设计器的配置数据包括：该设计器所含组件的全部信息、和除了所述组件信息之外的其他必要信息数据；每个组件的全部信息以嵌套结构进行存储，每个组件的全部信息包括：组件的唯一组件编码和该组件编码对应的组件的配置数据；其中每个设计器的所述唯一设计器编码是预先设置的，每个设计器为其所包含的每个组件设置所述的唯一组件编码；
添加数据管理模块，该数据管理模块包括：设计器初始化模块、更改设计器配置数据模块、更改组件配置数据模块和移除组件配置数据模块，通过调用该数据管理模块中的目标模块和向其传送的所述设计器编码或者所述设计器编码和所述组件编码二者来实现对配置数据的管理。
其中，该方法进一步包括：构建对应组件的数据连接器模块，该数据连接器模块包括入口参数、组件配置参数字段、get方法与set方法，其中所述入口参数包括：所述设计器编码和所述组件编码，所述组件配置参数字段存储当前组件的配置数据，通过该数据连接器模块实现对所述配置数据的管理，其包括：
使用get方法，利用入口参数将该入口参数所指示的相应组件的配置数据同步到所述组件配置参数字段中，从而实现读取操作；和
使用set方法来调用所述更改组件配置数据模块，利用入口参数将所述组件配置参数字段中的配置数据对该入口参数所指示的相应组件的配置数据进行覆盖，从而实现写入操作。
其中，该方法进一步包括：使用更改组件配置数据模块来为某个设计器添加新组件及其配置参数，该设计器为该添加的新组件设置唯一的组件编码，引入数据连接器模块并挂在该添加的新组件中，在其内的组件配置参数字段中写入该新组件的配置数据，使用set方法来调用所述更改组件配置数据模块，利用包含了该设计器编码和该新组件的组件编码的入口参数，将该新组件的组件编码以及所述组件配置参数字段中的所述配置数据添加到所述设计器编码对应的设计器中。
其中，该方法进一步包括：
在更新设计器的配置数据时，利用待更新设计器的设计器编码，并使用该更改设计器配置数据模块来完成对该设计器编码所对应的设计器的配置数据的更新，包括配置数据的添加和更改；
在更新组件的配置数据时，利用该待更新组件的组件编码和该待更新组件所在设计器的设计器编码，并使用更改组件配置数据模块来完成对组件的配置数据的更新，包括配置数据的添加和更改；
在删除组件及其配置数据时，利用该待删除组件的组件编码和该待删除组件所在设计器的设计器编码，并使用移除组件配置数据模块来完成对组件及其配置数据的删除。
其中，该方法进一步包括：在所述可视化界面设计工具中添加新设计器实例是通过调用设计器初始化模块执行初始化来实现添加。
本发明的第二实施例提供了一种在可视化界面设计工具中使用的配置数据管理装置，其中所述可视化界面设计工具包含一个或多个设计器，每个设计器包含一个或多个组件，该配置数据管理装置包括：
用于保存设计器的全部数据的数据存储区，其中设计器的全部数据以嵌套存储方式保存，其中所述全部数据是以JSON格式进行保存的，包括：设计器的唯一设计器编码以及该编码对应的设计器的配置数据，该设计器的配置数据包括：该设计器所含组件的全部信息、和除了所述组件信息之外的其他必要信息数据；每个组件的全部信息以嵌套结构进行存储，每个组件的全部信息包括：组件的唯一组件编码和该组件编码对应的组件的配置数据；其中每个设计器的所述唯一设计器编码是预先设置的，每个设计器为其所包含的每个组件设置所述的唯一组件编码；
数据管理模块，该数据管理模块包括：设计器初始化模块、更改设计器配置数据模块、更改组件配置数据模块和移除组件配置数据模块，通过调用该数据管理模块中的目标模块和向其传送的所述设计器编码或者所述设计器编码和所述组件编码二者来实现对配置数据的管理。
其中，该装置进一步包括：数据连接器模块，该数据连接器模块包括入口参数、组件配置参数字段、get方法与set方法，其中所述入口参数包括：所述设计器编码和所述组件编码，所述组件配置参数字段存储当前组件的配置数据，通过该数据连接器模块实现对所述配置数据的管理，其包括：
使用get方法，利用入口参数将该入口参数所指示的相应组件的配置数据同步到所述组件配置参数字段中，从而实现读取操作；和
使用set方法来调用所述更改组件配置数据模块，利用入口参数将所述组件配置参数字段中的配置数据对该入口参数所指示的相应组件的配置数据进行覆盖，从而实现写入操作。
其中，所述更改组件配置数据模块还用于为某个设计器添加新组件及其配置参数，该设计器为该添加的新组件设置唯一的组件编码，引入数据连接器模块并挂在该添加的新组件中，在其内的组件配置参数字段中写入该新组件的配置数据，使用set方法来调用所述更改组件配置数据模块，利用包含了该设计器编码和该新组件的组件编码的入口参数，将该新组件的组件编码以及所述组件配置参数字段中的所述配置数据添加到所述设计器编码对应的设计器中。
其中，更改设计器配置数据模块用于添加或更改待更新设计器编码所对应的设计器的配置数据；
更改组件配置数据模块用于添加或更改待更新组件的配置数据；
移除组件配置数据模块用于删除指定的组件及其配置数据。
其中，设计器初始化模块用于执行设计器的配置数据初始化，并且通过执行数据初始化实现在所述可视化界面设计工具中添加新设计器实例。
根据本发明提供的一种在界面设计工具中使用的配置数据管理方法和装置，改善了现有的可视化的界面设计工具中配置数据杂乱且不便于进行结构化管理的缺陷，由于对配置数据进行了结构化管理和不同功能模块的配置数据进行了统一管理，因此可以支持多个设计器来相互协作完成更加复杂的设计任务，并且还能够使用同一标准来将新增的功能模块集成到界面设计工具中，扩展性强，便于新加入团队的程序开发人员直接上手进行模块开发工作，而无需先去了解界面设计工具中的设计器的工作原理、设计器对配置数据的处理和存放、配置数据之间的耦合关系等，节省了后续接替人员的开发效率。
附图说明
图1是本发明第一实施例提供的在可视化界面设计工具中使用的配置数据管理方法的流程图；
图2是本发明第二实施例提供的在可视化界面设计工具中使用的配置数据管理方法的流程图；
图3是本发明第三实施例提供的在可视化界面设计工具中使用的配置数据管理装置的示意性框图
图4是本发明第四实施例提供的在可视化界面设计工具中使用的配置数据管理装置的示意性框图；
图5是示例性的包含设计器的图形界面配置页面的示意图；
图6是示例性的包含设计器及相应组件的图形界面配置页面的示意图。
具体实施方式
下面将结合具体实施例和附图，对本发明提出的技术方案进行清楚、完整地描述，显然所描述的示例性实施例仅仅出于说明目的而非限定。
图1是本发明第一实施例提供的一种在可视化界面设计工具中使用的配置数据管理方法的流程图。如图1所示，本发明第一实施例提供的一种在可视化界面设计工具中使用的配置数据管理方法，其中所述可视化界面设计工具包含一个或多个设计器，每个设计器包含一个或多个组件，所述配置数据管理方法包括：
S1：以嵌套存储方式保存设计器的全部数据，其中所述全部数据是以JSON格式进行保存的，包括：设计器的唯一设计器编码以及该编码对应的设计器的配置数据，该设计器的配置数据包括：该设计器所含组件的全部信息、和除了所述组件信息之外的其他必要信息数据；每个组件的全部信息以嵌套结构进行存储，每个组件的全部信息包括：组件的唯一组件编码和该组件的配置数据；其中每个设计器的所述唯一设计器编码是预先设置的，每个设计器为其所包含的每个组件设置所述的唯一组件编码。
其中，程序开发人员开发上述的设计器时，可以给每个设计器赋予能够为其所包含的组件设置唯一的组件编码的功能，包括能够为新增加的组件设置唯一的组件编码。
可视化的界面设计工具可以包括有图形界面配置页面，在该设计工具显示的同一页面上能够设计多个页面或多个功能时，该界面设计工具会包含有多个设计器。例如，一个界面设计工具实例(如图形界面配置页面)可以包含列表页、表单页、详情页、导出和导入等多个功能模块，并且可以为这些功能模块分别提供配置操作、动态渲染和相应的代码生成功能，每一个功能模块对应着一个设计器，因此，在这个例子中，该界面设计工具包含了5个设计器，列表页设计器、表单页设计器、详情页设计器、导出设计器、和导入设计器。这样，需要为所述可视化界面设计工具中的每个设计器设置唯一的设计器编码，可以由程序开发人员为每个设计器设置唯一的设计器编码，例如，可以将列表页的设计器编码设置为“listPage”。点击设计页面上的“列表页”按钮时会显示多个组件模块和相应的参数配置项，如图5和6所示的那样。为了对不同的组件进行区分和查询，需要为每个设计器所包含的组件设置唯一的组件编码。
可以通过程序开发人员开发设计器的功能以使每个设计器能够为其所包含的所有组件自动设置唯一的组件编码。也可以由程序开发人员为每个设计器所包含的组件人工设置唯一的组件编码。
下面通过JSON格式的实例来具体说明构建设计器的配置数据的嵌套存储方式。
在该例子中，设计器的唯一设计器编码是“listPage”。“moduleConfigMap”是键存储值，其作用类似于指针，用于指明该设计器listPage所包含的所有组件及其配置信息的存储位置信息。大括号里的“xxx1”和“xxx2”是组件的组件编号，xxx1后面的大括号里记录了该组件编码xxx1对应的组件所包含的配置数据，例如组件编码为“xxx1”的组件模块的配置数据包含有“name”:“zhangsan”；xxx2后面的大括号里记录了该组件编码xxx2对应的组件所包含的配置数据，例如组件编码为“xxx1”的组件模块的配置数据包含有“title”:“demo”。“xxx1”和“xxx2”也都是键存储值，其作用类似于指针，用于分别指明各自的配置数据的存储位置信息，可以通过“xxx1”和“xxx2”分别找到各自的配置数据。通过这个实例可以看出，组件的数据结构以嵌套在设计器的数据结构内的方式进行存储。
此外，设计器的配置数据除了包含组件模块和相应的配置数据之外，还可以包含除了所述组件信息之外的其他必要信息数据，例如可以包括用于表示设计器的当前界面主题的信息数据、组件的列表信息数据，还可以包括设计器中当前激活的组件。
下面通过JSON格式的列表页设计器实例来具体说明。
通过分析上述实例可知，本发明的技术方案是首先以嵌套存储方式保存设计器的全部数据，以JSON格式进行保存设计器的全部数据。设计器的全部数据包括：设计器的唯一设计器编码以及该编码对应的设计器的配置数据。而设计器的配置数据包括：该设计器所含组件的全部信息、和除了所述组件信息之外的其他必要信息数据。在上述的实例中，设计器包含的组件有“xxx1”和“xxx2”，除了所述组件信息之外的其他必要信息数据包括：当前激活的组件、当前设计器界面的主题、当前设计器所含组件的列表，当然还可以有以其他键值来存储当前设计器的其他信息等。
而在保存组件的全部信息时，是以嵌套结构进行存储的，每个组件的全部信息包括：组件的唯一组件编码和该组件的配置数据。每个组件的功能或作用不同，相应的配置数据也不完全相同。比如：
标题栏组件的配置数据可以包含标题的内容、字体颜色、字体大小、文字居中、背景色等信息；
自定义按钮组件的配置数据可以包含按钮的标题、类型、点击后的行为等；
还有的组件的配置数据可以是数据源的接口地址等。
在本发明里，通过以嵌套结构进行存储的方式将组件的全部信息进行单独存储，尤其是以组件编码为键所表示的对象数据都被存储在独立的存储空间中，即每个组件的唯一组件编码对应的该组件所包含的配置数据都是存储在独立的存储空间中。这样，对设计器的配置数据和该设计器所包含的组件的配置数据实现独立保存，并通过设计器编码和组件编码的入口参数很容易对所需要的目标配置数据进行读取、写入、更新和删除，有利于支持更加复杂的可视化模块开发。
S2：添加数据管理模块，该数据管理模块包括：设计器初始化模块、更改设计器配置数据模块、更改组件配置数据模块和移除组件配置数据模块，通过调用该数据管理模块中的目标模块和向其传送的所述设计器编码或者所述设计器编码和所述组件编码二者来实现对配置数据的管理。
在需要添加或更改设计器及其配置数据、组件及其配置数据时，需要用到数据管理模块，因此需要添加数据管理模块，其包含了设计器初始化模块、更改设计器配置数据模块、更改组件配置数据模块和移除组件配置数据模块等。
在所述可视化界面设计工具中添加新设计器实例可以通过调用设计器初始化模块执行初始化来实现添加。这里的设计器初始化模块例如可以使用initConfigMap函数，通过该方法实现对设计器的全部数据的初始化操作，还可以在初始化过程中实现添加新设计器的目的，例如调用设计器初始化模块对所述可视化界面设计工具执行初始化时，由于需要初始化的数据包含了添加的新设计器实例的全部数据，因此在数据初始化过程中就实现了添加新的设计器的目的。
在更新设计器的配置数据时，利用待更新设计器的设计器编码，并使用该更改设计器配置数据模块来完成对该设计器编码所对应的设计器的配置数据的更新，包括配置数据的添加和更改。这里的更改设计器配置数据模块例如可以使用updateConfigMap函数，通过该方法实现新加和更改设计器包含的组件模块和相应的参数配置项、以及包含的其它信息数据，例如当前界面主题的信息数据、组件的列表信息数据等。例如，
key表示设计器的设计器编码；
state表示数据根节点，存储着所有配置数据；
configMap表示当前key所对应的设计器实例的全部配置数据。
与原来设计器的配置项数据不同的内容可实现数据更新，对于原来设计器没有的配置项，可以实现自动添加相应的配置数据。
在更新组件的配置数据时，利用该待更新组件的组件编码和该待更新组件所在设计器的设计器编码，并使用更改组件配置数据模块来完成对组件的配置数据的更新，包括配置数据的添加和更改。这里的更改组件配置数据模块例如可以使用setModuleConfig函数，通过该方法实现新加和更改组件模块的相应配置数据。例如，
state表示数据根节点，存储着所有配置数据；
key表示设计器的设计器编码；
uuid表示组件的唯一组件编码，如上述例子中提及的“xxx1”、“xxx2”；
configMap[uuid]表示当前key所对应的设计器实例中uuid所对应的组件的配置数据。
与原来组件的配置数据不同的内容可实现数据更新，对于原来组件没有的配置数据，可以实现自动添加相应的配置数据。
在删除组件及其配置数据时，利用该待删除组件的组件编码和该待删除组件所在设计器的设计器编码，并使用移除组件配置数据模块来完成对组件及其配置数据的删除。这里的移除组件配置数据模块例如可以使用removeConfig函数，通过该方法实现删除组件模块及其相应的配置数据。例如：
state表示数据根节点，存储着所有配置数据；
key表示设计器的设计器编码；
uuid表示组件的唯一组件编码，如上述例子中提及的“xxx1”、“xxx2”；
由此可删除某个设计器中的指定组件[uuid]及其配置数据。
通过上述内容可知，根据需要，可以通过调用该数据管理模块中的目标模块，例如更改组件配置数据模块(例如setModuleConfig函数)，向该目标模块传送所述设计器编码和所述组件编码，从而可以实现对组件的配置数据的管理操作，例如新增和修改等管理操作。再例如，通过调用该数据管理模块中的例如更改设计器配置数据模块(例如updateConfigMap函数)，向该目标模块传送所述设计器编码，从而可以实现对设计器的配置数据的管理操作。
通过上述的配置数据管理方法可以实现对可视化界面设计工具中的配置数据的管理操作。
图2是本发明第二实施例提供的一种在可视化界面设计工具中使用的配置数据管理方法的流程图。如图2所示，所述在可视化界面设计工具中使用的配置数据管理方法进一步包括：
S3：构建对应组件的数据连接器模块，该数据连接器模块包括入口参数、组件配置参数字段、get方法与set方法，其中所述入口参数包括：所述设计器编码和所述组件编码，所述组件配置参数字段存储当前组件的配置数据，通过该数据连接器模块实现对所述配置数据的管理，其包括：
使用get方法，利用入口参数将该入口参数所指示的相应组件的配置数据同步到所述组件配置参数字段中，从而实现读取操作；和
使用set方法来调用所述更改组件配置数据模块，利用入口参数将所述组件配置参数字段中的配置数据对该入口参数所指示的相应组件的配置数据进行覆盖，从而实现写入操作。
为了实现对不同组件模块或功能模块的配置数据的统一管理，为了使得程序开发人员在组件模块开发过程中能够在不必了解设计器工作原理、不必关注设计器对配置数据的处理和存放、配置数据之间的耦合关系等情况下，直接上手进行模块开发工作，还可以通过构建数据连接器模块来管理配置数据以便实现这一目的。下面通过具体的实例来说明数据连接器模块的使用，其中用到了get方法与set方法。
其中，入口参数是：设计器编码this.code，组件编码this.uuid；
读取方式是state[]，state[this.code]将设计器编码this.code传入以读取出当前设计器(即设计器编码对应的设计器)的全部配置数据，然后通过.moduleConfigMap读取出当前设计器下所有组件的所有配置数据，并放入到configMap中；最后通过returnconfigMap[this.uuid]将组件编码this.uuid传入到configMap中，读取出组件编码this.uuid所对应的组件的配置数据。
其中：value是需要对组件编码this.uuid所对应的组件进行更新的新配置数据；
var configMap＝this.$store.state[this.code].moduleConfigMap语句的作用是：获取到的当前设计器(即设计器编码对应的设计器)的所有组件的所有配置数据。
configMap[this.uuid]＝value语句的作用是：将新配置数据value写入到组件配置参数字段中当前组件(即组件编码this.uuid对应的组件)的配置数据的存储位置，以更新当前组件的配置数据。
this.updateConfigMap({key:this.code,configMap:configMap})语句的作用是：通过this.updateConfigMap的方式进行调用数据管理模块中的更改设计器配置数据模块updateConfigMap，通过传入当前设计器编码，来对当前设计器的配置数据进行更新。
同理，如果是调用数据管理模块中的更改组件配置数据模块setModuleConfig，通过传入当前组件编码this.uuid，来对入口参数(组件编码this.uuid)所指示的相应组件的配置数据进行更新。
另外，当需要为某个设计器新增加一个组件及其配置数据时，还可以使用下面所述方法来实现对新组件及其配置数据的添加管理。即，所述在可视化界面设计工具中使用的配置数据管理方法进一步包括以下步骤：
使用更改组件配置数据模块来为某个设计器添加新组件及其配置数据，该设计器为该添加的新组件设置唯一的组件编码，引入数据连接器模块并挂在该添加的新组件中，在其内的组件配置参数字段中写入该新组件的配置数据，使用set方法来调用所述更改组件配置数据模块，利用包含了该设计器编码和该新组件的组件编码的入口参数，将该新组件的组件编码以及所述组件配置参数字段中的所述配置数据添加到所述设计器编码对应的设计器中。
正如上面所述，可以通过程序开发人员开发设计器的功能以实现每个设计器能够为其所包含的组件自动设置唯一的组件编码。经过上述步骤，可以实现对新组件及其配置数据的添加管理。
基于以上所述的第一实施例和第二实施例，本发明提供的在可视化界面设计工具中使用的配置数据管理方法改善了现有的可视化的界面设计工具中配置数据杂乱且不便于进行结构化管理的缺陷，由于对配置数据进行了结构化管理和不同功能模块的配置数据进行了统一管理，因此可以支持多个设计器来相互协作完成更加复杂的设计任务，并且还能够使用同一标准来将新增的功能模块集成到界面设计工具中，扩展性强，便于新加入团队的程序开发人员直接上手进行模块开发工作，而无需先去了解界面设计工具中的设计器的工作原理、设计器对配置数据的处理和存放、配置数据之间的耦合关系等，节省了后续接替人员的开发效率。
图3是本发明第三实施例提供的在可视化界面设计工具中使用的配置数据管理装置的示意性框图。如图3所示，本发明第三实施例提供的在可视化界面设计工具中使用的配置数据管理装置，其中所述可视化界面设计工具包含一个或多个设计器，每个设计器包含一个或多个组件，该配置数据管理装置包括：
用于保存设计器的全部数据的数据存储区1，其中设计器的全部数据以嵌套存储方式保存，其中所述全部数据是以JSON格式进行保存的，包括：设计器的唯一设计器编码以及该编码对应的设计器的配置数据，该设计器的配置数据包括：该设计器所含组件的全部信息、和除了所述组件信息之外的其他必要信息数据；每个组件的全部信息以嵌套结构进行存储，每个组件的全部信息包括：组件的唯一组件编码和该组件编码对应的组件的配置数据；其中每个设计器的所述唯一设计器编码是预先设置的，每个设计器为其所包含的每个组件设置所述的唯一组件编码；
数据管理模块2，该数据管理模块包括：设计器初始化模块、更改设计器配置数据模块、更改组件配置数据模块和移除组件配置数据模块，通过调用该数据管理模块中的目标模块和向其传送的所述设计器编码或者所述设计器编码和所述组件编码二者来实现对配置数据的管理。
其中，更改设计器配置数据模块用于添加或更改待更新设计器编码所对应的设计器的配置数据。
更改组件配置数据模块用于添加或更改待更新组件的配置数据。
移除组件配置数据模块用于删除指定的组件及其配置数据。
其中，设计器初始化模块用于执行设计器的配置数据初始化，并且通过执行数据初始化实现在所述可视化界面设计工具中添加新设计器实例。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述第三实施例描述的装置的具体工作过程，可以参考前述第一实施例中的对应过程，前述第一实施例及相应的优选实施例中列举的例子和相关描述，同样适用于解释第三实施例描述的装置的工作过程，在此不再重复描述。
为了实现对不同功能模块的配置数据的统一管理，为了使得程序开发人员在组件模块开发过程中在不必了解设计器工作原理、不必关注设计器对配置数据的处理及存放等工作方式下直接上手进行模块开发工作，还可以通过构建数据连接器模块对配置数据进行管理来实现这一目的。由此，本发明的第四实施例提供了关于配置数据管理装置的变型结构。
图4是本发明第四实施例提供的在可视化界面设计工具中使用的配置数据管理装置的示意性框图。如图4所示，本发明第四实施例提供的在可视化界面设计工具中使用的配置数据管理装置还包括：数据连接器模块3，
该数据连接器模块3包括入口参数、组件配置参数字段、get方法与set方法，其中所述入口参数包括：所述设计器编码和所述组件编码，所述组件配置参数字段存储当前组件的配置数据，通过该数据连接器模块实现对所述配置数据的管理，其包括：
使用get方法，利用入口参数将该入口参数所指示的相应组件的配置数据同步到所述组件配置参数字段中，从而实现读取操作；和
使用set方法来调用所述更改组件配置数据模块，利用入口参数将所述组件配置参数字段中的配置数据对该入口参数所指示的相应组件的配置数据进行覆盖，从而实现写入操作。
其中，所述更改组件配置数据模块还用于为某个设计器添加新组件及其配置参数，该设计器为该添加的新组件设置唯一的组件编码，引入数据连接器模块并挂在该添加的新组件中，在其内的组件配置参数字段中写入该新组件的配置数据，使用set方法来调用所述更改组件配置数据模块，利用包含了该设计器编码和该新组件的组件编码的入口参数，将该新组件的组件编码以及所述组件配置参数字段中的所述配置数据添加到所述设计器编码对应的设计器中。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述第四实施例描述的装置的具体工作过程，可以参考前述第二实施例中的对应过程，前述第二实施例及相应的优选实施例中列举的例子和相关描述，同样适用于解释第四实施例描述的装置的工作过程，在此不再重复描述。
基于以上所述的第三实施例和第四实施例，本发明提供的在可视化界面设计工具中使用的配置数据管理装置改善了现有的可视化的界面设计工具中配置数据杂乱且不便于进行结构化管理的缺陷，由于对配置数据进行了结构化管理和不同功能模块的配置数据进行了统一管理，因此可以支持多个设计器来相互协作完成更加复杂的设计任务，并且还能够使用同一标准来将新增的功能模块集成到界面设计工具中，扩展性强，便于新加入团队的程序开发人员直接上手进行模块开发工作，而无需先去了解界面设计工具中的设计器的工作原理、设计器对配置数据的处理和存放、配置数据之间的耦合关系等，节省了后续接替人员的开发效率。
以上已参照图1至图6描述了根据本申请示例性实施例的在可视化界面设计工具中使用的配置数据管理方法和装置。然而，应理解的是：附图3和4所示出的装置及其单元模块可被分别配置为执行特定功能的软件、硬件、固件或上述项的任意组合。例如，这些装置或单元模块可对应于专用的集成电路，也可对应于纯粹的软件代码，还可对应于软件与硬件相结合的模块。此外，这些装置或单元模块所实现的一个或多个功能也可由物理实体设备(例如，处理器、客户端或服务器等)中的组件来统一执行。
此外，上述配置数据管理方法可通过记录在计算可读介质上的程序来实现，例如，根据本申请示例性实施例，可提供一种计算机可读存储介质，其中在所述计算机可读存储介质上记录有当被处理器执行时实现如第一实施例所述的方法或其与相应优选实施例的组合所述的方法的计算机程序。另外，还可提供一种计算机可读存储介质，其中在所述计算机可读存储介质上记录有当被处理器执行时实现如第二实施例所述的方法或其与相应优选实施例的组合所述的方法的计算机程序。
上述计算机可读存储介质中的计算机程序可在诸如客户端、主机、代理装置、服务器等计算机设备中部署的环境中运行，应注意，所述计算机程序还可用于执行除了上述步骤以外的附加步骤或者在执行上述步骤时执行更为具体的处理，这些附加步骤和进一步处理的内容已经在参照图1和2进行相关方法的描述过程中提及，因此这里为了避免重复将不再进行赘述。
此外，上述配置数据管理方法还可以通过记录在计算装置上的程序来实现。该计算装置包括存储部件和处理器，存储部件中存储有计算机可执行指令集合，当所述计算机可执行指令集合被所述处理器执行时，执行如第一实施例所述的方法步骤或其与相应优选实施例的组合所述的方法步骤；或者执行如第二实施例所述的方法步骤或其与相应优选实施例的组合所述的方法步骤。
具体说来，所述计算装置可以部署在服务器或客户端中，也可以部署在分布式网络环境中的节点装置上。此外，所述计算装置可以是PC计算机、平板装置、个人数字助理、智能手机、web应用或其他能够执行上述指令集合的装置。
这里，所述计算装置并非必须是单个的计算装置，还可以是任何能够单独或联合执行上述指令(或指令集)的装置或电路的集合体。计算装置还可以是集成控制***或***管理器的一部分，或者可被配置为与本地或远程(例如，经由无线传输)以接口互联的便携式电子装置。
在所述计算装置中，处理器可包括中央处理器(CPU)、图形处理器(GPU)、可编程逻辑装置、专用处理器***、微控制器或微处理器。作为示例而非限制，处理器还可包括模拟处理器、数字处理器、微处理器、多核处理器、处理器阵列、网络处理器等。
根据本申请示例性实施例的方法中所描述的某些操作可通过软件方式来实现，某些操作可通过硬件方式来实现，此外，还可通过软硬件结合的方式来实现这些操作。
处理器可运行存储在存储部件之一中的指令或代码，其中，所述存储部件还可以存储数据。指令和数据还可经由网络接口装置而通过网络被发送和接收，其中，所述网络接口装置可采用任何已知的传输协议。
存储部件可与处理器集成为一体，例如，将RAM或闪存布置在集成电路微处理器等之内。此外，存储部件可包括独立的装置，诸如，外部盘驱动、存储阵列或任何数据库***可使用的其他存储装置。存储部件和处理器可在操作上进行耦合，或者可例如通过I/O端口、网络连接等互相通信，使得处理器能够读取存储在存储部件中的文件。
此外，所述计算装置还可包括视频显示器(诸如，液晶显示器)和用户交互接口(诸如，键盘、鼠标、触摸输入装置等)。计算装置的所有组件可经由总线和/或网络而彼此连接。
根据本申请示例性实施例的方法所涉及的操作可被描述为各种互联或耦合的功能块或功能示图。然而，这些功能块或功能示图可被均等地集成为单个逻辑装置或按照非确切的边界进行操作。
尽管以上描述了本申请的示例性实施例，但是应理解：上述描述仅是示例性的，并非穷尽性的。本申请不限于所披露的各示例性实施例，并且在不偏离本申请的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。因此，本申请的保护范围应该以权利要求的范围为准。
Claims (6)
1.一种在可视化界面设计工具中使用的配置数据管理方法，其中所述可视化界面设计工具包含一个或多个设计器，每个设计器包含一个或多个组件，所述配置数据管理方法包括：
以嵌套存储方式保存设计器的全部数据，其中所述全部数据是以JSON格式进行保存的，包括：设计器的唯一设计器编码以及该编码对应的设计器的配置数据，该设计器的配置数据包括：设计器所含组件的全部信息、和除了所述组件信息之外的必要信息数据，该必要信息数据包括：用于表示设计器的当前界面主题的信息数据、组件的列表信息数据和设计器中当前激活的组件；每个组件的全部信息以嵌套结构进行存储，每个组件的全部信息包括：组件的唯一组件编码和该组件编码对应的组件的配置数据；其中每个设计器的所述唯一设计器编码是预先设置的，每个设计器为其所包含的每个组件设置所述的唯一组件编码；其中使用moduleList属性保存设计器所含组件的列表，该列表包含有组件的唯一组件编码，使用moduleConfigMap类型保存所有组件的配置数据；
添加数据管理模块，该数据管理模块包括：设计器初始化模块、更改设计器配置数据模块、更改组件配置数据模块和移除组件配置数据模块，通过调用数据管理模块中的目标模块和向其传送的所述设计器编码或者所述设计器编码和所述组件编码二者来实现对配置数据的管理；
构建对应组件的数据连接器模块，该数据连接器模块包括入口参数、组件配置参数字段、get方法与set方法，其中所述入口参数包括：所述设计器编码和所述组件编码，所述组件配置参数字段存储当前组件的配置数据，通过该数据连接器模块实现对所述配置数据的管理，其包括：
使用get方法，利用入口参数将该入口参数所指示的相应组件的配置数据同步到所述组件配置参数字段中，从而实现读取操作；和
使用set方法来调用所述更改组件配置数据模块，利用入口参数将所述组件配置参数字段中的配置数据对该入口参数所指示的相应组件的配置数据进行覆盖，从而实现写入操作；
使用更改组件配置数据模块来为设计器添加新组件及其配置参数，该设计器为所添加的新组件设置唯一的组件编码，引入数据连接器模块并挂在所添加的新组件中，在其内的组件配置参数字段中写入该新组件的配置数据，使用set方法来调用所述更改组件配置数据模块，利用包含了所述设计器编码和所述新组件的组件编码的入口参数，将该新组件的组件编码以及所述组件配置参数字段中的所述配置数据添加到所述设计器编码对应的设计器中。
2.根据权利要求1所述的方法，其中该方法进一步包括：
在更新设计器的配置数据时，利用待更新设计器的设计器编码，并使用更改设计器配置数据模块来完成对该设计器编码所对应的设计器的配置数据的更新，包括配置数据的添加和更改；
在更新组件的配置数据时，利用待更新组件的组件编码和待更新组件所在设计器的设计器编码，并使用更改组件配置数据模块来完成对组件的配置数据的更新，包括配置数据的添加和更改；
在删除组件及其配置数据时，利用待删除组件的组件编码和待删除组件所在设计器的设计器编码，并使用移除组件配置数据模块来完成对组件及其配置数据的删除。
3.根据权利要求1所述的方法，其中该方法进一步包括：在所述可视化界面设计工具中添加新设计器实例是通过调用设计器初始化模块执行初始化来实现添加。
4.一种在可视化界面设计工具中使用的配置数据管理装置，其中所述可视化界面设计工具包含一个或多个设计器，每个设计器包含一个或多个组件，该配置数据管理装置包括：
用于保存设计器的全部数据的数据存储区，其中设计器的全部数据以嵌套存储方式保存，其中所述全部数据是以JSON格式进行保存的，包括：设计器的唯一设计器编码以及该编码对应的设计器的配置数据，该设计器的配置数据包括：设计器所含组件的全部信息、和除了所述组件信息之外的必要信息数据，该必要信息数据包括：用于表示设计器的当前界面主题的信息数据、组件的列表信息数据和设计器中当前激活的组件；每个组件的全部信息以嵌套结构进行存储，每个组件的全部信息包括：组件的唯一组件编码和该组件编码对应的组件的配置数据；其中每个设计器的所述唯一设计器编码是预先设置的，每个设计器为其所包含的每个组件设置所述的唯一组件编码；其中使用moduleList属性保存设计器所含组件的列表，该列表包含有组件的唯一组件编码，使用moduleConfigMap类型保存所有组件的配置数据；
数据管理模块，该数据管理模块包括：设计器初始化模块、更改设计器配置数据模块、更改组件配置数据模块和移除组件配置数据模块，通过调用数据管理模块中的目标模块和向其传送的所述设计器编码或者所述设计器编码和所述组件编码二者来实现对配置数据的管理；
数据连接器模块，该数据连接器模块包括入口参数、组件配置参数字段、get方法与set方法，其中所述入口参数包括：所述设计器编码和所述组件编码，所述组件配置参数字段存储当前组件的配置数据，通过该数据连接器模块实现对所述配置数据的管理，其包括：
使用get方法，利用入口参数将该入口参数所指示的相应组件的配置数据同步到所述组件配置参数字段中，从而实现读取操作；和
使用set方法来调用所述更改组件配置数据模块，利用入口参数将所述组件配置参数字段中的配置数据对该入口参数所指示的相应组件的配置数据进行覆盖，从而实现写入操作；
所述更改组件配置数据模块还用于为设计器添加新组件及其配置参数，该设计器为所添加的新组件设置唯一的组件编码，引入数据连接器模块并挂在所添加的新组件中，在其内的组件配置参数字段中写入该新组件的配置数据，使用set方法来调用所述更改组件配置数据模块，利用包含了所述设计器编码和所述新组件的组件编码的入口参数，将该新组件的组件编码以及所述组件配置参数字段中的所述配置数据添加到所述设计器编码对应的设计器中。
5.根据权利要求4所述的装置，其中更改设计器配置数据模块用于添加或更改待更新设计器编码所对应的设计器的配置数据；
更改组件配置数据模块用于添加或更改待更新组件的配置数据；
移除组件配置数据模块用于删除指定的组件及其配置数据。
6.根据权利要求4所述的装置，其中设计器初始化模块用于执行设计器的配置数据初始化，并且通过执行数据初始化实现在所述可视化界面设计工具中添加新设计器实例。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110246925.4A CN113031947B (zh) | 2021-03-05 | 2021-03-05 | 在界面设计工具中使用的配置数据管理方法和装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110246925.4A CN113031947B (zh) | 2021-03-05 | 2021-03-05 | 在界面设计工具中使用的配置数据管理方法和装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113031947A CN113031947A (zh) | 2021-06-25 |
| CN113031947B true CN113031947B (zh) | 2024-06-18 |
Family
ID=76468303
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110246925.4A Active CN113031947B (zh) | 2021-03-05 | 2021-03-05 | 在界面设计工具中使用的配置数据管理方法和装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113031947B (zh) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114942819B (zh) * | 2022-07-22 | 2022-11-11 | 浙江中控技术股份有限公司 | 数据字段处理方法、电子设备及计算机可读存储介质 |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111241454A (zh) * | 2020-01-21 | 2020-06-05 | 优信拍（北京）信息科技有限公司 | 一种生成网页代码的方法、***和装置 |
Family Cites Families (22)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7610377B2 (en) * | 2004-01-27 | 2009-10-27 | Sun Microsystems, Inc. | Overload management in an application-based server |
| CN102737128B (zh) * | 2012-06-20 | 2014-12-10 | 深圳市远行科技有限公司 | 一种基于浏览器的动态页面处理装置 |
| CN103581123B (zh) * | 2012-07-20 | 2018-09-21 | 南京中兴软件有限责任公司 | 网络数据的处理方法及装置、网络数据的发布方法及*** |
| CN104572096B (zh) * | 2014-12-29 | 2017-12-29 | 中国科学院计算机网络信息中心 | 一种基于web的多模型数据可视化开发方法及平台 |
| CN105760440B (zh) * | 2016-02-02 | 2019-06-04 | 广州市科南软件有限公司 | 在线表单设计器的实现方法及其*** |
| US20170230419A1 (en) * | 2016-02-08 | 2017-08-10 | Hytrust, Inc. | Harmonized governance system for heterogeneous agile information technology environments |
| CN109614100B (zh) * | 2018-10-26 | 2022-02-01 | 创新先进技术有限公司 | 页面展示方法、装置、服务器、前端及存储介质 |
| CN109542878B (zh) * | 2018-11-21 | 2021-03-09 | 广州方硅信息技术有限公司 | 一种列表创建方法及装置 |
| CN111984248B (zh) * | 2019-05-22 | 2023-08-25 | 腾讯科技（深圳）有限公司 | 页面编辑方法和装置、存储介质及电子装置 |
| CN110688117B (zh) * | 2019-09-30 | 2022-08-09 | 厦门荆艺软件有限公司 | 一种基于JavaWeb的界面设计器、平台及其页面配置方法 |
| CN110968317B (zh) * | 2019-12-02 | 2023-04-18 | 广州鲁邦通物联网科技股份有限公司 | 一种通过UCI/USI配置文件自动生成vue页面组件的方法和*** |
| CN111045655B (zh) * | 2019-12-18 | 2023-04-14 | 广州市百果园信息技术有限公司 | 一种页面渲染的方法、装置、渲染服务器和存储介质 |
| CN112416339A (zh) * | 2020-02-17 | 2021-02-26 | 上海哔哩哔哩科技有限公司 | 页面开发方法、装置、计算机设备 |
| CN111367686A (zh) * | 2020-02-28 | 2020-07-03 | 平安医疗健康管理股份有限公司 | 业务接口的调用方法及装置、计算机设备、存储介质 |
| CN111488148B (zh) * | 2020-03-09 | 2023-07-21 | 北京水滴科技集团有限公司 | 网页源代码的生成方法及装置 |
| CN111506298A (zh) * | 2020-03-10 | 2020-08-07 | 南京行者易智能交通科技有限公司 | 一种基于json对象进行接口可视化配置的方法 |
| CN111538498A (zh) * | 2020-04-14 | 2020-08-14 | 北京宝兰德软件股份有限公司 | 一种应用创建方法、装置、电子设备及存储介质 |
| CN111930378B (zh) * | 2020-08-11 | 2021-10-22 | 上海亿锎智能科技有限公司 | Web端项目表单设计器的实现方法、装置和*** |
| CN111966345A (zh) * | 2020-08-21 | 2020-11-20 | 西安寰宇卫星测控与数据应用有限公司 | 拖拽式网页设计方法、装置、计算机设备、存储介质 |
| CN111930381B (zh) * | 2020-09-21 | 2021-11-19 | 知学云(北京)科技有限公司 | 一种支持SaaS多租户***的个性化页面配置方法 |
| CN112130856B (zh) * | 2020-09-29 | 2023-11-03 | 重庆紫光华山智安科技有限公司 | 强扩展性的前端可视化界面生成方法、***、介质及终端 |
| CN112433727A (zh) * | 2020-12-10 | 2021-03-02 | 建信金融科技有限责任公司 | 一种用户界面配置方法、装置、电子设备及可读存储介质 |
-
2021
- 2021-03-05 CN CN202110246925.4A patent/CN113031947B/zh active Active
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111241454A (zh) * | 2020-01-21 | 2020-06-05 | 优信拍（北京）信息科技有限公司 | 一种生成网页代码的方法、***和装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113031947A (zh) | 2021-06-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US6466973B2 (en) | Method and system for managing storage devices over a network | |
| JP5253172B2 (ja) | シンクライアント上にデータを表示するためのシステムおよび方法 | |
| US8296720B2 (en) | Framework to access a remote system from an integrated development environment | |
| US7624349B2 (en) | Declarative definition enabling graphical designer reuse | |
| EP1804177A1 (en) | Merge tool for structured object models | |
| EP1571548A2 (en) | Hosted application as a designer in an integrated development environment | |
| CN109471626B (zh) | 页面逻辑结构、页面生成方法、页面数据处理方法及装置 | |
| US20080010082A1 (en) | System and method for business process management | |
| US20140081901A1 (en) | Sharing modeling data between plug-in applications | |
| CA2391756A1 (en) | Accessing a remote iseries or as/400 computer system from the eclipse integrated development environment | |
| US20120030631A1 (en) | Tree control with enhanced hierarchy visibility | |
| EP3522004A2 (en) | Code execution and data processing pipeline | |
| CN111338626B (zh) | 一种界面渲染方法、装置、电子设备及介质 | |
| CN114036443A (zh) | 页面生成方法及装置 | |
| CN113031947B (zh) | 在界面设计工具中使用的配置数据管理方法和装置 | |
| CN112464120A (zh) | 数据可视化展示方法、装置、电子设备及存储介质 | |
| CN114995816A (zh) | 业务流程配置方法、装置、电子设备及可读存储介质 | |
| CN111191174A (zh) | 雪碧图集成方法、***及装置 | |
| KR20040107414A (ko) | 애플리케이션 프레임워크를 비정형화한 비동기 컴포넌트를위한 메카니즘 | |
| WO2019186777A1 (ja) | 情報処理装置、制御方法、及びプログラム | |
| JP2021103544A (ja) | コード再利用処理方法、装置、電子機器、記憶媒体及びコンピュータプログラム製品 | |
| CN112286557A (zh) | 一种非覆盖式更新代码内容的方法和装置 | |
| CN113110846A (zh) | 一种环境变量的获取方法及装置 | |
| JP2012133567A (ja) | 情報処理装置、情報処理装置の制御方法、プログラム。 | |
| CN109561146A (zh) | 文件下载方法、装置、终端设备 |
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 | ||
| GR01 | Patent grant |