Formation Prototype et Scriptaculous

Prototype est une librairie JavaScript qui regroupe un ensemble de méthodes pour simplifier l’utilisation d’AJAX et du JavaScript en général pour créer des pages WEB hautement dynamiques et compatibles avec les différents naviGusturs du marché. Scriptaculous (script.aculo.us) est une librairie JavaScript basée sur Prototype. Elle permet d’ajouter de nouvelles fonctionnalités de contrôle d’éléments HTML ainsi que des effets visuels à une page WEB. Dans cette formation Prototype et Scriptaculous vous apprendrez à utiliser toute la puissance du WEB 2.0.
A l’issue de la formation Prototype et Scriptaculous vous serez capable de :
– développer plus rapidement la mise à jour partielle ou périodique d’une page (Ajax, XMLHttpRequest)
– Manipuler le DOM afin de récupérer, insérer, ou masquer les éléments HTML des pages de façon plus efficace et avec de nouvelles fonctionnalités
– Utiliser les solutions offertes par Prototype aux incompatibilités entre les naviGusturs (COMPAT),
– Manipuler plus facilement les structures de données JavaScript avec de nouveaux composants comme String, Enumerable, Array
– Gérer les événements HTML à l’aide de la classe Event
– Proposer des effets visuels riches
– Rendre des éléments HTML déplaçables en Drag & Drop
– Utiliser des sliders dans la page HTML
– Proposer l’autocomplétion dans vos pages

Cette formation Prototype et Scriptaculous s’adresse aux développeurs et aux chefs de projets

Seules les notions de base de HTML et CSS sont nécessaires. La connaissance du langage JavaScript et d’un langage serveur (PHP, Java, etc) est un plus mais il faut impérativement connaître au moins un langage de programmation.

Présentation de Prototype

• En quoi Prototype étend le langage Javascript ? Comparaison de code avec et sans Prototype Vue générale des classes Installation de prototype.js

Création de classes avec Prototype

• Héritage – Utilisation de superclass et subclasses Utilisation du mot clé $super Ajout dynamique de méthodes à une classe

Classes générales de Prototype

• Chaînes de Caractères et Nombres (String, Number) Gérer les dates et les heures (Date) Gérer les collections avec la classe Enumerable Manipuler les tableaux avec la classe Array Principes et intérêts du hashage (classe Hash) Intervalles avec la classe ObjectRange Exécution périodique (PeriodicalExecuter) La syntaxe concise et puissante des expressions régulières (RegExp)

Classe Function dans Prototype

• Fonctionnement standard de la classe Function Utilisation du mot clé this Méthodes définies par prototype (bind, wrap, …)

Classe Element, DOM et CSS

• Rappels sur la gestion « classique » du DOM en javascript En quoi Prototype facilite l’utilisation du DOM ? Les apports de l’utilitaire $ et de l’objet Element Mieux gérer les formulaires HTML avec $F et la collection de méthodes Form.Element Création dynamique d’éléments HTML et texte Méthodes d’insertion dans la page Accès direct aux éléments de la page Ajouter nos propres méthodes à la classe Element Gestion des CSS avec Prototype Classe Element.Layout

Gestion des événements avec Prototype

• Gestion des événements sans Prototype Apports de la Classe Event Exemples d’utilisation (déplacement d’un élément dans la page, affichage d’un menu) Classe Event.handler

Ajax et Prototype

• L’objet XMLHttp Request et les naviGusturs Valeur ajoutée de Prototype pour Ajax Les classes Ajax.Request, Ajax.Updater et Ajax.Periodical Updater

Effets visuels avec Scriptaculous

• Aperçu général du framework Scriptaculous Installation de Scriptaculous.js Paramètres généraux des effets visuels Etapes d’exécution d’un effet visuel Synthèse des classes (Effect.Base, Effect.Event, Effet.Opacity, …) Les effets visuels standards (Fade, Appear, BlindUp, Shake, … Influence de l’option transition dans l’effet Création d’un nouvel effet visuel (classe, fonction)

Auto-completion avec Scriptaculous

• Compléter une zone de texte automatiquement grâce à scriptaculous Utilisation de données locales (Autocompleter.Local) Utilisation de données distantes depuis le serveur WEB (Ajax.Autocompleter) Modifier le contenu d’un élément de type INPUT ou Textarea (Ajax.InPlaceEditor) Réaliser des formulaires de données entièrement éditables (liste déroulante, select, Ajax.InPlaceCollectionEditor)

Complements (Drag & drop, Sliders)

• Glisser, déposer des éléments HTML Les Objets Droppables, Draggables, et Sortable Récapitulatif des options les plus utilisées Utiliser un slider (Control.Slider)