Rendu multi-support DOCUMENTATION

Transcription

1 DOCUMENTATION Rendu multi-support Jahia, le CMS open source de nouvelle génération apportant à vos projets la convergence applicative (web, document, social, recherche et portail) unifiée par la simplicité d utilisation des outils de gestion de contenu web. Jahia Solutions Group SA 9 route des Jeunes, CH-1227 Les acacias Genève, Suisse

2 Sommaire 1 Introduction Rendu sur appareil mobile Exemple Orientation de l appareil Caractéristiques techniques des appareils mobiles Applications mobiles natives Pour en savoir plus Page 2 sur 17

3 1 Introduction Ce document présente les différentes possibilités de rendu multi-support pour vos projets CMS ou WCM avec Jahia. Pour cela, notre produit dispose de deux technologies différentes : un changement de type de template basé sur la variable user agent une API REST pour créer des clients natifs Nous présentons ci-dessous un exemple de la première approche, c est-à-dire l utilisation de différents types de templates pour concevoir une mise en page et un système de navigation adaptés à la consultation sur appareils mobiles. Dans cet exemple, vous verrez que les mêmes contenus peuvent être réutilisés pour différentes mises en page et que l on peut avoir des présentations communes à tous les appareils, ou bien développer des présentations spécifiques pour chaque classe d appareil. Il faut également noter que les contenus peuvent être organisés différemment, même lorsqu on réutilise les mêmes objets de contenu. Page 3 sur 17

4 2 Rendu sur appareil mobile La fonction de rendu sur appareil mobile utilise la variable user agent du navigateur pour changer le type de template afin d adapter les tailles et les menus de navigation aux dimensions et aux capacités des appareils mobiles. Jahia utilise la technologie des types de templates pour faire correspondre les vues avec l extension spécifiée à la fin de l URL. Dans le cas présent, on utilise une variante de nom de type de template pour spécifier les JSP qui seront utilisés pour afficher la vue. Jahia permet de configurer la détection du user agent à l aide d expressions régulières et de changer le type de template dynamiquement afin de permettre le passage à des scripts alternatifs pour afficher le contenu. Par exemple, avec la configuration suivante dans le fichier WEB-INF/etc/spring/application-renderer.xml : <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> Cela signifie que si un user agent d iphone ou d Android est détecté, on cherchera d abord un script d affichage dans un répertoire de scripts html-iphone, et si celui-ci n existe pas, on utilisera par défaut un répertoire html. Ce mécanisme simple mais puissant permet de procéder à toutes sortes de détections de user agent. On pourrait même l utiliser pour adapter le rendu avec différents types de navigateurs sur ordinateur (les anciennes versions, par exemple). Le mécanisme de fallback est également important car il permet de ne pas avoir à redéfinir toutes les vues de contenu si l on souhaite seulement modifier quelques-unes d entre-elles. Cela permet de faire du fork avec les vues uniquement pour le comportement souhaité sur l appareil mobile. Page 4 sur 17

5 2.1 Exemple Dans le cadre de projets Intranet ou Extranet particuliers, on peut avoir besoin d afficher des contenus sans tenir compte de la langue du navigateur utilisé. Par exemple, si l on ne veut pas avoir des pages vides dans certaines langues lorsqu un site n est pas encore entièrement traduit ou lorsqu il n est pas disponible dans toutes les langues, alors il faudra activer l option Utiliser plusieurs langues lors de la navigation sur le site. Si cette option est activée et que l objet de contenu n existe pas dans la langue utilisée, alors Jahia l affichera dans la langue par défaut. Si l anglais est la langue par défaut et que certains contenus ne sont pas traduits en français, alors ils seront remplacés automatiquement par les contenus correspondants en langue anglaise. Il est déconseillé d utiliser cette option sur des sites publics car cela peut dérouter certains utilisateurs. Cependant, son utilisation peut être envisagée sur des sites de type Intranet, tant que les utilisateurs sont conscients de ce choix et du fait qu ils sont susceptibles rencontrer des pages avec des contenus dans plusieurs langues. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <%@ page language="java" contenttype="text/html;charset=utf-8" %> <%@ taglib prefix="template" uri=" %> <%@ taglib prefix="c" uri=" %> <%@ taglib prefix="fn" uri=" %> <%@ taglib prefix="jcr" uri=" %> <%--@elvariable id="currentnode" type="org.jahia.services.content.jcrnodewrapper"--%> <%--@elvariable id="out" type="java.io.printwriter"--%> <%--@elvariable id="script" type="org.jahia.services.render.scripting.script"--%> <%--@elvariable id="scriptinfo" type="java.lang.string"--%> <%--@elvariable id="workspace" type="java.lang.string"--%> <%--@elvariable id="rendercontext" type="org.jahia.services.render.rendercontext"--%> <%--@elvariable id="currentresource" type="org.jahia.services.render.resource"--%> <%--@elvariable id="url" type="org.jahia.services.render.urlgenerator"--%> <html xmlns=" xml:lang="${fn:substring(rendercontext.request.locale,0,2)}"> Page 5 sur 17

6 <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <jcr:nodeproperty node="${rendercontext.mainresource.node}" name="jcr:description" inherited="true" var="description"/> <jcr:nodeproperty node="${rendercontext.mainresource.node}" name="jcr:createdby" inherited="true" var="author"/> <jcr:nodeproperty node="${rendercontext.mainresource.node}" name="j:keywords" inherited="true" var="kws"/> <c:set var="keywords" value=""/> <c:foreach items="${kws}" var="keyword"><c:set var="keywords" value="${empty keywords?'':keywords + ' '}${keyword.string}"/></c:foreach> <c:if test="${!empty description}"><meta name="description" content="${description.string}" /></c:if> <c:if test="${!empty author}"><meta name="author" content="${author.string}" /></c:if> <c:if test="${!empty keywords}"><meta name="keywords" content="${keywords}" /></c:if> <link rel="stylesheet" type="text/css" href="<c:url value='${url.currentmodule}/css/print.css'/>" media="print" /> <title>${fn:escapexml(rendercontext.mainresource.node.displayablename) }</title> </head> <body> <div class="bodywrapper"> <template:area path="pagecontent"/> </div>  <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> Dans le template par défaut, la balise la plus remarquable est celle qui est incluse dans la balise div de classe bodywrapper. C est à cet endroit que tous les éléments seront insérés. Maintenant, intéressonsnous à html-iphone/template.template-web-blue.jsp : Page 6 sur 17

7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " page language="java" contenttype="text/html;charset=utf-8" %> taglib prefix="template" uri=" %> taglib prefix="c" uri=" %> taglib prefix="fn" uri=" %> taglib prefix="jcr" uri=" %> id="currentnode" type="org.jahia.services.content.jcrnodewrapper"--%> id="out" type="java.io.printwriter"--%> id="script" type="org.jahia.services.render.scripting.script"--%> id="scriptinfo" type="java.lang.string"--%> id="workspace" type="java.lang.string"--%> id="rendercontext" type="org.jahia.services.render.rendercontext"--%> id="currentresource" type="org.jahia.services.render.resource"--%> id="url" type="org.jahia.services.render.urlgenerator"--%> <html xmlns=" 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="blacktranslucent" /> <jcr:nodeproperty node="${rendercontext.mainresource.node}" name="jcr:description" inherited="true" var="description"/> <jcr:nodeproperty node="${rendercontext.mainresource.node}" name="jcr:createdby" inherited="true" var="author"/> <jcr:nodeproperty node="${rendercontext.mainresource.node}" name="j:keywords" inherited="true" var="kws"/> <c:set var="keywords" value=""/> <c:foreach items="${kws}" var="keyword"><c:set var="keywords" value="${empty keywords?'':keywords + ' '}${keyword.string}"/></c:foreach> <c:if test="${!empty description}"><meta name="description" content="${description.string}" /></c:if> <c:if test="${!empty author}"><meta name="author" content="${author.string}" /></c:if> <c:if test="${!empty keywords}"><meta name="keywords" content="${keywords}" /></c:if> <link rel="stylesheet" type="text/css" href="<c:url value='${url.currentmodule}/css/print.css'/>" media="print" /> Page 7 sur 17

8 <title>${fn:escapexml(rendercontext.mainresource.node.displayablename) }</title> </head> <body> <div class="bodywrapper">  <div id="header"> <template:module path="header-col1"/> </div>  <template:module path="headerbottom-colcontent"/>  <template:area path="maincontent"/>  <template:area path="row-col1/mainresourcedisplay"/>  <template:area path="row1-col1/events"/>  <template:area path="row1-col1/publications"/> </div>  <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> Si l on observe les différences entre les fichiers, la première se situe dans la section header, en particulier dans les balises meta : <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" /> Page 8 sur 17

9 <meta name="apple-mobile-web-app-status-bar-style" content="blacktranslucent" /> Ces balises meta sont spécifiques aux appareils iphone et Android et contrôlent la façon dont la fenêtre du navigateur mobile sera affichée. La différence suivante, qui est également la plus importante, se trouve dans la section bodywrapper :  <div id="header"> <template:module path="header-col1"/> </div>  <template:module path="headerbottom-colcontent"/>  <template:area path="maincontent"/>  <template:area path="row-col1/mainresourcedisplay"/>  <template:area path="row1-col1/events"/>  <template:area path="row1-col1/publications"/> Le contenu du bodywrapper ci-dessus a été élaboré en regardant la disposition du template utilisé et en réutilisant des nœuds de présentation ou de contenu. Cela se fait très simplement en navigant dans l Explorateur de contenu pour trouver les nœuds que l on souhaite réutiliser sur les pages mobiles, comme le montre cette illustration : Page 9 sur 17

10 Contient le logo ACME Contient le menu de navigation Dans la différence du bodywrapper, le premier module affiché est le logo ACME existant. Au-dessous, nous avons inclus le menu de navigation, mais exclus la section droite du header qui comporte les données de connexion et la barre de recherche. Les quatre zones suivantes sont en fait des zones utilisées sur différents templates, mais comme elles ne sont jamais utilisées en même temps, nous les incluons toutes, puisqu une seule d entre elles affichera du contenu. Cette astuce permet d éviter d utiliser de nombreuses clauses JSTL <c:if> qui rendent le fichier JSP plus dur à lire et à maintenir. Et pour terminer, les CSS ont été modifiées : <template:addresources type="css" resources="960.css,mobile- 01web.css,02mod.css,mobile-navigationN1.css,navigationN2-2.css"/> Page 10 sur 17

11 Nous n entrerons pas dans les détails des modifications CSS, mais elles comprennent simplement quelques changements visant à réduire les tailles de polices et à optimiser l usage de l espace, puisqu un navigateur mobile dispose d une résolution moindre qu un écran d ordinateur. Un bon exemple de la puissance de le réutilisabilité des vues par défaut est le plan du site qui, sans modifications particulières, s affiche plutôt bien sur un écran d appareil mobile, comme le montre cette illustration : Bien entendu, on pourrait améliorer l affichage en traitant le problème de dépassement du texte, mais comme on le voit ici, l affichage par défaut fonctionne déjà plutôt bien. Page 11 sur 17

12 2.2 Orientation de l appareil Avec les appareils mobiles modernes, notamment avec les smartphones, il peut s avérer compliqué de gérer les problématiques d orientation de l appareil. Pour cette raison, il est important d utiliser des mises en page fluides qui s adapteront automatiquement aux changements de taille d écran lorsque l on fait pivoter l appareil. Une fois encore, cela fonctionne par défaut avec les templates fournis dans cet exemple, comme on peut le voir dans les captures d écran ci-dessous : Il est donc important de toujours valider les mises en page sur l appareil lui-même, plutôt que sur un émulateur, car le rendu est parfois différent. 2.3 Caractéristiques techniques des appareils mobiles Il est également possible d utiliser des solutions du type Apache Mobile Filter ( capables d exposer les caractéristiques techniques des appareils mobiles sous forme d attributs de requêtes si l on a besoin d une plus grande maîtrise sur le rendu de la page. Page 12 sur 17

13 Il est alors possible de lancer des requêtes sur les caractéristiques techniques, comme dans l exemple suivant provenant d une JSP ou d une action : request.getattribute("amf_max_image_height") Le module Apache offre également des possibilités supplémentaires intéressantes, comme par exemple redimensionner des images à la demande ou encore mettre le HTML en cache. On peut également ajouter un filtre si on le souhaite, ou créer un module qui intègre WURFL ( directement. 3 Applications mobiles natives Le prototype d application iphone/ipad native conçu par Jahia est un exemple intéressant, illustrant l utilité de l API REST. Comme il s agit d un prototype, l application n est pas disponible au public, mais si vous êtes intéressé, vous pouvez nous contacter à support@jahia.com. L application native se connecte à Jahia au démarrage, récupère un fichier de configuration contenant différentes propriétés d écran, notamment des requêtes qui seront exécutées avec la servlet REST find. Les résultats sont générés avec une sortie JSON. L application native peut alors afficher le contenu comme elle l entend. Le fait de disposer du contenu au format JSON facilite l adaptation à différentes tailles d écran, le prototype natif étant une application pour iphone et ipad à la fois. L application est également capable de créer de nouveaux contenus via des requêtes HTTP POST qui créeront de nouveaux objets de contenus. Tout cela est plutôt optimal et intégré avec l authentification, puisque les servlets de connexion et de déconnexion sont également utilisées. Page 13 sur 17

14 Comme on peut le constater dans l exemple ci-dessus, l application native affiche le contenu de la démo ACME, avec le rendu natif de l appareil. Cela permet une expérience utilisateur forte sur mobile tout en ayant exactement la même base de contenu. On peut également mettre les données en cache dans le client natif, pour une consultation hors-connexion. L application démo prototype est également une application ipad native, comme on peut le voir dans la capture d écran ci-dessous : L affichage de la version ipad est légèrement différent, mettant à profit la surface d écran supplémentaire tout en conservant un accès aux mêmes objets de contenu que l iphone et le site Web public. Page 14 sur 17

15 Cette version comprend également un exemple d envoi de données de façon native, avec saisie de texte mais également envoi de données binaires, par exemple des images. Dans l exemple ci-dessous, l utilisateur sélectionne une image depuis la photothèque après avoir saisi un titre et le corps d un article : Avec ce prototype natif, nous n avons fait qu explorer une infime partie de ce qu il est possible de faire avec l API REST. Pour plus d informations à ce sujet et sur d autres technologies qui vous aideront à atteindre vos objectifs multi-support, consultez la Vue d ensemble technique de Jahia et les autres documentations disponibles dans la section Documentation de notre site Web. 4 Pour en savoir plus Nous proposons ici quelques lectures supplémentaires permettant d en apprendre plus sur les technologies mobiles : Wireless Universal Resource File (WURFL) : Apache Mobile Filter : Exemple de code Apache Mobile Filter : Page 15 sur 17

16 Apple ios Developer Center : Google Android Developer Center : Page 16 sur 17

17 Jahia Solutions Group SA 9 route des Jeunes, CH-1227 Les acacias Genève, Suisse Page 17 sur 17