CTP2013 Fichier - Moodle EC Lille

CTP Web2 2013-2014 : myASB : Asynchronous Selection Block
•
•
•
•
•
2 heures, tous documents autorisés
Il sera tenu compte dans l’évaluation de la rigueur de la solution proposée (déclarations des variables,
tests aux limites, emploi de structures de contrôle et d’algorithmes justes, modularité, emploi de balises
logiques uniquement, respect des règles XHTML) ainsi que de la clarté et de la lisibilité du code
(commentaires, indentation, séparation des couches...)
Notez également que seules les réponses aux questions indiquées dans le sujet seront évaluées. Les
fonctionnalités supplémentaires non demandées (menu, esthétique, reprise de TP précédents) ne seront
pas récompensées. Par contre, le sujet est laissé suffisamment libre pour que chacun s'exprime en
mobilisant ses connaissances.
Vous déposerez sur moodle une archive contenant les fichiers développés, ainsi qu’un fichier texte
reprenant les réponses aux questions et vos conclusions sur le TP (quelles questions avez-vous traitées,
éventuellement avez-vous codé différemment de ce qui est demandé). Vous déposerez également une
notice indiquant comment utiliser la solution fournie.
Toute tentative de plagiat d'internet, de réutilisation de code produit par un camarade sera détecté et
sanctionné. Si vous utilisez des fonctions produites lors d'un TP précédent, indiquez-le dans une
commentaire au début de cette fonction.
NB : Il est FORTEMENT recommandé de lire le sujet du début à la fin AVEC ATTENTION avant de
commencer à rédiger, de façon à anticiper les traitements à réaliser.
Préambule
Le but de ce TP est de concevoir un composant d'interaction qui servira à améliorer l'ergonomie des
formulaires. Celui-ci permettra de sélectionner une image parmi un ensemble d'images, comme par exemple des
avatars (les fichiers gif correspondants sont fournis sur moodle). Au départ, un avatar par défaut sera affiché. Si
l'utilisateur clique sur celui-ci, une mini-galerie d'images s'affichera permettant à l'utilisateur de choisir un autre
avatar parmi les avatars proposés. Il pourra cliquer sur l'avatar qu'il souhaite, et la mini-galerie se repliera en ne
laissant voir que l'avatar qu'il a choisi. Un champ de formulaire sera mis à jour automatiquement pour témoigner
de la modification de la sélection et permettre d'envoyer l'avatar choisi à la page cible du formulaire utilisant
notre plugin.
Nous développerons notre composant de manière à permettre son utilisation dans des contextes aussi généraux
que possible, à la manière des plugins jqueryUI.
•
•
•
•
Comme la plupart des plugins jquery UI, ce composant sera placé à l'intérieur d'un formulaire sous la
forme d'un simple div portant un identifiant de votre choix.
Si l'utilisateur décide de s'en servir comme un bloc de sélection asynchrone, il devra charger
successivement la librairie jquery (que nous vous invitons à télécharger sur le web 1) et un fichier
javascript que vous devez développer, nommé « asb.js ».
L'utilisateur devra aussi charger un fichier nommé « asb.css » contenant les styles nécessaires à notre
plugin. Ce fichier de style définira au moins les propriétés suivantes, dans des classes :
▪ La taille en pixels du div lorsqu'il se transforme en mini-galerie
▪ La largeur et la hauteur de chaque image cliquable
Ce fichier asb.js fournit une fonction javascript nommée « asb », prenant deux arguments :
◦ l'identifiant d'un bloc div qui deviendra interactif (notre composant d'interaction précédent)
◦ un fichier JSON de configuration du composant, qui pourra contenir les champs suivants :
▪ idCible : l'id du champ de formulaire qui sera mis à jour à chaque changement de sélection
d'une image
▪ dataSrc : l'url de la page côté serveur où récupérer les éléments à sélectionner
▪ nbEltsParLigne : un entier indiquant combien d'images par ligne doivent s'afficher dans la
mini-galerie
▪ fnCritere : une fonction renvoyant un objet JSON2 permettant d'indiquer à la page dataSrc un
critère de recherche des éléments à sélectionner. Par exemple, cette fonction pourrait indiquer
si l'utilisateur qui veut choisir un avatar est une femme ou un homme, ce qui réduirait les choix
d'avatar possibles.
1 Attention : pour les rares utilisateurs de IE, on rappelle que jquery2 n'est pas compatible avec les versions
IE6, 7 et 8...
2 On rappelle que si vous utilisez les fonctionnalités AJAX de JQUERY, comme par exemple les fonctions
$.get, $.getJSON, $.ajax... les données à envoyer au serveur sont à encoder en JSON ! Autant faire préparer
cet objet par une fonction dédiée...
Des valeurs par défaut pour ces propriétés doivent être prévues dans votre code, au cas où
l'utilisateur ne souhaiterait pas les remplir toutes lui-même3.
Lorsque l'utilisateur appelle la fonction asb en lui passant l'identifiant d'un div, celle-ci appelle une
première fois la page dataSrc pour récupérer un avatar par défaut correspondant au critère renvoyé
par la fonction fnCritere.
◦ Une fois le chemin de l'avatar par défaut récupéré, celui-ci est affiché dans le div correspondant et
le champ de formulaire prévu se remplit.
Lorsque l'utilisateur clique sur l'Avatar par défaut, et ensuite à chaque fois qu'il cliquera sur l'Avatar
affiché, une nouvelle requête asynchrone est envoyée à la page dataSrc pour récupérer la liste des
avatars correspondant au critère renvoyé par la fonction fnCritere.
◦ Une fois la liste des chemins des avatars reçue, la mini-galerie se développe à l'intérieur du div,
pour afficher les images correspondant à ces chemins.
◦ L'utilisateur peut cliquer sur l'une des images. Dans ce cas, la mini-galerie se replie, l'image
sélectionnée est la seule qui reste affichée dans le div, le champ de formulaire adéquat se complète.
Il ne reste plus qu'à soumettre les données !
[Optionnel] Lors l'exécution d'une requête asynchrone vers la page dataSrc, une image de chargement
est placée au dessus du div le temps que le serveur réponde, pour indiquer à l'utilisateur que quelque
chose se passe.
◦
•
•
•
Nous vous recommandons fortement de copier/coller ces éléments de cahier des charges en tant que
commentaires dans votre code pour faciliter le développement.
Travail demandé
1.
Créer les fichiers « asb.js », « asb.css » et une page dénommée « ctp.html » appelant ces fichiers.
2.
[Couche Structure] Créer un formulaire basique contenant un div auquel vous donnerez un identifiant
bien choisi, et quelques champs dont :
• Celui qui sera contrôlé par notre plugin
• Un champ permettant de choisir le sexe de l'utilisateur
3.
[Couche Présentation]
• En attendant d'avoir une couche de fourniture de données fonctionnelle, créez à la main
quelques balises images dans votre div pour pouvoir le styliser en mini-galerie.
• Rédigez la feuille de style permettant de styliser votre div sélection de manière esthétique
lorsqu'il est déplié ou replié (il ne contient alors qu'une image).
4.
[Couche Interaction]
• Rédiger une fonction chargée de consulter la valeur du champ 'sexe' et de renvoyer un objet
JSON indiquant le sexe de l'utilisateur.
• Rédiger le code de la fonction asb. Cette fonction doit :
• Prévoir des valeurs par défaut pour les propriétés de l'objet de configuration passé en
deuxième argument de la fonction asb.
• Définir de nouveaux gestionnaires d'événement pour le clic sur une image lorsque la minigalerie est dépliée et lorsqu'elle est repliée :
◦ repliée, le clic sur la seule image affichée appelle une fonction de récupération de
données qui entraînera le développement de la mini-galerie
◦ dépliée, le clic sur l'une des images de la galerie la sélectionne, c'est à dire replie la
mini-galerie, et met à jour le champ de formulaire piloté par notre plugin
• Déclencher une première requête asynchrone pour récupérer l'avatar initial
5.
[Couche Fourniture de données] Créer une page serveur dénommée data.php permettant de lister les
avatars masculins ou féminins en fonction d'une chaîne de requête baptisée « sexe ». La page data
cherchera les fichiers avatar dont le nom commence par un 'F' pour les avatars féminins, et tous les
autre sinon. Elle renverra les chemins des fichiers image trouvés sous la forme d'un objet JSON. On
pourra se resservir du code php rédigé à l'occasion du TP1 sur les galeries (fonctions fopen, readdir …)
6.
[Couche Intégration] Rédiger le code des fonctions callback appelées lorsque les réponses vous
parviennent du serveur.
7.
Discuter des performances de votre approche et proposer des solutions pour améliorer les choses.
3 C'est tout l'intérêt d'utiliser un objet de configuration plutôt qu'une liste d'arguments !