Projet Applications Web 2007

Voir la liste des groupes.

Le but de ce projet est d'améliorer le Facet Studio dans Woko, en implémentant le tri et le filtrage de la table des facettes en AJAX.

Les fonctionnalités attendues sont :

  • consultation des facettes définies dans une table, ayant les colonnes suivantes :
    • name : le nom de la facette
    • profile ID : l'ID du profil
    • target type : le type cible
    • facet class : le nom de classe de la facette
  • tri par colonne
    • le click sur le titre de la colonne doit trier les lignes
  • filtrage des lignes affichées
    • champ + bouton
    • highlight du texte dans la page (une fois que les points précédents marchent)
    • auto-completion (une fois que les points précédents marchent)

Le Facet Studio implémenté actuellement permet déjà de lister les facettes ainsi que de les trier, mais ce n'est pas AJAX et il manque le filtrage...

A propos de display tag...

Display Tag est une taglib JSP permettant de faire des tableaux facilement. Il permet d'utiliser des Collections comme sources de données, une table représentant un élément de la collection par ligne, et certaines des propriétés de l'élément en colonne. Display tag implémente des fonctionnalités de base des tables, comme le tri ou la pagination.

Dans notre cas, on a une facette par ligne, et les propriétés voulues (facet name, profile ID, etc.) en colonne.

Pour le moment, la table n'est pas AJAX, elle est rendue en même temps que l'intégralité de la page. Il va falloir utiliser le "Ajax Update" (voir ci dessous) pour la rendre dynamiquement sur tri et filtrage...

AJAXisation de la table

Une fois encore, pour le moment la table est générée dans la page "à l'ancienne". Vous verrez dans le code de la JSP, on appelle <display:table ...> pour rendre la table à l'endroit voulu.

Vous allez devoir changer ça !

Ce qu'on veut, c'est que la table soit rendue dynamiquement dans un <div> de la page, via un appel AJAX, quand l'utilisateur triera la table, ou filtrera le lignes.

L'idée principale d'AJAX est de pouvoir mettre à jour des morceaux de la page sans la recharger entièrement (le modèle classique du Web, où chaque click génère un rechargement de toue la page). Ici, on peut mettre à jour des morcaux de page dynamiquement, en interagissant avec le serveur de façon synchrone ou asynchrone, sans recharger la page. La librairie AJAX peut faire du direct-to-DOM : elle écrit de HTML dans le document dynamiquement ! Ca se passe comme ça :

  1. L'utilisateur clique un lien ou un bouton
  2. Un javascript appelle la librairie AJAX en lui passant les paramètres voulus (élément du DOM à mettre à jour, URL du contenu à écrire, etc.)
  3. La librairie AJAX appelle le serveur à l'URL spécifiée via une requête HTTP
  4. La lib AJAX récupère la réponse HTTP, et écrit son contenu dans l'élément de la page spécifié

Vous allez devoir réagir aux clicks sur les liens de tri et le bouton de filtrage (et aussi la completion) - en JavaScript côté client, et appeler une librairie AJAX (en l'occurence Prototype.js) afin d'updater un morceau de la page (un <div>) avec la réponse d'un appel serveur !

Rassurez vous, ça se fait assez simplement en utilisant la fonction Ajax.Updater de l'API Prototype qui est déjà inclus dans Woko, et que vous devez utiliser (c'est obligatoire, vous ne pouvez pas utiliser autre chose).

Afin de comprendre comment marche l'Ajax.Updater de Prototype, jouez un peu avec l'exemple AJAX inclus dans Stripes. Vous aller devoir faire, en gros, la même chose !

Architecture

Vous avez quasiment déjà tout niveau de l'architecture. Vous devrez utiliser l'Action Bean FacetStudioActionBean (vous pouvez y rajouter des méthodes) ainsi que la JSP facet-studio.jsp.
Vous allez extraire la partie table de cette JSP, et la mettre dans une autre (facet-studio-table.jsp) qui sera utilisée dans les nouveaux évènements ajoutés à FacetStudioActionBean.

Vous ne devez en aucun cas modifier quoi que çe soit d'autre ! Si vous avez un problème qui nécéssite un changement ailleurs, demandez moi avant !

En gros, votre boulot, c'est le JavaScript qui appelle Prototype dans facet-studio.jsp, hacker le display tag pour qu'il marche en AJAX, et les évènements appelés en AJAX dans l'Action FacetStudioActionBean.

Si un projet sort vraiment du lot, en plus de faire un carton sur la note, il finira intégré à Woko :-)

Encore en train de lire ??? Allez, file installer l'exemple de Stripes en AJAX !! Et ensuite, récupère le projet en CVS sur sourceforge !

Sinon, il y a aussi un zip tout prêt pour créer le projet dans NetBeans : http://www.rvkb.com/pub/woko-netbeans-nodb.zip

Vous n'avez normalement plus qu'à dézipper cette archive (ça crée un dossier woko) et ouvrir le projet NB contenu).

Trucs Divers