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

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

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

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

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

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

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

ODM；IFML；圖形界面；模型驅(qū)動；平臺獨立模型

0 引言

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

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

1 用戶界面的邏輯描述

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

1.1 OWL2.0句法

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

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

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

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

1.2 交互流建模語言（IFML）

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

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

2 實例研究

利用WebRatio建模工具建立網(wǎng)站實例，分析現(xiàn)有的UI圖形用戶界面的現(xiàn)狀，提出了一種新的MDE方法，將兩個新標(biāo)準(zhǔn)相互融合生產(chǎn)兩個抽象模型：IFML和ODM模型?？梢栽谀繕?biāo)系統(tǒng)構(gòu)建之前進行組織，評估，測試和共享。

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

2.1 過程概述

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

圖1 案例研究Fig.1 case study

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

2.2 PIM模型

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

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

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

圖2 模型驅(qū)動的過程Fig.2 Model-driven process

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

在圖 1所示的示例中，視圖容器被標(biāo)記為“窗口”并設(shè)置為默認值。表單由OnSubmit事件組成，但是選擇一個單選按鈕產(chǎn)生的事件導(dǎo)致顯示一個新窗口，其中包含表示為參數(shù)綁定組的 LastName和FirstName簡單字段中的數(shù)據(jù)項。該效果由連接與OnSubmit事件組件相關(guān)聯(lián)的事件與兩個窗口的導(dǎo)航流表示。導(dǎo)航流程表示用戶界面狀態(tài)的變化。事件的發(fā)生從Form（源交互流元素）到其他窗口（目標(biāo)交互流元素）的轉(zhuǎn)換。將表單與兩個表達式相關(guān)聯(lián)，激活表達式表示觸發(fā)動作變?yōu)榛顒拥氖录殱M足當(dāng)前交互上下文的條件，以及確定在事件發(fā)生后遵循哪個InteractionFlow的交互流表達式。

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

2.3 PIM到PSM轉(zhuǎn)換

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

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

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模型和代碼生成

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

3 結(jié)束語

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

圖5 系統(tǒng)的部分PSM模型Fig.5 Part of the PSM model of the system

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

[2] 王永濤, 劉勇. 基于MDA的模型轉(zhuǎn)換研究與應(yīng)用[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的系統(tǒng)數(shù)據(jù)集成方法研究及應(yīng)用[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-)，男，碩士研究生，研究方向為：模型驅(qū)動方法和基于WEB的軟件開發(fā)技術(shù)。

劉曉燕(1964-)女，博士學(xué)歷，副教授，碩士生導(dǎo)師，研究方向為：模型驅(qū)動方法和基于WEB的軟件開發(fā)技術(shù)。