Designing the Interface of Rich Internet Applications

1
Designing the Interface of Rich Internet
Applications

• Gustavo Rossi UNLP, Argentina
• Jeronimo Ginzburg UBA, Argentina
• Daniel Schwabe, PUC-Rio, Brasil
• Matias Urbieta UNLP, Argentina

2
Outline

• Introduction Motivation
• Approach overview
• Abstract Data View design model
• Interfaces structure and behaviors design
• Dealing with Cross-cutting
• Example

3
Gmails concerns example
4
RIA design difficulties

• It combines hypermedia-like interfaces with
  functionality usually found in desktop
  application
• i.e. drag and drop, pop-up information and
  interface effects
• Improve users experience
• It deals with a myriad of concerns which usually
  crosscuts
• Maintenance problem in the application evolution
• The permanent Beta state which introduce
  functionality in order to assess the users
  acceptance.
• Volatile functionality
• Crosscutting behavior

5
Message

• Interfaces design must be part of the system
  design
• Interface structure and behavior cant be seen
  just as an implementation task
• The applications evolution should be handled
  with a real separation of concern
• at Conceptual, navigational and also at Interface
  layers

6
Overall Design Approach

• Requirements modeling
• Conceptual modeling
• UML Class diagram
• Navigation design
• OOHDM navigation diagram
• Interface design
• ADV, Configuration diagram, ADV charts
• Implementation
• .

7
Using ADVs to design the Interface

• Abstracts Data Views (ADV) allow to specify the
  interface objects
• An ADV is a composed object which possesses state
  and behaviors
• Exercised by method calls and generated events
• ADVs can be composed or grouped in generalization
  /specialization hierarchies
• Buttons , maps, etc
• An ADV specifies its owner
• Look and feel
• Datas query
• How to trigger owners behavior

8
An ADV example
9
Configuration Diagrams
10
ADV Charts

• ADV-Charts are state machines that allow to
  express interface transformations which occur as
  the result of users interaction
• An ADV-chart transition is labeled with its
  name.
• the event which is listening for
• pre-condition which required
• post-condition that generates
• An ADVs inside a states indicate that might be
  perceivable in that state

11
ADV Behavioral Aspects - Example
12
ADV Behavioral Aspects cont.
2
3
1
13
Another example of behavioral aspect
14
Dealing with cross-cutting concerns

• Traditional composition works well for
  integrating stable and/or orthogonal concerns
• But it has drawbacks
• Complex crosscutting
• Recurrent editions of models
• Our approach profits from advance techniques of
  separation of concerns
• Integration Specification for interface structure
  crosscutting
• ADV light weight extension for interface behavior
  crosscutting

15
Dealing with structural ADV Cross-cutting

• We have presented in a previous work an approach
  for weaving different ADV
• Transparent Interface Composition in Web
  Applications
• Which Allows
• The ADVs are designed independently(oblivious
  and seamlessly)
• Then they are composed by the integration
  specification (similar to the pointcut/advice
  concept of AOP)

16
Crosscutting behavior example

• Suppose we want to advise the user to try the
  reply by chat feature when he is sending a mail
  to an online contact.
• The application should prompts on a mail
  submission if the mail will be sent by chat
  instead of by mail.

17
Crosscutting behavior example - Solution

• We have to
• Intercept the MailSent event
• Enable the prompt
• End either returning control to the original
  ADV-chart where the mail will be sent or
• It triggers the event which initiates the Chat
  and changes in such a way that the mail is not
  sent.
• We are going to design a new concern which will
  be integrated with the core Mail Concern

18
Example - Abstract Interface Design
Mail Concern
19
Example - Abstract Interface Design Cont
Advice Concern
20
Weaving result

• The final composition gives as result
• After weaving a new state is injected in the Mail
  Editor state chart

21
Conclusions

• We have presented an approach for designing
  interfaces of Rich Internet Applications
• Using Examples we have presented diverse
  interface transformations
• Expand,collapses,
• We have shown how to express different hypertext
  navigation semantics (transclusion)
• We have also dealt with aspects at the interface
  layer
• Structural and behavioral crosscutting

22
Further work

• We are studying how to map our design diagrams
  into implementation artifacts.
• We are making a catalog of interactions styles
  which will be used in a research of refactoring
  of web application
• We are researching more complex interface
  crosscutting.
• Finally, we are analyzing how to integrate our
  approach StateWebCharts

23
Q A
?
24
Designing the Interface of Rich Internet
Applications
Thank you for your attention!
25
(No Transcript)
26
Dealing with Cross-cutting concerns -
implementation

ltscript type"text/javascript"
language"javascript" src"aspect2.js"
gtlt/scriptgt ltscriptgt function ask() if
(confirm("Would you like to try the new 'Reply By
Chat' feature sending email's body by
Chat?")) //send by chat else //go on as
usually proceed() lt!- - this code wraps the
onclick function - -gt Aspects.addAround(ask,docume
nt.getElementById('sendButton'),
"onclick") lt/scriptgt
27
Hypertext Issues

• RIAs allows to combine the Hypertext navigation
  with dynamic interface behavior
• Changes in the perception space
• Transclusion

28
Hypertext Issues - Transclusion