| author : | Nolwenn Rannou <rannou@codelutin.com> |
|---|---|
| revision : | 2613 |
| date : | 2009-06-30 15:32:57 +0200 (mar 30 jun 2009) |
L'interface web de l'application a été créée grâce au framework Tapestry de la fondation Apache. Tapestry est un framework de développement pour applications Web J2EE dont l'architecture est à base de composants.
Il présente de nombreux avantages :
Le package data contient les éléments du modèle de l'architecture de l'UI.
Les UIO (User Interface Objects) sont l'équivalent des DTO du business côté UI. Les attributs des UIO sont privés et possèdent des accesseurs et des modifieurs, car le framework Tapestry manipule les objets via ces derniers. L'interface graphique manipule directement les DTO mais il y a deux UIO qui héritent du DTO ChoiceDTO : DateChoiceUIO et ImageChoiceUIO. Ils sont utiles lors de la création des choix des sondages de type date ou image.
La classe Lien représente un lien hypertext : elle possède un attribut name, qui est la chaîne de caractère sous laquelle sera affiché le lien, et un attribut address, qui est l'adresse sur laquelle pointe le lien.
La classe EvenOdd permet d'attribuer une classe aux lignes d'un tableau ou aux éléments d'une liste, pour les afficher en changeant les couleurs une ligne sur deux.
L'énumération PollStep représente les étapes du formulaire de création/modification de sondage.
Le composant Border est un composant présent sur toutes les pages de l'application : il s'agit du menu, de la barre d'adresse et du pied de page. Il prend en paramètres un Array de Liens, qui servira à créer la barre d'adresse, et un type de page (Creation, Index, Vote ou VoteCounting) qui détermine le logo et les couleurs de la page.
Ce composant est un formulaire de connexion qui est affiché quand l'utilisateur essaye d'accéder à une page pour laquelle il doit être identifié.
Ce composant est un type de champ de formulaire permettant de sélectionner une date et une heure.
Le composant FeedBack gère l'affichage des messages à destination de l'utilisateur. Ces messages ont une apparence différente selon leur signification. Par exemple un message d'erreur ressortira plus qu'un message d'information. Le composant permet donc d'afficher ces types de messages lors du rendu de la page. Il est possible d'afficher plusieurs messages de types différents en même temps. Ceux-ci ne seront affichés qu'une seule fois et aussitôt supprimés. Ce composant se comporte un peu comme le composant Tapestry Error qui affiche les erreurs de validation des formulaires.
Pour personnaliser l'apparence des messages, il faut définir les classes fb-error et fb-info dans le CSS. Dans le template il suffit de placer la balise du composant :
<t:feedback t:id="feedback"/>
Dans la classe, après avoir déclaré le composant, il est possible d'ajouter des messages :
@Component(id = "feedback") private FeedBack feedback;
feedback.addInfo("message d'info");
feedback.addError("message d'erreur");
Le composant Image sert à afficher une image dynamique, telle qu'une image téléchargée sur le serveur grâce à un formulaire. À priori, on ne connaît pas le nom du fichier correspondant à l'image, on ne peut donc pas utiliser d'asset pour l'afficher de la manière suivante :
<img src="${asset:context:img}/image.png" />
Le composant crée une élément HTML de type image en l'associant à un flux de type ImageStreamResponse :
<t:image src="/img/image.png" />
Le composant Chart affiche un diagramme de type camembert (PieChart). Pour cela il utilise la librairie JFreeChart et convertit le résultat en une image facilement intégrable dans une page Web :
<t:chart width="210" height="190" values="choice" title="title" type="1"/>
Le paramètre values correspond à une liste de chaînes représentant les labels et leur valeurs respectives (exemple : {"val1", "20", "val2", "10"}). Le paramètre type est le type de représentation du diagramme (1:PIE, 2:PIE3D, 3:RING).
Les pages sont à la fois la vue et le contrôleur de l'architecture. Cependant chaque page est représentée par trois fichiers :
La page de création de sondage permet de créer un sondage en renseignant :
L'application ne gère pas encore la date de début et la date de fin, ni l'envoi d'email, ni la possibilité d'ajouter des choix. Lorsque les choix sont des images, les fichiers sont envoyés sur le serveur. En revanche, l'endroit où elles sont enregistrées reste à configurer. Si la création du sondage réussit en base, alors une page de confirmation est affichée et fournit à l'utilisateur deux liens : un pour voter, qu'il pourra envoyer aux personnes qu'il souhaite voir voter, et l'autre pour modifier ou clore le sondage.
Les champs pouvant être modifiés sont les suivants :
Cette page prend en argument l'identifiant Topia haché en MD5 du sondage concaténé à l'identifiant Topia haché du créateur. C'est également sur cette page qu'il pourra clore le sondage pour pouvoir le dépouiller.
Cette page permet à un utilisateur de voter à un sondage. Il doit renseigner son nom et cocher ou non une pou plusieurs cases. Cette page permet aussi d'ajouter des commentaires au sondage. Cette page prend en argument l'identifiant Topia haché en MD5 du sondage.
Les votes portant sur des images nécessitent de pouvoir télécharger ces images sur le serveur. Le composant Tapestry Upload permet de faire ceci simplement en le plaçant dans un formulaire et en enregistrant le fichier ainsi soumis (UploadedFile) dans un répertoire du serveur. De plus il est possible de limiter la taille des fichiers dans la classe AppModule (méthode contributeApplicationDefaults()) :
configuration.add(UploadSymbols.FILESIZE_MAX, "500000"); configuration.add(UploadSymbols.REQUESTSIZE_MAX, "5000000");
La miniature correspondant à l'image est créée une fois pour toutes lors de sa soumission afin de ne pas surcharger le serveur en redimensionnant les images à chaque fois qu'un client les consulte. Par contre il n'est pas aussi aisé d'afficher ces images par la suite à cause du fonctionnement de Tapestry. Un composant Image à donc été créé pour remplir cette fonction.
La page de résultats utilise le composant Chart pour afficher les résultats d'un sondage. Ces derniers sont récupérés grâce au service ServiceResults.
Si l'utilisateur qui crée un sondage est enregistré et connecté à son compte, le sondage est relié à son compte dans la base de données. Il pourra alors ultérieurement consulter la liste des sondages qu'il a créé. Ceci lui permet de pouvoir récupérer les URL des pages de vote ou de modification s'il les a perdues.
Les listes de votants peuvent être créées à la main en renseignant les informations de chaque votant mais il est aussi possible d'importer une liste de votants à partir d'un fichier CSV. La lecture d'un fichier CSV est réalisée grâce à la librairie Java OpenCSV qui permet de définir une stratégie de mapping pour convertir directement les champs en objets.
L'utilisateur identifié peut gérer des listes de votants. Lorsqu'il créera un sondage restreint, il pourra utiliser ses listes de votants prédéfinies plutôt que de saisir manuellement la liste de votants pour le sondage.
Tapestry est livré avec de nombreux services qui font partie intégrante du framework, mais il est aussi possible de définir ses propres services. Dans la classe AppModule, qui contient le peu de configuration nécessaire au fonctionnement de Tapestry, on peut lier ses services en complétant la méthode bind(ServiceBinder binder) :
binder.bind(ServicePoll.class, ServicePollImpl.class);
Une fois que Tapestry connaît l'interface et l'implémentation du service, on peut l'injecter dans les pages de l'application et l'utiliser normalement :
@Inject private ServicePoll servicePoll;
