The document presents a methodology for developing Rich Internet Applications (RIAs) called TRIAD. The methodology is a model-driven engineering approach that uses a series of models at different levels of abstraction, including task models, abstract user interface models, concrete user interface models, and final user interfaces. It was developed as an extension of the UsiXML family of tools and models. The methodology is demonstrated through a case study of developing a room reservation system as an RIA. Key aspects of the methodology include separating design concerns, progressively refining models from abstract to concrete, and incorporating RIA-specific constructs and notations.

1. TRIAD
Triad-based
T’
Rich Internet Application
Design
R(T) U(T) D(T)
Presented by
Francisco Javier Martinez-Ruiz
Advisor
Jean Vanderdonckt
Université catholique de Louvain (UCL)
Louvain School of Management (LSM)
Information Systems Unit (ISYS)
Belgian Laboratory of Computer-Human Interaction (BCHI)

2. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
From Web 1.0 to Web 2.0
Web 1.0 features
 Static Web Content
 Non interactive sites
 HTML widgets
Web 2.0 features
 Single Page Paradigm
 Mash-up approach
 Highly interactive sites
 Composite widgets
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 2

3. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
What is RIA?
web application
that exhibit similar behavior, widgets and
features that those present in desktop
applications.
they are more responsive,
Secure,
advanced look and feel.
the Single Page Paradigm,
An advanced communications scheme:
Push technology and AJAX
A client engine
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 3

4. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
RIA Features
 Dynamic data retrieval
 Perceptive continuity
 Adaptability
 Multimedia.
 Collaborative faculties
 User Interface Description
Language
 Push technology
 The Use of Browser area.
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 4

5. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
II
LEVEL I II III
Dynamical retrieval I
100 100 100
Perceptive continuity
50 50 100
Adaptability
0 50 100
Multimedia
III
30 60 100
Collaborative faculties
0 50 100
User Interface
language 0 100 100
Push Technology
0 100 100
use of Browser
window 30 60 100
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 5

6. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
The method
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 6

7. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
First step: T&D models :: Triad-based Design
T’
D(T) |[]| R(T) |[]| U(T)
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 7

8. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
First step: T&D models :: Triad-based Design
TRIAD version of Login application
Task Tree for a Login application
Login
Login’
D R
Login
Get Info’ Submit’
Get Info []>> Submit
D R D R
Get Info Submit
User Name’ Password’
Input Input
D User Name R ||| D Password R
User Name Password
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 8

9. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
First step: T&D models :: ZUIT
A B C D
…
ZUIT
Color Operator/task Type Operators
Sequential [>, |>, >>, []>> |[]| T’
Concurrent |=|, ||| , |[]|
Choice []
Interactive task D(T) R(T) U(T)
System task
Abstract task
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 9

10. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
First step: T&D models :: Triad-based Design
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 10

11. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
2nd step: AUI :: RIA notation
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 11

12. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
3rd step: CUI :: RIA CONSTRUCTS
•Introduce a behavior not available in classical widgets.
•Introduce a complex behavior (a compilation of behavior) not available in classical widgets.
•Introduce constructs that resolve problems in an alternative way.
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 12

13. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
Reservation System: Book a room
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 13

14. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
Reservation System: ZUIT Representation
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 14

15. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
Reservation System: Mapping to Domain model
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 15

16. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
Reservation System: Modifying the TRIAD
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 16

17. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
Reservation System: Modifying the containment structure
B ( n) 0 T I op C
0 T L op C
n T I op F
Jn
1 T L op F
n T I op S
0 T L op S
Layers Weight Calculated cost per level
C1 C2 C3
1 3 16 16 16
2 1 32 28 20
3 2 84 84 84
Weighted average 41,33 40,66 39,33
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 17

18. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
Reservation System: Adding the RIA notation to AUI
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 18

19. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
Reservation System: Applying QOC to select RIA construct
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 19

20. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
Reservation System: FUI
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 20

21. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
Quality review
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 21

22. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
The purpose of this work was to present a methodology developing RUIs.
All the steps have been presented in the current document. These steps are
variations and/or extensions of the UsiXML family of tools and models in
order to target RIAs.
We proposed a novel approach to model RUIs which includes:
 the complete software development life cycle. The proposed method
organizes the development life cycle for RUIs from the conceptual to
the final implementation stages, using as guide, the user requirements
instead of being focus in the content.
Furthermore, our method is Model Driven Engineering compliant
since there is a separation of concerns of the different aspects in the
RUI development. That is the UI representation starts with abstract
models which are progressively refined to concrete models, as defined
by OMG [OMG07].
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 22

23. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
Thank you very for your attention
Q&A
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 23
Alea jacta est

24. TRIAD :: Triad-based UI Rich Internet Application Design
Introduction Methodology Case study Contributions Conclusions
Reservation System: Defining Behavior (ADV-Charts)
10/15/2010 UsiXML workshop - Francisco Javier Martinez Ruiz 24