RemyA's

Si vous voulez aller passer quelques jours aux calme dans le Sud-Ouest de la France, je vous conseille de vous installer à Pré-Poussou, dans l’arrière-pays Agenais. Il y fait très beau, c’est idéalement placé pour les excursions à la mer ou à la campagne. Pour en savoir plus, vous pouvez aller sur Pre-Poussou.fr.

La raison pour laquelle j’en parle est que j’ai repris les pages de ce site (pour aider) et que j’ai pu utiliser des composants du framework Yahoo! User Interface (YUI). Je n’ai pas cherché par ce moyen à rajouter des gadgets qui attireront l’oeil sans donner sa place au contenu, juste à répondre à deux "petits" besoins de la manière la plus simple possible: remplacer un widget flash de défilement d’images et afficher un calendrier des disponibilités. C’est pourquoi j’ai fait appel au widget Carousel et au widget Calendar. Ces deux widgets sont au final assez facile à utiliser malgré leur complexité et je suis assez content du résultat.

En premier lieu, la documentation est vraiment bien faite et les exemples sont tous liés au YUI Dependency Configurator, ce qui permet de les mettre en pratique très rapidement.

L’avantage du Carousel de YUI, par rapport à un widget Flash qui fournira peut-être plus d’effets visuels, est de permettre la gestion du contenu de ce carousel à l’aide d’une simple liste (UL/LI) et de permettre d’utiliser toute la puissance du HTML et du CSS pour ce contenu. Je parle d’images bien sûr, comme dans mon cas, mais aussi de textes et liens permettant de mettre en avant plus facilement des contenus sur d’autres parties d’un site : c’est ce que font aussi bien Kelkoo.fr ou Twenga.fr sur leurs home pages (avec des versions plus ou moins customisées de YUI). L’un des pièges à éviter est une mauvaise (ou non-) définition de la taille des éléments défilant dans le carrousel. D’un navigateur à l’autre, le calcul de la taille peut-être différent (pensez polices de caractères) et il vaut mieux être strict sur la taille des contenants (que ce soit un IMG ou un DIV) afin d’éviter de casser le défilement. Le seul ennui que j’ai pu avoir est par rapport à la navigation : le mécanisme passe d’un système de « petits ronds cliquables » à une liste déroulante à partir d’un certain nombre d’items, et ce nombre n’est pas configurable par le mécanisme documenté. J’ai dû utilisé le bout de code suivant pour m’en sortir, tout en m’assurant que la liste déroulante soit compréhensible par un français.
    carousel.CONFIG.MAX_PAGER_BUTTONS = 9;
    carousel.STRINGS.PAGER_PREFIX_TEXT = "Photo";
Malheureusement, ceci n’étant documenté nulle part, il y a un risque que cela ne marche plus à partir de la prochaine version de YUI.

Pour ce qui est du Calendar, là aussi, la mise en place a été simple. Les possibilités de configuration étant nombreuses, j’ai pu sans problème définir des plages de temps "valides", une présentation par trimestre et la traduction des différentes chaînes de caractères nécessaires. Pour la présentation des jours en fonction de la disponibilité, j’ai créé une fonction javascript "renderer" que j’ai soumis à l’objet Calendar pour être utilisée sur une certaine période de temps. Cette fonction va simplement vérifier dans un hash array que la date qu’on lui fournie en paramètre est ou non disponible et ajoute une class CSS à la cellule du calendrier qu’on lui a aussi passée en paramètre. La documentation YUI donne des exemples de ce type de manipulation et cela marche très bien. Le hash array des dates non-disponibles est construit à la création du Calendar à l’aide d’un appel XmlHttpRequest synchrone (je ne voulais pas que le calendrier apparaisse avec des jours disponibles alors qu’ils ne l’étaient pas réellement, ce qui aurait été le cas en asynchrone) vers un web service renvoyant du JSON. J’ai testé les événements associé au Calendar pour faire une mise à jour des données de disponibilités en fonction des mois affichés, dans un esprit très ajaxien, sans pouvoir trouver mon bonheur : l’événement beforeRender est déclenché pour chaque mois (j’aurai préféré pour un trimestre) et l’événement changePageEvent semblait ne jamais être déclenché.

Pour la gestion des disponibilités, j’ai suggéré à « mon client » d’utiliser Google Calendar car celui-ci permet de partager une version Free-Busy d’un agenda, et qu’il peut-être utilisé pour bien d’autres choses d ela vie courante. J’ai choisi d’utiliser le format iCal et j’ai trouvé un parser PHP très utile : iCalcreator. Il suffisait de faire un simple script PHP qui parse le contenu récupéré avec l’URL iCal de Google Calendar et de créer le json adéquat. Il ne faut pas oublier un détail important quand on crée des événements dans l’agenda Google : cocher l’option Occupé pour cet événement, sinon il n’apparaîtra pas les informations free-busy.