一种前端控件库展示代码生成方法

1.本发明涉及前端控件代码检测领域，尤其是涉及一种前端控件库展示代码生成方法。


背景技术：

2.控件库是一个非常简单直接的可视化控件仓库，可以将这里列出的控件拖拽到场景编辑器或层级管理器中，快速完成预设控件的创建。
3.如公开号为cn113590585a的中国专利文献公开了一种控件库，包括多个控件，每个所述控件均具有唯一的标识码，每个控件具有相应的样式、属性、事件和数据结构。
4.公开号为cn113326044a的中国专利文献公开了一种基于控件库的开发方法，在设计界面，新建实时看板或通过文件形式导入导出实时看板；通过设计界面的可视化控件库搭建看板内容，且随时都可以依据需求调整看板内容；选中控件，可对该控件进行相关属性的配置；在运行界面，通过拖动建立资源和控件的映射关系，实现控件显示实时数据或赋予控件功能；双击控件标题弹出抽屉可以查看或修改与该控件绑定的资源信息。
5.编写前端控件库的过程中与结束后，为了对控件库中控件的视觉效果进行充分的测试，常常需要针对该控件库中的控件编写使用案例，人工编写的测试案例不仅过程繁琐，并且容易发生集中于单个功能，而对整个控件的其他功能产生遗漏的情况。并且在实际案例中，常常可以发现，代码由于经过多轮迭代与增加功能，出现许多已经废弃的实际无效的属性与事件声明。


技术实现要素：

6.本发明提供了一种前端控件库展示代码生成方法，不需要文档与人工信息，而是通过代码分析的方法自动检测代码中出现的可能无效代码以供进一步优化，并抽取待展示控件其他的属性与事件等信息，结合预定义的模板代码，生成控件展示代码，从而加速对控件功能的测试。
7.一种前端控件库展示代码生成方法，包括如下步骤：
8.(1)通过代码分析，获取待展示控件库所在的命名空间中所有类的元数据，对这些类的元数据进行筛选与处理，获得需要检测的自定义控件类的名称与其他信息，输出至表格一；
9.(2)读取表格一中的控件信息，抽取其属性与事件信息，对抽取的信息进行筛选和处理，检测其自定义属性与事件是否在除定义外的地方被使用；
10.将未被使用的属性与事件被视为可能的无效代码，输出至表格二供测试人员进一步检查；
11.(3)对步骤(2)中检测有效的属性与事件，根据模板代码的具体设置进一步抽取其具体信息进行处理，获取的待展示的属性与事件信息，输出至表格三；
12.(4)读取表格一和表格三中的信息作为环境信息，结合预定义的模板代码，使用模
板引擎自动生成主界面与控件展示界面的逻辑与展示代码，形成完整的前端控件库展示项目。
13.本发明采用代码分析的方式检测出控件库中控件存在的无用的属性与事件声明以供优化，并将其余的属性与事件信息结合模板生成的方式，自动化完成控件库的展示代码。
14.步骤(1)中，其他信息指的是其他对生成代码有影响的信息，包括：控件的类型信息、控件之间的相互关系；
15.其中，控件的类型信息通过控件继承的基类与接口信息进行分类，控件之间的相互关系通过控件的名称与继承关系判断。
16.利用控件继承的基类与接口信息将控件进行分类，便于根据不同的类型采取不同形式的模板展示，相对于单独使用的控件，列表展示类控件可以增加其中包含的数据源以及一些对数据的操作。
17.通过控件的名称与继承关系判断控件的关系，主控件与其他将多个控件在模板中一起展示。如窗口控件与对应的窗口按钮控件，选项卡容器控件与选项卡控件一起展示。
18.步骤(1)中，对这些类的元数据进行筛选与处理包括以该类本身的信息进行筛选和以该类的祖先信息进行筛选；
19.其中，以该类本身的信息进行筛选包含：去除虚拟类；以该类的祖先信息进行筛选包含：以该类是否继承自通用控件基类判断其是否为待展示控件，以该类是否继承自呈现一组项的控件将其区分为容器类控件和普通控件。
20.经过筛选与处理后，将以表格的形式输出提取的待展示控件信息，让用户可以根据需要更改表格，自定义需要展示的控件及其他信息。
21.步骤(2)中，对对抽取的信息进行筛选和处理包括：
22.对属性和事件的声明类进行限制，默认只检测声明于本类的属性与事件；对于继承于其他待检测类的属性与事件进行标注，用于后续无效代码的检测。
23.检测其自定义属性与事件是否在除定义外的地方被使用时，具体检测其是否在本控件的逻辑控制代码与样式设置代码、本控件子类的逻辑控制代码与样式设置代码中被使用。好的前端控件设计不应保存与展示完全无关的信息，因此未被使用的属性与事件声明会被做可能无效代码，需要测试人员进行进一步检测。
24.步骤(3)中，进一步抽取其具体信息进行处理包括：
25.加入继承自定义基类的有效属性与事件；加入通用展示属性，包含长、宽、背景色；根据具体展示需要对属性与事件的类型进行筛选获得待展示属性。
26.获取的待展示的属性与事件信息包括属性的类型、属性的默认值、事件的事件处理器类型、事件处理函数参数等。用户可以根据需要更改表格，自定义需要展示控件的属性与事件。
27.步骤(4)中，预定义的模板代码包括主界面与控件展示界面，其中，主界面负责总体介绍与导航到具体的控件展示界面，控件展示界面负责展示具体控件的样式与功能；
28.控件展示界面包括控件、属性控制和事件控制三部分，属性控制部分通过调节属性来控制控件的样式与功能逻辑，事件控制部分通过加入和去除事件显示按钮与事件触发显示部分来展示事件的触发时机。
29.与现有技术相比，本发明具有以下有益效果：
30.1、本发明基于前端控件库代码中常见的问题与测试的需求，自动检测自定义控件中可能无效的属性与事件声明供测试人员进行优化，并将代码分析中抽取的元数据与模板方式结合自动生成代码展示控件的视觉效果，供测试人员使用。
31.2、本发明充分满足用户的自定义的需求。步骤(1)，(3)中将信息以表格的形式进行存取，可以方便用户修改所需要展示的内容，步骤(4)中定义的模板代码可依据充分展示样式和功能的设计原则由用户自定义具体的展示方法。
附图说明
32.图1为本发明一种前端控件库展示代码生成方法的流程图。
具体实施方式
33.下面结合附图和实施例对本发明做进一步详细描述，需要指出的是，以下所述实施例旨在便于对本发明的理解，而对其不起任何限定作用。
34.一种前端控件库展示代码生成方法，采用代码分析的方式检测出控件库中控件存在的可能存在的无用的属性与事件声明以供优化，并将其余的属性与事件信息结合模板生成的方式，自动化完成控件库的展示代码，对控件的内部属性设置及其对应的视觉效果进行展示，以供测试人员进行测试。具体的，如图1所示，包括以下步骤：
35.步骤1，通过代码分析，获取指定命名空间(待展示控件库所在的命名空间)中所有类的元数据，对这些类的元数据进行筛选与处理，获得需要展示的自定义控件类的名称与其他信息，输出至表格。
36.步骤2，可选择地，用户可根据需要对表格内容进行校验与修改。
37.步骤3，读取步骤1中生成的表格，对需要展示的控件抽取控件中的属性与事件声明，检测其有效性，输出可能无效的属性与事件。
38.步骤4，对检测有效的属性和事件，进行进一步的筛选与处理，抽取其具体信息输出至表格。
39.步骤5，可选择地，用户可根据需要对表格内容进行校验与修改。
40.步骤6，读取步骤2与步骤5中生成并修改的表格中的信息作为环境信息，结合预定义的模板代码，使用模板引擎自动生成主界面与控件展示界面的逻辑与展示代码，形成完整的前端控件库展示项目。
41.本发明实施例中，实际的应用场景为windows客户端开发的wpf控件库，在该实施例中使用nvelocity模板引擎生成代码，并针对开源项目mahapps.metro进行了实验。
42.在该实施例中，通过反射的方式获得了指定命名空间(mahapps.metro.controls)中的所有类元数据，过滤掉虚拟类，并筛选出祖先中有control的且没有window的类别作为目标展示控件，并以祖先中是否具有itemscontrol的将其分为容器类控件与非容器类控件，并输出至表格。
43.读入校验与修改的待展示控件基本信息后，对每个自定义控件类中的所有属性与事件，校验其声明地点，忽略声明于通用基类的属性与事件，标记声明于本类的属性与事件，将继承自自定义基类的属性与事件，将本类的样式代码与逻辑代码加入改基类的属性
与事件的检验方法中。具体检测方式为在需要校验的控件类的cs文件中检测其是否在非声明与getset方法中的其他地方使用，在控件库中的所有的xaml文件中，检测其是否在目标类型(targettype)为该控件的样式模板(template)中被使用(如作为属性绑定的源或是设定在本控件或模板中子控件上)。输出检测可能无效的属性与事件至表格。
44.对检测有效的属性，加上常见长宽背景色等属性，根据模板设定筛选其他类型为int，double,bool,brush,color,datetime,thickness,datetime与自定义枚举类型的属性作为待展示属性，输出至表格。对每个自定义控件类中的检测有效的事件，通过反射获取该事件的事件处理器的invoke函数的参数，输出至表格。
45.读入校验与修改的待展示控件所有后，将其作为模板引擎的环境参数，与预定义的模板代码结合生成展示代码。本实现例中，代码模板主要包括主界面xaml代码模板，主界面cs代码模板，控件界面xaml代码模板与控件界面cs代码模板。主界面设定以导航卡的方式导航到各个待展示控件中。普通控件代码模板设定分为三部分，第一部分展示控件，第二部分展示属性，在该部分中不同属性根据类型，以文本，选择框等方式及进行输入或选中，并与控件绑定，第三部分展示事件，通过复选框的方式，注册事件显示的函数，该函数通过控制复选框后的文本显示函数触发次数。对内部有一组项的容器控件，设定其itemssource为字符串列表，并增加用户向itemssource添加及删除字符串的功能。
46.以上所述的实施例对本发明的技术方案和有益效果进行了详细说明，应理解的是以上所述仅为本发明的具体实施例，并不用于限制本发明，凡在本发明的原则范围内所做的任何修改、补充和等同替换，均应包含在本发明的保护范围之内。

技术特征：
1.一种前端控件库展示代码生成方法，其特征在于，包括如下步骤：(1)通过代码分析，获取待展示控件库所在的命名空间中所有类的元数据，对这些类的元数据进行筛选与处理，获得需要检测的自定义控件类的名称与其他信息，输出至表格一；(2)读取表格一中的控件信息，抽取其属性与事件信息，对抽取的信息进行筛选和处理，检测其自定义属性与事件是否在除定义外的地方被使用；将未被使用的属性与事件被视为可能的无效代码，输出至表格二供测试人员进一步检查；(3)对步骤(2)中检测有效的属性与事件，根据模板代码的具体设置进一步抽取其具体信息进行处理，获取的待展示的属性与事件信息，输出至表格三；(4)读取表格一和表格三中的信息作为环境信息，结合预定义的模板代码，使用模板引擎自动生成主界面与控件展示界面的逻辑与展示代码，形成完整的前端控件库展示项目。2.根据权利要求1所述的前端控件库展示代码生成方法，其特征在于，步骤(1)中，其他信息指的是其他对生成代码有影响的信息，包括：控件的类型信息、控件之间的相互关系；其中，控件的类型信息通过控件继承的基类与接口信息进行分类，控件之间的相互关系通过控件的名称与继承关系判断。3.根据权利要求1所述的前端控件库展示代码生成方法，其特征在于，步骤(1)中，对这些类的元数据进行筛选与处理包括以该类本身的信息进行筛选和以该类的祖先信息进行筛选；其中，以该类本身的信息进行筛选包含：去除虚拟类；以该类的祖先信息进行筛选包含：以该类是否继承自通用控件基类判断其是否为待展示控件，以该类是否继承自呈现一组项的控件将其区分为容器类控件和普通控件。4.根据权利要求1所述的前端控件库展示代码生成方法，其特征在于，步骤(2)中，对抽取的信息进行筛选和处理包括：对属性和事件的声明类进行限制，默认只检测声明于本类的属性与事件；对于继承于其他待检测类的属性与事件进行标注，用于后续无效代码的检测。5.根据权利要求1所述的前端控件库展示代码生成方法，其特征在于，步骤(2)中，检测其自定义属性与事件是否在除定义外的地方被使用时，具体检测其是否在本控件的逻辑控制代码与样式设置代码、本控件子类的逻辑控制代码与样式设置代码中被使用。6.根据权利要求1所述的前端控件库展示代码生成方法，其特征在于，步骤(3)中，进一步抽取其具体信息进行处理包括：加入继承自定义基类的有效属性与事件；加入通用展示属性，包含长、宽、背景色；根据具体展示需要对属性与事件的类型进行筛选获得待展示属性。7.根据权利要求1所述的前端控件库展示代码生成方法，其特征在于，步骤(3)中，获取的待展示的属性与事件信息包括属性的类型、属性的默认值、事件的事件处理器类型、事件处理函数参数。8.根据权利要求1所述的前端控件库展示代码生成方法，其特征在于，步骤(4)中，预定义的模板代码包括主界面与控件展示界面，其中，主界面负责总体介绍与导航到具体的控件展示界面，控件展示界面负责展示具体控件的样式与功能；控件展示界面包括控件、属性控制和事件控制三部分，属性控制部分通过调节属性来
控制控件的样式与功能逻辑，事件控制部分通过加入和去除事件显示按钮与事件触发显示部分来展示事件的触发时机。

技术总结
本发明公开了一种前端控件库展示代码生成方法，采用代码分析的方式检测出控件库中控件存在的可能存在的无用的属性与事件声明以供优化，并将其余的属性与事件信息结合模板生成的方式，自动化完成控件库的展示代码，对控件的内部属性设置及其对应的视觉效果进行展示，以供测试人员进行测试。利用本发明，不需要文档与人工信息，而是通过代码分析的方法自动检测代码中出现的可能无效代码以供进一步优化，并抽取待展示控件其他的属性与事件等信息，结合预定义的模板代码，生成控件展示代码，从而加速对控件功能的测试。从而加速对控件功能的测试。从而加速对控件功能的测试。


技术研发人员：李莹 张心怡 邓水光 尹建伟
受保护的技术使用者：浙江大学
技术研发日：2023.04.18
技术公布日：2023/7/7