IFML在Web開發中的應用

朱匯龍　劉曉燕

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

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

DOIDOI：TP311.510.11907/rjdk.171856

中圖分類號：TP319

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

0引言

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

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

1IFML相關理論

1.1交互流建模語言應用

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

圖1Web開發與演變過程

1.2IFML元模型

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

1.3IFML作用

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

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

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

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

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

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

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

1.4IFML與其它方法比較

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

2實例研究

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

2.1內容模型

內容建模是設計中最為重要的環節之一，本文以WebRatio開發思想為指導，設計了系統業務邏輯模型[8]。endprint

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

圖3網站圖書內容模型

2.2流程模型

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

圖4網站圖書流程模型

2.3IFML應用于網站書店中

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

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

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

圖5IFML模型下的付款執行流程

3結語

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

參考文獻參考文獻：

[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