Avec ADF 11G vous pouvez « skinner » votre application à votre guise. Cela s’appelle le « skinning » !
En effet, tous les composants ADF Rich Faces possèdent leur propre classe CSS . Vous avez donc la possibilité de modifier chacun des éléments présents sur vos pages jspx. Votre projet doit être paramétré de façon à réagir avec votre CSS, je vais vous décrire ces étapes et vous faire part d’astuces pour arriver à vos fins.
Paramétrer JDeveloper
La première chose à effectuer, c’est de paramétrer votre outil de développement JDeveloper. En effet, sans ce paramétrage, il ne vous sera pas possible d’avoir les classes CSS correspondant aux composants ADF Faces en complétion automatique… Pour cela, il faut aller dans les préférences de JDeveloper ==> Niveau « CSS Editor » et cocher les options suivantes:
- Cocher « ADF faces Extension » pour l’autocompletion
- Sélectionner « CSS level 3 » : il est recommandé par Oracle de travailler sur cette version de CSS avec ADF Faces 11g
Paramétrer votre projet
Maintenant vous êtes prêts à développer votre « skin ». Tout d’abord, il faut ajouter dans votre projet votre fichier CSS
Ensuite il faut paramétrer le projet pour qu’il utilise ce nouveau fichier css:
- Fichier trinidad-skins.xml dans le répertoire WEB-INF
<?xml version="1.0" encoding="UTF-8" ?> <skins xmlns="http://myfaces.apache.org/trinidad/skin"> <skin> <id>easy.desktop</id> <family>easy</family> <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id> <style-sheet-name>css/easy.css</style-sheet-name> <extends>blafplus-rich.desktop</extends> </skin> </skins>
- Puis le fichier trinidad-config.xml dans le répertoire WEB-INF
<?xml version="1.0" encoding="UTF-8"?> <trinidad-config xmlns="http://myfaces.apache.org/trinidad/config"> <skin-family>easy</skin-family> </trinidad-config>
Votre projet est maintenant paramétré pour prendre en compte votre skin.
Paramétrer votre environnement de développement
Vous allez sûrement faire un certain nombre d’allers et retours entre le rendu de la page par le serveur d’application et votre environnement de développement. Il serait donc intéressant que votre serveur d’application (soit celui intégré dans JDeveloper, soit celui de votre serveur de développement) prenne en compte à chaque nouveau déploiement vos modifications sans nécessiter de le redémarrer ou de supprimer les caches temporaires du serveur d’application. L’option CHECK_FILE_MODIFICATION de la zone « context initialization parameters » est la solution à ce problème. Il faut sa valeur mettre à true dans le fichier web.xml de votre projet :
Pour vous épauler dans votre développement de CSS, il faut vous appuyer sur l’outil firebug avec firefox ou sur une barre de développement dans le cas de l’utilisation d’un autre navigateur.
Cet outil va vous permettre de comprendre le rendu de vos composants ADF Faces via votre navigateur dans vos pages jspx. Vous allez donc pouvoir accéder au CSS généré par votre serveur d’application pour autant que ce dernier ne soit pas compressé !
Une autre option de votre projet est donc à paramétrer dans le fichier web.xml : DISABLE_CONTENT_COMPRESSION. Il faut mettre sa valeur à true
Développer votre CSS
Dans les recommandations pour le développement d’un CSS, la plus importante est de ne pas laisser les développeurs :
- implémenter des classes CSS directement dans leur page,
- utiliser des balises html pour gérer des problèmes de positionnement d’objet,
Tout doit être centralisé dans un ficher CSS. Les développeurs ne doivent faire référence qu’à des classes définies dans ce fichier. Pour s’assurer de cela, il est intéressant de partir avec ces instructions de base dans votre fichier css:
/* ################################################################## */
/* RESET HTML TAGS */
/* ################################################################## */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend
,table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
}
A partir de maintenant votre application est sans style. Vous pouvez donc implémenter votre style.
Exemple d’implémentation de style
Style global
On imagine que vous aimeriez que le texte de toutes vos inputbox soit de couleur bleue. L’instruction à mettre en place dans votre CSS sera la suivante:
af|inputText::content {color:Blue;}
L’implémentation de l’inputbox dans la jspx sera la suivante:
<af:inputText label="#{easyviewcontrollerBundle.LABEL1}" id="it1">
Style particulier d’un composant
On peut imaginer maintenant que vous aimeriez avoir un second style pour certaines de vos inputbox (celles qui sont obligatoires) avec la couleur rouge. On peut alors définir une nouvelle classe pour cela:
af|inputText.Obligatoire::content {color:red}
L’implémentation de l’inputbox dans la jspx sera la suivante:
<af:inputText label="#{easyviewcontrollerBundle.LABEL1}" id="it1">
<af:inputText label="#{easyviewcontrollerBundle.LABEL2}" showRequired="true"id="it2" styleClass="Obligatoire">
Style mutualisé pour plusieurs composants
Imaginons à présent que vous aimeriez avoir un style commun pour tous les contenus de vos objets. Il faut définir une classe alias dans votre CCS :
// definition de la classe alias
.InterieurObjetObligatoireStyle:alias {color: blue; background-color: Silver;}
Tous les objets faisant référence à cet alias auront une couleur bleue de texte et un fond argent
af|inputText.Obligatoire::content
{
-tr-rule-ref:selector(".InterieurObjetObligatoireStyle:alias");
}
// and also in the selectOneChoice
af|selectOneChoice.Obligatoire::content
{
-tr-rule-ref:selector(".InterieurObjetObligatoireStyle:alias");
}
Style pour tous les composants d’un conteneur de composant
Ensuite, on aimerait que tous les formulaires de saisie aient le même design. Pour faciliter le travail des développeurs, on peut définir un style pour le conteneur des formulaires. Tous les composants contenus hériteront des propriétés définies dans ce style
af|panelFormLayout.FormulaireSaisie af|inputText::label
{
font-size:large; color: rgb(198,0,198);
}
Dans la page, on spécifie ce style au conteneur de formulaire : le composant panelFormLayout
<af:panelFormLayout maxColumns="2" styleClass="FormulaireSaisie"
Resources
ADF 11g Documentation Skinning and defining Styles.
Site de démo ADF 11g
