MyMobileWeb Certification Part IV

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

MyMobileWeb“Authoring adaptive Mobile Web Applications with MyMobileWeb”

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

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

Part IV

Going Beyond: Mastering MyMobileWeb

Contents

• Transcoding with OMA-STI and Alembik

• Integrating MyMobileWeb and CMSs

• Using JSTL within IDEAL

• Statistical graphics and the Chart library

• The Mobile Client Capabilities Framework

• Being aware of geolocation

• Being aware of screen orientation changes

• Being aware of Context: DCCI & OMTP-Bondi

• Creating IDEAL Extensions

Transcoding with OMA-STI and Alembik

• Introduction• Standard Transcoding Interface – OMA STI

• Introduction• Architecture• TranscodingRequest / TranscodingResponse• Open source projects

• Alembik• Introduction• Features• Architecture

• MyMobileWeb STI transcoding module• Architecture• Configuration• CSS styles

Introduction

• Necessity of multimedia content adaptation

• Screen sizes

• 128 x 160, 240 x 320, 340 x 480, …• Display colour depth

• Supported media formats

• JPEG, GIF, AMR, MP3, MPEG-1, MPEG-4, H.263…etc.• Other considerations

• Network environment• User preferences

• Two main approaches to solve it

• Content selection

• resourceid attribute• Multimedia transcoding

• Server-side adaptations

Old Image Transcoder

• So far…

• Image Transcoder• Image resizing respect device's display size• Image conversion to fit the format needed by target device

• Configuration• MyMobileWeb.Global.xml

• MyMobileWeb.ImageTranscoder.xml

Old Image Transcoder

• CSS properties• transcode• height• width• weight-width • weight-height• aspect-ratio

• Further details

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

• Open Mobile Alliance

• http://www.openmobilealliance.org/

• Standards organization

• Mobile phone industry

• Composed by the world's leading companies

• Mobile operators

• Device & network suppliers

• Information technology companies

• Content Providers

• Some important companies …

• Microsoft, Telefonica, Nokia, IBM, Ericsson, etc.

• Divided in Working Groups & Comitees

OMA BT WG

• OMA Browser Technologies (BT) Working Group (WG)

• Application technologies used in the open mobile architecture

• Responsible for base content types

• Behaviour and programming interfaces necessary to use them

• Render them and interact with the browser user agent• Standard Transcoder Interface (STI) Sub-Working Group

• Specify a Standard Transcoder Interface for the media adaptation

• Act as an expert group in matters related to media content adaptation within OMA

OMA STI

• OMA Standard Transcoding Interface

• Last approved version STI v1.0 – May 2007

• Available documentation

• http://www.openmobilealliance.org/technical/release_program/sti_v10.aspx

OMA STI - Goals

• Which is the STI goal?

• Provide a standardized way for applications to request content adaptation of multimedia files from a Transcoding Platform

• Advantages

• ONE Transcoding Platform for VARIOUS applications

• Applications could choose their Transcoding Platform

• No longer tied to specific transcoders with propietary interfaces

eb• Multiple applications using a single Transcoding Platform

OMA STI – Use Cases

• Single application using a Transcoding Platform

Transcoding

Platform

Wireless

Network

User Equipment

Application Platform (e.g. MyMW)

Transcoding Platform

Wireless Network

User Equipment

Audio Download Server

Messaging Server

Image Browsing

Server

Video Clip Server for MMS

STI User Equipment

STI - Architecture

• Request/Response model

• Handset profile references

• UAProf

• Internal DB

• SOAP over HTTP(s)

ApplicationPlatform

RemoteContent

(DB or Server)

TranscodingPlatform

Charging

ReferenceDB orServer

UAProfDB orServer

HTTP(S)

HTTP(S),FTP

TI-5TI-4

TI-1(SOAP)

ApplicationPlatform

Data XML HTTP(S)

TranscodingPlatform

DataXMLHTTP(S)

STI - TranscodingRequest

HTTP POST RequestHTTP Headers

SOAP-Envelope

SOAP Header

SOAP Body

STI Request Body

HTTP MIME Multipart Body

Content Attachment 1

Content Attachment M

Transcoding Job 1

Transcoding Job N

HTTP POST RequestHTTP Headers

SOAP-Envelope

SOAP Header

SOAP Body

STI Request Body

HTTP Body

Transcoding Job 1

Transcoding Job N

STI - TranscodingJob

STI – Transcoding parameters and transformations

• STI v1.0 specification, page 34

• Some transformations:

• Image & Video

• LevelCorrection, Mirror, NoiseReduction, Rotation, Sharpen, Cropping, FrameFill, Brightness, Contrast, Color, …

• Audio & Video

• DurationLimit, AGC, Offset, …• Some transcoding parameters:

• Height, Width, ContentType, ContentTypeParams, Codec, CodecParams, SizeLimit, BitRate, FrameRate

STI - TranscodingResponse

HTTP POST ResponseHTTP Headers

SOAP-Envelope

SOAP Header

SOAP Body

STI Response Body- Total Duration- Operation Return Code- Return Message

HTTP MIME Multipart Body

Content Attachment 1

Content Attachment M

Job Result 1

Job Result N

HTTP POST ResponseHTTP Headers

SOAP-Envelope

SOAP Header

SOAP Body

STI Response Body- Total Duration- Operation Return Code

- Return Message

HTTP Body

Job Result 1

Job Result N

STI – Failed TranscodingResponseHTTP Failure Response

HTTP/1.1 500 Internal Server ErrorContent-Type: text/xml; charset= UTF-8 Content-length: nnnn

HTTP Body

SOAP-Envelope<?xml version="1.0" encoding="UTF-8"?><soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/">

</soapenv:Envelope>

SOAP Header<soapenv:Header> . . .</soapenv:Header>

SOAP Body<soapenv:Body>

</soapenv:Body>

SOAP Fault <soapenv:Fault> <faultcode>soap code</faultcode> <faultstring>any error message</faultstring> <faultactor>sti actor URI</faultactor> <detail>

</detail></soapenv:Fault>

Response Body <TranscodingResponse> …</TranscodingResponse>

STI - Return codes

• STI specifies several return codes

• Info codes

• 1000-1999• Success code

• 2000• Warning codes (success but on some conditions).

• 2001-2999• Client error codes (e.g.: parsing error, invalid parameter value,

etc.).

• 4000-4999• Server error codes (e.g.: unsupported parameter, internal error,

etc.).

• 5000-5999

STI - Open Source Projects

• Volantis• MobilityServer released on 19th of March 2008• GPL License• STI support

• Map their ResourceDescriptor into a TranscodingRequest with an unique TranscodingJob

• Any STI-compliant transcoder released• GAIA

• GAIA Image Transcoder (GIT)• Open source library• Focused on mobile applications

• GAIA Transcoder Server in the roadmap• Fully STI-compliant• It moves on Alembik

• Reply & Kimia• Alembik

Alembik

• STI fully-compliant media transcoding server based on J2EE technology

• LGPL

• Dependencies

• Java Application Server J2EE 5.0

• Synchronous mode: Any web container suporting SOAP (JAXWS 2.x implementation)

• Apache Tomcat• Full functionality (asynchronous processing): EJB3

container• Images: ImageMagick (http://www.imagemagick.org), GAIA-GIT

• A/V: FFMpeg (http://ffmpeg.mplayerhq.hu/)

• Streaming: MP4Box (http://gpac.sourceforge.net/index.php), Darwin Streaming Server (http://dss.macosforge.org/)

Alembik - MediaProcessors

• Image: ImageMagikMediaProcessor & GAIAMediaProcessor

• A&V: FFMpegMediaProcessor

Alembik - Features

• Implemented features by each MediaProcessor

• http://alembik.sourceforge.net/alembikCoreMediaProcessor.html#selection

• User-Agent resolution

• WURFL

• Storage

• Not content-attachments

• Input

• Needs a URL to get the source content via HTTP• Output

• All result files written into a directory, which can be configured

Alembik - Architecture

Exercise 1

• Go to the following URL and follow the instructions

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

• Exercise goals

• Alembik deployment• Alembik configuration• Alembik HTTP API proofs

MyMW STI Transcoding Module

• New transcoding connector based on STI

• MyMobileWeb STI fully-compliant transcoders

• Images adaptation

• New CSS styles based on STI transformations

• The platform will automatically compose a STI Transcoding Request taking into account

• CSS Styles

• Context information

• Device capabilities• Communication with Alembik

• It defines its own WSDL

• It provides its own alembik-soap-client.jar

Architecture

TranscodingModule

UAProf

STI Transcoding Server

TranscoderConfig.xml

presentation.xml stylesheet.css

Mobility Channel

Application Plattform

Transcoding Plattform

Developer

CSS styles based on STI

transformations

Presentation which includes multimedia

content

Specify the transcoding server

parameters

Device Capabilities

Delivery Context

Configuration (I)• Alembik configuration

• Explore the alembik-soap-client.jar • In the org.alembik package find the transcoding.properties.file• Modify the WSDL location of the Alembik server to be invoked

• MyMobileWeb.Global.xml

• Indicate the new transcoding plugin

• org.morfeo.mymw.transcoder.sti.STIImgTranscodingPlugin

Configuration (II)

• MyMobileWeb.ImageTranscoder.xml

• Alembik

• Generic STI Transcoder

Configuration (III)

• Transcoding Servlet

• WEB-INF/web.xml

Exercise 2

• Exercise goals

• MyMW STI Transcoder configuration• Basic example

CSS (I)

• Size

• height

• [ <length> | <percentage> ]• width

• [ <length> | <percentage> ]• resize-directive

• [aspect-ratio | crop | stretch ]• size-limit

• <number> (bytes)• upsize-allowed

• [true | false]• cropping

• <non-negative-integer-value>{1,4}

CSS (II)• Format

• codec

• “<codec>”• codec-params

• [<property-name> <value>]+• content-type

• “<mime-type>”• content-type-params

• “<mime-type>”• frame-fill

• rgb(R,G,B)• mirror-axis

• [UD | LR]• rotation

• [90 | 180 | 270 | auto]

CSS (III)

• Quality

• brightness-level

• <integer-in-the-range [-50_50]>• contrast-level

• <integer-in-the-range [-50_50]>• level-correction

• [true | false]• noise-reduction

• [true | false]• sharpen

• [true | false]

CSS (IV)

• Animation

• frame-rate-output

• <positive-float-value>• frame-rate-sample

• <positive-float-value>• number-of-frames

• <positive-integer-value>• offset

• <positive-integer-value>• General

• transcode• It indicates whether if the transcoding process has to be

performed or notframe-rate-otput

CSS (V)

• Important

• STI: “Support of the transformation algorithms is optional.”

• Check the supported features of your transcoding server

• Alembik support:• http://alembik.sourceforge.net/

alembikCoreMediaProcessor.html#selection

• CSS styles specification

• http://forge.morfeo-project.org/wiki_en/images/8/82/MYMW_Transcoding_CSS_Properties_V1.pdf

CSS examples

Exercise 3

• Exercise goals

• Use advanced styles

Future work

• MyMobileWeb & Alembik cooperation

• Cache improvements

• MyMobileWeb cache

• Reload policy

• "only-once" • "always" • reload-time-in-minutes

• Audio & Video

Integrating MyMobileWeb and CMSs

• Introduction

• JSR-170

• Repository Model

• Node types

• MyMobileWeb – CMS Integration

• Architecture

• Content Binding Syntax

• CMS declaration and configuration

• Content Binding

• Basic Tags• Advanced Tags

• Alfresco CMS Integration

Introduction

• In order to make easier the development of information mobile gateways, MyMobileWeb lets the integration with Content Management System (CMS)

• This integration lets the declarative association of contents for the presentations controls

• The platform extracts, selects and adapts (if necessary) the contents automatically

• The CMSs manufacturers, each of them publish their owner mechanisms for contents accessing, so it’s needed to implement a specific plugin for each one → Here comes the Java Content Repository API or standard Java API for contents repositories accessing

JSR-170 (I)

• The Java Content Repository (JCR) specification (JSR-170) focuses on "content services," where these not only manage data, but offer author based versioning, full-text searches, fine grained access control, content categorization and content event monitoring.

• JSR-170 defines a repository model and a standard Java API which will let access to the repository services

• JSR-170 distinguishes between Contents Repository in front of the Contents Management Applications

• Content Repository (CR)• Software element which can store contents (documents,

images, sound, video, test, …) in persistent devices (FS, OOOB).

• Controls access to the contents (concurrence, transaction, …)

• Manages the life cycle of contents (versions, history, changes notification, …)

JSR-170 (II)

• Contents management Application (CMA)

• Provides a graphical front-end for contents editing, publishing and accessing

• Helps to the contents manufacturers

• The CMS offers this vision to the users

• It uses the services provided by the repository

• Usually it’s implemented with web interfaces which access to the repository with an owner API

• Traditionally there hasn’t been a big difference between CR and CMA, for this reason there is not a standard API for repositories accessing

JSR-170 (III)

• The repository model offers:

• Conceptual Modeling of store• Content-Types definition• Content versions management definition• Import and export formats definition (XML)

• The Java API (javax.jcr) offers:

• Contents access• Searches• Store of new contents• Export• Import

• JSR-170 defines a Java API in order to access to the contents, but it does not define the protocols for remote accessing to the information

JSR-170 (IV)

• There is different levels for the Standard fulfillment:

• Level 1 (Mandatory): read, search and export

• Level 2 (Optional): write, namespaces and import; Optionally chars: transactions, version, block and events

• This API must be implemented similar to JDBC:

• The vendor provides a native API for accessing to its repository (JSR-170 compliant).

• A third part implements a JSR-170 connector which will be the bridge with the owner API of a contents repository vendor (JSR-170 enabled)

Repository Model

• A contents repository is composed by one or more workspaces, each of them is composed by an items tree. An item can be a node or a property, which has an associated name. In order to avoid crashes with the names a namespaces mechanism is used. Each node can contain like child, 0 or more nodes and/or 0 or more properties

• The properties have a parent node and they have no any child, they are the tree leafs. Here is where the real content (like strings, booleans, streams of bytes, …) is stored

• The items can be identified with an absolute path or with an UUID

Node types

• A node has specific characteristics like child nodes. This information is defined through the Primary Node Type. There are predefined types, and other new ones can be defined too.

• Some predefined Primary Node Type are:

• nt:unstructured: the more flexible, it allows any child• nt:file: represents files, it has an only child with name

jcr:content• nt:folder: nodes association• nt:resource: represents a file content (jcr:data: file bytes,

jcr:mimeType: MIME type)• nt:version: for repositories which support version.

• Additionally, a node can contain one or more Mixin Types, which offers some extra characteristics. Predefined Mixin Types are:

• mix:versionable: the node supports versions.• mix:lockable: the node can be blocked.• mix:referenceable: the node can be referenced with an UUID

automatically generated by the repository (property jcr:uuid)

MyMobileWeb – CMS Integration

• The MyMW CMS integration covers several levels:

• The first of them, is the definition of presentations allowing in the presentations associate contents with visual controls, this is known as content binding. (cmspath:...)

• MyMobileWeb specifies a generic interface (org.morfeo.tidmobile.cms.CMSPlugin) for accessing to the content repositories, which must be implemented by several plugins associated to CMS, based on JSR-170 concepts

• To make easier this work, already there is a generic plugin (org.morfeo.tidmobile.cms.GenericJSR170Plugin) in order to access to contents repositories which supports JSR-170.

• If a CMS is not compatible with this standard, it will be needed to implement a specific plugin. The difference among the distinct repositories is how to find the 'Repository' object

Architecture Overview

Runtime Architecture

CMSContent

Repository

Web Server

API JSR-170Device

PresentationRuntime

Mobility Channel

Graphic Content (HTTP)

wml_1/presn.jsp

xhtml_mp/presn.jsp

html_wi_imode/presn.jsp

html_web/presn.jsp

Generated JSP’s

Content Binding

navigate

Developer MultiDevicePresentations

Code Generation + Deployment

designs

Content Binding Syntax

• The contents will be selected with an 'URI' type schema.

• prefix + repository and workspace (optionally) + node's • If repository and/or workspace are not specified, they will have the

default values.

• The prefix sets the kind of dir:

• Dir through path specification: it allows to dir a specific node of the repository.

• cmspath:repo:workspc/Demo/Images/logo• cmspath:repo/Demo/Images/logo• cmspath:/Demo/Images/logo

• Dir through UUID: only for nodes which can be referenced.• cmsuuid:/861735cf-068a-4981-9ba9-377301149557

• The CMS URIs can be dynamic, using an E.L

• cmspath:/DemoRFI/Noticias/Locales/${news}

Configuration (I)

• The CMS declaration and configuration is made in the MyMobileWeb.Global.xml file

• The default contents repository must be specified, “Default_CMS” property

• A new section must be opened by each contents repository (they can be linked with different CMSs vendors).

• The class that implements the repository access plugin must be specified, 'Plugin_Class' property

• You must explicit the repository location ('Repository_Location' property)

• If you want to access to protected data, you must put the user and password to connect to the CMS

• If you want to use the CMSContentRetriever servlet supplied by MyMW, don't change the 'URL_Base_Path', 'URL_Path', 'URL_Base_UUID' and 'URL_UUID'. Change it if you want to use your own servlet.

Configuration (II)

Content Binding

• There are two options to extract information from the repository, in the cmspath tag is possible point a node, or point a node property:

• If a node is pointed, the node primaryItem is returned.

• If a node property is pointed, the node property value is returned.

• There are two kind of controls:

• Basic controls: works with one node or property (Title, Label, Entryfield...).

• Advanced controls: can construct the MyMobileWeb control with more than one node (Selects, Menus, Tables...).

Content Binding – Basic Tags

• The following Basic Tags lets show content hosted on CMS

Content Binding – Advanced Tags (I)

• The following tags can be built with content hosted on CMS

• Tag <mymw:select>

• This tag will define a URI which it will point at a particular node whose child nodes will be the options that will made up the “select”.

• The defaults attributes are:

• keymemeber: It will be taken the 'name' property of the node.

• textmember: pmymw:label• selectedmember: pmymw:selected

Content Binding – Advanced Tags (II)• Tag <mymw:menu>

• To build a menu with content hosted on a CMS, it will associate by the attribute optionsbind. This attribute will define a URL that it will point at:

• A particular node whose child nodes will be the items of the menu.

• A node-type like cmt:Menu, that is to say, a menu registered in the content management.

• Is necessary specify attributes of 'member' type to handle a process mapping with the attributes of the menu and the properties of the nodes. The Values by default of these attributes are:

• keymember: It will take the property name of the node.• textmember: pmymw:label• imgmember: pmymw:image• srcmember: pmymw:src• titlemember: pmymw:title• longtitlemember: pmymw:longtitle• hrefmember: pmymw:href

Content Binding – Advanced Tags (III)• The definition of the node mymw:Menu is showed in this figure which

can have more nodes of the same type, or mymw:MenuItem, that is a subtype of mymw:Menu

Content Binding – Advanced Tags (IV)

• Tag <mymw:list>

• To build a list with content hosted on a CMS, it will associate though the attribute optionsbind. it will be necessary specify attributes of 'member' type to handle a process mapping with the attributes of the list and the properties of the nodes. The values by default of these attributes are:

• textmember: pmymw:label• imgmember: pmymw:image

Content Binding – Advanced Tags (V)

• Tag <mymw:table>

• optionsbind defines an URL that will point at a particular node of the content management. In turn, this node will have a set of child nodes which will be taken like the rows of the table. The columns will be the nodes of each one of the rows. It's necessary to specify 'member' attributes to handle the mapping process of the content of each one column with the items of the nodes which represents each row. The values by default of the both keymember and stylemember attributes are:

• keymember: The 'name' property of the node will be taken by default

• stylemember: pmymw:style

Content Binding – Advanced Tags (VI)

Alfresco - MyMobileWeb Integration (I)

• Alfresco is an Enterprise Content Management System (CMS) for Microsoft Windows and Unix-like operating systems

• Alfresco comes in two flavors. Alfresco LABS is free software, GPL licensed open source and open standards, but never officially stable. Alfresco Enterprise Edition is commercially / proprietary licensed open source, open standards and enterprise scale

• Its design is geared towards users who require a high degree of modularity and scalable performance

• Alfresco includes a Content Repository, an out-of-the-box web portal framework for managing and using standard portal content, a CIFS interface that provides file system compatibility on Microsoft Windows and Unix-like operating systems, a Web Content Management system capable of virtualizing webapps and static sites via Apache Tomcat, Lucene indexing, and jBPM workflow

• The Alfresco system is developed using Java technology

• Alfresco supports the JCR standard access to its platform

Alfresco - MyMobileWeb Integration (II)

• The Java Remote Method Invocation API, or Java RMI, a Java application programming interface, performs the object-oriented equivalent of remote procedure calls.

• Apache Jackrabbit is an open source content repository for the Java platform, used as the reference implementation of JSR-170, specified within the Java Community Process.

• The MyMobileWeb server and the Alfresco server may be in different machines (with the RMI right configured), or in the same machine (also with the RMI configured)

Alfresco and MyMobileWeb (I)

• Alfresco Extension Plugin

• More information at Alfresco Wiki. It's supposed that there is an Alfresco installation finished (the application is tested with Alfresco 3 Labs).

• Download extension-jcr-rmi-1.0.0-src.zip from Alfresco's Forge and unzip.

• Copy extension-jcr-rmi\lib\jcr-rmi-1-impl-classes.jar and extension-jcr-rmi\build\dist\extension-jcr-rmi.jar into $TOMCAT\webapps\alfresco\WEB-INF\lib.

• Copy the contents of extension-jcr-rmi\config\alfresco\extension into $TOMCAT\webapps\alfresco\WEB-INF\classes\alfresco\extension.

• Remove/Comment-out the line <import resource="classpath:alfresco/jcr-context.xml" /> from $TOMCAT\webapps\alfresco\WEB-INF\classes\alfresco\extension\jcr-rmi-context.xml

Alfresco and MyMobileWeb (II)

• Edit jcr-rmi.properties as required to set the port the RMI registry is running on:

# ##################### #

# RMI JCR Configuration #

# ##################### #

rmi.jcr.binding.servername=localhost

rmi.jcr.binding.port=1099

rmi.jcr.binding.name=javaContentRepository

Alfresco and MyMobileWeb (III)

• Alfresco extension-jcr-thread-bound-1.1 Plugin

• More information at Alfresco's Forge. In order to integrate this extension it will be necessary to complete the following modifications after extension-jcr-rmi has been deployed.

• Download the extension-jcr-thread-bound-1.1.jar and must be added to the WEB-INF/lib directory of the deployed alfresco webapp.

• In $TOMCAT/shared/classes/alfresco/extension add the thread-bound-jcr-context.xml config file:

Alfresco and MyMobileWeb (IV)

• Modify the jcr-rmi-context.xml which was added as a part of the extension-jcr-rmi integration by changing the javaContentRepositoryRmiBinding bean to point at the threadBoundJcrRepository rather than the JCR.Repository:

Alfresco and MyMobileWeb (V)• MyMW Server Configuration

• jcr-1.0.jar must be placed at server/common/lib• MyMW application Configuration

• It's necessary change one library in the application's libs. Replace the jackrabbit-jcr-rmi-1.3.1.jar with the jcr-rmi-1-impl-classes.jar (downloaded in the above sections)

• The configuration is made in the MyMobileWeb.Global.xml. The Alfresco repository is declared like other CMS module, but with some specific properties:

Alfresco and MyMobileWeb (VI)

• Property Values:• Plugin_Class → class that implements the plugin.• Repository_Location → Alfresco's server URL. • Alfresco_Rmi_port → rmiregistry's port (1099 is the rmiregistry's default

port).• Alfresco_Rmi_Binding_Name → jcr-rmi.properties property.• Alfresco_Path → Alfresco's application path into Alfresco server.• Default_Workspace → Alfresco's default workspace (SpacesStore is the

Alfresco's default workspace).• User → user name to login in Alfresco.• Pass → user password to login in Alfresco.• primaryItem → Node primary Item property.• URL_Base_Path → CMSContentRetriver URL base path.• URL_Path → CMSContentRetriver URL path.• URL_Base_UUID → CMSContentRetriver URL base UUID.• URL_UUID → CMSContentRetriver URL uuid.

Using JSTL within IDEAL

• JSTL library is a component of Java 2 Enterprise Edition (J2EE) specification

• JSTL is a set of tags and standard libraries which are a framework for Java Server Pages (jsps) development

• MyMobileWeb has added a subset of JSTL tags to IDEAL

• This is a subset of the tags defined in the core library• These added tags are explained below

• <if> Simple condition tag • <forEach> Simple iteration tag• <choose> Conditional tag• <when> Conditional tag• <otherwise> Conditional tag• <set> Assignment values tag• <remove> Tag for deleting

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

• This example is a simple iteration and the bind attributes are myVar.0, myVar.1, etc...

Using JSTL within IDEAL – Example (I)http://forge.morfeo-project.org/wiki_en/index.php/MyMobileWeb_Certification_Examples_JSTL

eb• This example illustrates a simple condition that according to a

numerical value the div container is displayed with a background color or other

Using JSTL within IDEAL – Example (II)http://forge.morfeo-project.org/wiki_en/index.php/MyMobileWeb_Certification_Examples_JSTL

Statistical graphics and the Chart library

• Multimedia enhancements using IDEAL Language

• GOAL: Statistical chart representation in SVG

• Supported SVG: show a vectorial chart

• Not supported SVG: transcode into Raster format (JPG)

• Four types of chart

• Barchart

• Piechart

• Linechart

• Scatterchart

Control chart: types of chart

Attributes

• <mymwchart:bar|line|pie|scatter id class optionsbind src [display] [alt] [title ][bind] [bindingtype]/>

• id: label identifier

• class: style reference

• optionsbind: context variable which contains data.

• src: path of data defined in an XML file

• display: EL condition for displaying (or not )the component

• alt: alternative text

• Title: chart’s title

• Bind: context data to keep selected component.

• Bindingtype: java class to store the selected value.

Attributes: optionsbind

• Different ways to define the origin of data source

• XML input

• XML file: • different for each type of chart

• Referenced by src

• Special data structures:

• Java collections: list, hashmap, …• Referenced by optionsbind

Styles

• Chart Options

• ShowLegend, show-title-chart, show-animation, show-grid, show-lines, show-animation, legend-position...

• Dimentions

• width, height,...

• Common styles:

• Display, background-color, margin, padding, ...

Features

• Events over charts

• Identifies the element that is accessed

• Serie and the component to which the element belongs to.

• Identify the element itself in its own serie

Example• To define an XML file for Bar chart in resources:

<data>

</serie >

</data>

<axes>

<value>Enero</value>

<value>Febrero</value>

</axisx>

</axisy>

</axes>

</chart>

Example• XML for Scatter chart:

<data>

</serie >

</data>

<axes>

</axes>

</chart>

Example• To define an special structure of Java to insert data:

LinkedHashMap<String,Double> pg = new LinkedHashMap<String, Double>();

pg.put("04", new Double(15));

pg.put("05", new Double(13));

LinkedHashMap<String,Double> pe = new LinkedHashMap<String, Double>();

pe.put("04", new Double(12));

pe.put("05", new Double(17));

LinkedHashMap<String,Double> pp = new LinkedHashMap<String, Double>();

pp.put("04", new Double(15));

pp.put("05", new Double(12));

LinkedHashMap<String,LinkedHashMap<String,Double>> barchart = new LinkedHashMap<String, LinkedHashMap<String,Double>>();

barchart.put("PG", pg);

barchart.put("PE", pe);

barchart.put("PP", pp);

Example

<mymwcharts:bar

id="chart1"

title="Estadisticas partidos“

optionsbind="${barchart}"

bind="${selectedBar}"

class="myChart">

</mymwcharts:bar>

• Insert a chart in a presentation using IDEAL language:

• JAVA Structure referenced by optionsbind:

• The context variable can contain a structure like the one defined before.

• LinkedHashMap<String,LinkedHashMap<String,Double>>

Example

<mymwcharts:bar

id="chart1"

title="Estadisticas partidos “

src="${barSrc}"

bind="${selectedBar}"

class="myChart">

</mymwcharts:bar>

• Insert a chart in a presentation using IDEAL language:

• XML file referenced by src:

• There are two possibilities:

• Context variable contents a path where file is stored.

• "barSrc", "/resource/charts/bar1.xml"• Insert the path directly over src.

Example• Flow’s definition in charts

• flows/MyMobileWeb.flow.xml

• Events flow’s definition

<mymw:invokeMethod className="sporting.classes.MyCharts" method="setPieChart" result="${opScope.pieSrc}">

<mymw:argument expression="${opScope.selectedBar}"/>

</mymw:invokeMethod>

</transition>

</state>

Example

public String setPieChart(String [] bar){

String serie = ChartUtil.getSerie(bar);String component = ChartUtil.getComponent(bar);String srcFile =

"resource/charts/"+component+serie+".xml";return srcFile;

Example

chart.myChart {

height:90%;

width:90%;

x-title: temporada;

y-title: partidos;

legend-position: right;

• Defining styles for the chart

Example

• Navigation squeme

Future work

• Control chart implemented in next release

• June 2009

• Graceful degradation

• To a table

• Image + links

• Advanced Styles

• Updating Data in real time

• Browser support: AJAX• Not support: recharge the page

• Statistic Features over charts

The Mobile Client Capabilities Framework

• Purpose of the Mobile Client Capabilities Framework

• Architecture

• Client Side Components

• Plugin Installation

• Examples:

• Orientation Changes

• Being aware of Geolocation

• Automatic Form Fill

Introduction and purpose

• Provides access to properties only available in the device:

• GPS position, speed, altitude

• Battery Level

• Owner Information

• Display Orientation

• Advantages:

• Allows to create richer applications

• Key to create personalized applications. Context-aware information

• Comparison with Device Repositories:

• Database of properties for each device by model: Supported markup languages, Javascript support, vendor....

• Client Capabilities Framework: Properties may change over time, we need to explicitly ask them to the device

Architecture Overview

Client Side Components

• Plugin: Fetches the properties from the device using the Operating System native calls.

• Google Gears?

• MyMobileWeb Browser Plugin (Windows Mobile 5 & 6)

• BONDI initiative http://bondi.omtp.org Well designed API, standard, multiplatform.

• API: Simplifies the task of accessing the properties from Javascript.

• DCCI: W3C: http://www.w3.org/TR/DPF/ • Properties arranged in a tree structure.• Convenience functions for easy access:

• dcciValueAsString(‘Orientation’);• Sync Module: Notifies the server of changes in the client.

• Keeps needed properties in server side.

• New MyMobileWeb Context properties, easy for the developer.

Plugin Installation

• MyMobileWeb automatically detects if the plugin is already installed, if it is not, it asks the user to install it.

• The user just needs to follow some simple steps to install it.• The user can choose not to install it, MyMobileWeb will keep

working but these features won’t be available.

Monitoring Orientation Changes• The Client Capabilities Framework allows to know the orientation at any time.

• We need to declare in the presentation that we want to monitor orientation changes by importing the orientation module, using the script tag.

• The client will notify the server with orientation changes.

• We can ask the MyMobileWeb context for properties like:

• Orientation (0, 90, -90, 180).

• Real screen size (taking into account the orientation), width and height.

• Visible rows and columns.

• This allows to adapt the content to the actual screen size:

• Bigger images, or more columns for tables.

• Omit certain parts of the page depending on the size / orientation.

• Add details or notes.

• Using the orientation:

• Show in a presentation: ${dcn:currentOrientation()}

• Get from a OA: DeliveryContextFunctions.currentOrientation(context);

• Get from Javascript: dcciValueAsString(‘Orientation’):

Orientation example

Orientation behaviour

Being aware of Geolocation

• Modern applications require keeping track of the user location:

• Find nearby points of interest.

• Contact friends

• Get directions.

• Find current spot in a map.

• …

• Knowing this with MyMobileWeb is very easy:

• Declare that you want to get the location in a presentation.

• Ask MyMobileWeb context for the location.

• Using the location:

• Show in a presentation: ${dcn:currentPosition()}

• Get from a OA:

String coords = DeliveryContextFunctions.currentPosition(context);

• Get from Javascript: dcciValueAsString(‘Position’);

Being Aware of Geolocation Code

Being aware of Geolocation usage

Automatic Form Fill

• Objective: Simplify the task of filling forms with limited devices by guessing their values.

• Steps:

• Annotate semantically the form using about-class and about-prop.

• Match against some data source.

• Example, autocompleting typical owner information directly from the device.

• Vocabulary: FOAF.

• Data source: Owner Information represented in RDF directly extracted from the device.

• Runtime: A javascript library reads the form and the data source and tries to find matchings.

Automatic Form Fill Code

Autocompletion usage

Useful Links

• Orientation example: http://forge.morfeo-project.org/wiki_en/index.php/Orientation_changes

• Form Fill example: http://forge.morfeo-project.org/wiki_en/index.php/Automatic_form_fill

• Location example: http://forge.morfeo-project.org/wiki_en/index.php/Being_aware_of_geolocation

• Convenience Functions for Context: http://forge.morfeo-project.org/wiki_en/index.php/Delivery_Context_Management_Module_User_Manual_3.4.1#Convenience_functions

• DCCI Documentation: https://svn.forge.morfeo-project.org/svn/mymobileweb/trunk/CELTIC-Deliverables/2008/Singular/D.2.4.1/index.html

Creating IDEAL Extensions

• Developers can define their UI Components by means of the language extension

• The new UI components has as XML namespace

• http://morfeo-project.org/user

• Steps

1. Define the XML Schema associated to the new UI Component in custom.xsd

2. Configure the new UI Component

• The tag implementation class should be defined in MyMobileWeb.CodeGen.xml

3. Implement the Tag Bean & Renderer

IDEAL Extensions – Example (I)

• New staticMap Component

• Defining the XML Schema

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

IDEAL Extensions – Example (II)

• UI Component Configuration in MyMobileWeb.CodeGen.xml

• This class should implements the Tag interface or extends the TidMobileTag class

IDEAL Extensions – Example (III)• UI Component Implementation

IDEAL Extensions – Example (IV)

Consortium

MyMobileWeb Certification Part IV

Business

IV. Findings on Secondary Alternative Certification Programs

Collection System Maintenance Grade IV Certification Examination

Rules for the Certification and Construction IV …rules.dnvgl.com/docs/pdf/gl/maritimerules2016Jan/gl_iv-7-4_e.pdfRules for the Certification and Construction IV Industrial Services

ePKI Root Certification Authority Certification …eca.hinet.net/download/eCA_CPS_v1.4draft(Eng)20180126.pdfeCA CPS Chunghwa Telecom Co. Ltd iv . 4.9.4 Revocation Request Grace Period

Advanced Test Equipment Rentals - atecorp.com · Certification Information iv FIP-400 Certification Information F.C.C. Information Electronic test equipment is exempt from Part 15

International Driver Examiner Certification (IDEC) … III –Cynthia Delp, IA Region IV –Todd Holbrook, UT. The International Driver Examiner Certification (IDEC) ... Module 1 Quiz

Intro to Teacher Certification in ISEE · Cheryl McMurtrey, ISEE Regional Technology Coordinator, Regions III/IV Cina Lackey, Certification Coordinator Intro to Teacher Certification

Advanced Test Equipment Rentals · 2018-07-06 · Certification Information iv FIP-400 Certification Information F.C.C. Information Electronic test equipment is exempt from Part 15

Requirements for European Class 3 Medical Certification of …reqfor...Requirements for European Class 3 Medical Certification of Air Traffic Controllers Page iv Released Issue Edition

SECTION IV VOLUNTARY CERTIFICATION SCHEME FOR AYUSH ... › PDF › ayush_project › Certification Process Ver 3.pdf · Section IV – Certification Process Version 3 Jan 2017 Page

2016 ACPA QCAST Plant Certification Manual...ACPA QCAST PLANT CERTIFICATION Manual Sections I Common Program Requirements II Pipe Requirements III Manhole Requirements IV Engineered

MyMobileWeb: Open Source Framework for Adaptive Mobile Web Applications

MyMobileWeb Certification Part I

GHANA FOREST MANAGEMENT CERTIFICATION STANDARD … · Ghana Forest Management Certification Standard, Version 5 iv standards and the operation of a credible system of forest and chain

· PDF file(iii) (iv) certification ... self-certification by the participating gas based plant regarding the ... CCGT by Pioneer Gas Power Ltd. ANDHRA PRADESH ANDHRA

Indirect/Administrative Costs – This cost pool includes · Web viewment IV - Name other attachments Section I – Certification XYZ ME Certification by Responsible Individual I

FDA PERSPECTIVE OF ANDA CERTIFICATION PROCESS AND …Keywords: FDA, ANDA, Hatch-Waxman Act, Orange Book, Patent infringement, Paragraph-IV Certification. The Certification Procedure

EO100™ Certification Summary Audit Report€¦ · Certification Body Certification Recommendation Letter p.3 III. EO100™ Certification Score p.4 IV. EO100™ Certification Audit

PC Adapter USB - Siemens AG PC Adapter USB iv A5E01134250-01 Certification PC Adapter USB have the following certification: • Underwriters Laboratories, Inc.: UL 60950 registered

MyMobileWeb project's position