乐婷婷 刘晓燕

摘 要：现有软件应用程序可分为移动版本和Web版本两大类，但这些应用程序通常只能应用于其中一个平台（移动或Web平台），而不能同时适用于另一个平台。目前的解决方案是开发两个不同程序，通过不同的设计方法和工具实现，但该方式需要双重的开发和维护成本。为解决该问题，提出一个名为WebRatio Platform的综合工具套装软件，用于Web和移动应用程序的模型驱动开发，能够同时支持Web和移动应用程序设计。该工具是根据IFML（交互流建模语言）中OMG标准语言的两个版本扩展而来，具有模型检查和全代码生成功能，可生成即时发布的Web和跨平台移动应用程序。

关键词：模型驱动开发；IFML；跨平台开发；移动应用

DOI：10.11907/rjdk.172606

中图分类号：TP319

文献标识码：A 文章编号：1672-7800（2018）004-0107-04

Abstract：Existing software applications can be divided into the two categories of mobile and Web versions， however， these applications can only be applied to one of the platforms （ie， mobile or Web）， and can not be applied to the other platform. The current solution is to develop two different programs and employ different design methods and tools， but this will require double development and maintenance costs. To solve this problem， we propose a comprehensive tool suite called WebRatio Platform for model-driven development of web and mobile applications that supports both Web and mobile application design. The tool is made according to two extended versions of the OMG standard language called IFML （Interaction Flow Modeling Language）. The tool features model checking and full code generation that produces ready-to-publish Web and cross-platform mobile applications.

Key Words：model-driven development； IFML； cross-platform development； mobile application

0 引言

如今，已經有大量研究将软件工程技术与Web工程技术应用于多个平台，包括广义上的Web、多平台应用程序接口和用户交互规范，可以引用WAE、WebDSL[1]、WebML[2]、RUX-Model[6]，以及USIXML等建模语言[5]。商业供应商目前提出用于Web开发的工具，如Mendix（http：//www.mendix.com）和Outsystems（http：//www.outsystems.com），但这些工具尚未在软件行业得到广泛应用。因此，如今前端开发仍然代价昂贵且效率低下，手工编码仍是主要开发方法，但该方式具有重复利用率低、跨平台可移植性不足的缺陷。

2014年，Object Management Group采用一种称为交互流建模语言（Interaction Flow Modeling Language，简称IFML[8]）的新标准，支持在各种台式计算机、笔记本电脑、PDA、移动和平板电脑等系统上访问或部署图形用户界面。IFML受WebML等启发进行了一些创新，包括：增加业务分析上的分离，完全禁止将业务逻辑集成到用户交互规范中；定义一组非常通用的概念（语言核心），可应用于任何类型的用户界面；引入事件和异步交互概念；与UML[3]和BPMN[4]符号无缝集成。

本文描述了在Web和移动领域实现IFML的经验[1]，该工具称为WebRatio Platform[10]，是一种基于Eclipse的modeldriven[11]，以及基于Apache Cordova/PhoneGap框架的低代码开发平台，能够生成功能齐全的Web应用程序与跨平台移动应用程序。

1 IFML简介

在任何系统和技术平台上访问或部署应用程序，交互流建模语言（IFML）可支持图形用户界面的平台独立描述，描述重点是终端用户感知到的应用前端结构和行为。关于交互流应用程序方面，目前流行的是模型—视图—控制器（MVC）模型。IFML的重点主要集中在视图部分。IFML模型支持以下设计视角：①视图结构规范，由视图容器定义组成；②视图内容规范，包括视图组件的定义，即包含在视图容器内的内容发布和数据输入元素；③事件规范，包括可能影响用户界面状态的事件定义（来自用户交互、应用逻辑或外部代理）；④事件转换规范，包括事件在用户界面上的定义；⑤参数绑定规范，由模型元素之间输入输出依赖关系的定义组成。

此外，IFML可用外部模型进行补充，用于连接到任何类型的内容模型（代表数据库、本体集、文件系统或其它资源）和动态模型（描述应用前端的业务逻辑）。

图1显示了IFML图的简单示例，其中起始页面显示产品列表，并且在用户选择时，目标页面显示所选产品的详细信息。

2 IFML移动扩展

移动应用程序类似于小规模的全桌面应用程序，其具有丰富的界面和更加复杂的交互模式，从而需要最大限度地利用可用空间。对于传感器（如摄像头和GPS）的移动性和可用性方面，通过提供平台无关建模语言（如IFML）的移动设备扩展功能，介绍能够获得的最佳性能。

这里介绍3大类移动扩展事件：①由用户进行交互产生的事件，如点击和滑动等；②移动设备性能触发事件，如传感器、电池等；③由用户对与设备组件相关的操作触发的事件，例如拍摄照片、录制视频或使用麦克风。

2.1 容器与组件

在本节中描述了添加的概念，为有移动上下文特征的组件建模（见图2）。一个名为“Screen”的新类被定义，用来表示移动应用程序的屏幕。由于屏幕是移动应用程序的主要容器，Screen扩展了IFML标准的核心类ViewContainer。ToolBar类表示屏幕的特定子容器，它可能包含其它容器，并可能在其边界上有一个事件列表。ToolBar扩展了IFML标准的核心类ViewContainer。

移动界面的典型特征是利用用于特定功能的预定义ViewContainers（包括通知区域和设置面板），使这些系统级容器提供空间经济性，并且实现常见功能的一致使用。MobileSystem原型已被定义，用来区分这些特殊的ViewContainers。MobileSystem定义的ViewContainer表示接口固定区域，由移动操作系统或交叉应用程序的另一个接口框架进行管理。MobileComponent类表示特定的移动视图组件，例如按钮、图像、图标等。MobileComponent取决于用户事件。MobileSystem构造也可应用于ViewComponents，以突出显示该接口使用系统的内置组件（见图3）。

2.2 MobileContext

假定上下文在移动应用程序中具有特殊的相关性，它们必须利用所有可用的信息提供最有效的接口。因此，上下文必须收集所有维度信息描述用户意图，包括访问设备和通信网络容量以及用户周围环境。现已有一个新类MobileContext被定义，是扩展Context得到的，用来表达移动语境特征。

2.3 事件

在本节中使用IFML描述了为移动上下文定义的新事件类型。首先，已经定义了新类MobileUserEvent，允许对移动用户事件进行建模。MobileUserEvent扩展了IFML标准的核心类ViewElementEvent，这些类（DragDrop；Swipe；Pinch；Spread；Touch；LongPress；Scroll和Shake）扩展了MobileUserEvent，用于对特定的移动用户事件进行建模，每个类代表了与触发其手势相关的事件。

图4显示IFML模型的一个片段，用于列表管理。当用户在列表的一个元素上执行LongPress手势时，会弹出一个窗口，里面包含所选元素的信息，并允许用户编辑或删除该列表。

已经定义一个由SystemEvent类扩展的新类MobileSystemEvent表达移动系统事件，以下类扩展了用于特定系统事件的MobileSystemEvent类：

BatteryEvent：描述与电池状态有关的事件。

StorageEvent：描述与存档容量有关的事件。

NotificationEvent：对被操作系统处理的通用通知相关事件进行分组。

ConnectionEvent：描述与设备连接状态相关的事件。

SensorEvent：定义与设备传感器相关的事件。SensorEvent类扩展了ExternalEvent IFML核心类。最常用的传感器是接近传感器、运动传感器、磁力计传感器、陀螺仪和位置传感器。类PositionEvent、MotionEvent、AccelerationEvent、ProximityEvent和RotationEvent擴展了SensorEvent，以表示与特定传感器相关的事件。

MobileActionEvent类被定义为对由移动操作触发的事件进行建模。在移动操作中，有与相机相关的操作，如拍摄动作，以及与麦克风有关的动作。图3显示了该事件的例子，用户使用照相设备拍摄照片，应用程序会显示与任何被拍摄产品相对应的拍摄照片。照片拍好后会跳出一个屏幕，询问用户是否要使用照片或重新拍摄。照片可将事件与拍摄动作相关联。

3 方法步骤

为解决Web与移动平台模型驱动开发的设计需求，本文提出了以下开发过程，如图5所示（本文目的不是将此工作与特定开发方法如瀑布、螺旋、敏捷等相关联，为清楚起见，只是按顺序报告步骤）。

3.1 要求规范

虽然没有强制要求收集和规范特定标识与方法，但假设要求在定义阶段就完成标识，通常从一般描述开始会指定其中一个用例的低级规范，如果在需求规范阶段使用modeldriven方法，则在此阶段也可以标记会应用在部署平台上的具体符号。如应用在Web平台上标记“W”，应用在移动平台上则标记“M”。

所提出的标记允许在需求级别上标识出所要生成的平台，然后将该标识传递到后续设计阶段，并且可以通过平台和特征追溯过程。

3.2 业务流程设计

对于在需求规范阶段确定的每个用例，可以对其定义业务流程（或等效的业务级别规范）。同样在该级别，模型元素可被标记为Web或Mobile。

Web或Mobile应用程序可以有完全不同的、相似的或完全相同的业务流程。本文方法支持共同点和变异性的引出，从而实现基于特定目标平台的自动应用程序模型生成。

3.3 独立平台设计

从要求和业务模型出发，可以从导航、业务逻辑和内容模型中得出应用特征。应用程序的独立平台模型可以自动从业务流程中导出，或者进行手动设计。导航描述了用户交互、可视化组件和应用程序中状态的更改，业务逻辑描述了应用程序主要逻辑、数据存储和管理，内容模型包含数据模式方面对持久层的描述。

IFML在该阶段是理想的，因为其涵盖了所有需要的方面：导航规范、业务逻辑以及内容模型连接。平台独立模型中的元素可以注释为Web或Mobile，具体取决于它们是否与其中一个部署平台相关。

3.4 代码生成

可利用设计好的模型自动生成应用程序代码。由于IFML是独立于平台的模型，可用于生成应用程序的Web和Mobile功能。例如，可以使用WebRatio6工具实现，该工具能够通过Java平台生成应用于工业的Web应用程序，以及基于PhoneGap（Apache Cordova的商业分发）的跨平台移动应用程序，进行Android和iOS部署测试。

3.5 执行与反馈

一旦生成了应用程序代码，则可在选择的平台上进行部署，并作为测试和反馈收集的原型。对应用程序执行和建模都可提供有价值的反馈信息，用于从需求到业务模型以及应用程序设计的整个过程，然后对所有阶段进行改进，从而允许应用程序快速、均匀地演进，而不会忽视系统的高级总体规划。

4 WebRatio

WebRatio平台（www.webratio.com）是一款基于IFML模型驱动的低代码开发工具，其集成了3个版本，分别集中在Web和移动应用程序设计和开发以及业务流程分析上。WebRatio Platform正在实施IFML的Web扩展版本，并专注于Web应用程序。WebRatio Mobile Platform正在实施IFML的移动扩展版，并专注于移动应用。Mobile BPM Platform能立即创建可执行进程，在Web应用程序中运行。WebRatio提供3种集成环境：①建模环境支持IFML图的规范，可供视图描述，并用于信息设计的UML类图（或ER图），以及可选地与业务流程方面规范的BPMN图集成；②用于支持定制组件实施的开发环境，目的是允许基于垂直需求或本地功能建模语言的个性化扩展，以及定制数据和系统集成要求；③布局模板和样式设计环境，由于完全支持HTML 5，基于CSS和JavaScript样式，可以实现最高级别的UI复杂度。

通过这些环境提供的输入，WebRatio提供模型检查、全代码生成、group-work支持和生命周期管理功能。生成的代码包括：自动云部署的Java EE代码，覆盖WebRatio的Web版本中Web应用程序的后端和前端，并准备部署跨平台的移动应用程序，基于开源的Apache Cordova框架，在PhoneGap发行中为WebRatio的Mobile版本。目标应用程序的布局和样式可以通过HTML5模板和CSS的定义进行定义。默认情况下，WebRatio Mobile即使在没有连接互联网的情况下，也可以构建完整功能的应用程序（offline模式）。它还提供了一种用于使移动设备和后端之间读/写数据同步的内置解决方案。移动应用程序架构是基于开放和事实的标准库，如Angular.js、JData和Ionic。

在部署中，移动和Web应用程序之间的集成和一致性是通过一种通用建模方法实现的。Web和移动应用程序可以被任何现有的具有RESTful API的后端系统集成，或者使用WebRatio Platform和基于时间的云计划构建自己的后端。生成的代码库是人类可读与可维护的，甚至在WebRatio Platform之外。生成的代码中没有专有或封闭组件。

5 结语

为实现跨平台的移动应用程序模型驱动开发，本文介绍了MDE工具WebRatio，也为Web与移动应用程序开发提供了步骤和方法，从而减少了应用程序开发的工作量。未来计划进一步研究如何通过提出的方法改进平台无关与平台依赖模型的集成和交叉授权。

参考文献：

[1] GROENEWEGEN D M， HEMEL Z， KATS L C L， et al. WebDSL： a domain-specific language for dynamic web applications[J]. OOPSLA Companion， ACM，2008.

[2] CERI S， BRAMBILLA M， FRATERNALI P. The history of webml lessons learned from 10 years of model-driven development of web applications[J].Sociology of Health & Illness，2009，5600（3）：273-292.

[3] 柳毅，麻志毅，何嘯，等.一种从UML模型到可靠性分析模型的转换方法[J].软件学报，2010，21（2）：287-304.

[4] UMUHOZA E， BRAMBILLA M， RIPAMONTI D， et al. Anempirical study on simplification of business process modeling languages[C].ACM New York， NY， USA，2015：13-24.

[5] LIMBOURG Q， VANDERDONCKT J， MICHOTTE B， et al. USIXML： a language supporting multi-path development of user interfaces[C].Engineering Human Computer Interaction & Interactive Systems， Joint Working Conferences Ehci-dsvis，2004，3425：200-220.

[6] LINAJE M， PRECIADO J C， FIGUEROA F N. A method for model based design of rich internet application interactive user interfaces[C].In Proceedings of International Conference on Web Engineering，2007：226-241.

[7] SCHRAMM A， PREUSSNER A， HEINRICH M， et al. Rapid UI development for enterprise applications： combining manual and model-driven techniques[C].International Conference on Model Driven Engineering Languages & Systems，2010，6394：271-285.

[8] FRAJTK K， BURE M， JELNEK I. Transformation of IFML schemas to automated tests[C].ACM New York， NY， USA，2015：509-511.

[9] CONALLEN J. Building Web applications with UML[M]. Addison Wesley，2002.

[10] MARCOBRAMBILL A， PIEROFRATERNAL I. Large-scale model-driven engineering of web user interaction： The WebML and WebRatio experience [J].Science of Computer Programming，2012，89：71-87.

[11] 何啸，麻志毅，冯超，等.一种针对模型转换的图形化建模语言[J].计算机研究与发展，2015，52（9）：2145-2162.

（责任编辑：黄 健）