http://formationajax.pbwiki.com

Configuration initiale

Configuration Teamlog

Configuration Ateliers Nomades

Mise en place des outils nécessaires au développement AJAX (1 jour)

• Présentation d’AJAX et de l’objet XmlHTTPRrequest
• Présentation du mécanisme du Web 1.0
• Les concepts d’Ajax
• A quoi sert AJAX ? Quelques exemples
• Le protocole HTTP pour Ajax
• L’objet XmlHTTPRequest
• Quelques exercices
• Cas pratique : Google suggest

• Redécouverte de Javascript
• Rappels sur le langage
• Concepts de la programmation orientée objet prototypé
• Présentation de quelques frameworks Ajax
• Utilisation de Prototype et Script.aculo.us
• Gestion du format de la réponse
• Validation côté serveur
• Google suggest : plus simple avec les frameworks

• Apprentissage du modèle DOM et des CSS avancés
• Initiation à l’arbre DOM à l’aide de l’inspecteur DOM
• Manipulation du modèle à partir de Javascript
• Construction d’une feuille de style enrichie

Cas pratique – réalisation d’un portail (1 jour)

• Présentation du cas pratique
• Maquette du portail
• Maquette HTML du portail
• Habillage CSS
• Lien ajout de contenu, titre, zones de réception des blocs
• Titre éditable en ligne
• Définition d'une classe pour notre application
• Transformation d'une partie du contenu suite à un évènement
• Utilisation du framework Prototype
• Mémorisation du titre dans un cookie
• Prototypage des Date pour nous faciliter la tâche
• Lecture / Ecriture dans un cookie avec date d'expiration
• Construction de la popup 'ajouter du contenu'
• Création d'une nouvelle classe pour la popup
• Maquette HTML de la popup dans un fichier séparé
• Ouverture, déplacement , fermeture de la popup
• Définition du template bloc de contenu
• Création d'une nouvelle classe pour la popup
• Maquette HTML de la popup dans un fichier séparé
• Ouverture, déplacement , fermeture de la popup
• Implémentation du bloc spécifique pour leMonde.fr
• Création d'une sous classe de la classe Bloc spécifique pour leMonde
• Mémorisation des informations nécessaires à la connexion à leMonde dans notre contrôleur d'application
• Analyse du fichier XML récupéré et affichage
• Ajout du bloc leMonde à partir de la popup
• Définition des zones de réception des intitulés de bloc en tant que zone droppable
• Mise en place de la faculté d'être déplacé vers les zones pour les items de notre popup
• Connexion de l'évènement onDrop avec l'instanciation de notre bloc leMonde
• Création de deux autres types de bloc : la météo et Flickr
• Ananlyse des fichiers XML récupérés
• Ajout des infos de connexion aux blocs dans le blocManager
• Rendre générique le drop des items en fonction de leur type de bloc associé

Scroll infini et slider (0,5 jour)

• Récupération asynchrone partielle des donées
• Transformer une chaine TXT en JSON
• Mettre en place un appel au webservice

• Un Hack pour la concision du code !
• Garder un pointeur vers un objet local créé par une requête AJAX
• Gérer un timeout sur les exécution d'une fonction répétitive

• Mise en place du scroll infini
• Gérer l'apparition en HTML du scroll
• Tester les déplacements dans le scroll

• Mise à jour des 10 hôtels affichés en fonction de la position du scroll
• Travailler avec le scroll
• Trouver un bon compromis entre requêtes serveur et fluidité

• Mise en place d'un slider pour filtrer les résultats sur le prix
• Control.Slider pour définir un élement qui peut se déplacer dans son parent
• Attention à la syntaxe !!

• Plug du slider sur le scroll infini
• Prise en compte du critère de prix
• Connexion des différentes parties du système

Présentation et mise en œuvre du toolkit Dojo (0,5 jour)

• Présentation de Dojo et de notre cas pratique
• Carte d’identité du toolkit
• Quelques exemples
• Présentation de notre cas pratique : un portail RH

• Architecture du système
• Squelette graphique du portail
• Arborescence, Onglets
• Définition du système de stockage des données

• Connexion des pièces
• Intéraction client-serveur
• Lecture des données, écriture des modifications

• Ajout de modules Dojo
• Gestion de fiche client, widget personnalisé
• Boutons, menus déroulants Dojo
• SVG comme outil de reporting