IFML 模型和OWL本體對Web圖形界面的研究

朱匯龍，劉曉燕，張雪梅，曹榮凱，李丹丹

（1. 昆明理工大學信息工程與自動化學院計算機技術，云南 昆明 650500；2. 山東省商河縣胡集中學，山東 濟南 251600）

IFML 模型和OWL本體對Web圖形界面的研究

朱匯龍1，劉曉燕1，張雪梅2，曹榮凱1，李丹丹1

（1. 昆明理工大學信息工程與自動化學院計算機技術，云南 昆明 650500；2. 山東省商河縣胡集中學，山東 濟南 251600）

IFML(Interaction Flow Modeling Language)的目標是為系統架構師、軟件工程師和軟件開發人員提供描述應用程序前端主要維度的交互流模型的定義工具。針對當前描述圖形界面的抽象模型問題，提出了一種基于MDE的模型驅動開發方法，它將邏輯描述UI組件及其與IFML捕獲的交互合并，以增強Web應用程序界面的呈現。該方法用簡單真實用戶界面來產生一個HTML5模型作為目標模型。最終將IFML與ODM組合在一起以生成用戶圖形界面，通過實例驗證了該方法的可行性。

ODM；IFML；圖形界面；模型驅動；平臺獨立模型

0 引言

近年來，已經出現了許多解決方案來描述生成圖形界面，其中大多數是基于OMG定義的元模型，如ODM[1]，MDA[2]。并行地，提出了基于本體的許多想法，將其集成在圖形界面的描述和生成中。為了使這些想法發揮作用，演變成更好的本體驅動開發實踐，OMG通過將本體與元模型結合在一起來定義ODM[3]。基于ODM的大多數作品集中在數據庫和業務層[4]。IFML被定義為描述用戶界面的元素和行為。

為了從交互模型和用戶界面本體的優勢中受益，本文提出了一種將IFML與ODM組合在一起的方法，以生成用戶圖形界面和兩個抽象元模型。

1 用戶界面的邏輯描述

本節介紹了用戶界面語義模型的優點和如何使用OWLDL在OWL 2.0中顯示GUI域，通過為用戶圖形界面定義本體來呈現該問題語義方法。

1.1 OWL2.0句法

GUI本體由三個概念形成：聲明，公理和斷言。用戶界面域的基本元素由聲明表示。聲明類型分為：Classes，ObjectProperty，DataProperty，Datatypes和Individual。GUI包含的元素分為容器和控件。容器提供了一個控制控件的空間，控件是在界面中顯示內容或接受用戶輸入的元素。對象和數據屬性可用于表示域中的關系[5]。

公理分為類公理，對象屬性公理和數據屬性公理。每個公理與表達式相關聯，屬性表達式的特征在于領域和范圍，在 OWL 2.0中，這是由公理subClassOf完成的，它具有subClass表達式、控制作為超類表達式的按鈕。

為了區分不同類型的容器和控件，定義了DataPropertiesAxioms，該數據的集合屬性在表1中表示。例如，當它是默認容器時，我們為容器選擇了默認選項。除了向窗口小部件提供語義的數據屬性之外，還有另一個數據類型定義附加到窗口小部件的名稱和文本。斷言旨在澄清個體與其他個體之間的關系。這些關系對于描述GUI的領域至關重要。而在為UI[6]開發過程保留的部分中分析GUI的邏輯模型，并遵循OWL2.0語法的ODM元模型。

表1 GUIs概念的特征Tab.1 Features of GUIs concepts

1.2 交互流建模語言（IFML）

IFML是一種平臺獨立模型（PIM），可以獨立于實現平臺來表達交互設計決策。允許捕獲用戶交互和前端內容，并對系統用戶界面的控制行為進行建模。

IFML元模型分為核心包，擴展包和數據類包，核心包在交互流、流元素以及限制方面包含了創建語言交互基礎設施的思想；擴展包發展了中心包思想，涵蓋高精度行為；數據類型包包含 IFML描述的自定義數據類型。并且將許多 UML元類作為IFML元類的基礎。

2 實例研究

利用WebRatio建模工具建立網站實例，分析現有的UI圖形用戶界面的現狀，提出了一種新的MDE方法，將兩個新標準相互融合生產兩個抽象模型：IFML和ODM模型。可以在目標系統構建之前進行組織，評估，測試和共享。

我們提出了一種通過 OWL2.0本體[7]和 IFML的組合來獲得Web應用程序的用戶界面（UI）的方法，根據模型規格自動生成UI。UI元素的語義及其特征可以從 GUI本體的領域引發。然而，IFML負責捕獲與 UI邏輯模型中定義的概念相關的交互和操作。這個過程是在圖1所示的案例研究中進行的。

2.1 過程概述

以抽象模型開始產生一個 HTML5模型作為目標模型。HTML5尋求建立一套連貫一致的概念和共同的技術基礎來開發各種互動UI。案例研究代表一個包含表單的界面。

圖1 案例研究Fig.1 case study

過程分為三個步驟：從 PSM 模型中定義 PIM模型，M2M轉換和代碼生成。如圖2所示，顯示了結合ODM和IFML的模型驅動流程。

2.2 PIM模型

首先定義兩個PIM模型：關于ODM元模型的語法邏輯模型和從 IFML元模型得出的交互模型。這兩個元模型以ecore格式用EMF（Eclipse建模框架）定義。

為了定義邏輯模型，我們將第2節中詳細分析的結果應用于我們的案例研究。界面包括兩個容器：包含控件的窗口和窗體、靜態字段、單選按鈕和提交按鈕。這些元素在邏輯模型中的表示定義如下[8]：容器和控件是由OWL為例的個體表示。IFML原模型的PIM模型如圖3所示。

重點關注兩個包：核心包和擴展包。這些包抽象地表示用戶界面的結構以及它們在交互方面的元素之間的依賴關系。IFML模型是所有其余模型元素的頂級容器。在用戶界面可見的 IFML模型元素稱為 ViewElements[9]。專門用于 ViewContainers和ViewComponents。ViewContainers（如 HTML頁面或窗口）是其他ViewContainers或ViewComponents的容器，而 ViewComponents是顯示內容或接受用戶輸入的界面的元素。擴展包包括 ViewComponent的具體示例。

圖2 模型驅動的過程Fig.2 Model-driven process

圖3 IFML元模型的PIM模型Fig.3 PIM model of IFML metamodel

在圖 1所示的示例中，視圖容器被標記為“窗口”并設置為默認值。表單由OnSubmit事件組成，但是選擇一個單選按鈕產生的事件導致顯示一個新窗口，其中包含表示為參數綁定組的 LastName和FirstName簡單字段中的數據項。該效果由連接與OnSubmit事件組件相關聯的事件與兩個窗口的導航流表示。導航流程表示用戶界面狀態的變化。事件的發生從Form（源交互流元素）到其他窗口（目標交互流元素）的轉換。將表單與兩個表達式相關聯，激活表達式表示觸發動作變為活動的事件須滿足當前交互上下文的條件，以及確定在事件發生后遵循哪個InteractionFlow的交互流表達式。

模型實例是我們關于 IFML元模型語法的案例研究的抽象形式[10]。如圖4所示。因此，通過這兩個ODM和IFML模型，我們可以輕松地在桌面、網絡、移動的多個平臺中擁有UI對象模型。

2.3 PIM到PSM轉換

模型到模型轉換是用QVTo（查詢/查看/轉換）[11]設計的。為了從抽象模型中獲得一個HTML5模型，應用了幾個轉換規則，轉換算法是基于源和目標元模型元素之間的映射[12]。因此，我們能夠鏈接本體和IFML模型的多個數據源。

所以，如果 NamedIndividual是一個具有dataProperty的“Window”類的實例，它將被映射到Page。Html Form Element從“Form”Individual獲得，“Button”和“Field”類的 NamedIndividuals在 HTML5模型中被映射為HtmlInputElements。每個個體的性質由 dataProperties提供，它被映射到 HtmlInput-Element元類中存在的“Type”屬性。數據類型映射到Html InputElement和Page metaclasses中的屬性。則轉化算法如下：

Algorithm 1:tranformation IFMLODToHTML

Inputcore:IFML/CORE,EXTENSION:IFMLL/

extension, odm:ODM

Output html:Html5

....

Mapping Nameindividuals2HTMLinputElement

HTMLinputElement

Begin

...

IfindivinstanceOf Class::Button

For all e ? extension::OnsubmitEvent::OnsubmitEvent

If e.name=indiv.value

Map ActivationExpression2Script(e.elements[Activation])

Map interactionFlowExpression2Script

(e.element[InteractionFlowExpression])

End if

End for

End if

End

Mapping ActivationExpression2Script(active)

HTMLScriptElement

Begin

Language＜-active.language

Text＜-active.body

End

Mapping InteractionFlowExpression2Script(inter)

HTMLScriptElement

Begin

圖4 IFML元模型的IFML模型Fig.4 IFML Metamodel IFML model

Language＜-inter.language

Text＜-inter.body0

End

End

2.4 PSM模型和代碼生成

此步驟描述了從較高級別到較低抽象級別的漸進優化[13]。通過應用前面提到的轉換規則，ODM和IFML模型中的每個元素將被轉換為HTML5[14]元模型的元素。根據HTML5元模型生成的目標模型[15]。該模型包含從兩個PIM模型中收集所有元素、屬性和交互。系統的PSM模型如圖5所示。

3 結束語

在本文中，我們給出了一種新的方法 MDE組合，由 OMG定義的兩個重要的抽象規范來導出UIsWeb應用程序。IFML允許抽象地表示用戶界面的結構以及它們在交互方面的元素之間的依賴關系。該過程已經在一個簡單的抽象形式界面上進行了測試，該界面被轉換為一個 HTML5表單。由于將本體與 IFML結合在一起的優勢，我們有信心在用戶界面開發中使用IFML和 ODM為未來的軟件增添有趣的功能。

圖5 系統的部分PSM模型Fig.5 Part of the PSM model of the system

[1] OMG, Architecture-Driven Modernization Standards(2007),http: //adm. omg. org/.

[2] 王永濤, 劉勇. 基于MDA的模型轉換研究與應用[J]. 計算機工程, 2011, 37(16): 84-85.

[3] 于歡, 陳勁杰, 周慶曙, 等. 基于本體的機械零件知識庫語義查詢[J]. 電子科技, 2017, 30(7): 90-93.

[4] Paulheim H, Probst F. A Formal Ontology on User Interfaces-Yet Another User Interface Description Language[J].Konferenzver?ffentlichung, 2011, 76(6): 1124-1129.

[5] Brambilla M, Fraternali P. - Interaction Flow Modeling Language[J]. Interaction Flow Modeling Language, 2015: 395-400.

[6] Fernando Silva Parreiras, Steffen Staab. Using ontologies with UML class-based modeling: The TwoUse approach[J].Data & Knowledge Engineering, 2010, 69(11): 1194-1207

[7] Brambilla M, Fraternali P. Interaction Flow Modeling Language: Model-Driven UI Engineering of Web and Mobile Apps with IFML[M]. Morgan Kaufmann Publishers Inc. 2014.

[8] Wysota W. Porting Graphical User Interfaces through Ontology Alignment[M]// Emerging Intelligent Technologies in Industry. Springer Berlin Heidelberg, 2011: 91-104.

[9] Bast W, Murphree M, Michael L, et al. MOF QVT final adopted specification: meta object facility (MOF) 2.0 query/view/transformation specification[J]. 2005.

[10] Fernando Silva Parreiras, Steffen Staab. Using ontologies with UML class-based modeling: The TwoUse approach[J].Data & Knowledge Engineering, 2010, 69(11): 1194-1207.

[11] Paulheim H. Ontology-based System Integration[M]//Ontology-based Application Integration. Springer New York,2011: 27-59.

[12] Hickson I. A vocabulary and associated APIs for HTML and XHTML (2014)[J]. 2015.

[13] Wagner C, Wagner C. Model-Driven Software Migration[J].Model-Driven Software Migration: A Methodology: Reengineering, Recovery and Modernization of Legacy Systems,2014: 67-105.

[14] 李巖. 基于XML的系統數據集成方法研究及應用[J]. 電子科技, 2009, 22(4): 1-4.

[15] Ca?adas J, Palma J, Túnez S. Model-driven rich user interface generation from ontologies for data-intensive web applications[J]. Aepia Org, 2011, 4(2): 95-101.

Research on Web Graphical Interface Based on IFML Model and OWL Ontology

ZHU Hui-long1, LIU Xiao-yan1, ZHANG Xue-mei2, CAO Rong-kai1, LI Dan-dan1
(1. Kunming University of Science and Technology, Faculty of Information Engineering and Automation, Kunming 650500, China;2. Huji middle school in Shanghe County, Shandong Province, Jinan, 2501600, China)

The goal of IFML (Interaction Flow Modeling Language) was to provide system architects, software engineers, and software developers with a definition tool for the interactive flow model that describes the main dimensions of the application front end. Aiming at the abstract model of the graphical interface, a model-driven development method based on MDE is proposed, which combines the logical description UI component and its interaction with IFML to enhance the presentation of the Web application interface. The method used a simple real user interface to generate an HTML5 model as the target model. Finally, IFML and ODM were combined to generate user graphical interface, and the feasibility of the method was verified by an example.

ODM; IFML; Graphic interface; Model driven engineering; Platform independent model

TP311.5

A

10.3969/j.issn.1003-6970.2017.12.041

本文著錄格式：朱匯龍，劉曉燕，張雪梅，等. IFML模型和OWL本體對Web圖形界面的研究[J]. 軟件，2017，38（12）：211-215

朱匯龍(1992-)，男，碩士研究生，研究方向為：模型驅動方法和基于WEB的軟件開發技術。

劉曉燕(1964-)女，博士學歷，副教授，碩士生導師，研究方向為：模型驅動方法和基于WEB的軟件開發技術。