MyMobileWeb Certification Part IV


Published on

Going Beyond : Mastering MyMobileWeb

Published in: Business, Technology, Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • MyMobileWeb Certification Part IV

    1. 1. MyMobileWeb “Authoring adaptive Mobile Web Applications with MyMobileWeb” FIT-350405-2007-1 FIT-350401-2006-2
    2. 2. Part IV Going Beyond: Mastering MyMobileWeb
    3. 3. Contents <ul><li>Transcoding with OMA-STI and Alembik </li></ul><ul><li>Integrating MyMobileWeb and CMSs </li></ul><ul><li>Using JSTL within IDEAL </li></ul><ul><li>Statistical graphics and the Chart library </li></ul><ul><li>The Mobile Client Capabilities Framework </li></ul><ul><ul><li>Being aware of geolocation </li></ul></ul><ul><ul><li>Being aware of screen orientation changes </li></ul></ul><ul><ul><li>Being aware of Context: DCCI & OMTP-Bondi </li></ul></ul><ul><li>Creating IDEAL Extensions </li></ul>
    4. 4. Transcoding with OMA-STI and Alembik <ul><li>Introduction </li></ul><ul><li>Standard Transcoding Interface – OMA STI </li></ul><ul><ul><li>Introduction </li></ul></ul><ul><ul><li>Architecture </li></ul></ul><ul><ul><li>TranscodingRequest / TranscodingResponse </li></ul></ul><ul><ul><li>Open source projects </li></ul></ul><ul><li>Alembik </li></ul><ul><ul><li>Introduction </li></ul></ul><ul><ul><li>Features </li></ul></ul><ul><ul><li>Architecture </li></ul></ul><ul><li>MyMobileWeb STI transcoding module </li></ul><ul><ul><li>Architecture </li></ul></ul><ul><ul><li>Configuration </li></ul></ul><ul><ul><li>CSS styles </li></ul></ul>
    5. 5. Introduction <ul><li>Necessity of multimedia content adaptation </li></ul><ul><ul><li>Screen sizes </li></ul></ul><ul><ul><ul><li>128 x 160, 240 x 320, 340 x 480, … </li></ul></ul></ul><ul><ul><li>Display colour depth </li></ul></ul><ul><ul><li>Supported media formats </li></ul></ul><ul><ul><ul><li>JPEG, GIF, AMR, MP3, MPEG-1, MPEG-4, H.263…etc. </li></ul></ul></ul><ul><ul><li>Other considerations </li></ul></ul><ul><ul><ul><li>Network environment </li></ul></ul></ul><ul><ul><ul><li>User preferences </li></ul></ul></ul><ul><li>Two main approaches to solve it </li></ul><ul><ul><li>Content selection </li></ul></ul><ul><ul><ul><li>resourceid attribute </li></ul></ul></ul><ul><ul><li>Multimedia transcoding </li></ul></ul><ul><ul><ul><li>Server-side adaptations </li></ul></ul></ul>
    6. 6. Old Image Transcoder <ul><li>So far… </li></ul><ul><ul><li>Image Transcoder </li></ul></ul><ul><ul><ul><li>Image resizing respect device's display size </li></ul></ul></ul><ul><ul><ul><li>Image conversion to fit the format needed by target device </li></ul></ul></ul><ul><ul><li>Configuration </li></ul></ul><ul><ul><ul><li>MyMobileWeb.Global.xml </li></ul></ul></ul><ul><ul><ul><li>MyMobileWeb.ImageTranscoder.xml </li></ul></ul></ul>
    7. 7. Old Image Transcoder <ul><ul><li>CSS properties </li></ul></ul><ul><ul><ul><li>transcode </li></ul></ul></ul><ul><ul><ul><li>height </li></ul></ul></ul><ul><ul><ul><li>width </li></ul></ul></ul><ul><ul><ul><li>weight-width </li></ul></ul></ul><ul><ul><ul><li>weight-height </li></ul></ul></ul><ul><ul><ul><li>aspect-ratio </li></ul></ul></ul><ul><li>Further details </li></ul><ul><ul><li> </li></ul></ul>
    8. 8. OMA <ul><li>Open Mobile Alliance </li></ul><ul><ul><li>http:// / </li></ul></ul><ul><li>Standards organization </li></ul><ul><ul><li>Mobile phone industry </li></ul></ul><ul><li>Composed by the world's leading companies </li></ul><ul><ul><li>Mobile operators </li></ul></ul><ul><ul><li>Device & network suppliers </li></ul></ul><ul><ul><li>Information technology companies </li></ul></ul><ul><ul><li>Content Providers </li></ul></ul><ul><li>Some important companies … </li></ul><ul><ul><li>Microsoft, Telefonica, Nokia, IBM, Ericsson, etc. </li></ul></ul><ul><li>Divided in Working Groups & Comitees </li></ul>
    9. 9. OMA BT WG <ul><li>OMA Browser Technologies (BT) Working Group (WG) </li></ul><ul><li>Application technologies used in the open mobile architecture </li></ul><ul><ul><li>Responsible for base content types </li></ul></ul><ul><ul><ul><li>Behaviour and programming interfaces necessary to use them </li></ul></ul></ul><ul><ul><ul><li>Render them and interact with the browser user agent </li></ul></ul></ul><ul><li>Standard Transcoder Interface (STI) Sub-Working Group </li></ul><ul><ul><li>Specify a Standard Transcoder Interface for the media adaptation </li></ul></ul><ul><ul><li>Act as an expert group in matters related to media content adaptation within OMA </li></ul></ul>
    10. 10. OMA STI <ul><li>OMA Standard Transcoding Interface </li></ul><ul><ul><li>Last approved version STI v1.0 – May 2007 </li></ul></ul><ul><ul><li>Available documentation </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
    11. 11. OMA STI - Goals <ul><li>Which is the STI goal? </li></ul><ul><ul><li>Provide a standardized way for applications to request content adaptation of multimedia files from a Transcoding Platform </li></ul></ul><ul><li>Advantages </li></ul><ul><ul><li>ONE Transcoding Platform for VARIOUS applications </li></ul></ul><ul><ul><li>Applications could choose their Transcoding Platform </li></ul></ul><ul><ul><ul><li>No longer tied to specific transcoders with propietary interfaces </li></ul></ul></ul>
    12. 12. <ul><li>Multiple applications using a single Transcoding Platform </li></ul>OMA STI – Use Cases <ul><li>Single application using a Transcoding Platform </li></ul>
    13. 13. STI - Architecture <ul><li>Request/Response model </li></ul><ul><li>Handset profile references </li></ul><ul><ul><li>UAProf </li></ul></ul><ul><ul><li>Internal DB </li></ul></ul><ul><li>SOAP over HTTP(s) </li></ul>
    14. 14. STI - TranscodingRequest
    15. 15. STI - TranscodingJob
    16. 16. STI – Transcoding parameters and transformations <ul><li>STI v1.0 specification, page 34 </li></ul><ul><li>Some transformations: </li></ul><ul><ul><li>Image & Video </li></ul></ul><ul><ul><ul><li>LevelCorrection, Mirror, NoiseReduction, Rotation, Sharpen, Cropping, FrameFill, Brightness, Contrast, Color, … </li></ul></ul></ul><ul><ul><li>Audio & Video </li></ul></ul><ul><ul><ul><li>DurationLimit, AGC, Offset, … </li></ul></ul></ul><ul><li>Some transcoding parameters: </li></ul><ul><ul><li>Height, Width, ContentType, ContentTypeParams, Codec, CodecParams, SizeLimit, BitRate, FrameRate </li></ul></ul>
    17. 17. STI - TranscodingResponse
    18. 18. STI – Failed TranscodingResponse
    19. 19. STI - Return codes <ul><li>STI specifies several return codes </li></ul><ul><ul><li>Info codes </li></ul></ul><ul><ul><ul><li>1000-1999 </li></ul></ul></ul><ul><ul><li>Success code </li></ul></ul><ul><ul><ul><li>2000 </li></ul></ul></ul><ul><ul><li>Warning codes (success but on some conditions). </li></ul></ul><ul><ul><ul><li>2001-2999 </li></ul></ul></ul><ul><ul><li>Client error codes (e.g.: parsing error, invalid parameter value, etc.). </li></ul></ul><ul><ul><ul><li>4000-4999 </li></ul></ul></ul><ul><ul><li>Server error codes (e.g.: unsupported parameter, internal error, etc.). </li></ul></ul><ul><ul><ul><li>5000-5999 </li></ul></ul></ul>
    20. 20. STI - Open Source Projects <ul><li>Volantis </li></ul><ul><ul><li>MobilityServer released on 19th of March 2008 </li></ul></ul><ul><ul><li>GPL License </li></ul></ul><ul><ul><li>STI support </li></ul></ul><ul><ul><ul><li>Map their ResourceDescriptor into a TranscodingRequest with an unique TranscodingJob </li></ul></ul></ul><ul><ul><ul><li>Any STI-compliant transcoder released </li></ul></ul></ul><ul><li>GAIA </li></ul><ul><ul><li>GAIA Image Transcoder (GIT) </li></ul></ul><ul><ul><ul><li>Open source library </li></ul></ul></ul><ul><ul><ul><li>Focused on mobile applications </li></ul></ul></ul><ul><ul><li>GAIA Transcoder Server in the roadmap </li></ul></ul><ul><ul><ul><li>Fully STI-compliant </li></ul></ul></ul><ul><ul><ul><li>It moves on Alembik </li></ul></ul></ul><ul><ul><ul><ul><li>Reply & Kimia </li></ul></ul></ul></ul><ul><li>Alembik </li></ul>
    21. 21. Alembik <ul><li>STI fully-compliant media transcoding server based on J2EE technology </li></ul><ul><li>LGPL </li></ul><ul><li>Dependencies </li></ul><ul><ul><li>Java Application Server J2EE 5.0 </li></ul></ul><ul><ul><ul><li>Synchronous mode: Any web container suporting SOAP (JAXWS 2.x implementation) </li></ul></ul></ul><ul><ul><ul><ul><li>Apache Tomcat </li></ul></ul></ul></ul><ul><ul><ul><li>Full functionality (asynchronous processing): EJB3 container </li></ul></ul></ul><ul><ul><li>Images: ImageMagick ( http:// ), GAIA-GIT </li></ul></ul><ul><ul><li>A/V: FFMpeg ( http:// / ) </li></ul></ul><ul><ul><li>Streaming: MP4Box ( http:// ), Darwin Streaming Server ( http:// / ) </li></ul></ul>
    22. 22. Alembik - MediaProcessors <ul><li>Image: ImageMagikMediaProcessor & GAIAMediaProcessor </li></ul><ul><li>A&V: FFMpegMediaProcessor </li></ul>
    23. 23. Alembik - Features <ul><li>Implemented features by each MediaProcessor </li></ul><ul><ul><li> </li></ul></ul><ul><li>User-Agent resolution </li></ul><ul><ul><li>WURFL </li></ul></ul><ul><li>Storage </li></ul><ul><ul><li>Not content-attachments </li></ul></ul><ul><ul><li>Input </li></ul></ul><ul><ul><ul><li>Needs a URL to get the source content via HTTP </li></ul></ul></ul><ul><ul><li>Output </li></ul></ul><ul><ul><ul><li>All result files written into a directory, which can be configured </li></ul></ul></ul>
    24. 24. Alembik - Architecture
    25. 25. Exercise 1 <ul><li>Go to the following URL and follow the instructions </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Exercise goals </li></ul></ul><ul><ul><ul><li>Alembik deployment </li></ul></ul></ul><ul><ul><ul><li>Alembik configuration </li></ul></ul></ul><ul><ul><ul><li>Alembik HTTP API proofs </li></ul></ul></ul>
    26. 26. MyMW STI Transcoding Module <ul><li>New transcoding connector based on STI </li></ul><ul><ul><li>MyMobileWeb  STI fully-compliant transcoders </li></ul></ul><ul><ul><li>Images adaptation </li></ul></ul><ul><li>New CSS styles based on STI transformations </li></ul><ul><li>The platform will automatically compose a STI Transcoding Request taking into account </li></ul><ul><ul><li>CSS Styles </li></ul></ul><ul><ul><li>Context information </li></ul></ul><ul><ul><ul><li>Device capabilities </li></ul></ul></ul><ul><li>Communication with Alembik </li></ul><ul><ul><li>It defines its own WSDL </li></ul></ul><ul><ul><li>It provides its own alembik-soap-client.jar </li></ul></ul>
    27. 27. Architecture
    28. 28. Configuration (I) <ul><li>Alembik configuration </li></ul><ul><ul><li>Explore the alembik-soap-client.jar </li></ul></ul><ul><ul><li>In the org.alembik package find the </li></ul></ul><ul><ul><li>Modify the WSDL location of the Alembik server to be invoked </li></ul></ul><ul><li>MyMobileWeb.Global.xml </li></ul><ul><ul><li>Indicate the new transcoding plugin </li></ul></ul><ul><ul><ul><li>org.morfeo.mymw.transcoder.sti.STIImgTranscodingPlugin </li></ul></ul></ul>
    29. 29. Configuration (II) <ul><li>MyMobileWeb.ImageTranscoder.xml </li></ul><ul><ul><li>Alembik </li></ul></ul><ul><ul><li>Generic STI Transcoder </li></ul></ul>
    30. 30. Configuration (III) <ul><li>Transcoding Servlet </li></ul><ul><ul><li>WEB-INF/web.xml </li></ul></ul>
    31. 31. Exercise 2 <ul><li>Go to the following URL and follow the instructions </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Exercise goals </li></ul></ul><ul><ul><ul><li>MyMW STI Transcoder configuration </li></ul></ul></ul><ul><ul><ul><li>Basic example </li></ul></ul></ul>
    32. 32. CSS (I) <ul><li>Size </li></ul><ul><ul><li>height </li></ul></ul><ul><ul><ul><li>[ <length> | <percentage> ] </li></ul></ul></ul><ul><ul><li>width </li></ul></ul><ul><ul><ul><li>[ <length> | <percentage> ] </li></ul></ul></ul><ul><ul><li>resize-directive </li></ul></ul><ul><ul><ul><li>[aspect-ratio | crop | stretch ] </li></ul></ul></ul><ul><ul><li>size-limit </li></ul></ul><ul><ul><ul><li><number> (bytes) </li></ul></ul></ul><ul><ul><li>upsize-allowed </li></ul></ul><ul><ul><ul><li>[true | false] </li></ul></ul></ul><ul><ul><li>cropping </li></ul></ul><ul><ul><ul><li><non-negative-integer-value>{1,4} </li></ul></ul></ul>
    33. 33. CSS (II) <ul><li>Format </li></ul><ul><ul><li>codec </li></ul></ul><ul><ul><ul><li>“ <codec>” </li></ul></ul></ul><ul><ul><li>codec-params </li></ul></ul><ul><ul><ul><li>[<property-name> <value>]+ </li></ul></ul></ul><ul><ul><li>content-type </li></ul></ul><ul><ul><ul><li>“ <mime-type>” </li></ul></ul></ul><ul><ul><li>content-type-params </li></ul></ul><ul><ul><ul><li>“ <mime-type>” </li></ul></ul></ul><ul><ul><li>frame-fill </li></ul></ul><ul><ul><ul><li>rgb(R,G,B) </li></ul></ul></ul><ul><ul><li>mirror-axis </li></ul></ul><ul><ul><ul><li>[UD | LR] </li></ul></ul></ul><ul><ul><li>rotation </li></ul></ul><ul><ul><ul><li>[90 | 180 | 270 | auto] </li></ul></ul></ul>
    34. 34. CSS (III) <ul><li>Quality </li></ul><ul><ul><li>brightness-level </li></ul></ul><ul><ul><ul><li><integer-in-the-range [-50_50]> </li></ul></ul></ul><ul><ul><li>contrast-level </li></ul></ul><ul><ul><ul><li><integer-in-the-range [-50_50]> </li></ul></ul></ul><ul><ul><li>level-correction </li></ul></ul><ul><ul><ul><li>[true | false] </li></ul></ul></ul><ul><ul><li>noise-reduction </li></ul></ul><ul><ul><ul><li>[true | false] </li></ul></ul></ul><ul><ul><li>sharpen </li></ul></ul><ul><ul><ul><li>[true | false] </li></ul></ul></ul>
    35. 35. CSS (IV) <ul><li>Animation </li></ul><ul><ul><li>frame-rate-output </li></ul></ul><ul><ul><ul><li><positive-float-value> </li></ul></ul></ul><ul><ul><li>frame-rate-sample </li></ul></ul><ul><ul><ul><li><positive-float-value> </li></ul></ul></ul><ul><ul><li>number-of-frames </li></ul></ul><ul><ul><ul><li><positive-integer-value> </li></ul></ul></ul><ul><ul><li>offset </li></ul></ul><ul><ul><ul><li><positive-integer-value> </li></ul></ul></ul><ul><li>General </li></ul><ul><ul><li>transcode </li></ul></ul><ul><ul><ul><li>It indicates whether if the transcoding process has to be performed or notframe-rate-otput </li></ul></ul></ul>
    36. 36. CSS (V) <ul><li>Important </li></ul><ul><ul><li>STI: “ Support of the transformation algorithms is optional.” </li></ul></ul><ul><ul><li>Check the supported features of your transcoding server </li></ul></ul><ul><ul><li>Alembik support: </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><li>CSS styles specification </li></ul><ul><ul><li> </li></ul></ul>
    37. 37. CSS examples
    38. 38. Exercise 3 <ul><li>Go to the following URL and follow the instructions </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Exercise goals </li></ul></ul><ul><ul><ul><li>Use advanced styles </li></ul></ul></ul>
    39. 39. Future work <ul><li>MyMobileWeb & Alembik cooperation </li></ul><ul><li>Cache improvements </li></ul><ul><ul><li>MyMobileWeb cache </li></ul></ul><ul><ul><li>Reload policy </li></ul></ul><ul><ul><ul><li>&quot;only-once&quot; </li></ul></ul></ul><ul><ul><ul><li>&quot;always&quot; </li></ul></ul></ul><ul><ul><ul><li>reload-time-in-minutes </li></ul></ul></ul><ul><li>Audio & Video </li></ul>
    40. 40. Integrating MyMobileWeb and CMSs <ul><li>Introduction </li></ul><ul><li>JSR-170 </li></ul><ul><ul><li>Repository Model </li></ul></ul><ul><ul><li>Node types </li></ul></ul><ul><li>MyMobileWeb – CMS Integration </li></ul><ul><ul><li>Architecture </li></ul></ul><ul><ul><li>Content Binding Syntax </li></ul></ul><ul><ul><li>CMS declaration and configuration </li></ul></ul><ul><ul><li>Content Binding </li></ul></ul><ul><ul><ul><li>Basic Tags </li></ul></ul></ul><ul><ul><ul><li>Advanced Tags </li></ul></ul></ul><ul><li>Alfresco CMS Integration </li></ul>
    41. 41. Introduction <ul><li>In order to make easier the development of information mobile gateways, MyMobileWeb lets the integration with Content Management System ( CMS ) </li></ul><ul><li>This integration lets the declarative association of contents for the presentations controls </li></ul><ul><li>The platform extracts, selects and adapts (if necessary) the contents automatically </li></ul><ul><li>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 </li></ul>
    42. 42. JSR-170 (I) <ul><li>The Java Content Repository (JCR) specification (JSR-170) focuses on &quot;content services,&quot; where these not only manage data, but offer author based versioning, full-text searches, fine grained access control, content categorization and content event monitoring. </li></ul><ul><li>JSR-170 defines a repository model and a standard Java API which will let access to the repository services </li></ul><ul><li>JSR-170 distinguishes between Contents Repository in front of the Contents Management Applications </li></ul><ul><li>Content Repository (CR) </li></ul><ul><ul><li>Software element which can store contents (documents, images, sound, video, test, …) in persistent devices (FS, OOOB). </li></ul></ul><ul><ul><li>Controls access to the contents (concurrence, transaction, …) </li></ul></ul><ul><ul><li>Manages the life cycle of contents (versions, history, changes notification, …) </li></ul></ul>
    43. 43. JSR-170 (II) <ul><li>Contents management Application (CMA) </li></ul><ul><ul><li>Provides a graphical front-end for contents editing, publishing and accessing </li></ul></ul><ul><ul><li>Helps to the contents manufacturers </li></ul></ul><ul><ul><li>The CMS offers this vision to the users </li></ul></ul><ul><ul><li>It uses the services provided by the repository </li></ul></ul><ul><ul><li>Usually it’s implemented with web interfaces which access to the repository with an owner API </li></ul></ul><ul><li>Traditionally there hasn’t been a big difference between CR and CMA, for this reason there is not a standard API for repositories accessing </li></ul>
    44. 44. JSR-170 (III) <ul><li>The repository model offers: </li></ul><ul><ul><li>Conceptual Modeling of store </li></ul></ul><ul><ul><li>Content-Types definition </li></ul></ul><ul><ul><li>Content versions management definition </li></ul></ul><ul><ul><li>Import and export formats definition (XML) </li></ul></ul><ul><li>The Java API ( javax.jcr ) offers: </li></ul><ul><ul><li>Contents access </li></ul></ul><ul><ul><li>Searches </li></ul></ul><ul><ul><li>Store of new contents </li></ul></ul><ul><ul><li>Export </li></ul></ul><ul><ul><li>Import </li></ul></ul><ul><li>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 </li></ul>
    45. 45. JSR-170 (IV) <ul><li>There is different levels for the Standard fulfillment: </li></ul><ul><ul><li>Level 1 (Mandatory): read, search and export </li></ul></ul><ul><ul><li>Level 2 (Optional): write, namespaces and import; Optionally chars: transactions, version, block and events </li></ul></ul><ul><li>This API must be implemented similar to JDBC: </li></ul><ul><ul><li>The vendor provides a native API for accessing to its repository (JSR-170 compliant). </li></ul></ul><ul><ul><li>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) </li></ul></ul>
    46. 46. Repository Model <ul><li>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 </li></ul><ul><li>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 </li></ul><ul><li>The items can be identified with an absolute path or with an UUID </li></ul>
    47. 47. Node types <ul><li>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. </li></ul><ul><li>Some predefined Primary Node Type are: </li></ul><ul><ul><li>nt:unstructured : the more flexible, it allows any child </li></ul></ul><ul><ul><li>nt:file : represents files, it has an only child with name jcr:content </li></ul></ul><ul><ul><li>nt:folder : nodes association </li></ul></ul><ul><ul><li>nt:resource : represents a file content ( jcr:data : file bytes, jcr:mimeType : MIME type) </li></ul></ul><ul><ul><li>nt:version : for repositories which support version. </li></ul></ul><ul><li>Additionally, a node can contain one or more Mixin Types , which offers some extra characteristics. Predefined Mixin Types are: </li></ul><ul><ul><li>mix:versionable : the node supports versions. </li></ul></ul><ul><ul><li>mix:lockable : the node can be blocked. </li></ul></ul><ul><ul><li>mix:referenceable : the node can be referenced with an UUID automatically generated by the repository (property jcr:uuid ) </li></ul></ul>
    48. 48. MyMobileWeb – CMS Integration <ul><li>The MyMW CMS integration covers several levels: </li></ul><ul><ul><li>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:... ) </li></ul></ul><ul><ul><li>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 </li></ul></ul><ul><ul><ul><li>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. </li></ul></ul></ul><ul><ul><li>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 </li></ul></ul>
    49. 49. Architecture Overview
    50. 50. Runtime Architecture
    51. 51. Content Binding Syntax <ul><li>The contents will be selected with an 'URI' type schema. </li></ul><ul><ul><ul><li>prefix + repository and workspace (optionally) + node's </li></ul></ul></ul><ul><li>If repository and/or workspace are not specified, they will have the default values. </li></ul><ul><li>The prefix sets the kind of dir: </li></ul><ul><ul><li>Dir through path specification: it allows to dir a specific node of the repository. </li></ul></ul><ul><ul><ul><li>cmspath : repo : workspc /Demo/Images/logo </li></ul></ul></ul><ul><ul><ul><li>cmspath : repo /Demo/Images/logo </li></ul></ul></ul><ul><ul><ul><li>cmspath :/Demo/Images/logo </li></ul></ul></ul><ul><ul><li>Dir through UUID : only for nodes which can be referenced. </li></ul></ul><ul><ul><ul><li>cmsuuid :/861735cf-068a-4981-9ba9-377301149557 </li></ul></ul></ul><ul><li>The CMS URIs can be dynamic, using an E.L </li></ul><ul><ul><ul><li>cmspath:/DemoRFI/Noticias/Locales/ ${news} </li></ul></ul></ul>
    52. 52. Configuration (I) <ul><li>The CMS declaration and configuration is made in the MyMobileWeb.Global.xml file </li></ul><ul><ul><li>The default contents repository must be specified, “ Default_CMS ” property </li></ul></ul><ul><li>A new section must be opened by each contents repository (they can be linked with different CMSs vendors). </li></ul><ul><ul><li>The class that implements the repository access plugin must be specified, ' Plugin_Class ' property </li></ul></ul><ul><ul><li>You must explicit the repository location (' Repository_Location ' property) </li></ul></ul><ul><ul><li>If you want to access to protected data, you must put the user and password to connect to the CMS </li></ul></ul><ul><ul><li>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. </li></ul></ul>
    53. 53. Configuration (II)
    54. 54. Content Binding <ul><li>There are two options to extract information from the repository, in the cmspath tag is possible point a node, or point a node property: </li></ul><ul><ul><li>If a node is pointed, the node primaryItem is returned. </li></ul></ul><ul><ul><li>If a node property is pointed, the node property value is returned. </li></ul></ul><ul><li>There are two kind of controls: </li></ul><ul><ul><li>Basic controls: works with one node or property (Title, Label, Entryfield...). </li></ul></ul><ul><ul><li>Advanced controls: can construct the MyMobileWeb control with more than one node (Selects, Menus, Tables...). </li></ul></ul>
    55. 55. Content Binding – Basic Tags <ul><li>The following Basic Tags lets show content hosted on CMS </li></ul>
    56. 56. Content Binding – Advanced Tags (I) <ul><li>The following tags can be built with content hosted on CMS </li></ul><ul><li>Tag <mymw:select> </li></ul><ul><ul><li>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”. </li></ul></ul><ul><ul><li>The defaults attributes are: </li></ul></ul><ul><ul><ul><li>keymemeber: It will be taken the 'name' property of the node. </li></ul></ul></ul><ul><ul><ul><li>textmember: pmymw:label </li></ul></ul></ul><ul><ul><ul><li>selectedmember: pmymw:selected </li></ul></ul></ul>
    57. 57. Content Binding – Advanced Tags (II) <ul><li>Tag <mymw:menu> </li></ul><ul><ul><li>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: </li></ul></ul><ul><ul><ul><li>A particular node whose child nodes will be the items of the menu. </li></ul></ul></ul><ul><ul><ul><li>A node-type like cmt:Menu , that is to say, a menu registered in the content management. </li></ul></ul></ul><ul><ul><li>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: </li></ul></ul><ul><ul><ul><li>keymember: It will take the property name of the node. </li></ul></ul></ul><ul><ul><ul><li>textmember: pmymw:label </li></ul></ul></ul><ul><ul><ul><li>imgmember: pmymw:image </li></ul></ul></ul><ul><ul><ul><li>srcmember: pmymw:src </li></ul></ul></ul><ul><ul><ul><li>titlemember: pmymw:title </li></ul></ul></ul><ul><ul><ul><li>longtitlemember: pmymw:longtitle </li></ul></ul></ul><ul><ul><ul><li>hrefmember: pmymw:href </li></ul></ul></ul>
    58. 58. Content Binding – Advanced Tags (III) <ul><li>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 </li></ul>
    59. 59. Content Binding – Advanced Tags (IV) <ul><li>Tag <mymw:list> </li></ul><ul><ul><li>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: </li></ul></ul><ul><ul><ul><li>textmember: pmymw:label </li></ul></ul></ul><ul><ul><ul><li>imgmember: pmymw:image </li></ul></ul></ul>
    60. 60. Content Binding – Advanced Tags (V) <ul><li>Tag <mymw:table> </li></ul><ul><ul><li>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: </li></ul></ul><ul><ul><ul><li>keymember: The 'name' property of the node will be taken by default </li></ul></ul></ul><ul><ul><ul><li>stylemember: pmymw:style </li></ul></ul></ul>
    61. 61. Content Binding – Advanced Tags (VI)
    62. 62. Alfresco - MyMobileWeb Integration (I) <ul><li>Alfresco is an Enterprise Content Management System (CMS) for Microsoft Windows and Unix-like operating systems </li></ul><ul><li>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 </li></ul><ul><li>Its design is geared towards users who require a high degree of modularity and scalable performance </li></ul><ul><li>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 </li></ul><ul><li>The Alfresco system is developed using Java technology </li></ul><ul><li>Alfresco supports the JCR standard access to its platform </li></ul>
    63. 63. Alfresco - MyMobileWeb Integration (II) <ul><li>The Java Remote Method Invocation API, or Java RMI, a Java application programming interface, performs the object-oriented equivalent of remote procedure calls. </li></ul><ul><li>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. </li></ul><ul><li>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) </li></ul>
    64. 64. Alfresco and MyMobileWeb (I) <ul><li>Alfresco Extension Plugin </li></ul><ul><ul><li>More information at Alfresco Wiki. It's supposed that there is an Alfresco installation finished (the application is tested with Alfresco 3 Labs ). </li></ul></ul><ul><ul><li>Download from Alfresco's Forge and unzip. </li></ul></ul><ul><ul><li>Copy extension-jcr-rmilibjcr-rmi-1-impl-classes.jar and extension-jcr-rmiuilddistextension-jcr-rmi.jar into $TOMCATwebappsalfrescoWEB-INFlib . </li></ul></ul><ul><ul><li>Copy the contents of extension-jcr-rmiconfigalfrescoextension into $TOMCATwebappsalfrescoWEB-INFclassesalfrescoextension. </li></ul></ul><ul><ul><li>Remove/Comment-out the line <import resource=&quot;classpath:alfresco/jcr-context.xml&quot; /> from $TOMCATwebappsalfrescoWEB-INFclassesalfrescoextensionjcr-rmi-context.xml </li></ul></ul>
    65. 65. Alfresco and MyMobileWeb (II) <ul><li>Edit as required to set the port the RMI registry is running on: </li></ul><ul><li> # ##################### # </li></ul><ul><li> # RMI JCR Configuration # </li></ul><ul><li> # ##################### # </li></ul><ul><li> rmi.jcr.binding.servername=localhost </li></ul><ul><li> rmi.jcr.binding.port=1099 </li></ul><ul><li> </li></ul>
    66. 66. Alfresco and MyMobileWeb (III) <ul><li>Alfresco extension-jcr-thread-bound-1.1 Plugin </li></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>Download the extension-jcr-thread-bound-1.1.jar and must be added to the WEB-INF/lib directory of the deployed alfresco webapp. </li></ul></ul><ul><ul><li>In $TOMCAT/shared/classes/alfresco/extension add the thread- bound-jcr-context.xml config file: </li></ul></ul>
    67. 67. Alfresco and MyMobileWeb (IV) <ul><ul><li>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: </li></ul></ul>
    68. 68. Alfresco and MyMobileWeb (V) <ul><li>MyMW Server Configuration </li></ul><ul><ul><li>jcr-1.0.jar must be placed at server/common/lib </li></ul></ul><ul><li>MyMW application Configuration </li></ul><ul><ul><li>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) </li></ul></ul><ul><ul><li>The configuration is made in the MyMobileWeb.Global.xml . The Alfresco repository is declared like other CMS module, but with some specific properties: </li></ul></ul>
    69. 69. Alfresco and MyMobileWeb (VI) <ul><li>Property Values: </li></ul><ul><ul><li>Plugin_Class -> class that implements the plugin. </li></ul></ul><ul><ul><li>Repository_Location -> Alfresco's server URL. </li></ul></ul><ul><ul><li>Alfresco_Rmi_port -> rmiregistry's port (1099 is the rmiregistry's default port). </li></ul></ul><ul><ul><li>Alfresco_Rmi_Binding_Name -> property. </li></ul></ul><ul><ul><li>Alfresco_Path -> Alfresco's application path into Alfresco server. </li></ul></ul><ul><ul><li>Default_Workspace -> Alfresco's default workspace (SpacesStore is the Alfresco's default workspace). </li></ul></ul><ul><ul><li>User -> user name to login in Alfresco. </li></ul></ul><ul><ul><li>Pass -> user password to login in Alfresco. </li></ul></ul><ul><ul><li>primaryItem -> Node primary Item property. </li></ul></ul><ul><ul><li>URL_Base_Path -> CMSContentRetriver URL base path. </li></ul></ul><ul><ul><li>URL_Path -> CMSContentRetriver URL path. </li></ul></ul><ul><ul><li>URL_Base_UUID -> CMSContentRetriver URL base UUID. </li></ul></ul><ul><ul><li>URL_UUID -> CMSContentRetriver URL uuid. </li></ul></ul>
    70. 70. Using JSTL within IDEAL <ul><li>JSTL  library is a component of Java 2 Enterprise Edition (J2EE) specification </li></ul><ul><ul><li>JSTL is a set of tags and standard libraries which are a framework for Java Server Pages (jsps) development </li></ul></ul><ul><li>MyMobileWeb has added a subset of JSTL tags to IDEAL </li></ul><ul><ul><li>This is a subset of the tags defined in the core library </li></ul></ul><ul><li>These added tags are explained below </li></ul><ul><ul><li><if> Simple condition tag </li></ul></ul><ul><ul><li><forEach> Simple iteration tag </li></ul></ul><ul><ul><li><choose> Conditional tag </li></ul></ul><ul><ul><li><when> Conditional tag </li></ul></ul><ul><ul><li><otherwise> Conditional tag </li></ul></ul><ul><ul><li><set> Assignment values tag </li></ul></ul><ul><ul><li><remove> Tag for deleting </li></ul></ul>
    71. 71. <ul><li>This example is a simple iteration and the bind attributes are myVar.0, myVar.1, etc... </li></ul>Using JSTL within IDEAL – Example (I)
    72. 72. <ul><li>This example illustrates a simple condition that according to a numerical value the div container is displayed with a background color or other </li></ul>Using JSTL within IDEAL – Example (II)
    73. 73. Statistical graphics and the Chart library <ul><li>Multimedia enhancements using IDEAL Language </li></ul><ul><li>GOAL : Statistical chart representation in SVG </li></ul><ul><ul><li>Supported SVG : show a vectorial chart </li></ul></ul><ul><ul><li>Not supported SVG : transcode into Raster format (JPG) </li></ul></ul><ul><li>Four types of chart </li></ul><ul><ul><li>Barchart </li></ul></ul><ul><ul><li>Piechart </li></ul></ul><ul><ul><li>Linechart </li></ul></ul><ul><ul><li>Scatterchart </li></ul></ul>
    74. 74. Control chart: types of chart
    75. 75. Attributes <ul><li>< mymwchart :bar|line|pie|scatter id class optionsbind src [display] [alt] [title ][bind] [bindingtype]/> </li></ul><ul><ul><li>id : label identifier </li></ul></ul><ul><ul><li>class : style reference </li></ul></ul><ul><ul><li>optionsbind: context variable which contains data. </li></ul></ul><ul><ul><li>src : path of data defined in an XML file </li></ul></ul><ul><ul><li>display : EL condition for displaying (or not )the component </li></ul></ul><ul><ul><li>alt : alternative text </li></ul></ul><ul><ul><li>Title : chart’s title </li></ul></ul><ul><ul><li>Bind : context data to keep selected component. </li></ul></ul><ul><ul><li>Bindingtype : java class to store the selected value. </li></ul></ul>
    76. 76. Attributes: optionsbind <ul><li>Different ways to define the origin of data source </li></ul><ul><ul><li>XML input </li></ul></ul><ul><ul><ul><li>XML file: </li></ul></ul></ul><ul><ul><ul><ul><li>different for each type of chart </li></ul></ul></ul></ul><ul><ul><ul><li>Referenced by src </li></ul></ul></ul><ul><ul><li>Special data structures: </li></ul></ul><ul><ul><ul><li>Java collections : list, hashmap, … </li></ul></ul></ul><ul><ul><ul><li>Referenced by optionsbind </li></ul></ul></ul>
    77. 77. Styles <ul><li>Chart Options </li></ul><ul><ul><li>ShowLegend, show-title-chart, show-animation, show-grid, show-lines, show-animation, legend-position... </li></ul></ul><ul><li>Dimentions </li></ul><ul><ul><li>width, height,... </li></ul></ul><ul><li>Common styles: </li></ul><ul><ul><li>Display, background-color, margin, padding, ... </li></ul></ul>
    78. 78. Features <ul><li>Events over charts </li></ul><ul><ul><li>Identifies the element that is accessed </li></ul></ul><ul><ul><li>Serie and the component to which the element belongs to. </li></ul></ul><ul><ul><li>Identify the element itself in its own serie </li></ul></ul>
    79. 79. Example <ul><li>To define an XML file for Bar chart in resources : </li></ul><chart type=&quot;BarChart&quot; id=“data1&quot;> <data> <serie name=&quot;Lugo&quot;> <item y=&quot;12&quot;/> <item y=&quot;10&quot;/> </serie > </data> <axes> <axisx name=&quot;meses&quot;> <value>Enero</value> <value>Febrero</value> </axisx> <axisy name=&quot;temperatura&quot;> </axisy> </axes> </chart>
    80. 80. Example <ul><li>XML for Scatter chart: </li></ul><chart type=“ScatterChart&quot; id=“data1&quot;> <data> <serie name=&quot;Lugo&quot;> <item y=&quot;12“ x=“5”/> <item y=&quot;10“ x=“9”/> </serie > </data> <axes> <axisx name=&quot;meses&quot;></axisx> <axisy name=&quot;temperatura&quot;></axisy> </axes> </chart>
    81. 81. Example <ul><li>To define an special structure of Java to insert data: </li></ul>LinkedHashMap<String,Double> pg = new LinkedHashMap<String, Double>(); pg.put(&quot;04&quot;, new Double(15)); pg.put(&quot;05&quot;, new Double(13)); LinkedHashMap<String,Double> pe = new LinkedHashMap<String, Double>(); pe.put(&quot;04&quot;, new Double(12)); pe.put(&quot;05&quot;, new Double(17)); LinkedHashMap<String,Double> pp = new LinkedHashMap<String, Double>(); pp.put(&quot;04&quot;, new Double(15)); pp.put(&quot;05&quot;, new Double(12)); LinkedHashMap<String,LinkedHashMap<String,Double>> barchart = new LinkedHashMap<String, LinkedHashMap<String,Double>>(); barchart.put(&quot;PG&quot;, pg); barchart.put(&quot;PE&quot;, pe); barchart.put(&quot;PP&quot;, pp);
    82. 82. Example <ul><li>< mymwcharts:bar </li></ul><ul><ul><li>id=&quot;chart1&quot; </li></ul></ul><ul><ul><li>title=&quot;Estadisticas partidos“ </li></ul></ul><ul><ul><li>optionsbind=&quot;${barchart}&quot; </li></ul></ul><ul><ul><li>bind=&quot;${selectedBar}&quot; </li></ul></ul><ul><ul><li>class=&quot;myChart&quot;> </li></ul></ul><ul><li></mymwcharts:bar> </li></ul><ul><li>Insert a chart in a presentation using IDEAL language: </li></ul><ul><ul><li>JAVA Structure referenced by optionsbind: </li></ul></ul><ul><li>The context variable can contain a structure like the one defined before. </li></ul><ul><ul><li>LinkedHashMap<String,LinkedHashMap<String,Double>> </li></ul></ul>
    83. 83. Example <ul><li>< mymwcharts:bar </li></ul><ul><ul><li>id=&quot;chart1&quot; </li></ul></ul><ul><ul><li>title=&quot;Estadisticas partidos “ </li></ul></ul><ul><ul><li>src=&quot;${barSrc}&quot; </li></ul></ul><ul><ul><li>bind=&quot;${selectedBar}&quot; </li></ul></ul><ul><ul><li>class=&quot;myChart&quot;> </li></ul></ul><ul><li></mymwcharts:bar> </li></ul><ul><li>Insert a chart in a presentation using IDEAL language: </li></ul><ul><ul><li>XML file referenced by src: </li></ul></ul><ul><li>There are two possibilities: </li></ul><ul><ul><li>Context variable contents a path where file is stored. </li></ul></ul><ul><ul><ul><li>&quot;barSrc&quot;, &quot;/resource/charts/bar1.xml&quot; </li></ul></ul></ul><ul><ul><li>Insert the path directly over src. </li></ul></ul>
    84. 84. Example <ul><li>Flow’s definition in charts </li></ul><ul><ul><li>flows/MyMobileWeb.flow.xml </li></ul></ul><ul><li>Events flow’s definition </li></ul><state id=&quot;Charts_barchart&quot;> <transition event=&quot;chart1_onclick&quot; target=&quot;Charts_piechart&quot;> <mymw:invokeMethod className=&quot;sporting.classes.MyCharts&quot; method=&quot; setPieChart &quot; result=&quot;${opScope.pieSrc}&quot;> <mymw:argument expression=&quot;${opScope.selectedBar}&quot;/> </mymw:invokeMethod> </transition> </state>
    85. 85. Example <ul><li>public String setPieChart (String [] bar) </li></ul><ul><li>{ </li></ul><ul><ul><li>String serie = ChartUtil.getSerie(bar); </li></ul></ul><ul><ul><li>String component = ChartUtil.getComponent(bar); </li></ul></ul><ul><ul><li>String srcFile = &quot;resource/charts/&quot;+component+serie+&quot;.xml&quot;; </li></ul></ul><ul><ul><li>return srcFile; </li></ul></ul><ul><li>} </li></ul>
    86. 86. Example <ul><li>chart. myChart { </li></ul><ul><li>height: 90% ; </li></ul><ul><li>width: 90% ; </li></ul><ul><li>x-title: temporada ; </li></ul><ul><li>y-title: partidos ; </li></ul><ul><li>legend-position: right ; </li></ul><ul><li>} </li></ul><ul><li>Defining styles for the chart </li></ul>
    87. 87. Example <ul><li>Navigation squeme </li></ul>
    88. 88. Future work <ul><li>Control chart implemented in next release </li></ul><ul><ul><li>June 2009 </li></ul></ul><ul><li>Graceful degradation </li></ul><ul><ul><li>To a table </li></ul></ul><ul><ul><li>Image + links </li></ul></ul><ul><li>Advanced Styles </li></ul><ul><ul><li>Updating Data in real time </li></ul></ul><ul><ul><ul><li>Browser support: AJAX </li></ul></ul></ul><ul><ul><ul><li>Not support: recharge the page </li></ul></ul></ul><ul><li>Statistic Features over charts </li></ul>
    89. 89. The Mobile Client Capabilities Framework <ul><li>Purpose of the Mobile Client Capabilities Framework </li></ul><ul><li>Architecture </li></ul><ul><li>Client Side Components </li></ul><ul><li>Plugin Installation </li></ul><ul><li>Examples: </li></ul><ul><ul><li>Orientation Changes </li></ul></ul><ul><ul><li>Being aware of Geolocation </li></ul></ul><ul><ul><li>Automatic Form Fill </li></ul></ul>
    90. 90. Introduction and purpose <ul><li>Provides access to properties only available in the device: </li></ul><ul><ul><li>GPS position, speed, altitude </li></ul></ul><ul><ul><li>Battery Level </li></ul></ul><ul><ul><li>Owner Information </li></ul></ul><ul><ul><li>Display Orientation </li></ul></ul><ul><li>Advantages: </li></ul><ul><ul><li>Allows to create richer applications </li></ul></ul><ul><ul><li>Key to create personalized applications. Context-aware information </li></ul></ul><ul><li>Comparison with Device Repositories: </li></ul><ul><ul><li>Database of properties for each device by model: Supported markup languages, Javascript support, vendor.... </li></ul></ul><ul><ul><li>Client Capabilities Framework: Properties may change over time, we need to explicitly ask them to the device </li></ul></ul>
    91. 91. Architecture Overview
    92. 92. Client Side Components <ul><li>Plugin : Fetches the properties from the device using the Operating System native calls. </li></ul><ul><ul><li>Google Gears? </li></ul></ul><ul><ul><li>MyMobileWeb Browser Plugin (Windows Mobile 5 & 6) </li></ul></ul><ul><ul><li>BONDI initiative http:// Well designed API, standard, multiplatform. </li></ul></ul><ul><li>API: Simplifies the task of accessing the properties from Javascript. </li></ul><ul><ul><li>DCCI: W3C: http:// www.w3 . org /TR/DPF/ </li></ul></ul><ul><ul><ul><li>Properties arranged in a tree structure. </li></ul></ul></ul><ul><ul><ul><li>Convenience functions for easy access: </li></ul></ul></ul><ul><ul><ul><ul><li>dcciValueAsString(‘Orientation’); </li></ul></ul></ul></ul><ul><li>Sync Module : Notifies the server of changes in the client. </li></ul><ul><ul><li>Keeps needed properties in server side. </li></ul></ul><ul><ul><li>New MyMobileWeb Context properties, easy for the developer. </li></ul></ul>
    93. 93. Plugin Installation <ul><li>MyMobileWeb automatically detects if the plugin is already installed, if it is not, it asks the user to install it. </li></ul><ul><li>The user just needs to follow some simple steps to install it. </li></ul><ul><li>The user can choose not to install it, MyMobileWeb will keep working but these features won’t be available. </li></ul>
    94. 94. Monitoring Orientation Changes <ul><li>The Client Capabilities Framework allows to know the orientation at any time. </li></ul><ul><li>We need to declare in the presentation that we want to monitor orientation changes by importing the orientation module, using the script tag. </li></ul><ul><li>The client will notify the server with orientation changes. </li></ul><ul><li>We can ask the MyMobileWeb context for properties like: </li></ul><ul><ul><li>Orientation (0, 90, -90, 180). </li></ul></ul><ul><ul><li>Real screen size (taking into account the orientation), width and height. </li></ul></ul><ul><ul><li>Visible rows and columns. </li></ul></ul><ul><li>This allows to adapt the content to the actual screen size: </li></ul><ul><ul><li>Bigger images, or more columns for tables. </li></ul></ul><ul><ul><li>Omit certain parts of the page depending on the size / orientation. </li></ul></ul><ul><ul><li>Add details or notes. </li></ul></ul><ul><li>Using the orientation: </li></ul><ul><ul><li>Show in a presentation: ${dcn:currentOrientation()} </li></ul></ul><ul><ul><li>Get from a OA: DeliveryContextFunctions.currentOrientation(context); </li></ul></ul><ul><ul><li>Get from Javascript: dcciValueAsString(‘Orientation’): </li></ul></ul>
    95. 95. Orientation example
    96. 96. Orientation behaviour
    97. 97. Being aware of Geolocation <ul><li>Modern applications require keeping track of the user location: </li></ul><ul><ul><li>Find nearby points of interest. </li></ul></ul><ul><ul><li>Contact friends </li></ul></ul><ul><ul><li>Get directions. </li></ul></ul><ul><ul><li>Find current spot in a map. </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li>Knowing this with MyMobileWeb is very easy: </li></ul><ul><ul><li>Declare that you want to get the location in a presentation. </li></ul></ul><ul><ul><li>Ask MyMobileWeb context for the location. </li></ul></ul><ul><li>Using the location: </li></ul><ul><ul><li>Show in a presentation: ${dcn:currentPosition()} </li></ul></ul><ul><ul><li>Get from a OA: </li></ul></ul><ul><ul><li>String coords = DeliveryContextFunctions.currentPosition(context); </li></ul></ul><ul><ul><li>Get from Javascript: dcciValueAsString(‘Position’); </li></ul></ul>
    98. 98. Being Aware of Geolocation Code
    99. 99. Being aware of Geolocation usage
    100. 100. Automatic Form Fill <ul><li>Objective: Simplify the task of filling forms with limited devices by guessing their values. </li></ul><ul><li>Steps: </li></ul><ul><ul><li>Annotate semantically the form using about-class and about-prop. </li></ul></ul><ul><ul><li>Match against some data source. </li></ul></ul><ul><li>Example, autocompleting typical owner information directly from the device. </li></ul><ul><ul><li>Vocabulary: FOAF. </li></ul></ul><ul><ul><li>Data source: Owner Information represented in RDF directly extracted from the device. </li></ul></ul><ul><li>Runtime: A javascript library reads the form and the data source and tries to find matchings . </li></ul>
    101. 101. Automatic Form Fill Code
    102. 102. Autocompletion usage
    103. 103. Useful Links <ul><li>Orientation example: </li></ul><ul><li>Form Fill example: </li></ul><ul><li>Location example: </li></ul><ul><li>Convenience Functions for Context: </li></ul><ul><li>DCCI Documentation: </li></ul>
    104. 104. Creating IDEAL Extensions <ul><li>Developers can define their UI Components by means of the language extension </li></ul><ul><li>The new UI components has as XML namespace </li></ul><ul><ul><li> </li></ul></ul><ul><li>Steps </li></ul><ul><ul><li>Define the XML Schema associated to the new UI Component in custom.xsd </li></ul></ul><ul><ul><li>Configure the new UI Component </li></ul></ul><ul><ul><ul><li>The tag implementation class should be defined in MyMobileWeb.CodeGen.xml </li></ul></ul></ul><ul><ul><li>Implement the Tag Bean & Renderer </li></ul></ul>
    105. 105. IDEAL Extensions – Example (I) <ul><li>New staticMap Component </li></ul><ul><ul><li>Defining the XML Schema </li></ul></ul>
    106. 106. IDEAL Extensions – Example (II) <ul><li>UI Component Configuration in MyMobileWeb.CodeGen.xml </li></ul><ul><li>This class should implements the Tag interface or extends the TidMobileTag class </li></ul>
    107. 107. IDEAL Extensions – Example (III) <ul><li>UI Component Implementation </li></ul>
    108. 108. IDEAL Extensions – Example (IV)
    109. 109. Consortium