PROJET AUTOBLOG


Planet-Libre

source: Planet-Libre

⇐ retour index

Clément OUDOT : Utiliser un thème alternatif jQuery UI avec Tapestry jQuery

jeudi 16 mai 2013 à 17:38

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.

linid_logo.png

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.

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 :


org.got5
tapestry5-jquery
3.3.5

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) :

	
		
  • ${message:general.delete-label} ${message:general.delete-label}

    ${message:confirm.deleteuser}

    ${message:general.confirm-label}
  • 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

    Gravatar de Clément OUDOT
    Original post of Clément OUDOT.Votez pour ce billet sur Planet Libre.