1

MORFEO MyMobileWebhttp://mymobileweb.morfeo-project.org

MyMobileWeb“Authoring adaptive Mobile Web Applications with MyMobileWeb”

FIT-350405-2007-1FIT-350401-2006-2

2

MORFEO MyMobileWebhttp://mymobileweb.morfeo-project.org

Part III

Advanced MyMobileWeb

3MO

RF

EO

MyM

obile

Web

Contents

• Exploiting the Delivery Context

• Device Description Repositories

• DDR Simple API

• DevInfo Simple API

• The MyMobileWeb DDR REST Service

• Device Clustering

• Convenience Functions for the Delivery Context

• Internationalization

• Media Sets and Content Selection

• The Mobile Web Client Runtime

4MO

RF

EO

MyM

obile

Web

Device Description Repositories

• In the desktop Delivery Context, the number of different Properties that affect the usability is limited but in mobile Delivery Context this number is higher and affect the usability of the resulting content

• Historically, it has been difficult or impossible to upgrade Web browser software on mobile devices or to add support for features not present in the Web browser originally shipped with de device

• DDRs have become essential components of development of content targeted at the mobile Delivery Context

• Screen size, markup language support or image format support information is stored in “Device Description Repositories” (DDRs)

5MO

RF

EO

MyM

obile

Web

DDR Simple API (I)

• Minimal API for retrieving device properties needed for content and application adaptation.

• http://www.w3.org/TR/DDR-Simple-API/

• Promote the development of Web content that adapts to its Delivery Context.

• From the point of view of the DDR Simple API

• Aspect: represents a category of hardware or software that participates in delivering a Web experience.

• Property: characteristic of an aspect that can affect the Web experience.

• Vocabulary: set of properties and the aspects with which the properties are associated

6MO

RF

EO

MyM

obile

Web

DDR Simple API (II)

• Interfaces:

• Evidence: information to determine the Delivery Context.

• PropertyName: the name of a Property together with its namespace.

• PropertyRef: the name of a Property together with its Aspect together with the namespace they are in.

• PropertyValue: models a PropertyRef together with its value.

• PropertyValues: a set of PropertyValues.

• Service: the core of the DDR Simple API.

• ServiceFactory: factory for instantiating Service with the supplied default namespace and configuration.

• Several exceptions together with its codes (DDRException, SystemException,…)

7MO

RF

EO

MyM

obile

Web

DDR Simple API (III)

8MO

RF

EO

MyM

obile

Web

DDR Core Vocabulary

• Essential vocabulary of properties for adaptation in the Mobile Web environment

• http://www.w3.org/TR/2008/NOTE-ddr-core-vocabulary-20080414/

• Not intended to represent an exhaustive set of properties for content adaptation

• DDR Implementations might require additional properties and vocabularies

• This vocabulary defines two aspects:

• device: apparatus through which user can interact with de Web (default aspect)

• webBrowser: a User Agent for Web pages

• Properties: vendor, model, version, displayWidth, inputDevices, …

9MO

RF

EO

MyM

obile

Web

DevInfo Simple API

• Early implementation of W3C’s DDR Simple API Specification

• The implementation is based on WURFL and UAProf

• Supported vocabularies:

• W3C’s Core Vocabulary

• MyMobileWeb’s Vocabulary (used by MyMobileWeb to adapt content and applications)

• WURFL Vocabulary

• It is flexible enough to incorporate other data sources if available (e.g. DeviceAtlas)

• MyMobileWeb is integrated with this API implementation

• The first open source adaptation tool that use this new API

• User Manual:

• http://forge.morfeo-project.org/wiki_en/index.php/DDR-RI_User_Manual_1.1

10MO

RF

EO

MyM

obile

Web

Architecture Overview

wurfl

ServiceImpl

uaprof

WURFLService UAProfService DeviceAtlasService

deviceatlas

Service

Vocabularies description and

sources mapping

Vocabularies mapping

Identification

Application

11MO

RF

EO

MyM

obile

Web

Vocabulary Descriptors

12MO

RF

EO

MyM

obile

Web

Vocabulary Sources

13MO

RF

EO

MyM

obile

Web

Vocabulary Mappings

14MO

RF

EO

MyM

obile

Web

DDR REST Service

• Available a REST Service to access to DDR Repositories

• So thirds can know dynamically properties values

• E.g. from Javascript code

• The REST Service is consisted of

• Meta Service

• It lists the combination of all known Properties and Aspects in all Vocabularies, and furthermore it provides the data type and default Aspect for each property

• Query Service

• It provides the property values passed as parameter property, aspect and vocabulary

• MORFEO provides the following service:

• http://195.235.93.83:8081/DDRService

http://forge.morfeo-project.org/wiki_en/index.php/DDR_REST_Service

15MO

RF

EO

MyM

obile

Web

Meta Service

• URI Meta Service: http://195.235.93.83:8081/DDRService/LIST

• The format of interchange can be JSON or XML

• View syntax: http://forge.morfeo-project.org/wiki_en/index.php/DDR_REST_Service#Meta_Service

• If the client supports JSON ('application/json' in Accept HTTP Header), the Meta Service will send a JSON object as response

16MO

RF

EO

MyM

obile

Web

Query Service

• URI Query Service: http://195.235.93.83:8081/DDRService/GET

• The request parameter is called request

• The format of interchange can be JSON or XML

• View syntax: http://forge.morfeo-project.org/wiki_en/index.php/DDR_REST_Service#Query_Service

17MO

RF

EO

MyM

obile

Web

DDR REST Service Installation

• Developers can install their own DDR REST Service

• Download from: http://forge.morfeo-project.org/frs/download.php/521/DevInfo-Simple-1.1.tar.gz

• Uncompress the tar.gz

• Copy the DDR Service application in your server

• Configure the Installation_Path property (web.xml)

• If you want use WURFL as data source you have to append to JVM parameters '-Xms512m -Xmx512m'

http://forge.morfeo-project.org/wiki_en/index.php/DDR_REST_Service#Install_your_own_DDR_REST_Service

18MO

RF

EO

MyM

obile

Web

MyMobileWeb - DevInfo Integration

• MyMobileWeb provides two ways to access to Device Description Repositories

• Local DDR

• Embedded DevInfo Simple API (previous MyMobileWeb versions)

• Remote DDR (DevInfo Simple API Connector - Based)

• Platform retrieves property values asking to the DDR REST Service

• The DevInfo Simple Connector Library is licensed under LGPL 3.0 and the DevInfo Simple API is licensed under GPL 2

• The LGPL does not propagate itself in the same way that the GPL does so if you need a commercial development you should user a remote DDR option

19MO

RF

EO

MyM

obile

Web

Local DDR - Architecture

WURFL

DevInfo Simple API RI

UAPROF

…..

Delivery Context Management

devinfo-simple-ri

Vocabulary Descriptors

Mapping files

MyMobileWeb Application

…..

20MO

RF

EO

MyM

obile

Web

Local DDR - Configuration

• If you choose the local DDR option you should download the current DevInfo Simple API RI and copy the rest of libraries and configuration/descriptor files in your MyMobileWeb application

• Libraries

• DevInfo-Simple-1.1/build/*.jar (except devinfo-simple-connector-1.1.jar)

• DevInfo-Simple-1.1/lib/*.jar (except backport-util-concurrent-3.0.jar & ehcache-1.5.0.jar)

• Configuration and descriptor files

• DevInfo-Simple-1.1/resources/**/*

21MO

RF

EO

MyM

obile

Web

Remote DDR - Architecture

WURFL UAPROF

…..

dev

info

-sim

ple

-co

nn

ecto

r

MORFEO Service URI: http://195.235.93.83:8081/DDRService

MyMobileWeb Applications

DDR REST Service (DevInfo Simple RI-Based)

22MO

RF

EO

MyM

obile

Web

Remote DDR - Configuration

• MyMobileWeb uses this option by default so distributes all needed libraries and configuration files

• Property data: absolute path to resources (ehcache configuration and device clustering)

• Property url: remote DDR URI

23MO

RF

EO

MyM

obile

Web

Device Clustering (I)

• DevInfo Simple API provides the device grouping proposes in the following W3C Working Draft

• http://www.w3.org/TR/2008/WD-dd-structures-20081205/

• The majority of handsets share common characteristics and can be grouped into families

• For example, all the devices made by a manufacturer or all the devices that provide certain functionalities

• Device Grouping is useful as it provides a higher level of abstraction avoiding to work with specific device instances or models

• This working draft proposes an XML format, a syntax for group expressions based on boolean conditions over the properties

24MO

RF

EO

MyM

obile

Web

Device Clustering (II)

• MyMobileWeb describes a set of predefined device groups or families in the devinfo/device_groups_1.xml file

• Developers can add their groups in devinfo/device_groups.xml

25MO

RF

EO

MyM

obile

Web

Delivery Context Management APIs• Device (DDR Simple API Wrapper)

• getPropertyValues()

• Returns all property values

• getCapabilityValue (String property)

• Returns the value of the property for the caller device (only for DDR Core & MyMobileWeb Vocabularies)

• getCapabilityGroupValues (String property)

• Returns the value of the enumerated property for the caller device (only for DDR Core & MyMobileWeb Vocabularies)

• belongsTo (String family)

• Returns true if the device belongs to the device passed as parameter

26MO

RF

EO

MyM

obile

Web

Convenience Functions – Java API

• DeliveryContextFunctions is an utility class provides access to properties of DC

• deviceWidth(Context context)

• Physical width of the display associated with the device as a integer number• deviceHeight(Context context)

• Physical height of the display associated with the device as a integer number

• width(Context context)

• Usable width of the display associated with the device as a integer number • height(Context context)

• Usable height of the display associated with the device as a integer number• charactersColumns(Context context)

• Number of columns• charactersRows(Context context)

• Number of rows• currentOrientation(Context context)

• Current orientation (0, 90, -90, 180) according to default orientation• currentPosition(Context context)

• Current position as a string• Eg: "40.5143,-3.6637", latitude = '40.5143' and longitude = '-3.6637'

• colors(Context context)

• Number of colors

27MO

RF

EO

MyM

obile

Web

Convenience Functions – E.L (I)

• Invoking convenience functions from authoring language

• Asking to the DDR Service from authoring language

• namespace:propertyValue (String property, String localAspectName)

• Value of a specific property in the aspect and vocabulary specified by namespace and localAspectName respectively

• namespace:propertyValue (String property)

• Value of a specific property in its default aspect in the vocabulary specified by namespace

• propertyValue (String property, String localAspectName)

• Value of a specific property in the aspect specified by localAspectName (by default vocabulary, xmlns="")

• propertyValue (String property)

• Value of a specific property in its default aspect (default vocabulary, xmlns="")

http://forge.morfeo-project.org/wiki_en/index.php/EL_Functions_(DDR_%26_Convenience_functions)

28MO

RF

EO

MyM

obile

Web

Convenience Functions – E.L (II)

• Examples

http://forge.morfeo-project.org/wiki_en/index.php/MyMobileWeb_Certification_Examples_Convenience_Functions_DC

29MO

RF

EO

MyM

obile

Web

Internationalization

• Two concepts are handled

• Literal. It is a "tag" information that appears in a presentation and that can be formed by more than one word

• Examples: “Type of Company", "Enter", "Search"

• Message. It is a sentence with subject and predicate used to indicate something to the user.

• Usually the sentence is parameterized

• Example: "We have found {0} products“• The messages have a type

• Information, Warning, Error, Question, ....• They appear in presentations of the pseudo-OP 'Messages‘

• The platform solves the multilanguage

• The platform handles the internationalization for both: literal and messages

30MO

RF

EO

MyM

obile

Web

Internationalization - Literals

• The platform makes possible to develop applications that are multilanguage “by definition”

• Traditionally: An application designed for a single language, requires an effort of "adaptation" when it is translated into several languages

• All views should be modified to incorporate a indirection mechanism for resolving literals

• Unnatural

• It is possible to do things in other way

• Each developer in their mother tongue

• The multilanguage is transparent to developers

• The tools of the platform, if the application is decided to deploy in several languages, are responsible for extracting the literal and outsourcing, by language, in XML files, which included translations

• The platform runtime will make the translation at runtime

• The literal in the mother tongue programming is the key translation

31MO

RF

EO

MyM

obile

Web

Internationalization - Literals - Tools

• Literal Extractor

• Takes all presentations of an application and extracts the literals, leaving them in translation XML files, the same number as languages specified.

• The translations for the language in which was development are left in place (they are the identity)

• For all other languages they are leave prepared for sending to the translation department

• It is managed the cleanup, updates, etc.

• There are application literal and platform literal

• Next, Previous, Select

32MO

RF

EO

MyM

obile

Web

Internationalization -Literals -Redefinition

• Using the same translation mechanism we can redefine literals for different families of devices

• Example: a literal too long destroying the layout in a terminal or family of terminals

• Redefinition Mechanism

• A new translation will be created and it will be applied in runtime when a user connects with a terminal or family of devices that matches the specified

33MO

RF

EO

MyM

obile

Web

Internationalization – Literals – Example

• Hierarchy of multilanguage literals files

AppName_literals_en_US.xml

AppName_literals_es_ES.xml

34MO

RF

EO

MyM

obile

Web

Internationalization - Messages

• Each message has an identifier, a type and the text message

• It supports variable substitution involving both parameters 'local', and context variables (specified by EL)

• Example

• "The user ${ _MYMW_LOGIN} has {0} associated clients"

• {_MYMW_LOGIN} refers to a context variable and {0} refers to a local parameter

• The messages are displayed requesting the execution of an action showMessage in the flow

• There are messages of the own application and messages of the platform

• Example: Error messages for automated validations

35MO

RF

EO

MyM

obile

Web

Internationalization-Messages-Example

• Hierarchy of multilanguage messages files

36MO

RF

EO

MyM

obile

Web

Internationalization - Configuration

• Default language and the available languages

• Language identifier: <LanguageCode>_<CountryCode> (ISO)

• Literals directory configuration (MyMobileWeb.Global.xml)

• Messages directory configuration (MyMobileWeb.Global.xml)

• XML files should have this suffix:

• <LanguageCode>_<CountryCode>.xml (ISO)

37MO

RF

EO

MyM

obile

Web

Internationalization - Runtime

• Each user has in its session a variable that indicates the language code

• You can specify the language of a user in the object that represents the user's profile

• For multilanguage portals provides a language changeover operation using the parameter _MYMW_LANG

• The language of the user is stored in a cookie

• In running time there are two components

• MessagesManager

• Given a message ID it solves for the user's language and replaces the variables

• If it does not find the identifier the result is the identifier itself• LiteralManager

• Given a literal it translates to the user language• If it does not find a translation the result is the literal itself

http://forge.morfeo-project.org/wiki_en/index.php/MyMobileWeb_Certification_Examples_Internationalization

38MO

RF

EO

MyM

obile

Web

Media Sets & Content Selection (I)

• There are resources in applications, typically images, videos or audios, which rely heavily on the capabilities of devices

• To meet the requirement of displaying or supporting the most appropriate resource for each terminal, it is handled the concept of abstract identifier of resource which has different instances

• Example: a ‘home’ resource, which it is available in jpg, gif and wbmp and with different sizes.

• It is responsibility of the developer provides resources for each of these instances, so MyMobileWeb can send the best resort to each terminal

39MO

RF

EO

MyM

obile

Web

Media Sets & Content Selection (II)

• Relative paths of media resources are configured in MyMobileWeb.Global.xml file

• Content selection on CMS is also implemented

• Multi-device instances are stored into resource directory or generic subdirectory

• Redefined instances per markup, technology or family of devices are stored into directory whose name is the same as the technology or family name

40MO

RF

EO

MyM

obile

Web

Media Sets & Content Selection (III)

• MyMobileWeb supports content selection according to the language

• For that it is needed to add a folder level with the concatenation of the country code and code language (ISO)

• If there is a definition of family or technology:

• If within this subfolder are defined instances for the current language, the system will select only between them

• Otherwise, it will be selected from the ones that hangs directly from the family and not language

• If there is no a definition of family or technology:

• With language definition (folder with country code) under the generic folder is chosen only by these instances

• Without defining language select among all instances except from which are defined for other languages

41MO

RF

EO

MyM

obile

Web

Media Sets & Content Selection (IV)

42MO

RF

EO

MyM

obile

Web

The Mobile Web Client Runtime (I)

• Common

• mymw-common

• AJAX

• mymw-ajax

• UI

• mymw-ui

• mymw-tabview

• Much more to come (sliders, calendar…)

• Other Modules

• XForms

• DCCI, Context

• Recommendation

• Autocompletion

• …

mymw-common

mymw-ajax mymw-ui

43MO

RF

EO

MyM

obile

Web

The Mobile Web Client Runtime (II)

• The platform handles different device behaviours (including Windows Mobile 5)

• The platform offers a minimized version of the scripts to reduce load times.

• Scripts are located under script/ISO-8859-1/All/*.js

44MO

RF

EO

MyM

obile

Web

Common Module

• Source “script/ISO-8859-1/All/mymw-common_min.js”

Element $(<String> elementId)

Gets an element by id

boolean isDefined (<Object> o)

Validates if an object is defined or not

boolean isFloat (<Object> str)

Validates if an string has a float format

boolean isInteger (<Object> str)

Validates whether an string has an integer format

String trim(<String> str)

Trims a String, removing every leading or tailing whitespace.

45MO

RF

EO

MyM

obile

Web

The Mobile AJAX Framework

• Source “script/ISO-8859-1/All/mymw-ajax_min.js”

• Object mymw.ajax

void submit (<String> method, <String> url, <Object> params, <Object> callbacks)

Sends an HTTP request to the server.

method : HTTP method (“POST”, “GET”…)

url : remote URL

params : parameters to be sent

callbacks : “onerror” and “onsuccess” functions

String encode (<Object> params)

Encodes a list of parameters to be appended to the URL.

46MO

RF

EO

MyM

obile

Web

User Interface Module (I)

• Source “script/ISO-8859-1/All/mymw-ui_min.js”

• Object mymw.ui

• Modify page contents

void addFragment(<String> id, <String> htmlContent)

Appends some content to a given element

void setFragment(<String> id, <String> htmlContent)

Modifies the inner contents of a given element

47MO

RF

EO

MyM

obile

Web

User Interface Module (II)

• Modify styles

void setClass(<String> id, <String> className)

Sets the class name for a given element, removing any previously assigned class names.

void addClass(<String> id, <String> className)

Adds the class name for a given element, not removing any previously assigned class names, if existing.

void removeClass(<String> id, <String> className)

Removes a class name for a given element

boolean hasClass(<String> id, <String> className)

Verifies whether an element has a given style class name

void setStyle(<String> id, <String> property, <String> value)

Modifies a style property in a given element

void show(<String> id)

Shows (toggles display on) the element with a given id

void hide(<String> id)

Hides (toggles display off) the element with a given id

48MO

RF

EO

MyM

obile

Web

User Interface Module (III)

• Utilities

void addOptions(<String> id, <Object> options)

Adds a set of options to a select element

void removeOptions(<String> id)

Removes all the options present in a select element

49MO

RF

EO

MyM

obile

Web

How to use them in your POs (I)

• Add the required platform scripts

• Add a reference to your script files

• Add the listeners you need

http://forge.morfeo-project.org/wiki_en/index.php/MyMobileWeb_Certification_Examples_WebClientRuntime

50MO

RF

EO

MyM

obile

Web

How to use them in your POs (II)

51MO

RF

EO

MyM

obile

Web

Consortium