The creation of mobile web User Interfaces (UIs) implies great difficulties for developers. They need not only to address device and browser fragmentation, but also to cope with the variety of circumstances in which users may interact with their applications (delivery context). In order to reduce the development efforts in such a complex scenario, the scientific community has been studying the possibility to apply model-based techniques to the creation of context-aware UIs. Although this approach has proved to be promising, there is still a reduced amount of software tools covering the complete development lifecycle. In this article we introduce MMW-4S, a Runtime UI Generation Engine (RUIGE) fully compliant with the Serenoa reference framework.
INTRODUCTION During the last years, the usage of Internet has experienced a dizzying growth and, accordingly, Web technologies have evolved at a rapid pace. Nowadays, users commonly access the Web from a diverse set of mobile devices, such as smartphones, tablets, book readers or even personal gaming consoles among others. Moreover, they are increasingly demanding rich applications able to tailor the UI in accordance to their specific context: location, time, user preferences, environment conditions, device capabilities, network status and so on.
From the developer perspective, programming mobile Web
Permission to make digital or hard copies of all or part of this work for
personal or classroom use is granted without fee provided that copies are
not made or distributed for profit or commercial advantage and that copies
bear this notice and the full citation on the first page. To copy otherwise,
or republish, to post on servers or to redistribute to lists, requires prior
specific permission and/or a fee.
applications poses great challenges. Firstly, they need to
cope with device heterogeneity: different screen sizes,
multiple text input mechanisms, diversity in memory
availability and processing capabilities, etc. Secondly, they
need to deal with browser fragmentation. In spite of the fact
that standards are conceived to reduce interoperability
issues among systems, not all browsers are able to offer the
same level of support for the incoming standards, thus
causing several inconveniences for developers. Finally,
developers need to handle context-awareness in order to
maximize the user experience. In this regard, the Device
APIs Working Group [
RELATED WORK
One of the most well-known frameworks that defines the
fundamentals model-based UI design is CAMELEON [
Various models have been proposed to represent different
aspects at different levels of abstraction. For instance,
ConcurTaskTrees [
Some development platforms aimed at facilitating mobile
Web development offer declarative models to describe UIs
in a device independent manner. For instance, AWS Open
Source (previously Volantis Mobility Server) [
BACKGROUND
MyMobileWeb (MMW) [
Serenoa is a model-based framework aimed at developing a reference platform for enabling the creation of contextsensitive service front-ends (SFEs). From the point of view of Serenoa, a context-sensitive SFE provides a UI that exhibits some capability to be aware of the context and to react to changes of this context in a continuous way. As a result, such a UI will be adapted to a person’s devices, tasks, preferences, and abilities, thus improving people’s satisfaction and performance compared to traditional SFEs based on manually designed UIs.
This paper presents the evolution performed by the authors over the MMW platform in order to adapt it to a pure model-based approach following the guidelines established by the Serenoa reference framework (MyMobileWeb For Serenoa: MMW-4S).
RUNTIME USER INTERFACE GENERATION ENGINE
RUIGE is one of the modules proposed by the Serenoa
reference framework. It is a modular engine responsible for
the creation of final applications adapted to the context
starting from the AUI level by means of ASFE-DL [
Each RUIGE sub-module follows several stages in order to generate the final application based on the abstract definition. Each stage is associated to a specific module: Transformer: component in charge of the process of converting the abstract language (ASFE-DL) into a generic language for the representation of the CUI of each sub-module. This language will be the input to the next stage. Generator: this module analyses the output of the transformer and generates the executable code, which will be used at runtime. Runtime: this component is intended to provide support for the execution of applications. Note that some submodules may require both deployment and execution stages. This component is in charge of deploying the application, if it has not been done before by the generator. For instance, uploading web applications in a web server, deploying an application in a servlet container or even installing (or running) a file in the user device. After the deploy stage, the application is executed by an execution platform; for instance, a web browser.
MMW-4S
MMW-4S is an open-source module1 fully compliant with
RUIGE and with the Serenoa reference framework. It is
aimed at generating mobile Web applications for multiple
platforms and devices. Moreover, MMW-4S is able to
interoperate with the Adaptation Engine Serenoa
component in order to adapt the generated UIs to the
context, thus trying to maximize the user experience. Figure
1 shows a simplified version of the MMW-4S architecture
and its integration in the Serenoa platform. These
submodules are highlighted in blue color. Basically, MMW-4S
receives the abstract description of the application from the
Serenoa Service Repository, which subsequently gets such
description from the Authoring Tools. The following
sections provide details about the three main sub-modules
of MMW-4S: transformer, generator and runtime.
Note that MMW-4S runtime needs to query the Serenoa
Adaptation Engine in order to know the most appropriate
adaptation actions that the Runtime must apply in each
context. To accomplish that goal, the Runtime needs to
produce/reference ad-hoc software modules (Context
Delegates) that are the responsible for the extraction of
1 All MMW-4S code has been released as open-source
under the LGPLv3 license and it is available at the Morfeo
Forge: https://svn.forge.morfeo-project.org/serenoa/trunk/
contextual information coming from device sensors at
runtime. These Context Delegates propagate the
information to the Context Manager, which is in charge of
storing all the context properties and values for each device
instance. The Adaptation Engine, in order to decide the
most appropriate adaptation that should be applied in each
specific context, needs to process adaptation rules
expressed in AAL-DL [
Generator The UI Generator of MMW-4S is the part of the module in charge of generating JavaServer Pages (JSPs) from IDEAL2 documents. Each UI defined in IDEAL2 implies the generation of a specific JSP for each markup language in the market (WML, XHTML Basic/MobileProfile, HTML4 and HTML5). Note that the generated JSPs contain serverside code that will be executed at runtime. These JSPs are structured to guide the execution of the HTLM5 Rendering Engine at runtime.
Runtime This module is intended to provide the most appropriate FUI at runtime. Whenever a client device requests a specific Web page to the server, the corresponding JSP will be executed. Note that JSPs are translated into Java Servlets at runtime. Consequently, each web page access will result in the invocation of server-side code containing the logic that generates the adapted Web content dynamically. The HTML5 rendering engine is based on the jQueryMobile library. Moreover, a set of pre-generated Javascript libraries based on jQuery offer the possibility to perform client-side adaptations at runtime.
ADAPTATION SCENARIOS Once RUIGE behavior has been explained, it is necessary to introduce some adaptation rules to be considered during the application lifecycle. In order to exemplify how MMW4S treats adaptation rules, we will suppose the following set of rules, as coming from the Adaptation Engine. For the sake of legibility they are expressed in natural language in this article, although they have been formally defined in AAL-DL.
Adaptation to device features R1: If the device is a tablet, then master-detail presentations will be rendered in one single view. R1 must be considered during the transformation process when converting from ASFE-DL (AUI) to IDEAL2 + SCXML (CUI) by means of an XSLT. This XSLT generates two different versions of the IDEAL2 description. In the case of tablets, a master-detail view is expressed in just one IDEAL2 presentation. Otherwise, in case of mobile devices, the same view is expressed in two different IDEAL2 presentations, plus the additional flow logic expressed in SCXML. In order to carry out the adaptation, MMW-4S sends the User-Agent to the Context-Manager to identify which kind of device is accessing to the web.
Adaptation to the user profile R2: If user is color-blind, then it will use an alternative color palette in the referenced images.
Adaptation to the status of the device R3: If the level of the battery is higher than a prefixed threshold, then a video must be shown but if its level is lower, it renders an image.
Both rules, R2 and R3 must be considered at execution time
by the runtime module in order to dynamically adjust the
multimedia content (the color palette or the video/image in
each case) while the user is interacting with the application.
In this case, the adaptation rules received in AAL-DL format
have been transformed into a rules language expressed in
DRL, so as they can be executed at runtime by using the
new rule engine developed within MMW-4S. Such rule
engine is based on Drools Rule Engine [
R4 must be considered by the generator during the
generation process when converting from IDEAL2 +
SCXML (CUI) to HTML5 + CSS3 + Javascript (FUI). In
this case, the adaptation rule is considered in the generation
process to determine the Javascript code that should be
delivered. However, the adaptation will be carried out in the
runtime process when the Javascript code is executed. In
order to change the font-size, the frontal-web camera is
used by means of webRTC [
CONCLUSIONS AND FUTURE WORK This article summarizes the ongoing research work aimed at creating an open-source RUIGE that uses Model-Based techniques to facilitate the development of mobile Web UIS tailored to the context. Moreover, we present four scenarios to highlight the types of adaptations considered and we provide technical details about the implementation of such adaptations.
Further research needs to be done in order to: (a) align the proposed method with incoming standards, such as those models being defined in the W3C MBUI Working Group; (b) exploit further context variations to perform adaptations, taking into account the evolution of the recommendations of the W3C Device APIs Working Group; (c) validate our proposal in comparison to other research works ACKNOWLEDGMENTS The research is being performed thanks to the support of the following research projects: MyMobileWeb: an open source project intended to facilitate the creation of mobile Web applications funded by Ministerio de Industra, Turismo y Comercio (MITyC) within the framework of The National Plan for Scientific Research, Development and Technological Innovation 2008-2011 and by the European Regional Development Fund (ERDF). Serenoa: a european project aimed at developing a novel, open platform for enabling the creation of context-sensitive SFEs. This project has received funding from the European Commission's Seventh Framework Programme under grant agreement nº 258030 (FP7-ICT-2009-5).
S.: for