JCMS 5 permet de modifier le rendu visuel d'un ou plusieurs types de contenu par simple paramétrage d'un fichier CSS.
Cet article décrit ce qu'apporte cette nouvelle fonctionnalité et comment l'utiliser.

Mise en forme JSP vs. mise en forme CSS

Les gabarits d'affichage détaillés des types de contenus sous JCMS sont presque toujours modifiés manuellement pour coller à des besoins ou à une charte graphique spécifique. Dans ce cas, JCMS détecte que des modifications ont été faites et ne remplace pas le fichier JSP correspondant au gabarit modifié, même dans le cas où des modifications sont faites sur la structure du type de contenu (ajout ou suppression de champ, par exemple).

Ce système à des avantages, dans la mesure où les gabarits sont adaptables par simple modification d'une JSP, mais il comporte aussi 2 inconvénients :

• La mise en forme ne peut pas être effectuée par n'importe quel webdesigner
  La modification des gabarits au travers des fichiers JSP nécessite de conserver les morceaux de code JSP qui affichent les données. Cette opération est grandement facilitée par les balises <jalios:...>, mais nécessite tout de même que la personne la réalisant soit initiée au principe des pages Web générées dynamiquement.
• Le gabarit doit généralement être mis à jour en même temps que le type de contenu
  Quand un type de contenu est modifié, le gabarit d'affichage doit également être modifié, notamment dans le cas d'ajout ou de suppression de champs.

JCMS 5 apporte une solution à ces inconvénients en introduisant la possibilité d'effectuer les habillages de ces gabarits d'affichages en utilisant uniquement des feuilles de styles CSS. Il n'est donc plus obligatoire d'intervenir sur les fichiers JSP des types pour des mises en forme relativement simples. Néanmoins, certaines mises en forme complexes ne sont pas réalisables à causes des limites de l'implémentation actuelle de la norme CSS dans les navigateurs...

Principes de mise en forme des gabarits en CSS

Le code HTML généré par défaut pour les gabarits d'affichage détaillé lors de la création ou la mise à jour d'un type de contenu à été revu dans JCMS 5.

• Sa structure HTML reflète mieux sa structure sémantique
  L'ensemble des champs spécifiques sont regroupés dans un tableau (<table>) avec une ligne du tableau (<tr>) pour chaque champ et dans chaque ligne, une cellule (<td>) pour le libellé du champ et une autre pour ses données.
• Les balises sont décrites par des attributs "class" explicites prévus pour être facilement exploités en CSS

Le code HTML généré

Pour mieux comprendre, passons en revue un exemple de code HTML généré par JCMS 5 pour un type de contenu "Revue de presse".

Les morceaux de code affichant les données sont remplacés ici par des "...".

<div class="fullDisplay RevueDePresse">
<p class='title'>...</p>
<table class="fieldList">
  <tr class="field extrait wysiwygEditor abstract">
    <td class='label'>Extrait</th>
    <td class='data'>...</td>
  </tr>
  <tr class="field commentaire wysiwygEditor ">
    <td class='label'>Commentaire</th>
    <td class='data'>...</td>
  </tr>
  <tr class="field nomDuMagazine textfieldEditor ">
    <td class='label'>Nom du magazine</th>
    <td class='data'>...</td>
  </tr>
  <tr class="field dateDeParution dateEditor ">
    <td class='label'>Date de parution</th>
    <td class='data'>...</td>
  </tr>
  <tr class="field typeDePresse categoryEditor ">
    <td class='label'>Type de presse</th>
    <td class='data'>...</td>
  </tr>
  <tr class="field contenusLies linkEditor empty">
    <td class='label'>Contenus liés</th>
    <td class='data'>...</td>
  </tr>
  <tr class="field diffusion categoryEditor ">
    <td class='label'>Diffusion</th>
    <td class='data'>...</td>
  </tr>
  <tr class="field classification categoryEditor ">
    <td class='label'>Classification</th>
    <td class='data'>...</td>
  </tr>
 
</table>
<table class="fieldList commonFields">
  <jalios:if predicate='<%= isAdmin %>'>
  <tr class="field author member">
  ...
  </tr>
  <tr class="field cdate date">
  ...
  </tr>
  <tr class="field mdate date">
  ...
  </tr>
  <tr class="field relatedList linkEditor empty">
  ...
  </tr>
  </jalios:if>
</table>
</div>

Les classes utilisées en CSS

Les classes appliquées aux différentes balises sont distinguées ici par des couleurs qui representent leur utilité pour la mise en forme en CSS.

• En vert, la nature de chaque zone d'intervention
• fullDisplay : l'ensemble des gabarits FullDisplay
• fieldList : l'ensemble des listes de champs (correspondent à des tableaux HTML)
• field : l'ensemble des champs (correspondent à des lignes de tableau HTML)
• label : les libellés des champs (correspondent à des cellules de tableau HTML)
• data : les données des champ (correspondent à une cellule de tableau HTML)
• En rouge, les noms Java
• du type (ex. : RevueDePresse)
• des champs (ex. : nomDuMagazine)
• des listes de champs annexes (ex. : commonFields pour les champs communs)
• En bleu, l'editeur du champ
• wysiwygEditor -> Un champ zone de texte riche
• textfieldEditor -> Un champ zone de texte
• dateEditor -> Un champ date
• ...
• En violet, des informations annexes sur le champ
• abstract -> indique que ce champ sert de résumé
• empty -> indique que ce champ est vide

Toutes ces classes CSS permettent de "cibler" les parties du ou des gabarits qui doivent être mis en forme.
Il est facile pour un webdesigner, en cascadant ces classes dans des sélecteurs CSS, de changer, par exemple, la couleur de fond du champ "Diffusion" dans le type "Revue de presse" :

.RevueDePresse .Diffusion { background-color: green }

De mettre les textes des résumés de tous les types de contenus en gras :

.fullDisplay .abstract { font-weight: bold }

De faire disparaître les champs vides quand il s'agit de champs communs :

.fullDisplay .commonFields .empty { display: none }

Ou encore, de masquer les libellés des champs sur les publications de type "Article" :

 .Article .label { display: none; }

Exemple complet

Voici ce que peut donner l'habillage complet du type "Revue de presse", utilisé dans l'exemple plus haut, avec les feuilles de styles CSS correspondantes.

Gabarit d'affichage détaillé avant mise en forme (CSS par défaut de JCMS)

Gabarit d'affichage détaillé après mise en forme

CSS avant mise en forme

.fullDisplay .title {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 24px;
 font-weight: bold;
 color: #000000;
}
.fullDisplay td {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
}
.fullDisplay .fieldList {
 border-collapse: collapse;
 width: 100%;
}
.fullDisplay .field td {
 border: 1px solid #000000;
 margin: 0px;
 padding: 5px;
 vertical-align: top;
}
.fullDisplay .field .label {
 width: 150px;
 background-color: #EEEEEE;
        text-align: right;
}
.fullDisplay .field ul, .field ol {
 margin-top: 2px;
 margin-bottom: 2px;
}

.fullDisplay .commonFields {
 background-color: #FFFFCC;
 margin-top: 10px;
}

.fullDisplay .empty {
 display: none;
}

CSS après mise en forme

.RevueDePresse .fullDisplay .title {
 display: block;
 margin: 0px 0px 15px 0px;
 font-family: Trebuchet MS, Trebuchet, Arial, Helvetica, sans-serif;
 font-size: 24px;
 font-weight: normal;
 letter-spacing: 2px;
 color: #CC0000;
}
.RevueDePresse .fullDisplay .abstract .data {
 font-weight: bold;
}
.RevueDePresse .fullDisplay .fieldList {
 border-collapse: collapse;
 width: 100%;
}
.RevueDePresse .fullDisplay .field td {
 border-bottom: 1px dashed #CC0000;
 margin: 0px;
 padding: 5px;
 vertical-align: top;
}
.RevueDePresse .fullDisplay .field .label {
 font-weight: bold;
 width: 100px;
}
.RevueDePresse .fullDisplay .field ul, .field ol {
 margin-top: 2px;
 margin-bottom: 2px;
}
.RevueDePresse .fullDisplay .Details {
 background-color: #EEEEEE;
 margin-top: 10px;
}
.RevueDePresse .fullDisplay .empty {
 display: none;
}
.RevueDePresse .fullDisplay .diffusion, .fullDisplay .classification {
 background-color: #CCFFCC;
}
.RevueDePresse .fullDisplay .commonFields {
 background-color: #FFFFCC;
 margin-top: 10px;
 border: 1px solid black;
}
.RevueDePresse .fullDisplay .commonFields td {
 border-bottom: 1px solid black;
}

Emplacement des CSS

Le code CSS utilisé pour relooker les gabarits peut être placé dans n'importe quels des fichiers CSS de JCMS. Toutefois, les parties du site utilisant ces styles différeront selon le fichier choisi :

• /css/custom.css -> l'ensemble du site JCMS
• /css/portal/*.jsp -> les portails utilisant le fichier CSS dans lequel le code a été placé