A first draft of a Modeldriven Method for Designing Graphical User Interfaces of Rich Internet Appli

1
A first draft of a Model-driven Method for
Designing Graphical User Interfaces of Rich
Internet Applications

• Francisco J. Martínez-Ruiz1, Jaime Muñoz
  Arteaga2,
• Jean Vanderdonckt3 and Juan M.
  González-Calleros3
• 1Universidad Autónoma de Zacatecas. Departamento
  de Ingeniería en Computación,
• Avenida Ramón López Velarde No. 801, Zacatecas,
  Zac., 98060. México. jamaru_at_acm.org
• 2Universidad Autónoma de Aguascalientes. Centro
  de Ciencias Básicas
• Aguascalientes, México. jmunozar_at_correo.uaa.mx
• 3Université catholique de Louvain, Belgian Lab.
  of Computer-Human Interaction
• vanderdonckt, gonzalez_at_isys.ucl.ac.be

2
Agenda

• Introduction
• Problem Description
• Method Outline
• Study Case
• Conclusions and Future Work

3
Introduction

• Today a model-based design of interactive
  software applications is an approach which is
  gaining more acceptance.
• The increasing number of applications to be
  build and the growing number of conditions that
  applications should fulfill e.g., Web
  applications are made for a wide spectrum of
  users and requirements.

4
Typical architecture of a RIA application

• The new Web applications that are emerging are
  called Rich Internet Applications (RIAs).

5
Cameleon Framework

• Building a model based application requires a
  framework to define the design steps needed for
  describe our computer system, including the
  features Multi-level abstraction, Modality and
  independence, among others 2.
• The Cameleon Reference framework 3 expresses
  these features to describe an application.

6
Problem Description

• First, typical web applications are built from
  back to front leaving to final stages the
  development of User Interfaces, this approach is
  changing, especially from the new multimedia
  overloaded RIA User Interfaces (RIAUI).
• Second, RIAUIs construction blocks include a
  plethora of gadgets not available in typical
  desktop applications so its needed a new method
  to deal with these applications 16.

7
Method Outline
8
Study Case

• Our scenario is the design of a very basic
  e-commerce application, shown in Figures in the
  right section.
• This is build upon basic elements available in
  all of RIA languages 8, 9, 10, 11

9
Step 1.a The Task model
10
Step 1.b The Domain model
11
Step 2 Generation of the Abstract User
Interface (AUI)
The production of an AUI requires the definition
of all the elements needed to fulfill the task
these elements are already defined in the
previous models (TaskDomain).
12
Step 2 Generation of the Abstract User
Interface (AUI)
13
Step 3 Generation of the Concrete User
Interface (CUI)
Table 1 Features of AIC that would aid in the
selection of the correct CIC.
14
Resulting CUI UsiXML Specification
lt?xml version"1.0" encoding"UTF-8"?gt ltuiModel
xmlns"http//www.usixml.org"
xmlnsxsi"http//www.w3.org/2001/XMLSchema-instan
ce" xsischemaLocation"http//www.usixml.org/
http//www.usixml.org/spec/UsiXML-ui_model.xsd"
id"FruitStore_31" name"FruitStore"
creationDate"2006-03-31T110350.109-0600"
schemaVersion"1.6.3" xsitype"uiModel"gt
ltheadgt ltversion modifDate"2006-03-31T110
350.109-0600"gt1lt/versiongt
ltauthorNamegtJavier Martinezlt/authorNamegt
ltcommentgtGenerated by GrafiXML 1.1.999 build id
200602081036lt/commentgt lt/headgt ltwindow
id"window_component_0" name"window_component_0"
width"400" height"350"gt
ltbox id"box_1" name"box_1" type"vertical"gt
ltimageComponent id"image_component_2"
name"image_component_2"
tooltip"/uiModel/resourceModel/ci
oRef_at_cioId'image_component_2'/resource/_at_tooltip
" defaultTooltip"Apples
(5)" content"/uiModel/resour
ceModel/cioRef_at_cioId'image_component_2'/resourc
e/_at_content"
defaultContent"/resources/00/" isVisible"true"
isEnabled"true"
textColor"000000"/gt
lt/boxgt lt/windowgt
15
Step 4 Generation of the Final User Interface
(FUI)

• This section describes the way XSL
  transformations are applied to generate XAML
  output.

lt?xml version"1.0" encoding"UTF-8"?gt ltxslstyles
heet xmlnsxsl"http//www.w3.org/1999/XSL/Transfo
rm" xmlnswf"http//schemas.microsoft.com/200
3/xaml/" version"1.0"gt ltxsloutput
method"xml" omit-xml-declaration"yes" /gt
ltxsltemplate match"/"gt ltwfUserControl
Name"WebForm1" ClientSize"200, 200"
xmlns"http//schemas.microsoft.com/2003/xaml/"
xmlnsdef"Definition" xmlnswf"wf"
defClass"XamlonApplication8.WebForm1"
defCodeBehind"WebForm1.xaml.cs"gt
ltxslapply-templates select"/cuiModel/window"/gt
lt/wfUserControlgt
lt/xsltemplategt ltxsltemplate
match"window"gt ltwfUserControl.Controlsgt
ltxslapply-templates
select"/cuiModel/window/box/inputText"/gt
ltxslapply-templates select"/cuiModel/window/
box/button"/gt ltxslapply-templates
select"/cuiModel/window/box/outputText"/gt
ltxslapply-templates select"/cuiModel/window
/box/slider"/gt lt/wfUserControl.Controlsgt
lt/xsltemplategt ltxsltemplate
match"inputText"gt ltwfTextBox
Text"_at_defaultContent" TabIndex"1"
Name"_at_name"/gt lt/xsltemplategt
ltxsltemplate match"button"gt ltwfButton
Text"_at_defaultContent" TabIndex"1"
Name"_at_name"/gt lt/xsltemplategt
ltxsltemplate match"outputText "gt
ltwfLabel Text"_at_defaultContent" TabIndex"1"
Name"_at_name"/gt lt/xsltemplategt
ltxsltemplate match"slider "gt
ltwfTrackBar Text"_at_defaultContent"
TabIndex"1" Name"_at_name"/gt
lt/xsltemplategt lt/xslstylesheetgt
16
XAML Second resulting file
ltwfUserControl xmlnswf"wf" xmlns"http//schema
s.microsoft.com/2003/xaml/" xmlnsdef"Definition"
Name"WebForm1" ClientSize"200, 200"
defClass"XamlonApplication8.WebForm1"
defCodeBehind"WebForm1.xaml.cs"gt ltwfUserControl
.Controls xmlnswf"http//schemas.microsoft.com/2
003/xaml/"gtltwfTextBox Text"" TabIndex"1"
Name"input_text_component_9"/gtltwfTextBox
Text"" TabIndex"1" Name"input_text_component_11
"/gtltwfTextBox Text"0.00" TabIndex"1"
Name"input_text_component_13"/gtltwfButton
Text"Submit order" TabIndex"1"
Name"button_component_14"/gtltwfLabel Text"Name"
TabIndex"1" Name"output_text_component_8"/gtltwfL
abel Text"Address" TabIndex"1"
Name"output_text_component_10"/gtltwfLabel
Text"Total to Pay" TabIndex"1"
Name"output_text_component_12"/gt lt/wfUserControl
.Controlsgt lt/wfUserControlgt
17
Conclusions

• In this paper we have presented a novel method
  for designing Graphical User Interfaces of RIAs.
• The process can produce an automatic generated UI
  that follows the principles of the Model Driven
  Engineering.
• Beginning with the recompilation of the user
  requirements an abstract model of the UI is
  created and using a iterative series of XSLT
  transformations the model is successively
  translated to more concrete model to finally
  arrive to a Platform Specific model (PSM).

18
Future Work

• Right now we are compiling a repository of all
  the UI gadgets (components) defined in XAML for
  complete the XSLT translation sheet in a java
  implemented prototype called RIAXML but in this
  early stage of development, some interesting
  features are still non included e.g., how to deal
  with alternatives in the widgets selection and
  define the most suitable.
• While we concretize the template model of our
  application more details have to be included. For
  instance, width and length of each element,
  colors, position within the containers, among
  others. So, how to define this set of attributes?
  Its a question that requires the aid of
  ergonomic criteria to be answered.
• Furthermore, the presented solution is targeted
  to XAML in future versions, the final
  implementation code should be a free choice of
  developers.

19
A first draft of a Model-driven Method for
Designing Graphical User Interfaces of Rich
Internet Applications

• Francisco J. Martínez-Ruiz1, Jaime Muñoz
  Arteaga2,
• Jean Vanderdonckt3 and Juan M.
  González-Calleros3
• 1Universidad Autónoma de Zacatecas. Departamento
  de Ingeniería en Computación,
• Avenida Ramón López Velarde No. 801, Zacatecas,
  Zac., 98060. México. jamaru_at_acm.org
• 2Universidad Autónoma de Aguascalientes. Centro
  de Ciencias Básicas
• Aguascalientes, México. jmunozar_at_correo.uaa.mx
• 3Université catholique de Louvain, Belgian Lab.
  of Computer-Human Interaction
• vanderdonckt, gonzalez_at_isys.ucl.ac.be