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

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

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

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

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

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

ODM；IFML；圖形界面；模型驅(qū)動(dòng)；平臺(tái)獨(dú)立模型

0 引言

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

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

1 用戶(hù)界面的邏輯描述

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

1.1 OWL2.0句法

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

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

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

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

1.2 交互流建模語(yǔ)言（IFML）

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

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

2 實(shí)例研究

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

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

2.1 過(guò)程概述

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

圖1 案例研究Fig.1 case study

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

2.2 PIM模型

首先定義兩個(gè)PIM模型：關(guān)于ODM元模型的語(yǔ)法邏輯模型和從 IFML元模型得出的交互模型。這兩個(gè)元模型以ecore格式用EMF（Eclipse建?？蚣埽┒x。

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

重點(diǎn)關(guān)注兩個(gè)包：核心包和擴(kuò)展包。這些包抽象地表示用戶(hù)界面的結(jié)構(gòu)以及它們?cè)诮换シ矫娴脑刂g的依賴(lài)關(guān)系。IFML模型是所有其余模型元素的頂級(jí)容器。在用戶(hù)界面可見(jiàn)的 IFML模型元素稱(chēng)為 ViewElements[9]。專(zhuān)門(mén)用于 ViewContainers和ViewComponents。ViewContainers（如 HTML頁(yè)面或窗口）是其他ViewContainers或ViewComponents的容器，而 ViewComponents是顯示內(nèi)容或接受用戶(hù)輸入的界面的元素。擴(kuò)展包包括 ViewComponent的具體示例。

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

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

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

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

2.3 PIM到PSM轉(zhuǎn)換

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

所以，如果 NamedIndividual是一個(gè)具有dataProperty的“Window”類(lèi)的實(shí)例，它將被映射到Page。Html Form Element從“Form”Individual獲得，“Button”和“Field”類(lèi)的 NamedIndividuals在 HTML5模型中被映射為HtmlInputElements。每個(gè)個(gè)體的性質(zhì)由 dataProperties提供，它被映射到 HtmlInput-Element元類(lèi)中存在的“Type”屬性。數(shù)據(jù)類(lèi)型映射到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模型和代碼生成

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

3 結(jié)束語(yǔ)

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

圖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]. 計(jì)算機(jī)工程, 2011, 37(16): 84-85.

[3] 于歡, 陳勁杰, 周慶曙, 等. 基于本體的機(jī)械零件知識(shí)庫(kù)語(yǔ)義查詢(xún)[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本體對(duì)Web圖形界面的研究[J]. 軟件，2017，38（12）：211-215

朱匯龍(1992-)，男，碩士研究生，研究方向?yàn)椋耗Ｐ万?qū)動(dòng)方法和基于WEB的軟件開(kāi)發(fā)技術(shù)。

劉曉燕(1964-)女，博士學(xué)歷，副教授，碩士生導(dǎo)師，研究方向?yàn)椋耗Ｐ万?qū)動(dòng)方法和基于WEB的軟件開(kāi)發(fā)技術(shù)。