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

TRIAD: Triad-based Rich Internet Application Design

Embed Size (px)

DESCRIPTION

Current trends in web development still are attached to the web page paradigm. Nevertheless, new uses of already available technology and recent development in terms of concepts, as the asynchronous communication, have produced a new generation of web applications: Rich Internet Applications (RIAs). These web applications essays to fulfill user expectations in terms of usability, reliability, quality, maintainability and performance. In this paper, we are going to present a designing methodology that pursued as goal describing and developing User Interfaces of RIAs in a standardized way. The name of this ensemble of models and meta-descriptions is, TRIAD (Triad-based Rich internet Application Design).

Citation preview

Page 1: TRIAD: Triad-based Rich Internet Application Design

R(T) U(T) D(T)

T’

TRIAD Triad-based

Rich Internet Application Design

AdvisorJean Vanderdonckt

Presented byFrancisco Javier Martinez-Ruiz

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

Information Systems Unit (ISYS)Belgian Laboratory of Computer-Human Interaction (BCHI)

Page 2: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

IntroductionIntroduction

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

2

Page 3: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction

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

What is RIA?

Introduction

3

Page 4: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction

Dynamic data retrieval Perceptive continuity Adaptability Multimedia. Collaborative faculties User Interface

Description Language Push technology The Use of Browser area.

RIA Features

Introduction

4

Page 5: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction

LEVEL I II III

Dynamical retrieval100 100 100

Perceptive continuity50 50 100

Adaptability0 50 100

Multimedia30 60 100

Collaborative faculties0 50 100

User Interface language 0 100 100

Push Technology0 100 100

use of Browser window 30 60 100

I

II

III

5

Page 6: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction Methodology

The method

6

Page 7: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction

R(T) U(T)D(T)

T’

Methodology

First step: T&D models :: Triad-based Design

|[]| |[]|

7

Page 8: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction Methodology

First step: T&D models :: Triad-based Design

Get Info

Login

Submit[]>>

Input User Name

Input Password|||

D R

D R D R

D R D R

Login’

Login

Get Info’ Submit’

Get Info

Password’User Name’

User Name Password

Submit

Task Tree for a Login application

TRIAD version of Login application

8

Page 9: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction

R(T)

|[]|

U(T)D(T)

T’Color Operator/task Type

Operators

Sequential [>, |>, >>, []>>

Concurrent |=|, ||| , |[]|Choice []Interactive taskSystem taskAbstract task

Methodology

First step: T&D models :: ZUIT

A B

C D

ZUIT

9

Page 10: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction Methodology

First step: T&D models :: Triad-based Design

10

Page 11: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction Methodology

2nd step: AUI :: RIA notation

11

Page 12: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction

•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.

Methodology

3rd step: CUI :: RIA CONSTRUCTS

12

Page 13: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction Case study

Reservation System: Book a room

13

Page 14: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction Case study

Reservation System: ZUIT Representation

14

Page 15: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction Case study

Reservation System: Mapping to Domain model

15

Page 16: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction Case study

Reservation System: Modifying the TRIAD

16

Page 17: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction Case study

Layers Weight Calculated cost

per level

C1 C2 C31 3 16 16 162 1 32 28 203 2 84 84 84Weighted average

41,33

40,66

39,33

Reservation System: Modifying the containment structure

SopLT

SopITn

FopLT

FopITnCopLT

CopITnB

nJ

0

1

0

0)(

17

Page 18: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction Case study

Reservation System: Adding the RIA notation to AUI

18

Page 19: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction Case study

Reservation System: Applying QOC to select RIA construct

19

Page 20: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction Case study

Reservation System: FUI

20

Page 21: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction

Quality review

Contributions

21

Page 22: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

IntroductionThe 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].

Conclusions

22

Page 23: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction

Thank you very for your attention

Q&AAlea jacta est

23

Page 24: TRIAD: Triad-based Rich Internet Application Design

04/12/2023 UsiXML workshop - Francisco Javier Martinez Ruiz

Methodology Case study Contributions Conclusions

TRIAD :: Triad-based UI Rich Internet Application Design

Introduction Case study

Reservation System: Defining Behavior (ADV-Charts)

24