Model-Driven Engineering of 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) IHCI' Rome, July 26, 2011

Objective Our goal: build a methodology for model-based approach for behavior: MODELSMETHODSOFTWARE Foundation Exploitation IHCI' 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' 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' Rome, July 26, 2011

Models: Conceptual Model IHCI' 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' Rome, July 26, 2011

Main Classes : ToolKit (1/3) IHCI' 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' Rome, July 26, 2011

Main Classes : Mapping (2/3) IHCI' 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' Rome, July 26, 2011

Main Classes : Behavior Script (3/3) IHCI' Rome, July 26, 2011

Method: Global View Strategy : Level X Model X Project X Mapping IHCI' Rome, July 26, 2011

Method: Data Flow Strategy : Level X Model X Project X Mapping IHCI' Rome, July 26, 2011

Software: Global View To support our model and method, we exploit MDA to build a graphic Dialog Editor IHCI' Rome, July 26, 2011

Software: Object Tree To support our model and method, we exploit MDA to build a graphic Dialog Editor IHCI' 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' Rome, July 26, 2011

Software: Architecture The Dialog Editor architecture is composed of four components IHCI' 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' Rome, July 26, 2011

Case Study: CTI Application Percentage indicating the parts carried out manually and those generated automatically IHCI' 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' Rome, July 26, 2011

For more information and downloading, User Interface eXtensible Markup Language Thank you very much! FP7 Serenoa project