FORMATION

INTÉGRATION JCMS

OBJECTIFS

• Pouvoir surcharger et enrichir le graphisme
• Maitriser les évolutions graphiques sans aucun recours au dev
• Savoir construire un gabarit

RAPPEL

Jalios JCMS est un progiciel intégré de :

• Gestion de contenu (différents types de contenu comme Article, Interview, Revue de presse, Actualité...)
• Portail de contenu (structure du site)
• Collaboration

Dernière version à ce jour : JCMS 8

https://community.jalios.com/jcms/jx_75003/fr/jcms-8-les-principales-nouveautes-et-les-modules-associes

Les portails (1/2)

Qu’est ce que c’est ?

Mécanisme de construction des pages du Front-Office de JCMS

A quoi ça sert

• Permet d’organiser un site en différentes pages thématiques

• Chaque page ayant sa propre structure et éventuellement sa propre identité visuelle

LEs portails (2/2)

Comment ça marche ?

• Une page portail

  • Produites par des JSP (pages dynamiques)

  • Un assemblage de boites (Portlet / Publication)

  • Rattachées à une catégorie de l’arborescence du site

• Portails et sous-portails

• Contient OBLIGATOIREMENT un portlet JSP Collection

organisation des fichiers

Un site doit posséder une catégorie racine :
 

• Mono-site : "Site internet" ou "Site Intranet" avec les différentes arborescences situées sous cette catégorie

• Multi-sites : même principe avec plusieurs racines les unes à coté des autres 

Module CHARTE

• nommé #CP#Charte

• Composé de : portail.jsp, portail.css, portailPrint.css

• Dossier /jsp : contient les différents portails du site

• Organisation du dossier /css : generique.css, commun.css, structureSite.css, ... et bien d'autres

• Organisation du dossier /images : contenu, structure, contenuPortlet, ... etc
• Dossier /polices

PORTAIL.JSP

Délimiter le nombre de portails dont on aura besoin

Structure par défaut : bandeau, contenuCentral, footer

<div id="main">
    <div id="bandeau">
        <%=getPortlet(bufferMap, "bandeau")%>
    </div>
    <div id="contenuCentral" class="clearfix">
        <div id="ariane">
            <%=getPortlet(bufferMap, "ariane")%>
        </div>
        <%=getPortlet(bufferMap, "contenu")%>
    </div>
    <div id="footer">
        <%=getPortlet(bufferMap, "footer")%>
    </div>
</div>

Association entre le portlet et sa référence dans la JSP Collection

module Types

• se nomme #CP#Types ou #CP#Internet (en cas de multi-sites)
   
• Organisation du dossier /css : #Type#.css appelé dans des gabarits spécifiques
   
• Organisation du dossier /types : un dossier par type de contenu

l’intégration dans JCMS

Il existe différentes façons de personnaliser un portlet :

• Directement dans les feuilles de style des plugins charte et types : ajout de classes et id
• Depuis l’administration en mode édition : gestion des marges, couleur de fond, image de fond, alignements... etc
• Dans l'éditeur WYSIWYG (dans le cas d'un portlet WYSIWYG) : possibilité d'ajouter ses propres styles

Style wysiwyg

Deux groupes de styles : globaux et locaux

.global{
    font-size: 100%;
    font-family: Arial;
    color: #000;
    
    .local {
        p { color: #666; }
        a { 
            text-decoration: underline; 
            color: #00047f; 
        }
    }
}

Appliquer les styles génériques dans un groupe global nommé .wysiwyg

APPELS - TAGS JSP

Fichier CSS

Fichier JS

Image


Portlet

Inclusion d'un fichier

http://community.jalios.com/jcms-docs/8.0.2/taglib.html

jcmsContext.addCSSHeader("plugins/CRNPCInternet/css/Aide.css");

jcmsContext.addJSHeader("plugins/CRNPCTypes/js/jquery-1.7.1.min.js");

<jalios:thumbnail path="<%=extension.getVignette() %>" width='350' height='1000'></jalios:thumbnail>

<%=getPortlet(bufferMap, "entete")%>

<%@ include file='/jcore/doInitPage.jsp' %>

NOTION DE GABARIT

• Correspond au mode d'affichage du portlet
• Un portlet est toujours associé à un gabarit
• PortletQueryForeach : affichage détaillé pour une page de contenu, affichage synthétique pour une liste d'actualités par exemple
• Possibilité de créer ses propres gabarits : surcharge
• Gabarits existants dans jcms/types

SuRCHARGE de gabarit

Ne JAMAIS modifier un gabarit dans le core de JCMS ! Il faut le surcharger

• Recréer l'arborescence de dossiers de jcms/types/[dossierTemplate] dans notre plugin types

• Déclarer le nouveau gabarit dans plugin.xml

<types>
    <templates type="PortletQueryForeach">
        <template usage="box" name="MEGALIS_ActuALaUne" file="doPortletQueryForeachCarousel.jsp">
            <label xml:lang="fr">MEGALIS - Actualités A la une</label>
          </template>
    </templates>
</types>

• Choisir le nouveau gabarit en mode édition du portlet          

Méthodologie

• Mise en place de l'arborescence du site dans l'administration
• Création des différents portails
• Association des portails aux catégories
• Intégration de la structure du site : header, footer, corps, colonage
• Mise en place d'une page de contenu : intégration des styles génériques et communs au site
• Mise en place et intégration des différents portlets

Bonnes pratiques d’intégration

• Respecter le nommage des feuilles de style
• Respecter le classement des feuilles de style et des images dans l'arborescence de fichiers
• Un template = un fichier css
• Ne pas hésiter à commenter son code
• Toujours surcharger !