Jahia mobile webinar v2
Upcoming SlideShare
Loading in...5
×
 

Jahia mobile webinar v2

on

  • 7,537 views

Slides from the Webinar "Jahia Mobile" given by Serge Huber, Jahia CTO

Slides from the Webinar "Jahia Mobile" given by Serge Huber, Jahia CTO

Statistics

Views

Total Views
7,537
Views on SlideShare
3,311
Embed Views
4,226

Actions

Likes
0
Downloads
16
Comments
0

9 Embeds 4,226

http://www.jahia.com 4118
http://twitter.com 36
http://confluence.societe.mma.fr 26
http://www.linkedin.com 11
http://preprod.jahia.com 10
http://confluence 10
http://10.8.35.8 7
http://translate.googleusercontent.com 6
http://paper.li 2
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jahia mobile webinar v2 Jahia mobile webinar v2 Presentation Transcript

  • Jahia Mobile Webinar
    Serge Huber, CTO
    shuber@jahia.com
    © 2002-2011 Jahia Solutions Group SA
  • Using HTML to build mobile views
    HTML Rendering
    © 2002-2011 Jahia Solutions Group SA
  • Multi-channel
    Android
    iPhone
  • Default scaling
    • Proper default scale
    • Reduce need to zoom in and out (or prevent it)
  • Orientation support
  • Demo
    HTML Rendering
    © 2002-2011 Jahia Solutions Group SA
  • How it works
    HTML Rendering
    © 2002-2011 Jahia Solutions Group SA
  • User agent matching
    User-Agent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_1_1 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5A345 Safari/525.20
    <bean class="org.jahia.services.render.filter.UserAgentFilter">
    <property name="priority" value="6" />
    <property name="applyOnModes" value="live,preview" />
    <property name="applyOnConfigurations" value="page" />
    <property name="userAgentMatchingRules">
    <map>
    <entry key=".*iPhone.*" value="iphone" />
    <entry key=".*iPod.*" value="iphone" />
    <entry key=".*iPad.*" value="iphone" />
    <entry key=".*Android.*" value="iphone" />
    </map>
    </property>
    </bean>
    html-iphone
    Output channel
  • Output channels
    Default output channel : HTML
    Called from URL extensions part:
    http://localhost:8080/cms/*.html
    Other possible channels:
    • RSS
    • CSV
    • XML
    • Mobile channels using Extensions (*-iphone)
  • Default output channel
    Default output channel view file : html/template.templates-web-blue.jsp :
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ page language="java" contentType="text/html;charset=UTF-8" %>

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="${fn:substring(renderContext.request.locale,0,2)}">
    <head>

    </head>
     
    <body>
     
    <div class="bodywrapper"><!--start bodywrapper-->
    <template:area path="pagecontent"/>
    </div>
    <!--stop bodywrapper-->
     
    <c:if test="${renderContext.editMode}">
    <template:addResources type="css" resources="edit.css" />
    </c:if>
    <template:addResources type="css" resources="960.css,01web.css,02mod.css,navigationN1.css,navigationN2-2.css"/>
    <template:theme/>
     
    </body>
    </html>
  • iPhone output channel
    Now let’s look at the html-iphone/template.template-web-blue.jsp :
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    ….
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="${fn:substring(renderContext.request.locale,0,2)}">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    </head>
  • iPhone output channel (2)
    <body>
    <div class="bodywrapper"><!--start bodywrapper-->
    <!-- ACME logo -->
    <div id="header">
    <template:module path="header-col1"/>
    </div>
    <!-- Navigation menu -->
    <template:module path="headerBottom-colContent"/>
    <!-- Main content for most templates -->
    <template:area path="maincontent"/>
     
    <!-- News detail view -->
    <template:area path="row-col1/mainResourceDisplay"/>
     
    <!-- Event list view -->
    <template:area path="row1-col1/events"/>
     
    <!-- Publications list view -->
    <template:area path="row1-col1/publications"/>
    </div>
    <!--stop bodywrapper-->
     
    <c:if test="${renderContext.editMode}">
    <template:addResources type="css" resources="edit.css" />
    </c:if>
    <template:addResources type="css" resources="960.css,mobile-01web.css,02mod.css,mobile-navigationN1.css,navigationN2-2.css"/>
    <template:theme/>
     
    </body>
    </html>
  • Locating content
    Content tree
    Contains ACME logo
    Contains navigation
  • Using REST API to build native mobile clients
    Native Mobile Rendering
  • Features
    • Server-customizable
    • Native application, good user experience, fast, and works offline
    • Flexible architecture
  • Demo
    Native Mobile Rendering
  • Initial connection
    retrieve configuration
    fetch section data
    section data
    fetch data template
    data template & resources
    Mobile device
    Jahia Server
  • Fetching new section
    fetch section data
    section data
    Mobile device
    Jahia Server
  • Offline operation
    • Data is cached locally
    • Upon reconnection, data is retrieved from server
    • If server or connection falls, requests default back to cache
  • Templates
    • HTML rendering
    • Merged client side
    • Template for each node type
    • Different template for different devices
    <html>
    <body><h1>$$$jcr:title$$$</h1><a href="$$$file$$$"><img src="$$$preview$$$"/></a><p>$$$date$$$</p>$$$body$$$</body></html>
  • Rapid Application Development
    • All files are reloaded from server when connected
    • No changes needed on the client side, only on server side !
    • Resources such as images, CSS, Javascript can be changed on-the-fly on the server.
    • Per node-type templates, modify rendering one object at a time
  • Submitting content
    • Uses REST POST API
    • Submits data file first, then uses returned UUID to create a node with a reference to data file
    • Mappings are used to configure content creation location and property names
  • Learn more
    • Multi-Channel Rendering documentation :http://www.jahia.com/cms/render/live/en/sites/jahiacom/home/community/documentation/multi-channel-rendering.html
    • REST API documentation :http://www.jahia.com/community/documentation/jahiapedia/jahia-modules/rest.html
    • Forum : http://www.jahia.com/cms/home/community/forum.html
  • Q & A
  • Other HTML alternatives
    Create a separate “m.jahia.com” mobile specific site and use content references or queries to retrieve content
    Benefits:
    Can use Template Studio to design templates
    Can add mobile specific content
    Disadvantages:
    More editorial work to keep both sites in sync
    Not as seemless, be careful about navigation
    PugPigFramework : http://pugpig.com/
    BKRenderFramework : http://bkrender.com/
    Apache Mobile Filter: http://www.apachemobilefilter.org
  • Native Authentication
    Stored in setting
    Personalized content
    Access control
    Access to MyProfile data:
    My Connections
    My Messages

  • Thank you
    Serge Huber
    shuber@jahia.com