一种基于静态界面可视化编程的方法与流程

本发明涉及计算机软件技术领域，特别涉及一种基于静态界面可视化编程的方法。

技术背景

软件开发过程中，美工人员根据需求画出软件界面，前端开发人员根据软件界面画稿利用图形用户界面设计器负责将界面实现，但此时的界面还不能响应用户点击命令，需要编写代码实现被点击控件对应的功能，界面开发中在需要花费大量的时间在实现控件对应的执行功能上，工作量大且容易出错，如何提高代码的复用率，减小开发人员的工作量，提高开发效率成了本领域技术人员的重中之重。

技术实现要素：

有鉴于此，本发明提供了一种基于静态界面可视化编程的方法。

具体地，本申请是通过如下技术方案实现的：

解析所述界面设计图文件，根据控件特征库从所述界面设计图文件中提取控件信息生成相应的原生控件信息项，将所述原生控件信息项存入控件信息库中；

以所述原生控件信息项为执行功能的触发源，根据触发条件配置所述执行功能的子功能参数，集合所有所述子功能参数组成执行单元配置参数；

根据所述执行单元配置参数生成执行单元配置文件，所述执行单元配置文件及对应的散列值保存在执行单元配置文件库中；

根据所述执行单元配置文件匹配代码模板库，匹配的代码模板反向从所述执行单元配置文件中获取依赖参数，根据所述依赖参数实例化所述代码模板生成代码。

优选地，所述控件特征库中的控件特征项包括：图形界面设计器类型、图形界面设计器版本号、控件类型、控件版本号、属性名。

优选地，提取控件信息使用文本匹配提取。

优选地，提取控件信息使用正则表达式匹配提取。

优选地，提取控件信息使用基于xml格式的xpath查找提取。

进一步的，所述控件信息库中还包括自定义控件信息项。

进一步的，原生控件信息项根据不同的所述触发条件可以有相同或不同的所述执行单元配置参数。

进一步的，采用安全散列算法计算所述执行单元配置文件散列值，当所述执行单元配置文件库中已存在相同散列值时，增加所述散列值引用计数，不再保存所述执行单元配置文件。

进一步的，根据所述触发条件可以直接从所述执行单元配置文件库中选择文件。

进一步的，当从所述执行单元配置文件中获取所述依赖参数不存在时，采用所述代码模板中的默认值。

本发明的一种基于静态界面可视化编程的方法，从应用软件开发中前工序的输出文件开始，将所述界面设计图文件作为可视化编程的入口，提供模板化的重构代码，使开发人员在可视化界面上配置执行功能数所需的参数，规范了软件开发操作流程，提高代码复用率，减小开发人员工作量，有效的提高了工作效率。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。

图1是一种基于静态界面可视化编程的方法的整体流程图；

图2是一种基于静态界面可视化编程的方法的实施例的执行单元子功能图；

图3是一种基于静态界面可视化编程的方法的实施例的登录界面设计图文件图；

图4是一种基于静态界面可视化编程的方法的实施例的子功能参数配置图。

具体实施例

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

需要说明的是，当组件被称为“固定于”另一个组件，它可以直接在另一个组件上或者也可以存在居中的组件。当一个组件被认为是“连接”另一个组件，它可以是直接连接到另一个组件或者可能同时存在居中组件。当一个组件被认为是“设置于”另一个组件，它可以是直接设置在另一个组件上或者可能同时存在居中组件。本文所使用的术语“垂直的”、“水平的”、“左”、“右”以及类似的表述只是为了说明的目的。

除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本发明。本文所使用的术语“及／或”包括一个或多个相关的所列项目的任意的和所有的组合。

界面功能实现依赖于数据输入、数据处理、数据结果呈现。当所述界面设计图文件中的数据信息能够满足所述数据处理时，在此基础上对数据处理按子功能进行划分，将所述子功能依赖的参数来源绑定到通过以可视化界面的方式由用户选择对应的控件上，所需的所述依赖参数就可以从界面中获取。

请参见图1，为本实施例提供的一种基于静态界面的可视化编程的方法的整体流程图，如图1所示，该基于静态界面的可视化编程的方法可以包括以下步骤：

s100、解析界面设计图文件，构建控件信息库。

所述界面设计图文件至少包含了一个控件，控件中包含的多种信息，如界面类型、界面实例名、控件类型、控件实例名、属性等，根据所述控件类型可以知道获取所述控件值的方法，根据所述控件实例名可以区分同类型控件中具体的实例。构建一个控件特征库，特征值包括：图形界面设计器类型、图形界面设计器版本号、控件类型、控件版本号、属性名等。根据所述控件特征库从所述界面设计图文件中提取控件信息。

示例性的，下拉框控件提供下拉列表供用户选择，提供获取当前选择项的方法来获取所述当前选择项的值，如qt中的qcombobox下拉框控件，提供currenttext方法获取当前选择项的值；c#中的combobox下拉框控件，提供text方法获取当前关联值。

示例性的，文本输入框控件提供输入框供用户输入数据，提供获取当前数据的的方法，如qt中的qlineedit文本输入框控件，提供text方法获取当前输入数据；android中的textview文本输入框控件，提供gettext方法获取当前输入数据。

进一步的，提取具体的所述控件信息，可以采用文件匹配、正则表达式匹配。如匹配所述qcombobox下拉框控件的实例名，采用如下正则表达式：

<widgetclass="qcombobox"name="[:text:]+">

进一步的，基于xml格式的所述界面设计图文件，可以采用xpath提取信息。

在本申请实施例中，如图3所示，提供用户登录界面的界面设计图文件，所述用户登录界面为用户登录远程系统提供界面入口，所述远程系统对所述用户提交的用户名和密码进行验证并反馈验证结果，所述用户登录界面同时提供本地配置选项功能，如“记住密码”功能，避免重复输入用户名和密码。

根据控件特征库解析所述界面设计图文件，对每个控件建立相应的原生控件信息项并存入到控件信息库。

进一步的，当所述原生控件信息项不能满足需求是，可以添加自定义控件信息项到所述控件信息库中，如验证成功后将跳转到新的界面，可以添加跳转控件相关的所述自定义控件信息项。

s200、配置控件执行单元参数。

在一个示例中，用户通过可视化界面与应用程序交互获取预期结果，应用程序通过执行完成相应的数据处理然后将结果呈现给用户，如点击登录按钮控件进入应用系统，点击刷新按钮控件获取数据列表，点击删除按钮控件删除数据项等。

控件接收单击、双击、键盘输入等触发动作作为执行功能的驱动源，以一次触发动作为整体单元执行相应的功能，一个执行单元功能实现由多个子功能构成，如建立网络连接、保存本地配置、发送数据等，多个子功能组成执行单元功能的处理流程。

如图2所示，为本申请实施例的子功能的划分图，分为网络连接、协议协商、编解码、持久化存储、数据采集、数据传输、数据监听、反馈。

在本申请实施例中，如图4所示，以可视化界面的方式提供子功能配置参数：

在本申请实施例中，网络连接子功能配置界面提供网络地址下拉框控件、连接协议下拉框控件，所述网络地址下拉框控件将显示所述控件信息库中的所述控件实例名，在所述网络地址下拉框控件中选择对应的所述控件实例名进行网络地址绑定，所述连接协议下拉框控件提供连接协议选择项，根据所述连接协议项获取对应的默认端口。

示例性的，网络地址可以是域名形式、ip地址、loopback回环地址。

在本申请实施例中，协议协商子功能配置界面提供协议下拉框控件，所述协议下拉框控件显示协议名称，如tcp协议，http协议、xmpp协议等，在所述协议下拉框控件中选择对应的协议。

在本申请实施例中，数据采集子功能配置界面提供数据项下拉框控件、添加按钮控件、数据编码下拉框控件，所述数据项下拉框控件将显示所述控件信息库中的所述控件实例名，所述添加按钮控件负责将数据项下拉框控件中当前选中的所述控件实例名添加到发送数据列表中，所述数据编码下拉框控件中显示编码方式，如json，urlcode，formdata等，表示将所述发送数据列表中的所述控件实例名对应的数据进行编码的方式。

在本申请实施例中，登录界面将向服务器发送用户名和密码进行登录验证，因此只需在所述数据项下拉框控件中选择所述用户名和密码对应的所述控件实例名，点击所述添加按钮控件。

在本申请实施例中，数据编码方式采用json格式。

在本申请实施例中，持久化存储配置界面提供本地配置项下拉框控件、添加按钮控件，所述本地配置项下拉框控件将显示所述控件信息库中的控件实例名，所述添加按钮控件负责将本地配置项下拉框控件当前选中的所述控件实例名添加到本地配置数据列表中。

示例性的，可以将界面上所有的可编辑控件都保存到本地，当软件再次启动时可以快速恢复到上次界面状态，增强用户体验。

在本申请实施例中，所述本地配置项下拉框控件中选择所述用户名和密码对应的所述控件实例名。

在本申请实施例中，反馈配置界面中提供反馈项控件、反馈项值控件、映射目标下拉框控件、映射目标行为下拉框控件。所述反馈项控件输入需要监听的所述远程系统反馈数据的关键字，所述反馈项值控件输入所述反馈数据的关键字对应的值，所述映射目标下拉框控件将显示所述控件信息库中的控件实例名，所述映射目标行为下拉框控件根据所述映射目标下拉框控件当前选择的所述控件实例名对应的行为。

示例性的，所述反馈行为有但不止于：更新、跳转、提示。

在本申请实施例中，所述远程系统反馈项为验证结果verify_result，当所述验证结果verify_result为非0的整数值时表示认证成功，为0表示认证失败，因此在所述反馈项控件中输入verify_result，所述反馈项值控件中输入1，所述映射目标下拉框控件中选择界面控件，所述映射目标行为下拉框控件中选择跳转，即当所述远程系统验证成功反馈结果后，所述登录界面将跳转到其他界面，如程序主界面。

s300、构建执行单元配置文件。

配置所述执行单元配置参数后，以xml文件格式保存，其中以各个所述子功能作为配置节点，在所述配置节点中保存相应的参数值，由所述配置节点组成xml文件内容。

在本申请实施例中，通过http/2.0协议向服务器发送登录请求，生成的网络连接配置节点内容包括服务器地址、服务器端口号、协议类型、认证方式。节点内容如下：

<network>

<peeraddr>localhost</peeraddr>//网络地址

<protocol>http/2.0</protocol>//协议类型

<peerport>80</port>//端口号

<authtype>basic</authtype>//认证模式

</network>

在一个示例中，建立网络建立后，需要发送数据到服务器端进行交互，如验证用户身份信息、发送请求等，所述发送数据可以采用编码方式，也可以直发送。

示例性的，数据传输子功能的所述配置节点内容可以如下：

<uploaddata>

<encodetype>json</encodetype>//编码方式

<data>{username:zjhckjpat,passwd:abc123456}</data>//数据内容

</uploaddata>

在本申请实施例中，通过服务器反馈结果${verify_result}进行下一步动作，所述反馈结果分为零值和非零值，需要配置两个监控项，当反馈结果为0时进行提示行为,当反馈结果为非0时跳转到下一个界面，执行跳转行为，即进入程序主界面。配置内容如下：

<monitor>

<monitoritem>//监控项

<key>verify_result</key>//监控项关键字

<value>0</0>//监控项目标值

<widgettype>qmessagebox</widgettype>//执行动作

<widgetinstname>hintbox</widgetinstname>

<widgetmethod>showhintmessage</widgetmethod>

<widgetargs>wronguseranmeorpasswd</widgetargs>//错误提示

</monitoritem>

<monitoritem>

<key>verify_result</key>

<value>1</0>

<widgettype>qdialog</widgettype>

<widgetinstname>logindialog</widgetinstname>

<widgetmethod>jumnewwidget</widgetmethod>

<widgetargs></widgetargs>

</monitoritem>

</monitor>

对生成的所述执行单元配置文件采用安全散列算法进行计算，将计算结果散列值和所述执行单元配置文件存入执行单元配置文件库中。根据所述触发条件可以直接从所述执行单元配置文件库中选择文件，避免重复配置。

进一步的，当所述执行单元配置文件库中已存在相同的所述散列值时，只增加所述散列值得引用计数，不再存入所述执行单元配置文件，节省存储空间，提高检索效率。

进一步的，多个控件的所述触发行为可以关联到同一个所述示执行单位配置文件，同一个控件的所述触发行为可以关联到不同的所述执行单位配置文件。

s400、实例化代码模板，生成代码。

根据所述执行单元配置文件，匹配代码模板库，匹配的代码模板根据所需的依赖参数反向从所述执行单元配置文件中获取相应的参数值，代入相应的所述参数值实例化所述代码模板生成代码。

需要说明的是，采用反向获取方式可以减低所述代码模板与所述执行单元配置文件的耦合度，降低代码开发的复杂性。

在一个示例中，当从所述执行单元配置文件获取不到所述依赖参数时，采用所述代码模板中的默认值。

在本申请实施例中，所述登录界面通过网络发送用户名和密码到服务器进行验证，首先建立网络连接，通过所述代码模板库找到网络连接代码模板，所述网络连接代码模板根据协议类型${protocol}创建套接字，随后根据远程地址${address}和远程端口${port}向服务器建立连接，所述代码模板如下：

socket*s=newsocket(${protocol});

s->connect(${address},${port});

在所述网络连接代码模板的基础上，代入所述执行单元配置参数中的所述依赖参数，如protocolle、addressle、portle均为控件实例名，实例化化所述网络连接代码模板生成如下可执行代码：

socket*s=newsocket(protocolle->gettext());

s->connect(addressle->gettext(),portle->gettext);

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上对本发明的实施例进行了详细说明，但内容仅为本发明的较佳实施例，不能被认为用于限定本发明的实施范围。凡依本发明范围所作的均等变化与改进等，均应仍归属于本专利涵盖范围之内。