JaliosXperience
fr en
Login
Request for access
Search
Jalios Web Sites
Number of current visits
There are 52 visitors online.
rss rss
Link

Mise en oeuvre des CSS dans JCMS > Mettre en place un jeu de css sur une portlet en JCMS 5/7

Mettre en place un jeu de css sur une portlet en JCMS 5/7

Sylvain DEVAUX - on 8/30/07 at 10:45 AM

Bonjour,

j'essaye de mettre en place plusieurs css pour une portletQueryForeach, mais je ne vois plus trop où je dois déposer mon nouveau code css. Doit-on le déposer dans plugin.css ? Si oui, doit-on le déclarer d'une facon particuliere dans plugin.xml ?

Voilà le code d'essai, est-il correct ? 

/* <?xml version="1.0" encoding="UTF-8"?><XMLCSS> */

/* -------------------------------------------------------------------- */
/* |||||||||||||||||||||| QUERY/FOREACH CSS ||||||||||||||||||||||||||| */
/* -------------------------------------------------------------------- */
/* <CSS label="Orange" value="orange" type="PortletQueryForeach" target="SkinItem" description="Style for all PortletNavigate" /> */

.PortletQueryForeach_orange    { color: red; font: normal 12px arial,helvetica,sans-serif; }

/* <CSS label="Violet" value="violet" type="PortletQueryForeach" target="SkinItem" description="Style for all PortletQueryForeach" /> */

.PortletQueryForeach_violet    { font: normal 12px arial,helvetica,sans-serif; }

/* </XMLCSS> */

Merci

Jean-Phillipe Encausse - on 8/30/07 at 11:24 AM

Bonjour,

Si vous souhaitez intégrer un fichier de CSS lié à un gabarit comme une Portlet QF. Il faut:

  1. Créer un fichier dans plugins/MonPlugin/css/moncss.css
  2. Déclarer le fichier dans le gabarit: jcmsContext.addCSSHeader(...)

Si le fichier de CSS est plutôt orienté "look" ce sera alors un plugin de portail qui va proposer des déclinaisons (eg de couleur) du portail.
Dans ce cas il faut le déclarer dans plugins/MonPlugin/css/portal/moncss.css
Lors de l'édition d'un portail le fichier sera sélectionnable

Enfin dernière précision: Le XML commenté de tous les fichiers CSS de portail:

  • css/portal/...
  • plugins/Plugin/css/portal/...

est parsé afin de proposer une déclinaison CSS dans les Portlets.

Ce code XML: 

/* <CSS label="Orange" value="orange" type="PortletQueryForeach" target="SkinItem" description="Style for all PortletNavigate" /> */

Indique à JCMS qu'il y a une déclinaison CSS .PortletQueryForeach_orange avec le libellé "Orange" et que c'est une déclinaison de gabarit d'affichage (et non de skin)

Si l'utilisateur choisit cette déclinaisons la portlet sera généré avec les classes CSS "PortletQueryForeach_orange" et "PortletQueryForeach" et "orange".

Sylvain DEVAUX - on 8/30/07 at 11:38 AM

Merci bcp pour la réponse rapide. J'ai juste eu à déplacer mon fichier css dans un sous répertoire "portal" de mon plugin.

Merci encore.

Sylvain DEVAUX - on 2/5/08 at 3:53 PM

Pour une migration 4.1 > 573, j'essaye de convertir d'anciens skin et css de skin en reprenant le principe ci dessus.
Malheureusement, je ne comprends pas pourquoi mon xml css est bien parsé, et propose dans l'édition des portlets des skinCss, mais, dans le rendu html, le code css n'est pas présent tout simplement. Voilà où se trouvent mon fichier et son contenu :

/plugins/MonPlugin/css/plugin.css (code css bien présent dans la page) /plugins/MonPlugin/css/portal/plugin.css (code css bien parsé, mais non présent dans la page)

/* <?xml version="1.0" encoding="UTF-8"?><XMLCSS> */

/* -------------------------------------------------------------------- */
/* ||||||||||||||||||||||||| COMMON CSS ||||||||||||||||||||||||||||||| */
/* -------------------------------------------------------------------- */


BODY                   {
 color: #001032;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
}
A { color:#001F93;
text-decoration: none;  }
A:hover       { text-decoration: underline;                  }
.form                  { font: normal 8pt arial,helvetica,sans-serif; color: #333333; border: 1px solid #333333; }
.Portlet               {}
.PortletSkinable       {}
.Portlet A             { text-decoration: none;          }
.Portlet A:hover       { text-decoration: underline;                  }

/* -------------------------------------------------------------------- */
/* ||||||||||||||||| Skin CSS |||||||||||||||||||||||| */
/* -------------------------------------------------------------------- */
/* <CSS label="Menu premier" value="premMenu" type="PortletJsp" target="SkinBox" description="Style for all menu " /> */
/* <CSS label="Menu premier" value="premMenu" type="PortletLogin" target="SkinBox" description="Style for all menu " /> */
/* <CSS label="Menu premier" value="premMenu" type="PortletWYSIWYG" target="SkinBox" description="Style for all menu " /> */
.premMenu .menuHeader{
 background-image:url(Aucune);
}
.premMenu .menuContenu{
 background-image:url(Aucune); 
}

/* <CSS label="Menu dernier" value="derMenu" type="PortletWYSIWYG" target="SkinBox" description="Style for all menu " /> */
/* <CSS label="Menu dernier" value="derMenu" type="PortletJsp" target="SkinBox" description="Style for all menu " /> */
.derMenu .menuFooter{
 background-image:none;
}

/* <CSS label="Cartouche Rose" value="cartRose" type="PortletWYSIWYG" target="SkinBox" description="Style for all menu " /> */
/* <CSS label="Cartouche Rose" value="cartRose" type="PortletJsp" target="SkinBox" description="Style for all menu " /> */
.cartRose .cartouchesHeader{background-color:  #C00075;}
.cartRose .cartouchesTitre{background-color: #C00075; background-image:url(../images/hpskin_rs.gif);}
.cartRose .cartouchesTitre H1{background-image: url(../images/hpskin_rs2.gif);}
.cartRose .cartouchesTitre H1 span {background-color:#C00075; background-image: url(../images/hpskin_rs1.gif);}

.cartRose .cartouchesContent, .cartRose .cartouchesFooter{ background-color: #FDC5E7;}
.cartRose .cartouchesContent .links, .cartRose .cartouchesContent .links .linksHeader{background-color: #FFEEF8;}
.cartRose .cartouchesContent .links .linksHeader{ background-image:url(../images/links_hd_rs.gif); }
.cartRose .cartouchesContent .links .linksHeader div{ background-image:url(../images/links_hg_rs.gif);}
.cartRose .cartouchesContent .links .linksFooter{ background-image:url(../images/links_bd_rs.gif);}
.cartRose .cartouchesContent .links .linksFooter div{ background-image:url(../images/links_bg_rs.gif);}

.cartRose .titrepage2{background-image:url(../images/titres/trait_rose.gif);}
.cartRose .titrepage2 H1{color:#C00075;}

.cartRose .titreLignePage table {border-color:#FDC5E7;}
.cartRose .titreLignePage table thead{background-color:#FDC5E7;}
.cartRose .titreLignePage table tr.ligne0 th, .cartRose .titreLignePage table tr.ligne0  td{background-color:#FFEEF8;}

/* <CSS label="Cartouche Violet" value="cartViolet" type="PortletWYSIWYG" target="SkinBox" description="Style for all menu " /> */
/* <CSS label="Cartouche Violet" value="cartViolet" type="PortletJsp" target="SkinBox" description="Style for all menu " /> */

.cartViolet .cartouchesHeader{background-color: #5F20AC;}
etc...

Je vais bien disposer du skinCss "Cartouche rose" dans ma portlet, mais, en front office, le code ".cartRose ...." n'est pas appelé dans la page.

Qu'ai-je manqué ?

Jean-Phillipe Encausse - on 2/5/08 at 4:32 PM

La manière de faire des Skins, à la demande de Klee, a légèrement changé depuis JCMS 5.6 (ou un peu avant) pour:

  • Avoir un portail en DIV (et non en TABLE)
  • Avoir la possibilité de ne plus généré de code HTML par JCMS

Nous avons donc l'enchainement suivant:

  • doPortletCache.jsp (interne JCMS)
  • JSP de la Skin ou doPortletSkin_Div.jsp (Skin modifiable)
  • doIncludePortletTemplate.jsp (interne JCMS)
  • JSP de la Portlet

Maintenant c'est la Skin qui est chargé de l'ajout de tous les Style, Effets, Classes, Id définit dans la portlet. Un très bon exemple se trouve dans: doDivSkin.jsp ou doDisplaySkin_box01_Div.jsp

Sylvain DEVAUX - on 2/5/08 at 4:37 PM

J'ai peur de ne pas avoir bien posé ma question à la vue de ta réponse.
Ce que tu m'indiques c'est le fait d'écrire cartRose dans l'attribut class="" du div qui entoure la skin ?
Si c'est ça, mon soucis n'est pas à ce niveau, la classe cartRose est bien définie pour mon div de skin, mais c'est le css qui n'est pas chargé, alors que le css du fichier 1 /css/portal/jalios.css est bien :

  1. parsé
  2. chargé (disons disponible par firebug dans l'onglet "CSS"), ce n'est pas le cas de lmon fichier /plugins/MonPlugin/css/portal/plugin.css), qui lui est parsé, mais son contenu n'est pas chargé.

Jean-Phillipe Encausse - on 2/5/08 at 4:56 PM

Ah ok,

1. Dans le formulaire d'édition de ton portail tu as bien choisi plugin.css et non jalios.css ? car l'on parse tous les fichiers mais on n'inclus que celui définit par le portail.

2. Au niveau du gabarit d'affichage de ton portail tu fais bien jcmsContext.addCSSHeader(box.getCssFile()); ? C'est un petit changement par rapport à la 4.1.1

Sylvain DEVAUX - on 2/5/08 at 5:02 PM

Ah ouais ! merci, j'avais pas pensé à ça (1:sélection du css portail) :p

Sylvain DEVAUX - on 2/12/08 at 6:02 PM

Bonjour,

Encore un nouveau soucis sur l'utilisation de css et de css xml. J'ai fréquemment (je me demande si ce n'est pas que quand on va dans l'édition d'une portlet AbstractSkinnable) une exception dans mes logs concernant un parsing XML CSS qui échoue. Voilà le résumé de cette exception : 

An exception occured while parsing css XML for file
org.jdom.input.JDOMParseException: Error on line 1: The markup in the document preceding the root element must be well-formed.

Cependant, seul mon fichier plugin/monPlugin/css/portal/monCss.css est entouré des balises indiquées par Jean-Phillipe. Mon css principal plugin/monPlugin/css/monCss.css qui porte le même nom, lui, n'est pas censé être interprété ni parsé. Il contient de plus des commentaires comme tout fichier css habituel (/* commentaire css */).

> Pourquoi ce css principal est-il lui aussi parsé ?

Note : pour ajouter mon monCss.css, j'ai utilisé la classe BasicTemplatePolicyFilter de cette façon :

public class AAATemplatePolicyFilter extends BasicTemplatePolicyFilter {
 
 public void getCssFiles(List jcmsChoice) {
  String filePath = Channel.getChannel().getRealPath("/plugins/AAA_PLUGIN/css/monCss.css");
  File file = new File(filePath);
  jcmsChoice.add(file);
 }

Cela vient du fait qu'il a été ajouté de cette manière, peux-tu me rapeller la meilleure manière d'inclure un css ?

En relisant ce que tu as indiqué (css/portal/...& plugins/Plugin/css/portal/... sont parsés) cela semble normal que j'ai cette exception.

Ce que je ne comprends plus, c'est comment utiliser un css global à la webapp, sans avoir à le choisir dans la liste des css de chaque portail car dans ce cas il va être parsé d'où l'exception.

Merci

Sylvain DEVAUX - on 2/12/08 at 6:35 PM

Bon, pour t'éviter de perdre trop de temps, nous avons trouvé ce qui ne va pas, un commentaire dans lequel était écrit : 

/* < précédent Retour suivant > */
Il essayait de prendre ca comme une balise :)

Par contre, je veux bien des éléments de réponse sur le reste des mes interrogations.

Merci.

Login   Home   fr en
JALIOS SA - SIREN 440 126 035