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 !

 

Made with Slides.com