Hello java world
Une fois n'est pas coutume, je quitte le monde Perl pour parler de nos développements sur LinID et en particulier sur notre framework java LinID Directory Manager.
Ce framework est basé sur Tapestry 5 et permet de créer des interfaces web de gestion d'annuaire LDAP sans réinventer la roue. 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.
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 :
