基于MDA的Android移动用户界面建模与转换方法

摘要

本发明公开一种基于MDA的Android移动用户界面建模与转换方法，属于软件工程技术领域。随着信息产业的不断发展，客户对移动用户界面的要求越来越高，其复杂性也在不断增长。为了提高软件的开发效率同时确保UI的渲染程度，本发明参考模型驱动的思想，基于交互流建模语言，提出一种该源模型IFML到目标模型Flutter的转换方法，并设计交互流建模语言到特定平台Flutter的映射关系，最后通过Flutter平台的渲染引擎生成Android的App。

说明书

技术领域

本发明涉及一种基于MDA的Android移动用户界面建模与转换方法，特别是一种基于模型驱动的Android移动用户界面进行抽象提取用户界面模型的建模方法，通过扩展的IFML对Flutter平台的Android端进行建模，属于软件工程技术领域。

背景技术

随着信息产业的不断发展，软件的大小和复杂性也在不断增长。每当新技术来临，人们不得不一再地重复过去的工作。一个系统需要多种技术来构建，同时伴随着经常性的与外界交流，需求方面也在经常性的发生改变。

同时，由于移动端的便捷性，越来越多的人偏向于用移动手机来办公，购物，学习等，人们对移动UI用户体验的需求也在攀升，这意味着不仅要提升移动用户界面的流畅性，更要提高UI的渲染程度，绚丽的UI更能吸引用户的眼球。

在移动应用软件的开发方面，由于传统编译器的特性，开发人员一般在每次开发、测试、维护过的程中都要预先编译代码才能执行，导致了软件开发周期的延长。与此同时，移动开发中的2D、动画、手势、效果等时常成为开发人员的难题。

为了解决上述问题，以OMG提出了MDA方法。MDA把软件开发的注意焦点提到了更高的抽象层次，它可以用来创建良好的设计，应付多样化的实现技术，延长软件的生命周期。

2013年，交互流建模语言(IFML)是OMG制定的可视化建模标准，支持对台式机，笔记本电脑，平板电脑，移动设备等系统，用于描述前端图形用户界面的视图结构和内容、事件和数据的交互、事件的转换和触发以及参数的绑定。

在2018年世界移动大会上公布了Flutter，它是Google近几年开发的开源UI框架，支持移动、Web、桌面和嵌入式平台。Flutter使用Dart语言作为开发语言来开发应用程序，并允许开发人员使用平台API、第三方框架及原生代码(如Java)。它有一套自己的代码库用来开发Android，其运行效率可以跟原生App相媲美。在Android平台上，Flutter支持程序的热更新，扩展程序的功能，修复bug等，并以每秒上百帧的速度对UI持续渲染，对2D、动画、手势和特性等也有很强大的API来支持。

现有技术中存在的问题是：

1.当软件开发过程中需求和数据源发生改变时，用户界面就会需要被进行大幅修改甚至重建，这降低了开发的效率。

2.App中的用户界面渲染程度仍有不足。

3.在移动开发中的2D、动画、手势、效果等时常成为开发人员的难题。

发明内容

本发明要解决的技术问题是提供一种基于MDA的Android移动用户界面建模与转换方法，通过扩展的IFML对Flutter平台的Android端进行建模，以可视化的方式展现给开发人员，提高软件的开发效率，同时提供绚丽的UI，并以良好的可重用性和可扩展性最终生成Android的App。该模型能够以可视化的方式展现给开发人员，并以良好的可维护性和可重用性最终生成Android的App。

本发明采用的技术方案是：一种基于MDA的Android移动用户界面建模与转换方法，包括如下步骤：

(1)基于模型驱动的元对象机制(Meta-Object Facility,MOF)，为元模型、模型、模型与模型之间关系进行形式化定义；

(2)基于交互流建模语言对移动用户界面的平台无关模型进行建模，并用抽象语法进行表示；

(3)对IFML针对Flutter平台的Android端进行扩展，作为IFML模型的元模型(Interaction Flow Modeling Language Model,M-IFMLM)，扩展过程如下所示：

1)对IFML的ViewContainer扩展得到Container容器、BrowBar眉栏、Body主体、BottomBar低栏、Card Block卡片块、Drawer抽屉、Dialog对话框；

2)参考XAML的可视化树方法得到视图容器针对Flutter平台扩展的可视化树；

3)对IFML的Component扩展得到Text文本、Image图片、Button按钮、Time时间、Icon图标、List列表、Layout布局、Route路由；

4)参考XAML的可视化树方法得到各个组件针对Flutter平台扩展的可视化树；

(4)对IFML的表达能力进行分析，分析Flutter组件与元模型的对应关系，如表2-1所示；

表2-1 Flutter组件与M-IFMLM元素的对应关系及其说明

(5)确定IFML的规范，该规范由5个主要技术构件组成：

1)IFML元模型使用OMG元对象机制(MOF)指定IFML构造的结构和语义；

2)IFML基于UML的语法,用于表示自己独特的模型。特别地,IFML基于UML的类图，用于表达它们的层次结构，依赖性等问题；

3)IFML可视化语法提供了基于UML图的具体表示。这样可以压缩用户界面的表示。以往的做法是将这部分分别用UML类图，状态图和复合结构图来表示；

4)IFML的语法提供了一种文本的替代方法，它与可视化语法一样，用于表示IFML模型；

5)IFML以XMI为工具提供了可移植性的模型交换格式；

(6)确定IFML应尽可能遵循的3个规则；

1)简洁性：模型直接映射到目标代码中；

2)可扩展性：在模型映射的过程中，需要替换实体类中的属性、方法、参数的名称或数据类型；

3)可执行性：在模型映射的过程中，需要用户交互后选择的结果映射为目标代码；

(7)设计模型映射规则的2种方式：

1)直接映射：模型直接映射到目标代码中，如模型中的多媒体元素Media可映射为Flutter组件中的Image；

2)间接映射：在模型映射的过程中，根据开发人员的需要，选择不同类型的组件进行映射，如模型中的列表元素List可映射为Flutter组件中的列表布局ListView或网格布局GridView；

(8)通过Flutter平台的渲染引擎生成Android的App。

本发明的有益效果是：本发明运用模型驱动的理论思想，提高建模的抽象层次，实现平台无关IFML模型向平台相关Flutter模型的映射，提高软件的可维护性和可重用性。

本发明使用扩展的IFML对Flutter平台的Android端进行建模，基于交互流建模语言，提出一种该源模型IFML到目标模型Flutter的转换方法，并设计交互流建模语言到特定平台Flutter的映射关系，最终通过Flutter平台打包生成Android的App。对前端的移动用户界面来说，不仅可以屏蔽掉Android系统不同版本间的差异性，同时还提供了绚丽的UI。

附图说明

图1为本发明公开的一种基于MDA的Android移动用户界面建模与转换方法整体流程图；

图2为模型,元模型,建模语言,MOF和系统；

图3为OMG的四个建模层次；

图4为抽象语法中各个模型、模型之间关系表示的类图；

图5为视图容器的扩展；

图6为视图容器针对Flutter平台扩展的可视化树；

图7为组件的扩展；

图8为组件针对Flutter平台扩展的可视化树。

具体实施方式

下面结合附图和具体实施例，对本发明做进一步说明。

实施例1：如图1-8所示，本发明提供的所述一种基于MDA的Android移动用户界面建模与转换方法，包括以下几个步骤：

(1)给出了元模型、模型、模型与模型之间关系的形式化定义；

定义2.1元-元模型。一种用来描述元模型的模型。定义为六元组:Meta-MetaModel＝，其中,id表示元-元模型的编号，name表示元-元模型的名称，type表示元-元模型的类型，attributes表示元-元模型的属性，rules表示元-元模型所受到的约束，relation表示元-元模型与元模型之间的关系；

type有4种基本数据类型和2种对象类型，分别是:Integer、Boolean、Double、Char和String、Enum。其中，Enum枚举类型可以根据用户的需求自定义类型；

relation有六种基本关系:

1)继承(Inheritance)关系

2)关联(Association)关系

3)组合(Composition)关系

4)聚合(Aggregation)关系

5)依赖(Dependency)关系

6)实现(realization)关系

定义2.2元模型。一种用来描述模型的模型，是元-元模型的实例。定义为六元组:

MetaModel＝，其中,id表示元模型的编号，name表示元模型的名称，type表示元模型的类型，attributes表示元模型的属性，rules表示元模型所受到的约束，relation表示元-元模型与元模型之间的关系以及元模型与模型之间的关系；

定义2.3模型。一种元模型的实例。定义为六元组:

Model＝，其中,id表示模型的编号，name表示模型的名称，type表示模型的类型，attributes表示模型的属性，rules表示模型所受到的约束，relation表示元模型与模型之间的关系；

定义2.4 Meta-Meta(m,mm)表示元模型m是元-元模型mm的实现；

定义2.5 Meta(md,m)表示模型md是元模型m的实现；

(2)使用类图来描述抽象语法的结构，如图4所示，Component表示ViewComponent的子组件；

(3)确定IFML针对Flutter平台的容器扩展，如图5所示；通过Flutter开发的移动应用程序中与用户对话的基本单位是一个页面，而对应到IFML中即为一个ViewContainer。参考XAML的可视化树方法得到视图容器针对Flutter平台扩展的可视化树，如图6所示，下面是对视图容器的各个子容器进行描述：

1)Container(容器)，用于设置区域内各个组件的各种对齐条件、背景颜色、边框颜色、容器内外边距、子元素等；

2)Center(居中)，用于移动用户界面中各个组件的居中；

3)Padding(填充)，用于处理容器与子元素直接的间距；

4)Expanded(扩充)，可强制使子组件填充可用空间；

5)Align(对齐)，设置子组件的对齐方式并根据限制条件调整子控件的大小；

6)AppBar(顶端栏)，表示移动用户界面中的顶部导航组件；

7)TabBar(顶部切换)，用于移动用户界面顶部导航的切换；

8)BottomNavigationBar(文本域)，表示移动用户界面中的底部导航条；

9)Card(卡片)，表示移动用户界面中的卡片块，具有圆角和阴影，可使移动用户界面看起来有立体感；

10)Drawer(侧边栏)，表示移动用户界面中的侧边栏组件；

11)DrawerHeader(侧边栏顶部)，位于侧边栏最上方，用于显示基本信息；

12)UserAccountsDrawerHeader(特殊侧边栏顶部)，在侧边栏中用于设置用户头像、用户名、Email等信息；

13)DrawerItem(菜单项)，表示移动用户界面中的菜单项组件；

14)ModalBottomSheet(底部面板)，从移动用户界面底部弹出一个新页面；

15)Dialog(对话框)，表示移动用户界面中的对话框组件；

16)AlertDialog(警示框)，用于向用户传递信息的弹出层；

17)SimpleDialog(单选对话框)，用于向用户传递信息并提供选项的弹出层；

18)CustomDialog(自定义对话框)，针对对话框进行扩展，定义不同的风格；

(4)确定IFML针对Flutter平台的组件进行扩展，如图7所示。参考XAML的可视化树方法得到各个组件针对Flutter平台扩展的可视化树，如图8所示，下面是对视图组件的各个子组件进行描述：

1)TextField(文本框)，表示移动用户界面中的文本框组件；

2)Toast(吐司)，渐进式短暂显示消息；

3)Image(图片)，表示移动用户界面中的图片组件；

4)Swiper(轮播)，表示移动用户界面中的轮播组件；

5)RaisedButton(凸起的按钮)，表示移动用户界面中凸起的按钮；

6)FlatButton(扁平化的按钮)，表示移动用户界面中扁平化的按钮；

7)OutlineButton(线框按钮)，表示移动用户界面中的线框按钮；

8)IconButton(图标按钮)，表示移动用户界面中的图标按钮；

9)ButtonBar(按钮组)，表示移动用户界面中的按钮组；

10)Radio(单选按钮)，表示移动用户界面中的单选按钮；

11)RadioListTile(二级单选按钮)，用于设置二级标题的单选按钮；

12)FloatingActionButton(浮动按钮)，表示移动用户界面中的浮动按钮；

13)Checkbox(复选框)，表示移动用户界面中的多选框组件；

14)CheckboxListTile(二级复选框)，用于设置二级标题的复选框；

15)Switch(开关)，表示移动用户界面中的开关组件；

16)DatePicker(日期选择器)，表示移动用户界面中的日期选择器；

17)Timer(定时器)，表示移动用户界面中的定时器组件；

18)Icon(图标)，表示移动用户界面中的图标组件；

19)ListView(列表)，表示移动用户界面中的列表组件，可动态循环数据；

20)ListTile(列表块)，表示移动用户界面中的列表块；

21)GridView(网格列表)，表示移动用户界面中的网格列表；

22)Row(水平)，用于移动用户界面中的水平布局；

23)Column(垂直)，用于移动用户界面中的垂直布局；

24)Stack(层叠)，用于移动用户界面中的层叠布局；

25)Positioned(定位)，在层叠布局内进行定位；

26)AspectRatio(纵横比)，根据特定的纵横比调整子对象的大小；

27)Wrap(流布局)，用于当主轴空间不足时，可以向交叉轴扩展；

28)Flow(个性化流布局)，设置子组件的排列规则，控制其摆放的位置；

29)Route(路由)，通过路由对象的进出栈来使用户从一个页面跳转到另一个页面；

30)Navigator(导航器)，导航器管理着路由对象的堆栈并提供管理堆栈的方法；

(5)对IFML的表达能力进行分析，分析Flutter组件与M-AUIM的对应关系；

(6)设计模型映射规则的2种方式：

1)直接映射：模型直接映射到目标代码中，如模型中的多媒体元素Media可映射为Flutter组件中的Image；

2)间接映射：在模型映射的过程中，根据开发人员的需要，选择不同类型的组件进行映射，如模型中的列表元素List可映射为Flutter组件中的列表布局ListView或网格布局GridView；

(7)通过Flutter平台的渲染引擎生成Android的App；

本发明采用IFML扩展建模到Flutter平台模型映射的转换方法，先从用户界面需求中抽象出概念模型，得到高抽象层次的移动用户界面，然后再加入相应的细节信息，逐渐细化、转化为低抽象层次的移动用户界面。通过模型映射规则以及Flutter渲染引擎最终生成Android的App。

以上结合附图对本发明的具体实施方式作了详细说明，但是本发明并不限于上述实施方式，在本领域普通技术人员所具备的知识范围内，还可以在不脱离本发明宗旨的前提下作出各种变化。