migrating web applications through declarative models

Migrating Web Applications Migrating Web Applications through Declarative Modelsthrough Declarative Models

G. Mori, Fabio Paternò, C. Santoro, A. Scorcia

http://giove.isti.cnr.itISTI-C.N.R.

HIIS LaboratoryPisa, Italy

Migrating Web Applications through Declarative Models - UWA Workshop 2

WhyWhy MigratoryMigratory InterfacesInterfaces??

Our life is becoming a multi-deviceexperienceOne of the main source of frustration isthat we need to restart for each devicechangeNeed for continuous access tointeractive servicesApplication domains such as shopping, bids for online auctions, games, making reservations

3

MigrationMigration TypesTypesTotal, Partial, Distributing, Aggregating, Multiple

4

OurOur ApproachApproach toto MigrationMigration

Device Discovery (client application)Migration Trigger and Target IdentificationReverse Engineering/Semantic RedesignState extraction, adaptation and associationRun-time Interface Generation and Activation


SemanticSemantic DescriptionsDescriptionsforfor InteractiveInteractive SystemsSystems

Task and object– I want to select a work of art

Abstract Interface – platform independent– Single selection object with high cardinality

Concrete Interface – platform dependent– List Interaction object with X elements

Interface Implementation– List object in Java or XHTML or ....

TERESA XML

6

The The StructureStructure of the of the AbstractAbstract UserUser InterfaceInterface

Language platform-independentInteractors (selection, navigator, activator, …)Communication-oriented compositionoperatorsConnections amongpresentations


CompositionComposition operatorsoperators

GROUPING

RELATION

GROUPING

ORDERINGHIERARCHY


ReverseReverse EngineeringEngineering

Filtering out elements that cannot bereversedFrom XHTML/CSS to Concrete UserInterface through recursive analysis of the DOMFrom Concrete to Abstract User InterfaceFrom Abstract User Interface to Task identifier

9

SupportSupport forfor task task continuitycontinuity

Collection of the user interface state in the client side of source device through JavaScript inserted by the proxy serverFor each basic task also supported in the target device

Adapt and apply the state to the corresponding target final object

Task: SelectMenuvalue: Vegetable

Your Selected Menu is Vegetable


Logical UI-Desktop Logical UI-Mobile

REDESIGN

PARSER LUI TRANSFORM

CUI CALCULATE COST

SPLITTING CUI GENERATOR

LUI

SemanticSemantic RedesignRedesign


SupportSupport forfor DesktopDesktop--toto--Mobile Mobile RedesignRedesign

Page splitting based on the cost of composition operators and interactorsConnections: original ones + thosederived from page splittingImages: resize depending on target device keeping the same aspect ratioTables for converting terms and labels

12

FromFrom Desktop Desktop toto CellCell--phonephone

Grouping 0

Grouping 1

Grouping 2


FromFrom Desktop Desktop toto CellCell--phonephone


ExampleExample MigrationMigration (Video)(Video)

15

TransformationsTransformationshttp://http://giove.isti.cnr.itgiove.isti.cnr.it//teresa.htmlteresa.html

Direct ManipulationXHTML/SVG

Graphical+GestureC#

Digital TV (Java)

Form-basedXHTML

Vocalinterfaces(VoiceXML)

Graphical+VocalX+V

Mobile XHTML MPMigration

Platform


ConclusionsConclusions and Future Workand Future Work

Migration between multiple devices can improve user experience at home and on the moveSupport for generation of new implementation languages from TERESA XML such as XForms, SMILExtension of the approach to distributing migration

migrating web applications through declarative models

Documents