The 8 th International Conference on Web Engineering

The 8 th International Conference on Web Engineering July 16 th, 2008 Facing Interaction-Rich RIAs: the Orchestration Model Sandy Pérez 1, Oscar Díaz 1, Santiago Meliá 2 and Jaime Gómez 2 1 ONEKIN Research Group University of the Basque Country San Sebastián (Spain) 2 IWAD Group University of Alicante (Spain)

Outline Ø An MDD process for RIAs Ø Obtaining the Orchestration Model Ø Down to code Ø Conclusions S. Pérez, O. Díaz, S. Meliá & J. Gómez 2

An MDD process for RIAs Ø Artefacts: • • Ø Actors: • • Conceptual model Navigational model Presentation model Orchestration model S. Pérez, O. Díaz, S. Meliá & J. Gómez OO-H Designer UI Designer Orchestration designer Model-to-model transformer • Model-to-text transformer 3

Sample case. Conceptual model Ø Indicates the main entities and relationships found in the application domain. S. Pérez, O. Díaz, S. Meliá & J. Gómez 4

Sample case. Navigation model Ø Specifies the data to be presented (as a view on the Conceptual Model) and the order in which this data is to be presented. S. Pérez, O. Díaz, S. Meliá & J. Gómez 5

Sample case. Presentation model S. Pérez, O. Díaz, S. Meliá & J. Gómez 6

Interaction dependency (ID) Ø RIAs are characterised by a rich-interaction setting that surpasses the boundaries of a single widget to spread along distinct widgets. Ø This allows widgets to react to actions not directly related to a user interaction with this widget • Interactions on a widget A can also affect a nearby widget B S. Pérez, O. Díaz, S. Meliá & J. Gómez 7

Presentation vs. Orchestration Ø The Presentation Model is • a static representation of the widgets as structural components of a screen. Shot Ø The Orchestration Model captures • interaction dependencies (ID) among widgets • distribution of screen. Shots into pages Ø Orchestration is then an orthogonal concern from widgets themselves: distinct orchestration templates can be provided from the very same Presentation Model (where widgets are defined). S. Pérez, O. Díaz, S. Meliá & J. Gómez 8

Sample case. Orchestration model S. Pérez, O. Díaz, S. Meliá & J. Gómez 9

The process using SPEM notation S. Pérez, O. Díaz, S. Meliá & J. Gómez 10

Obtaining the orchestration model 1. A skeleton is first automatically obtained from Ø the navigational model Ø the presentation model 2. Interaction dependencies are manually added to this skeleton. 3. Next, the Orchestration Model is heuristically enriched with pages. 4. And finally, it is validated by the Orchestration Designer. S. Pérez, O. Díaz, S. Meliá & J. Gómez 11

The curtain rises! What does this model-to-model transformation do? S. Pérez, O. Díaz, S. Meliá & J. Gómez 12

S. Pérez, O. Díaz, S. Meliá & J. Gómez 13

S. Pérez, O. Díaz, S. Meliá & J. Gómez 14

The curtain rises! What does this activity involve? S. Pérez, O. Díaz, S. Meliá & J. Gómez 15

Sample case ‘Mail. List’ Widget ‘Mail. Details’ Widget S. Pérez, O. Díaz, S. Meliá & J. Gómez 16

Cont. Ø if an e-mail in the Mail. List is selected then • if e-mail is not spam then – the Mail. Details widget should be refreshed with the contents of this e-mail. • else – a confirmation from the user is required S. Pérez, O. Díaz, S. Meliá & J. Gómez 17

Capturing the ID Ø if an e-mail in the Mail. List is selected then S. Pérez, O. Díaz, S. Meliá & J. Gómez 18

Cont. • if e-mail is not spam then the Mail. Details widget should be refreshed with the contents of this e-mail. • else a confirmation from the user is required S. Pérez, O. Díaz, S. Meliá & J. Gómez 19

Orchestral states • Synchronization is not always automatic. • Sometimes additional user interaction can be required for orchestration sake. • This leads to orchestral states. States whose rationales rest on some orchestrational purposes. S. Pérez, O. Díaz, S. Meliá & J. Gómez 20

Orchestral state typology Ø Confirm • serves to verify acceptance from the user. Ø Alert • helps when we want to make sure that the information is passed to the user. Ø Prompt • is used when a user’s input value is required. Ø Select. From. Range • uses when there are several options and only one is permitted. S. Pérez, O. Díaz, S. Meliá & J. Gómez 21

The curtain rises! What does this activity involve? S. Pérez, O. Díaz, S. Meliá & J. Gómez 22

Pages vs. screen. Shots Ø RIAs detach • the unit of delivery from • the unit of presentation Ø The unit of delivery: a page, which is the result of an HTTP request with an addressable URL Ø The unit of presentation: set of widgets simultaneously available or screen. Shot. S. Pérez, O. Díaz, S. Meliá & J. Gómez 23

How many screenshots are supported by a page? Ø page = screen. Shot • Multi-page style (the traditional approach) Ø one page containing all screen. Shots • Single-page style • e. g. Google’s Mail Ø something in between • e. g. a 9. com S. Pérez, O. Díaz, S. Meliá & J. Gómez 24

Guidelines principles? Ø Single-page style gives better results… • more interactive and responsive web applications • better user satisfaction Ø but… • harder development. S. Pérez, O. Díaz, S. Meliá & J. Gómez 25

Criteria: initial download Ø Multi-page • Only the content to be shown is downloaded. Ø Single-page • The whole application is downloaded. Ø Drawbacks • Content can be time-consuming to load (especially when it contains rich images) • Java. Script code takes up some size and loading time at the client. Ø There are some techniques aimed to reduce the initial download in single-page application: • Multi-Stage Download • Code Compression • On-Demand Java. Script Ø But this makes maintenance harder S. Pérez, O. Díaz, S. Meliá & J. Gómez 26

Criteria: URL addressability Ø In Ajax, most server communication occurs through XMLHttp. Request which does not affect the page URL. Ø Hence, the application sticks with the same URL no matter how many transfers occur. Ø This causes some problems when developing single-page applications • • • History support Bookmark support Deep linking support S. Pérez, O. Díaz, S. Meliá & J. Gómez 27

Criteria: URL addressability Ø Normally, in a single-page application, the behaviour of browser history is simulated by updating the URL on the fly. Ø URL are updated by adding a fragment identifier, it ensures that the new URL does not redirect us to a new page. • http: //www. mydomain. com/ria_app S. Pérez, O. Díaz, S. Meliá & J. Gómez 28 #fragment_identifier

Criteria: Indexing by search engines Ø Search engines point "robot" scripts to a website and have them accumulate a collection of pages. Ø However, robots probably won't distinguish among fragment identifiers. S. Pérez, O. Díaz, S. Meliá & J. Gómez 29

Single-page vs Multi-page Ø The best route for you will depend on what you are trying to do. Ø Normally, there is a reduced-page option that keeps the advantages of automatic history and bookmarking, but adds some of the advantages of a single page design. S. Pérez, O. Díaz, S. Meliá & J. Gómez 30

Back to the process… In order to make the developer life easier, we introduce a heuristic which helps the developer while partitioning the web application into pages. S. Pérez, O. Díaz, S. Meliá & J. Gómez 31

Sample case S. Pérez, O. Díaz, S. Meliá & J. Gómez 32

The curtain rises! Finally, the Orchestration Designer validates the Orchestration Model. S. Pérez, O. Díaz, S. Meliá & J. Gómez 33

Down to code What does this activity involve? S. Pérez, O. Díaz, S. Meliá & J. Gómez 34

Google Web Toolkit (GWT) Ø GWT is an open source Java software development framework Ø Main features: • Ajax applications can be thoroughly coded in Java without resorting to Java. Script. • When the application is deployed, the GWT compiler translates the Java application to browser compliant Java. Script and HTML S. Pérez, O. Díaz, S. Meliá & J. Gómez 35

• receives events notifications, By introducing the Subscriber role, • determines the correct destinations, widgets can be notified of events. • and routes the events to the correct destinations. Supporting IDs in GWT The Message Broker pattern S. Pérez, O. Díaz, S. Meliá & J. Gómez The role Publisher allows widgets to propagate events. 36

dfd The transition has outgoing If the Orchestral Widgettrigger involves the The the signal guard“Signal. Broadcast” transition does becomes has If corresponding not class an to transitions stereotype as. Javaexist, the “if” transition action is mapped to a Java implement a certain listener. then statement inside the corresponding method. that implements theimplements class the corresponding class interface Signal. the interface “Publisher”. A signal to propagate the signal, In order instance is created. the Message Broker instance is obtained. Values are given to signal’s attributes. And finally, the signal is published. S. Meliá & J. Gómez S. Pérez, O. Díaz, 37

Conclusions Ø Desktop-like interaction support is one of the hallmarks of RIA Ø This paper proposes the introduction of the Orchestration Model in existing web methods to face interactive-rich RIA. • Interactions are captured through Interaction Dependencies (IDs) • State machines are used to formalise IDs • GWT is used as Ajax platform Ø Process wise, web development is supported as an MDD process • Ecore and UML for meta-models • QVT and MOFScript as the transformation languages S. Pérez, O. Díaz, S. Meliá & J. Gómez 38

The end Thanks for your attention! Questions? S. Pérez, O. Díaz, S. Meliá & J. Gómez 39