![Page 1: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/1.jpg)
MORFEO MyMobileWebhttp://mymobileweb.morfeo-project.org
Ignacio Marín [email protected]
MyMobileWebA pragmatic approach to Model-Based User Interfaces
1W3C Workshop on Future Standards for Model-Based User InterfacesRome, 13-14 June 2010
![Page 2: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/2.jpg)
The Mobile Web: Overview
• Accessing web applications and contents from mobile handsets
• Particularities of the mobile environment � Delivery Context
• Users use their mobiles to do different tasks
MORFEO MyMobileWeb
2
• Mobile Web Development is not easy if you wish to support the majority of devices without compromising functionality or user experience
![Page 3: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/3.jpg)
The Mobile Web: Potential Market
MORFEO MyMobileWeb
3
Source: http://metrics.admob.com/wp-content/uploads/2010/04/AdMob-Mobile-Metrics-Mar-10.pdf
![Page 4: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/4.jpg)
The Mobile Web: Realizing its potential
• Making the Mobile Web a reality is not only a question of using highly capable devices and browsersbrowsers
• Users are expecting more from the Mobile Web
• Application and portal developers are demanding powerful technologies that enable the creation of advanced, high-quality mobile web applications in time to market without investing a lot of money
MORFEO MyMobileWeb
4
time to market without investing a lot of money
![Page 5: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/5.jpg)
The Mobile Web: Why?
MORFEO MyMobileWeb
5
¡ 3 Mb – 57 seg !
31 Kb – 2 seg
28 Kb – 2 seg
12,5 Kb – 1’7 seg
![Page 6: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/6.jpg)
MyMobileWeb: Introduction
• MyMobileWeb is an open source, standards-based software framework that simplifies the rapid development of mobile web applications and portals
• MyMobileWeb encompasses a set of technologies which enable the automatic adaptation of applications to the target Delivery Context (browser, device, network, location,…), thus offering a harmonized user experience
• Using an XML-Based language (IDEAL2), that makes it possible to describe device independent user interfaces and their adaptation policies
• Using an XML-Based language (SCXML), that makes it possible to describe
MORFEO MyMobileWeb
6
• Using an XML-Based language (SCXML), that makes it possible to describe application flow as a finite state machine, associating zero, one or more views to each state.
• Using a set of client and server-side runtime libraries that realize the automatic content & application adaptation
![Page 7: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/7.jpg)
MyMobileWeb in 4 steps<!DOCTYPE ideal2><ideal id="pslist" title="Res. Cons. P/S"> <ui> <body> <section id="mainSection"> <div class="center" id="p1"><label>Empresa:</label><label class="remark">${enterprise}</label> </div><div class="center vertical" id="p2"><table ref="selectedPS" class="tps paginate" id="listPS"> <th class="header"> Deployment
User Experience in different Delivery Contexts
<th class="header"> <td>Cód.</td><td>Nombre</td> <td expr="dcn:belongsTo('PdaDevice')">Fecha</td> </th><tr repeat-nodeset="searchPSResult“value="${searchPSResult.current.code}"><td> <output ref="code" /> </td> <td> <output ref="name" /> </td><td> <output ref="date" /> </td></tr> </table></div><include content="PSDetail/generic/product/p2" /> </section> </body> </ui> </ideal> Authoring
MORFEO MyMobileWeb
7
![Page 8: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/8.jpg)
MMW: Platform Overview
MORFEO MyMobileWeb
8
![Page 9: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/9.jpg)
MMW: Architectural View
MORFEO MyMobileWeb
9
![Page 10: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/10.jpg)
IDEAL2
• Features
• Based on W3C standards (namely XForms 1.1, DISelect 1)
• Modular and extensible
• Similar syntax to XHTML but higher abstraction layer• Similar syntax to XHTML but higher abstraction layer
• Final rendering according to the delivery context
• Description of a user interface from a structural and behavioral point of view.
• All the aspects that have to do with look-and-feel and layout are specified by means of CSS2 and extensions
MORFEO MyMobileWeb
10
• By using IDEAL2 developers can concentrate on the application functionality without worrying about markup languages or scripting capabilities
![Page 11: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/11.jpg)
IDEAL2 Example
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE ideal2><ideal id="index" title="My Club"><resources><link id="icon" rel="shortcut icon" expr="!mymw:belongsTo('iPhone')" type="image/x-icon" href="${myFavIcon}" /><link id="iconIPhone" rel="apple-touch-icon" expr="mymw:belongsTo('iPhone')" href="${myFavIcon}" /><link id="iconIPhone" rel="apple-touch-icon" expr="mymw:belongsTo('iPhone')" href="${myFavIcon}" /><link rel="stylesheet" id="soccerStyle" href="soccer.css" /></resources><ui><body><header id="header"><include content="Common/generic/common/header" /></header><section id="main"><div id="p1" class="common title.common" title="My Club"><menu id="myMenu" ref="club" class="clubs center"><a id="header" repeat-nodeset="clubList" src="${clubList.current.image}" href="${clubList.current.href}">${clubList.current.name} </a></menu></div></section><footer id="footer">
MORFEO MyMobileWeb
11
<footer id="footer"><include content="Common/generic/common/footer" /><separator class="line" /><include content="Common/generic/common/powered" /></footer></body></ui></ideal>More info at hhttp://files.morfeo-project.org/mymobileweb/public/specs/ideal2
![Page 12: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/12.jpg)
IDEAL2: UI Components (I)
� <input> enables free-form data entry or a user
interface component appropriate to the
datatype of the bound node.
� <select1> | <select> allows the user to make
a single | multiple selection from multiple
choices.
datatype of the bound node.
MORFEO MyMobileWeb12
� <textarea> multi-line text input element
� <submit> launches an update of the model (initiates a submission)
� <trigger> requests something from the UI without updating the model
![Page 13: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/13.jpg)
IDEAL2: UI Components (II)
� <upload> enables the common feature found
on Web sites to upload a file from the local
file system
� <inputDate> accepts a date as input. It can be
rendered as: calendar, set of input fields, wizard, …
� <inputTime> accepts a time as input (hours,
minutes and seconds)
MORFEO MyMobileWeb13
� <range> allows selection from a
sequential range of values
![Page 14: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/14.jpg)
IDEAL2: UI Components (III)
� <smsSend> allows sending an
SMS
� <phoneBookAdder> adds telephone numbers to
the agenda
� <image> | <figure> to display images (subject
to content selection or transcoding)
MORFEO MyMobileWeb14
![Page 15: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/15.jpg)
IDEAL2: UI Components (IV)
� <menu> represents a navigation list. It can be rendered as: combo sensitive to changes, clickable sensitive to changes, clickable images, list of links, …
MORFEO MyMobileWeb15
� <chainedMenu> is a set of mutually dependant menus
![Page 16: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/16.jpg)
IDEAL2: UI Components (V)
� <table> represents data in tabular mode
MORFEO MyMobileWeb16
� <placard> a container that supports
advanced layouts combining text and images
![Page 17: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/17.jpg)
IDEAL2: UI Components (VI)
� <carousel> displays sequentially a dynamic catalogue of objects
MORFEO MyMobileWeb17
![Page 18: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/18.jpg)
IDEAL2: UI Components (VII)
IDEAL2 Extensions (maps, media, statistical graphics, …)
MORFEO MyMobileWeb18
![Page 19: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/19.jpg)
SCXML
• State Chart XML (SCXML) is a W3C standard
• General purpose language for describing state machines
• Based on Harel States Tables
• Used to specify MyMobileWeb’s application flows
• Application Flows describe the behavior to be performed in reaction to the interaction of the user with the system
• The set of actions to be performed by an application flow does not only depend on the events raised by the user interface but also on the
MORFEO MyMobileWeb
19
• The set of actions to be performed by an application flow does not only depend on the events raised by the user interface but also on the application state
![Page 20: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/20.jpg)
SCXML ExampleRounds
Rounds.round
entry / executeOA (‘StandingsOA’’)
entry / executeOA (‘GamesOA’’)
Statistics
Statistics.barchar
Club
init.activate
[option == ‘statistics’]
Club clubSelection
init.activate
[option == ‘rounds’]
<state id="Gallery" mymw:category="UseCase" initial="Gallery.gallery"><state id="Gallery.gallery" mymw:category="View"><onentry><mymw:executeOA idOA="GalleryOA" /></onentry><transition event="myCarousel.activate" target="Gallery.photo" />InitialMenu
News
read.activate
Gallery
myCarousel activate
InitialMenu.index
init.activate[option == ‘news’]
Club.clubSelection
entry / executeOA (‘ClubsOA’)
Club.clubDetail
entry / executeOA (‘ClubNameOA’’)
club.activate[option == ‘gallery’]
/ propageVar()
init.activate[option == ‘club’]
Gallery.gallery
entry / executeOA (‘GalleryOA’’)
News.newsDetail
News.newsList
entry / executeOA (‘NewsListOA’’)
club.activate
[option == ‘news’]
clubSelection.activate
<transition event="myCarousel.activate" target="Gallery.photo" /><transition event="lback.activate" target="Club" /></state><state id="Gallery.photo" mymw:category="View"><transition event="lback.activate" target="Gallery.gallery" /></state></state>
MORFEO MyMobileWeb
20
Gallery.photo
myCarousel.activateentry / executeOA (‘NewsDetailOA’)
<state id="InitialMenu" mymw:category="UseCase" initial="InitialMenu.index"><state id="InitialMenu.index" mymw:category="View"><transition event="init.activate" cond="${option == 'news'}" target="News" /><transition event="init.activate" cond="${option == 'club'}" target="Club.clubSelection" /><transition event="init.activate" cond="${option == 'rounds'}" target="Rounds" /><transition event="init.activate" cond="${option == 'statistics'}" target="Statistics" /></state></state>
![Page 21: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/21.jpg)
Advantages
• Legibility:
• Flow clearly visible by looking at the flow definition file
• Separation of concerns: • Separation of concerns:
• Pure implementation of the MVC design pattern
• Maintainability
• It makes future maintenance tasks easier
• Simplicity:
• Avoid the use of the tedious Java Handlers
• Standards-based solution:
MORFEO MyMobileWeb
21
• SCXML is a W3C technology
• Flexibility:
• Generic State Machine Language
![Page 22: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/22.jpg)
Open Questions
MORFEO MyMobileWeb
22
![Page 23: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/23.jpg)
Open Questions (I)
• What are the main benefits for Model-Based UI?
• Declarative vs Imperative, What vs How, High-Abstraction vsImplementation Details
• What are the next steps to be taken concerning standardization?
• Re-usage of existing technologies and (de-facto) standards
• Is it feasible and opportune to start an standardization process now?
• Absolutely. Many people intending to do similar things. Heterogeneity can provide a higher abstraction level.
MORFEO MyMobileWeb
23
Heterogeneity can provide a higher abstraction level.
• What are the technologies that call for standardization?
• Model-Based UI Incubator Group Report, additional works in this workshop
![Page 24: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/24.jpg)
Open Questions (II)
• What needs to be standardized, models, syntaxes, both?
• Both, so it is easier to create standard-compliant runtimes
• What companies and institutions are interested in participating in the process?
• The MyMobileWeb Consortium, the Serenoa Consortium , and attendants to this workshop, I dare to say ☺
• What liaisons need to be established?
• TBD in this workshop
MORFEO MyMobileWeb
24
• TBD in this workshop
• What is the roadmap to be followed?
• TBD in this workshop
![Page 25: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/25.jpg)
References
� Visit our main demo at
— http://195.235.93.83:8080/Soccer
— Tutorial based on the demo:http://files.morfeo-project.org/mymobileweb/public/tutorial
� Watch our video-demo at� Watch our video-demo at
http://files.morfeo-project.org/mymobileweb/public/videos/mymw/index.htm
� Visit our website
http://mymobileweb.morfeo-project.org
� Download the software from our forge
— http://forge.morfeo-project.org/projects/mymobileweb/
� Have a look at the documentation
MORFEO MyMobileWeb
25
� Have a look at the documentation
— http://forge.morfeo-project.org/wiki_en/index.php/MyMobileWeb_Platform
� You can get support at
![Page 26: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/26.jpg)
Partners
MORFEO MyMobileWeb
26
![Page 27: 2010-05-13-MMW MBUI Workshop 2010v2.ppt [Modo de ...• State Chart XML (SCXML) is a W3C standard • General purpose language for describing state machines • Based on Harel States](https://reader033.vdocument.in/reader033/viewer/2022042012/5e72e5e503e2f862a72c6ab7/html5/thumbnails/27.jpg)
Thank you for your attentionThank you for your attention
http://mymobileweb.morfeo-project.org
MORFEO MyMobileWeb
27