TOOLinux

Le journal du Libre

LinID : un thème alternatif jQuery UI avec Tapestry jQuery

mardi 21 mai 2013

En effet, il possède un framework d’autorisation permettant de modéliser les droits d’accès aux entrées et aux attributs à travers l’interface, un schéma enrichi permettant de décrire comment un attribut sera visualisé et édité, et un certain nombre de composants comme des listes de sélection basées sur des recherches LDAP, des afficheurs de DN, de dates, etc.

tapestry.png

Afin d’améliorer le rendu graphique de l’application, nous avons intégré jQuery et jQuery UI grâce au module tapestry5-jquery fourni par nos amis de Ganf of Tapestry 5 (GoT5).

Cet article explique comment utiliser ce module, et que faire quand le thème graphique fourni par défaut ne vous convient pas.

Au début c’est facile

Oui, tout est expliqué sur le site du module tapestry5-jquery. La première étape consiste à modifier son fichier pom.xml pour charger la dépendance :

<dependency>
<groupId>org.got5</groupId>
<artifactId>tapestry5-jquery</artifactId>
<version>3.3.5</version>
</dependency>

Et en gros, voilà, on a ensuite accès dans son code Tapestry aux widgets jQuery UI. Par exemple dans l’application de démonstration de LinID Directory Manager, on utilise le widget dialog pour la confirmation de la suppression d’une entrée (fichier ActionBar.tml) :

<t:if t:test="canDelete">
<li>
<span title="$message:general.delete-label">

<t:jquery.dialoglink t:id="deleteDialog" t:dialog="delete-$dnHash">
<img src="$asset:context:layout/images/delete.gif" alt="$message:general.delete-label" />
<span class="menumessage">$message:general.delete-label</span>
</t:jquery.dialoglink>

</span>

<t:jquery.dialog
t:clientId="delete-$dnHash"
t:params="deleteDialogParams"
title="$message:general.delete-label">

<p>$message:confirm.deleteuser</p>
<a t:type="actionlink" t:id="delete" t:context="entryDn" t:mixins="jquery/button" t:params="literal :icons :primary :’ui-icon-circle-check’">
$message:general.confirm-label
</a>

</t:jquery.dialog>

</li>
</t:if>

Thème pas ?

Le thème jQuery UI fourni par défaut est lightness, avec une dominante orange. Nous utilisons ce thème dans LinID OpenLDAP Manager (application web de configuration d’OpenLDAP), mais pour l’application de démonstration, le thème jQuery UI smoothness est plus adapté (voir le theme roller de jQuery UI).

Pour utiliser ce thème, il faut d’abord le télécharger sur le site de jQuery UI, en demandant un bundle pour la version legacy (1.9). En effet, tapestry5-jquery n’inclus que le thème lightness, et se base sur jQuery 1.8.24.

Une fois l’archive jQuery téléchargée, prendre le répertoire smoothness situé dans CSS et le copier dans la webapp LinID, par exemple dans le répertoire layout.

Ensuite, comme indiqué plus, il faut récupérer le fichier CSS pour la version 1.8.24. On peut utiliser pour cela Google CDN. Le lien pour télécharger le CSS : http://ajax.googleapis.com/ajax/lib....

On remplace les CSS de l’archive jQuery UI par celui téléchargé, et il reste à indiquer dans la webapp d’utiliser le nouveau thème. Pour cela dans le fichier AppModule.java, on ajoute dans contributeApplicationDefaults :

configuration.add(JQuerySymbolConstants.JQUERY_UI_DEFAULT_THEME, "$linid.jqueryui.path") ;

Et on renseigne la variable linid.jqueryui.path dans le fichier configuration.properties :

# Jquery UI theme
#linid.jqueryui.path=classpath:org/got5/tapestry5/jquery/themes/ui-lightness/jquery-ui.css
linid.jqueryui.path=context:layout/smoothness/jquery-ui.css

Et voilà le résultat :

Affichage_des_informations_20130516-162951.png

- Clément OUDOT