Jahia mobile webinar v2
May 31, 2015
Slides from the Webinar "Jahia Mobile" given by Serge Huber, Jahia CTO
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Using HTML to build mobile views
HTML Rendering
© 2002-2011 Jahia Solutions Group SA
Multi-channel
iPhone Android
Default scaling
• Proper default scale• Reduce need to zoom in
and out (or prevent it)
Orientation support
DemoHTML Rendering
© 2002-2011 Jahia Solutions Group SA
How it worksHTML Rendering
© 2002-2011 Jahia Solutions Group SA
User agent matching
<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>
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
html-iphoneOutput channel
Output channels
Default output channel : HTMLCalled from URL extensions part:http://localhost:8080/cms/*.htmlOther possible channels:- RSS- CSV- XML- Mobile channels using Extensions (*-iphone)
Default output channelDefault 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
Contains ACME logo
Contains navigation
Content tree
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
DemoNative Mobile Rendering
Initial connection
Mobile device Jahia Server
retrieve configuration
fetch section data
section data
fetch data template
data template & resources
Fetching new section
Mobile device Jahia Server
fetch section data
section data
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
PugPig Framework : http://pugpig.com/
BKRender Framework : http://bkrender.com/
Apache Mobile Filter: http://www.apachemobilefilter.org
Native Authentication
Stored in settingPersonalized contentAccess controlAccess to MyProfile data:
– My Connections– My Messages– …
Related Documents
