CN108021367B - 一种基于元数据架构的ui开发系统及方法 - Google Patents

Abstract

本发明公开一种基于元数据架构的UI开发系统及方法，涉及UI开发技术领域，系统包括领域模型模块、占位控件模块和UI设计器；所述的领域模型模块：用于对待开发对象进行可视化处理，模块包括内部属性和实体间关系，并将模型提交至UI设计器；所述的占位控件模块：用于封装样式、逻辑、动作属性，构建不同控件；所述的UI设计器：用于解析模型的实体信息，根据实体信息自动匹配对应的控件，生成UI配置元数据；本发明过对UI控件和属性进行抽象，通过UI设计器控制布局，大大提高开发效率和控件的重用性，并可实现一次设计在多个平台上进行呈现和交互。

Description

一种基于元数据架构的UI开发系统及方法

技术领域

本发明涉及UI开发技术领域，尤其涉及一种基于元数据架构的UI开发系统及方法。

背景技术

现有程序的UI设计通常是以开发工具(visual studio,eclipse)为基础,进行所见即所得的设计；其缺点是：1.官方提供的开发工具不支持在Web、移动端、桌面端的迁移；2.官方提供的开发工具均为不包含业务逻辑的标准控件，开发人员容易重复开发，且开发周期较长；3.开发过程中无相应约束，开发人员技能水平和对UI规范的理解程度会极大的影响界面效果。

发明内容

本发明提供一种基于元数据架构的UI开发系统及方法，旨在提高开发效率和控件的重用性，实现一次设计在多个平台上进行呈现和交互。

为了实现上述目的，本发明提出一种基于元数据架构的UI开发系统，包括领域模型模块、占位控件模块和UI设计器；

所述的领域模型模块：用于对待开发对象进行可视化处理，模块包括内部属性和实体间关系，并将模型提交至UI设计器；

所述的占位控件模块：用于封装样式、逻辑、动作属性，构建不同控件；

所述的UI设计器：用于解析模型的实体信息，根据实体信息自动匹配对应的控件，生成UI配置元数据。

优选地，所述的不同控件，包括基础控件、选择控件和复合控件。

优选地，所述的UI设计器，包括解析模块、控件清单构建模块、UI设计模块、数据保存模块；

所述的解析模块：用于自动解析模型的实体信息，并发送至控件清单构建模块；

所述的控件清单构建模块：用于依次处理实体信息中的属性清单，属性的描述设置为控件的标签，并根据属性的类型设置输入控件的类型；

所述的UI设计模块：用于设置各控件的布局、属性和展示形式，获得设计信息；

所述的数据保存模块：用于根据设计信息生成UI配置元数据。

优选地，所述的UI设计器，还包括基本信息构建模块，用于获取实体信息中的标题，进而生成UI窗口标题。

优选地，所述的UI配置元数据，发送至AutoUI组件不同展示平台，根据UI配置元数据自动生成相应的控件，设置控件的页面布局。

优选地，所述的AutoUI组件不同展示平台，包括WPF平台、Web平台和移动平台。

本发明还提出一种基于元数据架构的UI开发方法，包括如下步骤：

对待开发对象进行可视化处理，模块包括内部属性和实体间关系；

封装样式、逻辑、动作属性，构建不同控件；

解析模型的实体信息，根据实体信息自动匹配对应的控件，生成UI配置元数据。

优选地，所述的解析模型的实体信息，根据实体信息自动匹配对应的控件，生成UI配置元数据步骤，具体包括如下步骤：

自动解析模型的实体信息；

依次处理实体信息中的属性清单，属性的描述设置为控件的标签，并根据属性的类型设置输入控件的类型；

设置各控件的布局、属性和展示形式，获得设计信息；

根据设计信息生成UI配置元数据。

优选地，所述的解析模型的实体信息，根据实体信息自动匹配对应的控件，生成UI配置元数据步骤，具体还包括：

获取实体信息中的标题，进而生成UI窗口标题。

优选地，所述的解析模型的实体信息，根据实体信息自动匹配对应的控件，生成UI配置元数据步骤之后，还包括：

将UI配置元数据发送至AutoUI组件不同展示平台，根据UI配置元数据自动生成相应的控件，设置控件的页面布局。

本发明提出的一种基于模型驱动的元数据架构的UI开发系统及方法，通过对UI控件和属性进行抽象，自动匹配和生成UI控件，并通过UI设计器控制布局，大大提高开发效率和控件的重用性，图形化的操作和配置，降低技能要求和学习门槛，并可实现一次设计在多个平台上进行呈现和交互。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图示出的结构获得其他的附图。

图1为本发明一种实施例中基于元数据架构的UI开发系统结构框图；

图2为本发明一种实施例中工单管理领域模型示意图；

图3为本发明一种实施例中UI设计器内部结构框图；

图4为本发明一种实施例中包含基本信息构建模块的UI设计器内部结构框图；

图5为本发明一种实施例中基于元数据架构的UI开发方法流程图；

图6为本发明一种实施例中步骤S30具体流程图；

图7为本发明一种实施例中步骤S305流程图；

图8为本发明一种实施例中步骤S40流程图；

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

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

需要说明，若本发明实施例中有涉及方向性指示(诸如上、下、左、右、前、后……)，则该方向性指示仅用于解释在某一特定姿态(如附图所示)下各部件之间的相对位置关系、运动情况等，如果该特定姿态发生改变时，则该方向性指示也相应地随之改变。

另外，若本发明实施例中有涉及“第一”、“第二”等的描述，则该“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本发明要求的保护范围之内。

本发明提出一种基于元数据架构的UI开发系统；

在一优选实施例中，参考图1，该系统包括领域模型模块、占位控件模块和UI设计器；其中，领域模型模块用于对待开发对象进行可视化处理，模块包括内部属性和实体间关系，并将模型提交至UI设计器；占位控件模块用于封装样式、逻辑、动作属性，构建不同控件；UI设计器用于解析模型的实体信息，根据实体信息自动匹配对应的控件，生成UI配置元数据。

在一优选实施例中，参考图1，所述的UI配置元数据，发送至AutoUI组件不同展示平台，根据UI配置元数据自动生成相应的控件，设置控件的页面布局；所述的AutoUI组件不同展示平台，包括WPF平台、Web平台和移动平台。

在一优选实施例中，以《工单管理》功能为示例；领域模型参考图2，领域根为工单实体，工单实体中包含简单属性：如工单计划数、开始时间、结束时间等；还包含列表属性：如工单类型，状态，数据来源；亦包含引用关系：如制单人(人员数据)，客户(客户数据)，销售订单(ERP订单数据)，产品(物料数据)；

在一优选实施例中，所述的不同控件，包括基础控件、选择控件和复合控件，本实施例中，基础控件：数字输入框、文本输入框、时间选择器、勾选框、复选框；选择控件：列表单选器，列表多选器；复合控件：员工选择、客户选择、销售订单选择、产品选择、产线选择、仓库选择、检验项目选择、缺陷选择、等级选择；

在一优选实施例中，参考图3，所述的UI设计器，包括解析模块、控件清单构建模块、UI设计模块、数据保存模块；其中，

解析模块用于自动解析模型的实体信息，并发送至控件清单构建模块；

本实施例中，选择工单模型后，UI设计器自动解析实体信息，如标题、属性、类型、引用关系等；

控件清单构建模块用于依次处理实体信息中的属性清单，属性的描述设置为控件的标签，并根据属性的类型设置输入控件的类型；

本实施例中，分别处理简单属性清单、列表属性清单和引用属性清单；具体如下：

依次处理简单属性清单，属性的描述设置为控件的标签，并根据属性的类型设置输入控件的类型；如工单计划数属性：会自动生成控件ID为：numOrderQty，标签为：订单数量，类型为数据输入框的控件。

依次处理列表属性清单，基本逻辑与简单属性处理相类似，控件会自动设置为选择控件，且会设置选择控件的列表数据项。如工单类型会自动生成列表控件ID为：lstWorkOrderType，标签为工单状态，类型为列表选择框，其数据项目为：量产、试产、返修、校验。

依次处理引用属性清单，基本逻辑与简单属性处理相类似，控件会自动设置为相应的复合控件；如本例中制单人信息，会自动生成选择控件ID为lkuUser的数据选择控件，标签为制单人，其数据源自动从用户数据表中获取状态为生效状态的用户数据。

UI设计模块用于设置各控件的布局、属性和展示形式，获得设计信息；

本发明实施例中，例如设置录入界面的每行控件数量，每个控件的跨行、跨列数。设置控件的验证规则：可否为空、文本格式、数据格式。

数据保存模块用于根据设计信息生成UI配置元数据。

在一优选实施例中，参考图4，所述的UI设计器，还包括基本信息构建模块用于获取实体信息中的标题，进而生成UI窗口标题。

本实施例中，开发人员重点关注领域模型建模和UI布局及属性设计，展示和输入控件及其业务逻辑由平台一次开发可重复使用，并且开发人员不用关注其技术细节。AutoUI框架统一负责界面风格呈现，不同开发人员进行UI设计时展示风格一致。通过实现不同平台的AutoUI组件(Web，WPF，WinFrom，移动端)对配置进行解析，可实现一次设计多平台同时使用。

本发明还提出一种基于元数据架构的UI开发方法；

在一优选实施例中，参考图5，包括如下步骤：

S10、对待开发对象进行可视化处理，获得由领域根、内部属性和实体间关系构成的模型；

S20、封装样式、逻辑、动作属性，构建不同控件；

S30、解析模型的实体信息，根据实体信息自动匹配对应的控件，生成UI配置元数据。

在一优选实施例中，参考图6，步骤S30，具体包括如下步骤：

S301、自动解析模型的实体信息；

本实施例中，选择工单模型后，UI设计器自动解析实体信息，如标题、属性、类型、引用关系等；

S302、依次处理实体信息中的属性清单，属性的描述设置为控件的标签，并根据属性的类型设置输入控件的类型；

本实施例中，分别处理简单属性清单、列表属性清单和引用属性清单；具体如下：

依次处理简单属性清单，属性的描述设置为控件的标签，并根据属性的类型设置输入控件的类型；如工单计划数属性：会自动生成控件ID为：numOrderQty，标签为：订单数量，类型为数据输入框的控件。

依次处理列表属性清单，基本逻辑与简单属性处理相类似，控件会自动设置为选择控件，且会设置选择控件的列表数据项。如工单类型会自动生成列表控件ID为：lstWorkOrderType，标签为工单状态，类型为列表选择框，其数据项目为：量产、试产、返修、校验。

依次处理引用属性清单，基本逻辑与简单属性处理相类似，控件会自动设置为相应的复合控件；如本例中制单人信息，会自动生成选择控件ID为lkuUser的数据选择控件，标签为制单人，其数据源自动从用户数据表中获取状态为生效状态的用户数据。

S303、设置各控件的布局、属性和展示形式，获得设计信息；

本发明实施例中，例如设置录入界面的每行控件数量，每个控件的跨行、跨列数。设置控件的验证规则：可否为空、文本格式、数据格式。

S304、根据设计信息生成UI配置元数据。

在一优选实施例中，参考图7，步骤S30，具体还包括：

S305、获取实体信息中的标题，进而生成UI窗口标题。

在一优选实施例中，参考图8，步骤S30之后，还包括：

S40、将UI配置元数据发送至AutoUI组件不同展示平台，根据UI配置元数据自动生成相应的控件，设置控件的页面布局。

本实施例中，开发人员重点关注领域模型建模和UI布局及属性设计，展示和输入控件及其业务逻辑由平台一次开发可重复使用，并且开发人员不用关注其技术细节。AutoUI框架统一负责界面风格呈现，不同开发人员进行UI设计时展示风格一致。通过实现不同平台的AutoUI组件(Web，WPF，WinFrom，移动端)对配置进行解析，可实现一次设计多平台同时使用。

以上所述仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是在本发明的发明构思下，利用本发明说明书及附图内容所作的等效结构变换，或直接/间接运用在其他相关的技术领域均包括在本发明的专利保护范围内。

Claims (8)

1.一种基于元数据架构的UI开发系统，其特征在于，包括领域模型模块、占位控件模块和UI设计器；

所述的领域模型模块：用于对待开发对象进行可视化处理，模块包括内部属性和实体间关系，并将模型提交至UI设计器；

所述的占位控件模块：用于封装样式、逻辑、动作属性，构建不同控件；

所述的UI设计器：用于解析模型的实体信息，根据实体信息自动匹配对应的控件，生成UI配置元数据；

所述的UI设计器，包括解析模块、控件清单构建模块、UI设计模块和数据保存模块；

所述的解析模块：用于自动解析模型的实体信息，并发送至控件清单构建模块；

所述的控件清单构建模块：用于依次处理实体信息中的属性清单，属性的描述设置为控件的标签，并根据属性的类型设置输入控件的类型；

所述的UI设计模块：用于设置各控件的布局、属性和展示形式，获得设计信息；

所述的数据保存模块：用于根据设计信息生成UI配置元数据。

2.根据权利要求1所述的基于元数据架构的UI开发系统，其特征在于，所述的不同控件，包括基础控件、选择控件和复合控件。

3.根据权利要求1所述的基于元数据架构的UI开发系统，其特征在于，所述的UI设计器，还包括基本信息构建模块，用于获取实体信息中的标题，进而生成UI窗口标题。

4.根据权利要求1所述的基于元数据架构的UI开发系统，其特征在于，所述的UI配置元数据，发送至AutoUI组件不同展示平台，根据UI配置元数据自动生成相应的控件，设置控件的页面布局。

5.根据权利要求4所述的基于元数据架构的UI开发系统，其特征在于，所述的AutoUI组件不同展示平台，包括WPF平台、Web平台和移动平台。

6.一种基于元数据架构的UI开发方法，其特征在于，包括如下步骤：

对待开发对象进行可视化处理，模块包括内部属性和实体间关系；

封装样式、逻辑、动作属性，构建不同控件；

解析模型的实体信息，根据实体信息自动匹配对应的控件，生成UI配置元数据；

所述的解析模型的实体信息，根据实体信息自动匹配对应的控件，生成UI配置元数据步骤中，具体还包括如下步骤：

自动解析模型的实体信息；

依次处理实体信息中的属性清单，属性的描述设置为控件的标签，并根据属性的类型设置输入控件的类型；

设置各控件的布局、属性和展示形式，获得设计信息；

根据设计信息生成UI配置元数据。

7.根据权利要求6所述的基于元数据架构的UI开发方法，其特征在于，所述的解析模型的实体信息，根据实体信息自动匹配对应的控件，生成UI配置元数据步骤中，具体还包括：

获取实体信息中的标题，进而生成UI窗口标题。

8.根据权利要求6所述的基于元数据架构的UI开发方法，其特征在于，所述的解析模型的实体信息，根据实体信息自动匹配对应的控件，生成UI配置元数据步骤之后，还包括：

将UI配置元数据发送至AutoUI组件不同展示平台，根据UI配置元数据自动生成相应的控件，设置控件的页面布局。

Images