109
1 MORFEO MyMobileWeb http://mymobileweb.morfeo-project.org MyMobileWeb “Authoring adaptive Mobile Web Applications with MyMobileWeb” FIT-350405-2007-1 FIT-350401-2006-2
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 IV
Going Beyond: Mastering MyMobileWeb
3MO
RFE
O M
yMob
ileW
eb
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
4MO
RFE
O M
yMob
ileW
eb
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
5MO
RFE
O M
yMob
ileW
eb
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
6MO
RFE
O M
yMob
ileW
eb
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
7MO
RFE
O M
yMob
ileW
eb
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
8MO
RFE
O M
yMob
ileW
eb
OMA
• 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
9MO
RFE
O M
yMob
ileW
eb
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
10MO
RFE
O M
yMob
ileW
eb
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
11MO
RFE
O M
yMob
ileW
eb
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
12MO
RFE
O M
yMob
ileW
eb• Multiple applications using a single Transcoding Platform
OMA STI – Use Cases
• Single application using a Transcoding Platform
Transcoding
Platform
STI
Wireless
Network
User Equipment
Application Platform (e.g. MyMW)
Transcoding Platform
STI
Wireless Network
User Equipment
Audio Download Server
Messaging Server
Image Browsing
Server
Video Clip Server for MMS
STI User Equipment
13MO
RFE
O M
yMob
ileW
eb
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
HTTP(S)
HTTP(S),FTP
HTTP(S),FTP
TI-1
TI-2
TI-5TI-4
TI-3
UA-1
TI-1(SOAP)
ApplicationPlatform
Data XML HTTP(S)
TranscodingPlatform
DataXMLHTTP(S)
14MO
RFE
O M
yMob
ileW
eb
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
. . .
15MO
RFE
O M
yMob
ileW
eb
STI - TranscodingJob
16MO
RFE
O M
yMob
ileW
eb
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
17MO
RFE
O M
yMob
ileW
eb
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
. . .
18MO
RFE
O M
yMob
ileW
eb
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>
19MO
RFE
O M
yMob
ileW
eb
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
20MO
RFE
O M
yMob
ileW
eb
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
21MO
RFE
O M
yMob
ileW
eb
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/)
22MO
RFE
O M
yMob
ileW
eb
Alembik - MediaProcessors
• Image: ImageMagikMediaProcessor & GAIAMediaProcessor
• A&V: FFMpegMediaProcessor
23MO
RFE
O M
yMob
ileW
eb
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
24MO
RFE
O M
yMob
ileW
eb
Alembik - Architecture
25MO
RFE
O M
yMob
ileW
eb
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
26MO
RFE
O M
yMob
ileW
eb
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
27MO
RFE
O M
yMob
ileW
eb
Architecture
TranscodingModule
WURFL
UAProf
STI Transcoding Server
HTTP
SOAP
DD
R S
impl
e A
PI
DD
R
Sim
p le
AP
I
Res
ourc
e
Styl
es
TranscoderConfig.xml
presentation.xml stylesheet.css
Mobility Channel
Application Plattform
Transcoding Plattform
DDR
Developer
Cac
he S
yste
m
CSS styles based on STI
transformations
Presentation which includes multimedia
content
Specify the transcoding server
parameters
Device Capabilities
Delivery Context
28MO
RFE
O M
yMob
ileW
eb
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
29MO
RFE
O M
yMob
ileW
eb
Configuration (II)
• MyMobileWeb.ImageTranscoder.xml
• Alembik
• Generic STI Transcoder
30MO
RFE
O M
yMob
ileW
eb
Configuration (III)
• Transcoding Servlet
• WEB-INF/web.xml
31MO
RFE
O M
yMob
ileW
eb
Exercise 2
• Go to the following URL and follow the instructions
• http://forge.morfeo-project.org/wiki_en/index.php/MyMobileWeb_Certification_Examples_Transcoding
• Exercise goals
• MyMW STI Transcoder configuration• Basic example
32MO
RFE
O M
yMob
ileW
eb
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}
33MO
RFE
O M
yMob
ileW
eb
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]
34MO
RFE
O M
yMob
ileW
eb
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]
35MO
RFE
O M
yMob
ileW
eb
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
36MO
RFE
O M
yMob
ileW
eb
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
37MO
RFE
O M
yMob
ileW
eb
CSS examples
38MO
RFE
O M
yMob
ileW
eb
Exercise 3
• Go to the following URL and follow the instructions
• http://forge.morfeo-project.org/wiki_en/index.php/MyMobileWeb_Certification_Examples_Transcoding
• Exercise goals
• Use advanced styles
39MO
RFE
O M
yMob
ileW
eb
Future work
• MyMobileWeb & Alembik cooperation
• Cache improvements
• MyMobileWeb cache
• Reload policy
• "only-once" • "always" • reload-time-in-minutes
• Audio & Video
40MO
RFE
O M
yMob
ileW
eb
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
41MO
RFE
O M
yMob
ileW
eb
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
42MO
RFE
O M
yMob
ileW
eb
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, …)
43MO
RFE
O M
yMob
ileW
eb
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
44MO
RFE
O M
yMob
ileW
eb
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
45MO
RFE
O M
yMob
ileW
eb
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)
46MO
RFE
O M
yMob
ileW
eb
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
47MO
RFE
O M
yMob
ileW
eb
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)
48MO
RFE
O M
yMob
ileW
eb
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
49MO
RFE
O M
yMob
ileW
eb
Architecture Overview
50MO
RFE
O M
yMob
ileW
eb
Runtime Architecture
CMSContent
Repository
Web Server
API JSR-170Device
PresentationRuntime
Mobility Channel
HTTP
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
51MO
RFE
O M
yMob
ileW
eb
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}
52MO
RFE
O M
yMob
ileW
eb
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.
53MO
RFE
O M
yMob
ileW
eb
Configuration (II)
54MO
RFE
O M
yMob
ileW
eb
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...).
55MO
RFE
O M
yMob
ileW
eb
Content Binding – Basic Tags
• The following Basic Tags lets show content hosted on CMS
56MO
RFE
O M
yMob
ileW
eb
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
57MO
RFE
O M
yMob
ileW
eb
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
58MO
RFE
O M
yMob
ileW
eb
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
59MO
RFE
O M
yMob
ileW
eb
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
60MO
RFE
O M
yMob
ileW
eb
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
61MO
RFE
O M
yMob
ileW
eb
Content Binding – Advanced Tags (VI)
62MO
RFE
O M
yMob
ileW
eb
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
63MO
RFE
O M
yMob
ileW
eb
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)
64MO
RFE
O M
yMob
ileW
eb
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
65MO
RFE
O M
yMob
ileW
eb
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
66MO
RFE
O M
yMob
ileW
eb
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:
67MO
RFE
O M
yMob
ileW
eb
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:
68MO
RFE
O M
yMob
ileW
eb
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:
69MO
RFE
O M
yMob
ileW
eb
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.
70MO
RFE
O M
yMob
ileW
eb
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
71MO
RFE
O M
yMob
ileW
eb
• 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
72MO
RFE
O M
yMob
ileW
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
73MO
RFE
O M
yMob
ileW
eb
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
74MO
RFE
O M
yMob
ileW
eb
Control chart: types of chart
75MO
RFE
O M
yMob
ileW
eb
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.
76MO
RFE
O M
yMob
ileW
eb
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
77MO
RFE
O M
yMob
ileW
eb
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, ...
78MO
RFE
O M
yMob
ileW
eb
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
79MO
RFE
O M
yMob
ileW
eb
Example• To define an XML file for Bar chart in resources:
<chart type="BarChart" id=“data1">
<data>
<serie name="Lugo">
<item y="12"/>
<item y="10"/>
</serie >
</data>
<axes>
<axisx name="meses">
<value>Enero</value>
<value>Febrero</value>
</axisx>
<axisy name="temperatura">
</axisy>
</axes>
</chart>
80MO
RFE
O M
yMob
ileW
eb
Example• XML for Scatter chart:
<chart type=“ScatterChart" id=“data1">
<data>
<serie name="Lugo">
<item y="12“ x=“5”/>
<item y="10“ x=“9”/>
</serie >
</data>
<axes>
<axisx name="meses"></axisx>
<axisy name="temperatura"></axisy>
</axes>
</chart>
81MO
RFE
O M
yMob
ileW
eb
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);
82MO
RFE
O M
yMob
ileW
eb
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>>
83MO
RFE
O M
yMob
ileW
eb
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.
84MO
RFE
O M
yMob
ileW
eb
Example• Flow’s definition in charts
• flows/MyMobileWeb.flow.xml
• Events flow’s definition
<state id="Charts_barchart">
<transition event="chart1_onclick" target="Charts_piechart">
<mymw:invokeMethod className="sporting.classes.MyCharts" method="setPieChart" result="${opScope.pieSrc}">
<mymw:argument expression="${opScope.selectedBar}"/>
</mymw:invokeMethod>
</transition>
</state>
85MO
RFE
O M
yMob
ileW
eb
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;
}
86MO
RFE
O M
yMob
ileW
eb
Example
chart.myChart {
height:90%;
width:90%;
x-title: temporada;
y-title: partidos;
legend-position: right;
}
• Defining styles for the chart
87MO
RFE
O M
yMob
ileW
eb
Example
• Navigation squeme
88MO
RFE
O M
yMob
ileW
eb
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
89MO
RFE
O M
yMob
ileW
eb
89
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
90MO
RFE
O M
yMob
ileW
eb
90
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
91MO
RFE
O M
yMob
ileW
eb
91
Architecture Overview
92MO
RFE
O M
yMob
ileW
eb
92
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.
93MO
RFE
O M
yMob
ileW
eb
93
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.
94MO
RFE
O M
yMob
ileW
eb
94
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’):
95MO
RFE
O M
yMob
ileW
eb
95
Orientation example
96MO
RFE
O M
yMob
ileW
eb
96
Orientation behaviour
97MO
RFE
O M
yMob
ileW
eb
97
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’);
98MO
RFE
O M
yMob
ileW
eb
Being Aware of Geolocation Code
98
99MO
RFE
O M
yMob
ileW
eb
Being aware of Geolocation usage
99
100MO
RFE
O M
yMob
ileW
eb
100
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.
101MO
RFE
O M
yMob
ileW
eb
Automatic Form Fill Code
101
102MO
RFE
O M
yMob
ileW
eb
Autocompletion usage
102
103MO
RFE
O M
yMob
ileW
eb
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
103
104MO
RFE
O M
yMob
ileW
eb
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
105MO
RFE
O M
yMob
ileW
eb
IDEAL Extensions – Example (I)
• New staticMap Component
• Defining the XML Schema
http://forge.morfeo-project.org/wiki_en/index.php/MyMobileWeb_Certification_Examples_Extensions
106MO
RFE
O M
yMob
ileW
eb
IDEAL Extensions – Example (II)
• UI Component Configuration in MyMobileWeb.CodeGen.xml
• This class should implements the Tag interface or extends the TidMobileTag class
107MO
RFE
O M
yMob
ileW
eb
IDEAL Extensions – Example (III)• UI Component Implementation
108MO
RFE
O M
yMob
ileW
eb
IDEAL Extensions – Example (IV)
109MO
RFE
O M
yMob
ileW
eb
Consortium
