MODEL-DRIVEN ENGINEERING OF BEHAVIORS FOR USER INTERFACES IN MULTIPLE CONTEXTS OF USE

Model-Driven Engineeringof Behaviors in User Interfaces

Efrem Mbaki & Jean Vanderdonckt

Université catholique de Louvain (UCL)Louvain School of Management (LSM)

Pole of Research on Information and Services Management and Engineering (PRISME)http://www.lilab.be

IHCI'2011 - Rome, July 26, 2011

Objective

• Our goal: build a methodology for model-based approach for behavior:

MODELS METHOD SOFTWARE

Foundation

Exploitation

IHCI'2011 - Rome, July 26, 2011

Why behavior in user interfaces?

• Two dimensions in UI development: presentation (look) vs behavior (feel)– Behavior is often left out for the profit of the presentation– Behavior is more complex– Behavior is often programmed, not frequently modeled nor

represented– When behavior is represented, many different techniques

exist– Behavior is hard to abstract from computing platform and

from interaction modality– Behavior is hard to generate in a way that remains

independent from any technology

IHCI'2011 - Rome, July 26, 2011

What is a behavior model?

• A behavior model defines how users can interact with the presentation in order to carry out a given interactive task– Thus, behavior is intertwined with task and presentation

• It represents– the actions that a user may initiate via CIO– the reactions that the UI communicates via CIOs

• Same• Different

– It tries to relate task to presentation

IHCI'2011 - Rome, July 26, 2011

Models: Conceptual Model

IHCI'2011 - Rome, July 26, 2011

Main Classes : ToolKit (1/3)

In the modern graphical environments of design or development, Toolkits are represented as an objects box in which the developer can drag and drop items.

A toolkit is characterized by its name, its level (abstract, concrete and Final) and a series of templates, functions and events describing particular behaviors.

With this view, we consider a toolkit as a Model

IHCI'2011 - Rome, July 26, 2011

Main Classes : ToolKit (1/3)

IHCI'2011 - Rome, July 26, 2011

Main Classes : Mapping (2/3)

Mechanism which makes it possible to define rules of transformation from a Toolkit towards another, possibly the same one

Applying mapping, a given object can change to another or several others. In this second case, rules of transformations are necessary.

A mapping is based primarily on two toolkits; a source and a destination. Its application requires presence of a user interface relating to the source Toolkit to lead to an interface in the destination Toolkit.

It’s possible to apply the same mapping into to several interfaces.

IHCI'2011 - Rome, July 26, 2011

Main Classes : Mapping (2/3)

IHCI'2011 - Rome, July 26, 2011

Main Classes : Behavior Script (3/3)

A sequential text furnished with the logic and conditional elements.

It describes the desired actions according to a given interaction scenario.

An action can be the change of an attribute value; the call of a mathematical function, the opening or the closing of a user interface, etc.

IHCI'2011 - Rome, July 26, 2011

Main Classes : Behavior Script (3/3)

IHCI'2011 - Rome, July 26, 2011

Method: Global View

Strategy : Level X Model X Project X Mapping

IHCI'2011 - Rome, July 26, 2011

Method: Data Flow

Strategy : Level X Model X Project X Mapping

IHCI'2011 - Rome, July 26, 2011

Software: Global View

To support our model and method, we exploit MDA to build a graphic Dialog Editor

IHCI'2011 - Rome, July 26, 2011

Software: Object Tree

To support our model and method, we exploit MDA to build a graphic Dialog Editor

IHCI'2011 - Rome, July 26, 2011

Software: characteristics

This Dialog Editor is Implemented with Visual Basic 6 (VB6) and VBA

1. It’s based primarily on the concept of objects Box. Developer has the choice between creating his own objects, using existing interactive objects or making both;

2. It Gives freedom concerning the level of specification. The user can choose to specify his project at the abstract, concrete or final level;

3. It generates the user interface at final level according to the platform toolkit. The resulting executable proposes architecture with three layers: The user interface, the functional machine and, the dialog controller;

4. It Provides reification and concretization functionalities by skews of the mappings.

IHCI'2011 - Rome, July 26, 2011

Software: Architecture

The Dialog Editor architecture is composed of four components

IHCI'2011 - Rome, July 26, 2011

Case Study: CTI Application

With our dialog editor, we developed a software intended to cover the activities of a company which is specialized in the international transfer of money and import express worldwide services

IHCI'2011 - Rome, July 26, 2011

Case Study: CTI Application

Percentage indicating the parts carried out manually and those generated automatically

IHCI'2011 - Rome, July 26, 2011

Conclusion

• We introduce a particular method for supporting model-driven engineering of UI behaviors that are compliant with the Cameleon Reference Framework (CRF).

• For this purpose, a UI Dialog Editor has been implemented;

• Three target contexts of user are supported: HTML for Applications (HTA) in a mobile context, Microsoft Visual Basic 6 and Microsoft Visual Basic for Applications (VBA) in a stationary context;

• Two operating systems are equally addressed: Microsoft Windows and Mac OS X;

• A Case Study, CTI Application, is implemented using Dialog Editor

IHCI'2011 - Rome, July 26, 2011

For more information and downloading,http://www.lilab.be

User Interface eXtensible Markup Languagehttp://www.usixml.org

Thank you very much!

FP7 Serenoa projecthttp://www.serenoa-fp7.eu