李雅雯+劉曉燕
摘要:隨著移動互聯網的發展,移動應用開發如火如荼。由于市場上手機操作系統繁多,給移動應用的開發特別是應用移植帶來很多麻煩。開發一個移動應用是一項復雜工作,需要掌握很多技術,包括前端開發,這些技術由不同技能的人共同完成。一個有序的開發過程以適當的建模概念為中心,這對于克服開發中固有的復雜性至關重要。交互流建模語言(IFML)是針對移動應用量身定制的OMG建模語言標準的擴展。IFML提供了一種獨特、簡明、能壓縮的,用UML類圖、狀態圖表示用戶界面的可視性語法,在移動應用開發中起著積極作用。
關鍵詞:移動應用;前端開發;建模;IFML;UML
DOIDOI:10.11907/rjdk.171982
中圖分類號:TP301
文獻標識碼:A 文章編號:1672-7800(2017)012-0030-03
Abstract:Developing a Mobile application, like any other kind of software system, is a complex achievement, which requires the ability to master a broad spectrum of tasks, including the front-end development. Tasks are jointly performed by a number of persons with different skills. Following a well-organized development process, centred on the appropriate modelling concepts, is essential to overcome the complexity inherent in such a development. The modeling language described in this document is an extension of the OMGs Interaction Flow Modeling Language (IFML) standard, tailored to mobile applications.IFML provides a unique, concise visibility syntax to compact the aspects of the user interface that are otherwise expressed separately with UML class state diagrams.
Key Words:mobile application; front-end development;modeling; IFML; UML
0 引言
前端設計是一個復雜的任務,需要多學科知識,存在許多錯綜復雜的觀點。前端在移動應用開發中非常重要,用戶體驗必須完美地適應移動應用目標。然而,移動應用交互的發展很大程度上仍然需要人為完成,其缺點在于會不可避免地產生一些錯誤,導致移動應用開發效率降低。
交互流建模語言(Interaction Flow Modeling Language,簡稱IFML)[1]2013年3月被OMG采納為標準規范,用來表示應用前端的內容、用戶交互和控制行為,支持平臺獨立的圖形化用戶界面描述。交互流建模語言支持獨立描述部署在桌面計算機、筆記本電腦、PDA和移動電話等系統上的移動應用圖形界面,描述的重點是最終用戶感知的結構和行為,而對移動應用的業務和數據組件結構、行為的描述,僅限于對用戶體驗有直接影響的方面[2]。
1 IFML介紹
IFML的重點在于交互式移動應用模型—視圖—控制器(MVC)中的視圖部分,它描述了視圖如何引用或依賴于應用的模型和控件部分,并且允許設計者定義控制器必須處理的相關事件。
1.1 IFML模型
IFML模型[3]支持以下設計:①視圖結構規范,它由視圖容器定義,它們之間是嵌套關系,由可見性及可達性組成;②視圖內容規范,包括視圖組件的定義,即包含在視圖容器內的內容和數據輸入元素;③事件規范,由可能影響用戶界面狀態的事件定義組成。事件可由用戶的交互、移動應用或外部系統產生;④事件轉換規范,由事件對用戶界面的影響定義組成;⑤參數綁定規范,由視圖組件之間的輸入輸出的依賴關系和視圖組件與動作之間的定義組成。事件的效果由交互流連接表示,它將事件連接到受事件影響的視圖容器或組件。交互流由用戶界面的狀態變化表示。
1.2 IFML開發過程
IFML開發過程[4]如圖1所示。IFML流程以迭代和漸進的方式不斷重復和完善,直到結果滿足業務需求。開發過程包括發現問題、設計細化、實施等幾個周期。每次迭代都會產生系統的原型或部分版本,每次迭代都會對系統的當前版本進行測試和評估,然后進行擴展或修改。這樣一個迭代周期并不是移動應用開發的主要方式,它適用于移動應用必須快速部署,且用戶需求可能隨時會發生變化的情況下。
(1) 需求規范。需求規范是應用分析人員收集和正式確定應用開發范圍和預期功能等基本信息的活動。它是一個面向用戶的精確而又易于理解的規范,這些規范幫助設計人員了解移動應用需要有哪些功能,并且在開發應用之前驗證應用規范是否符合業務需求。
(2)數據設計。IFML流程中的數據設計階段將數據源設計定位,從這些數據源中可以繪制移動應用內容。
數據密集型移動應用的開發可能在兩種不同的數據源場景中進行:最簡單的一種情況是,存儲移動應用內容的數據源必須與移動應用一起設計,其中數據設計階段旨在為移動應用生成最佳的數據模式,并且生成的概念模式直接用于構建存儲移動應用內容的物理數據庫。移動應用管理的內容已經存在,并且已經被某些數據存儲庫(數據庫或遺留系統)管理。在這種情況下,移動應用從現有數據源中提取內容,并將其發布在移動應用頁面中。在第二種情況下,概念數據設計不受已經設計和實施的數據源影響。
(3)前端設計。前端設計是將需求規范中提出的功能需求轉化為一個或多個移動應用,以體現所需的信息傳遞和數據處理活動。前端設計將IFML模型運行在概念層面上,這使得前端架構師能夠在頁面內組合數據對象,以及通過鏈接形成超文本。
前端設計基于IFML提出的概念和模型驅動方法,是整個開發周期的主要階段。它將應用的頁面交付功能構建在概念層面和視覺模型方面,這比在源代碼級別更為方便,并且更加定性[5]。
2 IFML模型與其它系統建模視角相結合
由于IFML是集成在MDA框架[6]中的,所以它可以與其它系統建模視角緊密結合。在IFML標準中,明確定義了3個方面:與內容模型的集成,與業務邏輯的集成以及與業務流程模型的集成[7]。
2.1 與內容模型集成
許多情況下,系統開發都是從需求模型開始(例如UML用例圖)。IFML可以使用戶交互模型的可跟蹤性達到相應的需求規范。圖2說明了IFML模塊用于解決用例或業務流程任務所需的用戶交互情況。
IFML模塊的執行可能會導致一些系統內部狀態更改,并動態顯示在UML狀態圖[8]中。
2.2 與業務邏輯模型集成
為ViewComponent指定綁定內容時,就可以實現IFML與內容模型的集成。例如,圖3(a)顯示了ListViewComponent,它通過ContentBinding指定了一些內容的發布,該ContentBinding建立了IFML圖和UML類圖之間的引用,UML類圖定義了“Product”類。
當ViewComponent或Action引用類的方法或更復雜的行為(分別用BehavioralFeatureConcept和BehaviorConcept在語言元模型中表示)時,將指定IFML與業務邏輯的集成。具體來說,BehaviorConcept和BehavioralFeatureConcept分別通過UMLBehaviorConcept和UMLBehavioralFeatureConcept進行擴展,這允許設計者直接引用UML類方法或UML動態圖(序列圖、活動圖或狀態圖)。
圖3比較了將IFML元素與外部模型進行集成的3種不同方法:引用領域模型類(a)的DataBinding;引用特定UML方法(b)的DynamicBehavior和引用整個UML圖(c)的DynamicBehavior。引用可以嵌入在ViewComponents和Actions中。通常,ViewComponent的內容是通過DataBinding進行詳細描述的, 但也可以使用DynamicBehavior來指定,該動態行為描述了提取或構建ViewComponent內容的邏輯。
2.3 與業務流程模型集成
IFML在業務流程模型方面的集成很重要,與部署在特定平臺設計模型方面的互補作用。圖4顯示了IFML模型與其它系統模型的關系:IFML模塊映射到UI模型[9]的元素,與UI模型共享一個公共命名空間,并且描述在一個UML部署圖中。
3 IFML在移動應用中的擴展
移動應用具有豐富的界面,類似于小型的桌面應用程序,目的是最大限度地利用有限的可用空間[10]。本文以移動家政服務系統為例,說明IFML如何在移動應用中擴展。本系統作為多個不同的移動應用提交到不同的Android和iOS系統應用商店。
3.1 搜索服務
圖5顯示了用戶在搜索應用提供的服務時應遵循的基本步驟。搜索流程要求接收電子郵件的專業人員作為訂閱者來回復。
3.2 發布請求
在這個流程中,電子郵件的收件人將負責回復電子郵件,并與最終用戶進行協商。
3.3 提供用戶
提供服務的流程非常簡單:用戶注冊時,將在自動匹配階段填寫所有系統需要的數據。用戶在此階段需要提供工作地點和每周的工作時間。隨著可用性嵌入,用戶可以尋找廣告,或使用搜索服務,或等待接收電子郵件與工作機會。
4 結語
本文旨在通過提供用戶交互模式的理性分類解決移動應用設計[11]中的問題。以手機APP為例,每個模式都由IFML模型描述。本文還介紹了設計人員如何將IFML與其它建模語言集成,以獲得涵蓋系統前端和后端的視圖,確保交互模型與建立的其它模型之間具有可追溯性,在移動應用開發中發揮應有的作用。
參考文獻:
[1] BRAMBILLA M, BONGIO A, BUTTI S, et al.Interaction Flow Modelling Language (IFML)[EB/OL].[2013-03-08].http://www.omg.org/spec/IFML/.
[2] MARCO BRAMBILLA, PIERO FRATERNALI. The interaction flow modeling language(IFML), object management group (OMG)[EB/OL].http://www.ifml.org, 2014.
[3] M BRAMBILLA, P FRATERNALI. Interaction flow modeling language,model-driven UI engineering of Web and mobile apps with IFML[C]. Morgan Kauffman, USA, 2014.
[4] IFML. Interaction flow modeling language [EB/OL].http://www.ifml.org/.
[5] CHARLAND, ANDRE, LEROUX, et al.Mobile application development: mobile vs. native[J]. Communications of the ACM, 2011, 54(5):78-83.
[6] 侯金奎,萬建成,張玉艷.一種支持MDA的PIM建模方法[J].計算機工程,2007,33(8):1249-1254.
[7] ERICKSON T. The interaction design patterns page[EB/OL].http://www.visi.com/~snowfall/InteractionPatterns.html, retrieved August 2014.
[8] JEAN VANDERDONCKT. A MDA-compliant environment for developing user interfaces of information systems[C]. In CAISE, 2005:16-31.
[9] 吳昊.一種基于模型的用戶界面開發方法[J].軟件,2015,36(8):452-458.
[10] 徐巍.跨平臺移動開發框架的比較分析與實例開發[J].吉林大學學報,2014,24(8):66-67.
[11] KANGAS, EEVA, KINNUNEN, et al.Applying user-centered design to mobile application development[J]. New York: ACM, 2005,48(7):314-319.
(責任編輯:杜能鋼)