IFML在Web開發(fā)中的應用

朱匯龍　劉曉燕

摘要：IFML（Interaction Flow Modeling Language）的目標是為系統(tǒng)架構師、軟件工程師和軟件開發(fā)人員提供描述應用程序前端主要維度的交互流模型定義工具。應用程序視圖部分由視圖容器和視圖組件組成，體現(xiàn)應用程序狀態(tài)的對象以及可執(zhí)行的業(yè)務邏輯操作引用。視圖組件與數據對象和事件的綁定事件發(fā)生后要執(zhí)行動作控制邏輯，以及在不同層次架構中分配控制、數據和業(yè)務邏輯。分析了IFML在Web開發(fā)中的生命周期，并根據生命周期中使用的方法對IFML進行比較，最終將IFML添加到Web工程的生命周期圖中。通過實例驗證了該方法的可行性。

關鍵詞關鍵詞：IFML；Web開發(fā)生命周期；交互建模；Web工程方法；WebRatio

DOIDOI：TP311.510.11907/rjdk.171856

中圖分類號：TP319

文獻標識碼：A文章編號文章編號：16727800（2017）011015703

0引言

交互流建模語言（Interaction Flow Modeling Language，簡稱IFML）[1]是國際標準化組織OMG制定的可視化建模標準，是一種可視化表達前端應用程序內容、界面構成、用戶交互和控制行為的工具。與傳統(tǒng)的軟件開發(fā)方法相比，IFML模型可以與UML、域模型集成，使用BPMN 2.0建模。一個UX風格的設計師可以與IFML模型結合完成屏幕可視化。組合IFML、UML、BPMN模型和樣式表傳遞給代碼生成器[2]。

IFML標準解決了與應用程序前端相關的建模問題。WebRatio Plaform是第一個完全支持IFML標準的平臺。IFML使設計人員將重點從編碼轉變?yōu)樾枨蠖x，從而增加了利益相關者的參與度，并提高了軟件質量。建立一套可重復使用的資產和組件，可以跨項目重用。本文以圖書購買系統(tǒng)軟件開發(fā)為例，圍繞IFML應用于Web開發(fā)生命周期展開研究，通過IFML提高Web應用程序開發(fā)能力。

1IFML相關理論

1.1交互流建模語言應用

IFML由對象管理組織（Object Management Group，OMG）在2013年提出，具有開發(fā)Web應用程序功能，特別是豐富的應用界面，可以輕松支持RIA（Rich Internet Applications）。 Macro Brambilla和Piero Fraternal[3]解釋了IFML概念，并介紹了元模型、Web的過程開發(fā)、移動應用程序和功能擴展等； WebRatio[4]是支持IFML開發(fā)移動應用程序的良好平臺。Web開發(fā)與演變過程如圖1所示。

圖1Web開發(fā)與演變過程

1.2IFML元模型

IFML元模型定義是語言描述的最佳方法，包括抽象、模塊化、回收以及可擴展性。元模型分為擴展包、核心包及數據類包。核心包在交互流、流元素以及限制方面包含了創(chuàng)建語言交互基礎設施的思想；擴展包發(fā)展了中心包思想，涵蓋高精度行為；數據類型包包含IFML描述的自定義數據類型?；镜腢ML元模型數據類型由IFML元模型重用，它將幾個UML元類重點作為IFML元類的基礎。IFML模型是其它模型組件的頂級組件。它需要一個域模型、一個交互流模型以及“觀點”。交互流模型通過引用交互流模型元素集合，共同定義系統(tǒng)功能，提供應用程序視圖。作為一個抽象類別，“Named Element”重點介紹了Element類，證明“Named Element”元素對任何組件，指定注釋和約束都很容易[5]。交互流模型元素是對IFML各方面進行分級，本身與使用IFML圖不直接相關。相反，它由更特定的概念（如交互流程元素，交互流程）定義。

1.3IFML作用

（1）要求規(guī)范：規(guī)范有關應用領域數據及預期功能。輸入一組需要滿足應用程序開發(fā)的業(yè)務需求，以及可訪問數據。輸出一個實用的規(guī)格文件：識別用戶功能以及與每個功能相關的用例、所需領域概念及其語義關聯(lián)的數據字典。每個應用案例的工作流程，顯示關鍵參與者（應用程序、用戶和可能的外部服務）的交互。

（2）領域建模：將關鍵信息對象系統(tǒng)化為一個廣泛而清晰的模型，域建模將關鍵數據集定義為域模型，特征視覺描繪必要的對象以及質量和相互關系[6]。

（3）前端建模：將數據操作要求和信息傳遞功能繪制到前端模型中。 IFML在前端建模中起作用。

（4）業(yè)務邏輯建模：描述和維護用例所需的業(yè)務對象和技術。UML動態(tài)和靜態(tài)圖通常用于顯示對象接口及消息流。調整過程信息（如UML功能和序列圖，BPMN流程模型和BPEL服務編排），提供服務和對象之間表示工作流的有效方法。

（5）實施：將業(yè)務邏輯、數據和界面設計轉換為應用程序軟件。

（6）測試和評估：確認所安裝的應用程序功能要求一致。交互式模型測試包括功能試用、可用性評估、績效評估等，如圖2所示。

圖2IFML在交互式應用程序開發(fā)過程中的作用

1.4IFML與其它方法比較

對參考資料進行詳細的IFML審核后，獲得有關IFML生命周期的完整過程。在WebRatio支持下，通過以下方式定義視覺語法：DD、DI和OMG標準，模型序列化，基于XMI定義的交換格式 [7]。用completely簡寫C表示開發(fā)階段，用portion簡寫P表示開發(fā)階段。IFML與其它方法比較結果如表1所示。

2實例研究

利用WebRatio建模工具建立網站圖書購買系統(tǒng)，以支付模塊為例展示IFML方法設計Web應用程序的能力。

2.1內容模型

內容建模是設計中最為重要的環(huán)節(jié)之一，本文以WebRatio開發(fā)思想為指導，設計了系統(tǒng)業(yè)務邏輯模型[8]。endprint

本例中客戶的購物車開始是空的。當用戶瀏覽頁面并獲取喜愛的圖書信息時，將產品添加到購物車中。用戶隨時可以通過IFML方法選擇移動列表，可隨時查詢，以及提供支付訂單選項，清空購物車或繼續(xù)瀏覽其它圖書信息。圖3為網站圖書內容模型。

圖3網站圖書內容模型

2.2流程模型

用戶進入網站后瀏覽書籍。找到感興趣的圖書后可選擇放入購物車。用戶可繼續(xù)瀏覽其它產品，通過刪除或更新圖書管理購物車信息[9]。用戶準備付款則執(zhí)行結帳程序。付款必須將用戶信息發(fā)送給銀行，并等待確認。該過程如圖4所示。

圖4網站圖書流程模型

2.3IFML應用于網站書店中

在網站主頁中，用戶可選擇其中一本圖書查看完整描述，也可直接通過添加購物車購買圖書。一旦用戶從BookCategory中選擇一個類別，就會產生一個導航事件，然后在BookDetail中顯示Book細節(jié)。當用戶選擇Checkout選項時，將顯示容器的“客戶信息”，用戶必須通過填寫此容器內的表單提供個人信息。當用戶提交個人信息后，將顯示“容器的支付信息”。在該容器中，用戶必須提供銀行帳戶詳細信息，執(zhí)行支付流程。為了增加模型的可重用性和模塊化，設計人員可將模型集成到模塊中[10]。例如，支付模型可打包成一個特定的模塊。

IFML方法完全支持Web工程生命周期中的分析/設計階段[11]。可生成代碼作為語義實現(xiàn)，但不完全支持其它階段。

由于篇幅有限，本文選取系統(tǒng)一部分為例說明IFML支持Web工程生命周期的方法。IFML應用在網站圖書購買系統(tǒng)過程如圖5所示。

圖5IFML模型下的付款執(zhí)行流程

3結語

本文分析了IFML在Web開發(fā)生命周期中的作用。將IFML添加到Web生命周期圖中，并將IFML和現(xiàn)有方法進行了比較。結果表明，IFML在Web開發(fā)周期中發(fā)揮了良好的作用。

參考文獻參考文獻：

[1]IFML. Interaction flow modeling language[EB/OL]. http：//www.ifml.org/.

[2]MANOLESCU I， BRAMBILLA M， CERI S， et al. Modeldriven design and deployment of serviceenabled web applications[J]. Acm Transactions on Internet Technology， 2005，5（3）：439479.

[3]BRAMBILLA M， FRATERNALI P. Interaction flow modeling language： modeldriven UI Engineering of Web and mobile Apps with IFML[EB/OL]. http：//www.doc88.com/p6963130464657.html.

[4]ACERBIS R， BONGIO A， BRAMBILLA M， et al. Modeldriven development based on OMGs IFML with Webratio Web and mobile platform[J]. Engineering the Web in the Big Data Era. Springer International Publishing， 2015（5）：605608.

[5]WAKIL K， JAWAWI D N A， SAFI A. A comparison of navigation model between UWE and WebML： homepage development case study[EB/OL]. https：//www.researchgate.net/profile/Karzan_Wakil.

[6]劉洪星，李廣田，張笑，等.用戶界面概念元模型及概念建模工具的研究[J].武漢理工大學學報，2016，38（1）：96100.

[7]LUíS A， DOMINGUES S， BIANCHINI S L， et al. A comparison study of Web development methods[EB/OL]. https：//www.researchgate.net/publication/228965170_A_Comparison_Study_of_Web_Development_Methods？ev=auth_pub.

[8]HUANG Y C， WU C C， CHU C P. A new approach for Web engineering based on model driven architecture[EB/OL]. https：//www.en.cnki.com.cn/Article_en/CJFDTotalJSJK200702011.htm.

[9]FATOLAHI A， SOME S S. Assessing a modeldriven Webapplication engineering approach[J]. Journal of Software Engineering & Applications， 2014，7（5）：360370.

[10]ROSSI G， PASTOR O， SCHWABE D， et al. Web Engineering： modelling and implementing Web applications[M]. Springer London， 2007：44.

[11]HUANG W， LI R， MAPLE C， et al. A novel lifecycle model for Webbased application development in small and medium enterprises[J]. International automation and computing， 2010，7（3）：389398.

責任編輯（責任編輯：杜能鋼）endprint