一种表单控件配置方法、装置、设备及介质与流程

1.本技术涉及表单开发领域，具体涉及一种表单控件配置方法、装置、设备及介质。


背景技术：

2.控件就是操作系统界面的单位元件，常见的控件可以分为提示类、加载类、网络异常类、引导类、导航类、空数据类、操作类。
3.现有技术中，表单设计器中以一份json格式描述控件，由于表单控件的创建难度较高，因此如何将一份json数据转化为控件通常需要开发人员花费大量的时间精力去了解前端开发过程，如果表单设计器的开发人员将时间花费在控件的开发上，将会导致无法专注于设计器本身的逻辑开发。


技术实现要素：

4.为了解决上述问题，本技术提出了一种表单控件配置方法、装置、设备及介质，其中方法包括：
5.根据目标控件的使用场景，确定所述目标控件的控件类型，并根据所述控件类型生成控件类型字符串；根据所述目标控件的预期展示效果，确定所述目标控件的控件元数据，并生成所述控件元数据对应的控件json描述结构；根据所述控件元数据，生成所述目标控件的控件模板，并导出所述控件模板对应的模板字符串；根据所述目标控件的预期特性，确定所述目标控件的组件实例；根据所述控件类型字符串、所述控件元数据、所述模板字符串、所述组件实例，生成所述目标控件的控件导出对象。
6.在一个示例中，所述生成所述目标控件的控件导出对象之后，所述方法还包括：将所述控件导出对象通过rollup打包方法，打包成一份js脚本；将所述js脚本发送至表单设计器。
7.在一个示例中，所述将所述控件导出对象通过rollup打包方法，打包成一份js脚本之前，所述方法还包括：为打包过程配置systemjs模块化打包环境；所述rollup打包方法使用es6的模块标准；所述将所述控件导出对象通过rollup打包方法，打包成一份js脚本，具体包括：将所述控件导出对象的代码进行摇树优化，以得到优化数据；对所述优化数据进行压缩，以得到所述js脚本。
8.在一个示例中，所述根据所述控件元数据，生成所述目标控件的控件模板，具体包括：将所述控件元数据对应的json描述结构转化为dom层级结构；根据各区域的预期宽度、预期排列方式，确定所述各层级的css样式；根据所述dom层级结构以及所述css样式，生成所述目标控件的控件模板。
9.在一个示例中，所述控件导出对象的数据集中包含所述目标控件的控件类型数据、组件示例数据、控件元数据、控件模板数据；所述控件类型数据以及所述控件模板数据的值类型为字符串；所述控件元数据的值类型为object对象。
10.在一个示例中，所述组件实例定义包括：方法名、入参、返回值、是否必需、说明。
11.在一个示例中，所述json描述结构包括：属性id，属性名称，值类型，说明。
12.本技术还提供了一种表单控件配置装置，包括：控件类型确认模块，根据目标控件的使用场景，确定所述目标控件的控件类型，并根据所述控件类型生成控件类型字符串；控件元数据确认模块，根据所述目标控件的预期展示效果，确定所述目标控件的控件元数据，并生成所述控件元数据对应的控件json描述结构；控件模板生成模块，根据所述控件元数据，生成所述目标控件的控件模板，并导出所述控件模板对应的模板字符串；组件实例确定模块，根据所述目标控件的预期特性，确定所述目标控件的组件实例；控件导出对象生成模块，根据所述控件类型字符串、所述控件元数据、所述模板字符串、所述组件实例，生成所述目标控件的控件导出对象。
13.本技术还提供了一种表单控件配置设备，包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行：根据目标控件的使用场景，确定所述目标控件的控件类型，并根据所述控件类型生成控件类型字符串；根据所述目标控件的预期展示效果，确定所述目标控件的控件元数据，并生成所述控件元数据对应的控件json描述结构；根据所述控件元数据，生成所述目标控件的控件模板，并导出所述控件模板对应的模板字符串；根据所述目标控件的预期特性，确定所述目标控件的组件实例；根据所述控件类型字符串、所述控件元数据、所述模板字符串、所述组件实例，生成所述目标控件的控件导出对象。
14.本技术还提供了一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：根据目标控件的使用场景，确定所述目标控件的控件类型，并根据所述控件类型生成控件类型字符串；根据所述目标控件的预期展示效果，确定所述目标控件的控件元数据，并生成所述控件元数据对应的控件json描述结构；根据所述控件元数据，生成所述目标控件的控件模板，并导出所述控件模板对应的模板字符串；根据所述目标控件的预期特性，确定所述目标控件的组件实例；根据所述控件类型字符串、所述控件元数据、所述模板字符串、所述组件实例，生成所述目标控件的控件导出对象。
15.通过本技术提出的方通过一套标准的操作过程来定义表单控件，可以快速生成一份前端控件并将控件加载到表单设计器中。这样就不需要用户掌握前端开发的原理和各种使用规则，便可以创建出一份能运行在各种主流浏览器中的控件。
附图说明
16.此处所说明的附图用来提供对本技术的进一步理解，构成本技术的一部分，本技术的示意性实施例及其说明用于解释本技术，并不构成对本技术的不当限定。在附图中：
17.图1为本技术实施例中一种表单控件配置方法的流程示意图；
18.图2为本技术实施例中一种表单控件配置装备的结构示意图；
19.图3为本技术实施例中一种表单控件配置设备的结构示意图。
具体实施方式
20.为使本技术的目的、技术方案和优点更加清楚，下面将结合本技术具体实施例及相应的附图对本技术技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本技术一
部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
21.以下结合附图，详细说明本技术各实施例提供的技术方案。
22.图1为本说明书一个或多个实施例提供的一种表单控件配置方法的流程示意图。该方法可以快速生成一份前端控件并将控件加载到表单设计器中。这样就不需要用户掌握前端开发的原理和各种使用规则，便可以创建出一份能运行在各种主流浏览器中的控件。该流程可以由相应领域的计算设备执行，流程中的某些输入参数或者中间结果允许人工干预调节，以帮助提高准确性。
23.本技术实施例涉及的分析方法的实现可以为终端设备，也可以为服务器，本技术对此不作特殊限制。为了方便理解和描述，以下实施例均以服务器为例进行详细描述。
24.需要说明的是，该服务器可以是单独的一台设备，可以是有多台设备组成的系统，即，分布式服务器，本技术对此不做具体限定。
25.市场上现有的表单设计器多数是与控件绑定使用的，例如pc类的表单设计器中只预置了pc类的控件，无法提供移动端的控件。
26.基于以上，本发明定义了一套标准的操作过程来定义表单控件，根据这份配置方法，可以快速生成一份前端控件并将控件加载到表单设计器中。这样就不需要用户掌握前端开发的原理和各种使用规则，便可以创建出一份能运行在各种主流浏览器中的控件。同时，本发明将控件独立于表单设计器之外，设计器只需配置并加载打包后的脚本即可。
27.如图1所示，本技术实施例提供一种表单控件配置方法，包括：
28.s101：根据目标控件的使用场景，确定所述目标控件的控件类型，并根据所述控件类型生成控件类型字符串。
29.按照控件的使用场景，需要确定一个全局唯一的控件类型字符串。例如文本输入类型的控件可以定义为text box，附件上传预览类控件可以定义为fileuploadandpreview，填报类卡片输入区域可以定义为form。定义好控件类型是第一步，表单设计器便是根据控件类型来加载不同的控件的。
30.s102：根据所述目标控件的预期展示效果，确定所述目标控件的控件元数据，并生成所述控件元数据对应的控件json描述结构。
31.在表单设计器中是以json格式来描述一份控件的，根据json中各属性的不同来实现不同的控件展示效果。开发人员要根据控件向外提供的展示效果、特性来确定目标控件的控件元数据，例如日期选择类控件需要提供标签、是否只读、是否必填、日期格式化、最大日期、最小日期、是否启用时间选择等特性，将这些特性转化为json配置结构即可。
32.在一个实施例中，json描述结构包括：属性id，属性名称，值类型，说明。以日期控件为例，其json结构如下表所示：
[0033][0034][0035]
s103：根据所述控件元数据，生成所述目标控件的控件模板，并导出所述控件模板对应的模板字符串。
[0036]
开发人员根据目标控件的控件元数据，生成目标控件的控件模板，并到处控件模板对应的模板字符串，需要说明的是，这里的控件模板指的是控件的表现结构，如日期控件至少需要一个区域来展示标签内容，一个区域来展示文本框，一个区域放置日期图标，同时还应考虑到控件内各区域的宽度、排列方式。
[0037]
在一个实施例中，由于每种控件都有自己展示在浏览器中的dom层级结构，因此，根据控件元数据，生成目标控件的控件模板时，需要述控件元数据对应的json描述结构转化为dom层级结构。然后再根据各区域的预期宽度、预期排列方式，确定各层级的css样式。最后根据dom层级结构以及css样式，生成目标控件的控件模板。最终生成并导出一份模板字符串，组件实例在渲染页面时会将这份字符串作为控件的html展示到浏览器中。
[0038]
s104：根据所述目标控件的预期特性，确定所述目标控件的组件实例。
[0039]
在表单设计器中一份完整的控件需要包含的功能有：渲染控件模板、挂载控件内的点击事件、维护控件json属性的配置数据、控件属性变更后更新html展示效果、控制控件在设计器中的拖拽范围、是否支持删除、是否支持接收某种特定的子级控件、控件右键菜单便捷配置等等。本技术预置了控件的组件实例，组件实例中定义了各功能的基础函数，例如构造函数、获取控件json描述的方法、控件渲染方法、挂载控件事件的方法、控件属性配置
方法、控件拖拽控制方法等。在开发控件时，只需继承组件实例并实现组件实例中必须的方法即可，不需要过于关注控件在设计器中的交互过程，从而简化了开发人员的开发步骤。也就是根据目标控件的预期特性，确定目标控件的组件实例。
[0040]
在一个实施例中，组件实例定义包括：方法名、入参、返回值、是否必需、说明。部分举例可如下表所示：
[0041][0042][0043]
s105：根据所述控件类型字符串、所述控件元数据、所述模板字符串、所述组件实例，生成所述目标控件的控件导出对象。
[0044]
以上步骤中定义的内容都需要以统一的格式进行导出，进而方便表单设计器加载和引用。本发明中控件对外提供的内容需要以对象的形式导出。
[0045]
在一个实施例中，控件导出对象的数据集中包含目标控件的控件类型数据、组件示例数据、控件元数据、控件模板数据；控件类型数据以及控件模板数据的值类型为字符串；控件元数据的值类型为object对象。控件定义的导出对象结构如下：
[0046][0047]
在一个实施例中，控件开发完成后，需要以systemjs的方式进行模块化打包，打包时将各控件导出的内容使用rollup打包方法打包成一份js脚本。表单设计器通过加载这份js脚本识别出当前支持的ui控件，并根据表单的json配置数据将ui控件转化为html展示在浏览器上。
[0048]
进一步地，在打包之前，需要为打包过程配置systemjs模块化打包环境，从而规范前端公共库的引用关系。rollup打包方法使用es6的模块标准；将控件导出对象的代码进行摇树优化，以得到优化数据；再对优化数据进行压缩，即可得到js脚本。
[0049]
以下将通过一个典型的具体实施例，使本发明的上述目标、特征和实施步骤更加清晰、易懂。
[0050]
要实现一个带有标题栏的分组面板容器，要求标题栏带有主标题、副标题；点击标题栏能将整个面板收起或展开；提供最大化图标，点击后将内容区域放大至整个显示屏；此外面板内容区域只能接收输入类控件。创建分组面板控件的实施步骤如下：
[0051]
步骤一：明确分组面板的控件类型字符串为section，并确保section在整个ui控件库中唯一。
[0052]
步骤二：明确分组面板的元数据json结构sectionschema。按照要求分组面板至少需要包含的属性有：是否显示标题栏(showheader)、主标题(maintitle)、副标题(subtitle)、是否启用收折功能(enableaccordion)、是否启用最大化(eanblemaximize)、内容区域(contents)。
[0053]
步骤三：编写分组面板模板fdsectiontemplates，明确分组面板共包括两块区域：标题栏和内容区域，将两块区域的模板字符串拼接即可得到整个分组面板的模板。
[0054]
标题栏区域分为标题和图标两部分，标题区域模板取json中配置的主标题和副标题。图标区域是根据json中配置的是否启用收折、是否启用最大化的开关判断当前是否显示收折图标和最大化图标。内容区域中所有的子级控件都保存在children节点下。
[0055]
步骤四：实现分组面板实例fdsectioncomponent，在继承组件实例的基础上实现控件独有的特性方法：点击标题栏后支持收起或展开：在attach方法中注册收起图标的点击事件，在事件方法中修改标题区域的显示或隐藏样式。点击最大化支持放大视图区域：在attach方法中注册最大化图标的点击事件，在事件方法中修改内容区域的尺寸。配置属性面板数据：实现getpropertyconfig方法，根据分组面板的json属性组装面板配置数据。控制内容区域只能接收输入类控件：实现canaccepts方法，判断新控件的类型和分类，只有输入类控件返回true，其他控件均返回false。
[0056]
步骤五：定义控件导出内容。
[0057]
步骤六：打包ui库，执行本发明提供的打包工具，即可得到一份优化、压缩后的js脚本。表单设计器只需要加载这份脚本，便可以在可视化区域将分组面板渲染出来。
[0058]
如图2所示，本技术实施例还提供了一种表单控件配置装置，包括：
[0059]
控件类型确认模块201，根据目标控件的使用场景，确定所述目标控件的控件类型，并根据所述控件类型生成控件类型字符串。
[0060]
控件元数据确认模块202，根据所述目标控件的预期展示效果，确定所述目标控件的控件元数据，并生成所述控件元数据对应的控件json描述结构。
[0061]
控件模板生成模块203，根据所述控件元数据，生成所述目标控件的控件模板，并导出所述控件模板对应的模板字符串。
[0062]
组件实例确定模块204，根据所述目标控件的预期特性，确定所述目标控件的组件实例。
[0063]
控件导出对象生成模块205，根据所述控件类型字符串、所述控件元数据、所述模板字符串、所述组件实例，生成所述目标控件的控件导出对象。
[0064]
如图3所示，本技术实施例还提供了一种表单控件配置设备，包括：
[0065]
至少一个处理器；以及，
[0066]
与所述至少一个处理器通信连接的存储器；其中，
[0067]
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：
[0068]
根据目标控件的使用场景，确定所述目标控件的控件类型，并根据所述控件类型生成控件类型字符串；根据所述目标控件的预期展示效果，确定所述目标控件的控件元数据，并生成所述控件元数据对应的控件json描述结构；根据所述控件元数据，生成所述目标控件的控件模板，并导出所述控件模板对应的模板字符串；根据所述目标控件的预期特性，确定所述目标控件的组件实例；根据所述控件类型字符串、所述控件元数据、所述模板字符串、所述组件实例，生成所述目标控件的控件导出对象。
[0069]
本技术实施例还提供了一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：
[0070]
根据目标控件的使用场景，确定所述目标控件的控件类型，并根据所述控件类型生成控件类型字符串；根据所述目标控件的预期展示效果，确定所述目标控件的控件元数据，并生成所述控件元数据对应的控件json描述结构；根据所述控件元数据，生成所述目标控件的控件模板，并导出所述控件模板对应的模板字符串；根据所述目标控件的预期特性，确定所述目标控件的组件实例；根据所述控件类型字符串、所述控件元数据、所述模板字符串、所述组件实例，生成所述目标控件的控件导出对象。
[0071]
本技术中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于设备和介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
[0072]
本技术实施例提供的设备和介质与方法是一一对应的，因此，设备和介质也具有与其对应的方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说
明，因此，这里不再赘述设备和介质的有益技术效果。
[0073]
本领域内的技术人员应明白，本技术的实施例可提供为方法、系统、或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
[0074]
本技术是参照根据本技术实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
[0075]
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
[0076]
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
[0077]
在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
[0078]
内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(f l ash ram)。内存是计算机可读介质的示例。
[0079]
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(trans itory med i a)，如调制的数据信号和载波。
[0080]
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
[0081]
以上所述仅为本技术的实施例而已，并不用于限制本技术。对于本领域技术人员
来说，本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本技术的权利要求范围之内。