Transformation of XAML schema for RIA using XSLT

1
Transformation of XAML schema for RIAusing XSLT
UsiXML

• Fco. J. Martínez Ruiz 1, Jaime Muñoz Arteaga 2
  and Jean Vanderdonckt 3.

1 Universidad Autónoma de Zacatecas. Departamento
de Ingeniería en Computación, Av. López Velarde
No. 801, Zacatecas, Zac., 98060. México.
jamaru_at_acm.org 2 Universidad Autónoma de
Aguascalientes. México. jmunozar_at_correo.uaa.mx 3
Université Catholique de Louvain. Belgium.
vanderdonckt_at_isys.ucl.ac.be
2
Agenda

• Introduction
• Problem Description
• Contribution
• 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

• Our study problem is a well known scenario for
  developer teams After embracing a technology if
  you must build (or migrate) an application but in
  another technology is mandatory recoding most of
  the project even with RIAs.
• Inside these technologies resides a XML-compliant
  Description Language, e.g., LZX, XUL and now
  XAML.

7
Problem Description (cont.)

• These languages are similar but no
  interchangeable so there is a problem when is
  needed retargeting.
• The underlying problem is the translation from
  language1 to language2.

8
Contribution

• We proposed the construction and settling of the
  rules needed to construct an XSLT specification
  to transform a source GUI defined in UsiXML into
  a GUI defined in
• XAML.
• The considered schema will be described in the
  next slide.

9
Contribution (cont.)
The widgets are recognizable UI elements still
not attached to a particular toolkit at section
1. After using the rules of section 2 though a
XSLT processor, the UI is targed to a specific
toolkit and its produced a Final UI (section 4)
which is the production of UI code to be compiled
or interpreted, here in XAML.
10
Study Case

• Our scenario is the design of a minimalist
  polling system. A basic form available in all of
  RIA languages composed by
• a text label,
• three radio selectors and
• a submit button.

What sci-fi author is your favorite?
Isaac ASimov
H.G. Wells
Arthur C. Clark
send
11
The UsiXML presentation of this UI is
ltcuiModel id"poll_system-cui_30" name"poll
system-cui"gt ltwindow id"window_component_0"
name"window_component_0"gt ltbox id"box_1"
name"box_1" type"vertical"gt ltradioButton
id"radiobutton_component_2" name"radiobutton_com
ponent_2" content"/uiModel/resourceModel/cioRef
_at_cioId'radiobutton_component_2'/resource /_at_con
tent" defaultContent"Isaac ASimov"
isVisible"true" isEnabled"true"
textColor"000000" groupName"asking"/gt ltradioB
utton id"radiobutton_component_3"name"radiobutto
n_component_3" content"/uiModel/resourceModel/c
ioRef_at_cioId'radiobutton_component_3'/resource
/_at_content" defaultContent"H.G. Wells"
isVisible"true" isEnabled"true"
textColor"000000" groupName"asking"/gt ltradioB
utton id"radiobutton_component_4"
name"radiobutton_component_4" content"/uiModel
/resourceModel/cioRef_at_cioId'radiobutton_componen
t_4'/resource /_at_content" defaultContent"Arthu
r C. Clark" isVisible"true" isEnabled"true"
textColor"000000" groupName"asking"/gt ltbutton
id"button_component_5" name"button_component_5"
content"/uiModel/resourceModel/cioRef_at_cioId'
button_component_5'/resource/_at_content" defaultC
ontent"send" isVisible"true" isEnabled"true"
textColor"000000"/gt ltoutputText
id"output_text_component_6" name"output_text_com
ponent_6" content"/uiModel/resourceModel/cioRef
_at_cioId'output_text_component_6'/resource
/_at_content" defaultContent"What sci-fi author
is your favorite?" isVisible"true"
isEnabled"true" isBold"true" textColor"000000"
/gt lt/boxgt lt/windowgtlt/cuiModelgt
12
Conversion to XAML

• We just add here the needed rules to process our
  study case since the XML source document is very
  different to the final document.
• Note Some of the code is restricted to default
  values (specially, values that normally are
  defined by programmers at design time for
  instance, widget positions).

13
Examples of XSLT rules
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/2003/xa
ml/" version"1.0"gt ltxsloutput method"xml"
omit-xml-declaration"yes" /gt ltxsltemplate
match"/"gt ltwfForm Text"Form1" Name"Form1"
ClientSize"400, 400" xmlns"http//schemas.micro
soft.com/2003/xaml/" xmlnsdef"Definition"
xmlnswf"wf" defClass"XamlonApplication1.Form1
" defCodeBehind"Form1.xaml.vb"gt ltxslapply-tem
plates select"/cuiModel/window"/gt lt/wfFormgt lt/x
sltemplategt ltxsltemplate match"radioButton"gt
ltwfRadioButton Text"_at_defaultContent"
TabIndex"3" Name"_at_name"/gt lt/xsltemplategt lt/
xslstylesheetgt
Examples of rules are marked with red boxes
14
Polling System example XAML output

• ltwfForm xmlnswf"wf" xmlns"http//schemas.micro
  soft.com/2003/xaml/" xmlnsdef"Definition"
• Text"Form1" Name"Form1" ClientSize"400, 400"
  defClass"XamlonApplication1.Form1"
• defCodeBehind"Form1.xaml.vb"gt
• ltwfForm.Controls xmlnswf"http//schemas.micros
  oft.com/2003/xaml/"gt
• ltwfRadioButton Text"Isaac ASimov"
  TabIndex"3"
• Name"radiobutton_component_2"/gt
• ltwfRadioButton Text"H.G. Wells" TabIndex"3"
  Name"radiobutton_component_3"/gt
• ltwfRadioButton Text"Arthur C. Clark"
  TabIndex"3" Name"radiobutton_component_4"/gt
• ltwfButton Text"send" TabIndex"2"
  Name"button_component_5"/gt
• ltwfLabel Text"What sci-fi author is ypur
  favorite?" TabIndex"4"
• Name"output_text_component_6"/gt
• lt/wfForm.Controlsgt
• lt/wfFormgt

15
Conclusions

• In this paper we have presented an approach for
  translating UIs defined in UsiXML to XAML
  documents with XSL transformations in our
  preliminary evaluation we have had satisfactory
  results.
• The result is a practical solution to the
  development of platform independent RIA
  applications as was shown in our study case.

16
Future work

• the process of reaching final implementation
  levels needs complementary information not
  available in more abstract levels.
• We are compiling a repository of all the UI
  gadgets (components) defined in XAML in order to
  complete the XSLT translation sheet.
• Width, length of each element, colors, position
  within the containers. How to define these
  attributes?
• Its a question that requires the aid of
  ergonomic criteria to be answered.

17
Transformation of XAML schema for RIAusing XSLT
UsiXML

• Fco. J. Martínez Ruiz 1, Jaime Muñoz Arteaga 2
  and Jean Vanderdonckt 3.

1 Universidad Autónoma de Zacatecas. Departamento
de Ingeniería en Computación, Av. López Velarde
No. 801, Zacatecas, Zac., 98060. México.
jamaru_at_acm.org 2 Universidad Autónoma de
Aguascalientes. México. jmunozar_at_correo.uaa.mx 3
Université Catholique de Louvain. Belgium.
vanderdonckt_at_isys.ucl.ac.be