Università degli Studi di Catania Dipartimento di Ingegneria Informatica e delle Telecomunicazioni Dynamic user interface adaptation for mobile computing devices Mario Bisignano, Giuseppe Di Modica, Orazio Tomarchio [email protected], [email protected], [email protected] Context-aware Adaptation and Personalization for the Mobile Internet [email protected] [email protected] [email protected] Trento, SAINT 2005 Outline • Introduction and Basic Concepts • System Architecture • Architecture Implementation • Example Application • Conclusions and Future Directions [email protected] [email protected] [email protected] Trento, SAINT 2005 1 Introduction / Motivation Service provider ADSL… WIFI/ GPRS WIFI/ GPRS GPRS / UMTS Others… [email protected] [email protected] [email protected] Trento, SAINT 2005 Goal of our work A software development model where the presentation of an application (user-interaction) is able to adapt to the client execution context This has been done: • by separating the application logic from its presentation • by using an XML-based language to specify the user interaction with the application in an independent manner with respect to the specific client execution context • by delegating to a “renderer” the task of generating the actual user interface, adapting it to the used terminal characteristics [email protected] [email protected] [email protected] Trento, SAINT 2005 2 System Architecture Application Deployment Java Interface Renderer J2ME Interface Renderer Application Interaction Specification XHtml Interface Renderer Actual User Interface Content Repository XML Vocabulary Application Business Logic Media Content Adapter Profile Management Content request [email protected] [email protected] [email protected] Adapted Content Remote event handling (through SOAP) Trento, SAINT 2005 XML Vocabulary Our vocabulary has been created by integrating the base vocabulary XForms with new tags in order to manage: • Data Input • Data Output • Choice and multiple selections • Information transfer • Triggers • Content displaying <!ELEMENT UI (group+)> <!ELEMENT group (input*, secret*, textarea*, output*, upload*, submit*, range*, trigger*, select*, select1*, filename*, mediatype*, value*, label*, help*, hint*, alert*, video*, audio*, av*, image*)*> <!ATTLIST group caption CDATA #IMPLIED> [email protected] [email protected] [email protected] Trento, SAINT 2005 3 Example : choice and select Tag <select1 ref="Sex"> <label>Sex Field</label> <help/> <hint/> <alert/> <choices> <item> <label>Male</label> <value>male</value> </item> <item> <label>Female</label> <value>female</value> </item> </choices> </select1> Rendering in J2SE Rendering in J2ME [email protected] [email protected] [email protected] Trento, SAINT 2005 Rendering and Profile Management The choice of the interface renderer is made in a dynamic fashion, according to the client profile. Based on client profile it will be able to: - send to the client device the renderer and the XML description, - send to the client device the XML description, - send to the client the rendered interface. UAProf (User Agent Profile) specifications for the client profile’s parameters: • screen size, • number of supported colors, • supported image type • etc. [email protected] [email protected] [email protected] Trento, SAINT 2005 4 Content Adaptation Adapted content Server based adaptation: Server Capability specification Client content Client based adaptation: Server Request Client Adapted content content Proxy Based adaptation: Server Request Proxy [email protected] [email protected] [email protected] Capability specification Client Trento, SAINT 2005 Architecture Implementation The approaches used in our framework are: Proxy based for the content adaption: Client based for the rendering process: We have implemented : – A renderer for the MIDP2.0 profile – A Content Adapter – A Profile Manager – A Service Provider [email protected] [email protected] [email protected] Trento, SAINT 2005 5 The J2ME Renderer 1. XML file parsing 2. Rendering procedure 3. Events detecting [email protected] [email protected] [email protected] Trento, SAINT 2005 Profile Manager and Content Adapter Content Repository J2ME Interface Renderer Media Content Adapter (SERVLET) Profile Management Content request Adapted Content (PNG) [email protected] [email protected] [email protected] Trento, SAINT 2005 6 Application Business Logic Application Business Logic Remote event handling (through SOAP) [email protected] [email protected] [email protected] Trento, SAINT 2005 Example Application (1/2) The application allows users to get information about a movie: – The title – The playbill – The trailer These information will be presented and adapted according to the device characteristics used by the user to access the service [email protected] [email protected] [email protected] Trento, SAINT 2005 7 Example Application (2/2) •UI Description <?xml version="1.0" encoding="UTF-8"?> <UI> <group caption="MainForm" execution="Local"> <output ref="Stringa">Title: Matrix Reloaded</output> <image meta-inf="Optional" ref="matrixreloaded.jpg" mime-type="image/jpg" allign="center" mantain_aspect="true" scale="2" width="40" hight="30"/> <output ref="Trama">Neo e gli altri ribelli hanno 72 ore di tempo prima che un esercito di … </output> <output ref="Stringa">Trailer:</output> <video meta-inf="Optional“ ref="http://localhost:8080/MyServlet/matrixj2me.mpg" mime-tpe="video/mpeg" start="onInit"/> </group> </UI> a) With the playbill b) Without the playbill [email protected] [email protected] [email protected] c) With the movie trailer Trento, SAINT 2005 Conclusions In this work we have developed: – A model in order to separate the presentation layer of the application from its business logic. – A way to promote the automatic generation of the actual user interface starting from an abstract specification of the user interaction. – An XML based language, giving the application developer the means to represent the user interaction with the application in an abstract way. – A J2ME renderer prototype showing the viability of the approach. [email protected] [email protected] [email protected] Trento, SAINT 2005 8 Future Directions • To refine the XML-based language in order to overcome some encountered limits (e.g. layout and size constraints) • To develop “renderers” for PDAs (J2ME Personal Profile) and full-fledged desktop (J2SE) • To integrate in our model a task model in order to specify more complex application behaviors • To further exploit profile information (e.g. by also considering network information) • To develop a more complex example application on different devices [email protected] [email protected] [email protected] Trento, SAINT 2005 Thank you for your attention! [email protected] [email protected] [email protected] Trento, SAINT 2005 9