prototype et script.aculo.us
| Fiche d’identité | |
|---|---|
| Nom du produit | Prototype |
| Editeur | Logiciel libre créé par Sam Stephenson |
| Date de sortie de la première version | 2005 |
| Numéro de la version étudiée | 1.51 (sortie début 2007) |
| Licence | MIT |
| Navigateurs compatibles | Internet Explorer 6.0 et + / Mozilla Firefox 1.5 et + / Apple Safari 2.0 et + / Opéra 9.25 et + |
| Positionnement | Framework Javascript "pur" |
SYNTHESE
Prototype est une librairie Javascript dite "pure" qui regroupe un ensemble de méthodes de bas niveau pour le développement AJAX avec les standards Javascript et CSS. On qualifie parfois ce type de librairie de moteur AJAX.
ANALYSE
Prototype se base essentiellement sur un modèle objet inspiré de Ruby, et peut être considéré comme une extension native de Javascript.
Toutes les méthodes de Prototype ont l’avantage d’être réunies dans un fichier unique prototype.js, d’un poids relativement important (environ 50 ko). Prototype est disponible en ligne mais également via Subversion
svn co http://svn.rubyonrails.org/rails/spinoffs/prototype/trunk prototype
Sa prise en main est relativement simple, notamment grâce à la présence en ligne de toutes les informations nécessaires à son utilisation (API, tutoriaux...) sur le site officiel en anglais.
Utilisation
Prototype fournit un certain nombre de méthodes très utiles lorsque l’on cherche à créer des pages Web hautement dynamiques. Par exemple, la méthode $() qui enveloppe les noeuds DOM tout en apportant de nouvelles fonctionnalités ou encore l’objet AJAX qui permet de simplifier l’utilisation de XMLHttpRequest et la mise à jour partielle ou périodique d’une page.
On pourra également compter sur des composants de Prototype tels que :
- BASE, qui fournit des méthodes utiles à la programmation Javascript orientée objet,
- COMPAT, qui résout les problèmes de compatibilité entre navigateurs,
- STRING, ENUMERABLE, ARRAY, qui permettent de manipuler plus facilement des structures de données Javascripts,
- DOM, qui permet de récupérer, d’insérer, de masquer les éléments HTML de la page,
- et enfin FORM, EVENT, POSITION, qui fournissent des méthodes pour le contrôle de formulaires, pour la gestion du clavier et le positionnement d’élements HTML.
Exemples Quelques exemples valant souvent mieux qu’un long discours, voici des éléments clés de l’utilisation de Prototype :
Mise en place du framework Prototype :
<script type="text/javascript" src="/path/to/prototype.js"></script>
Utilisation de Ajax.Request qui génère le bon code XMLHttpRequest, suit sa progression (a)synchrone et extrait la réponse serveur pour la traiter :
var laRequete = new Ajax.Request(
'http://monUrl/monFichier.php', {
method: 'get',
parameters: 'maVar=maValeur',
onComplete: afficherReponse
} );
function afficherReponse (requete) {
$('reponse').value = requete.responseText;
}Utilisation de Ajax.Updater qui permet de mettre à jour la page web :
var laRequete = new Ajax.Updater(
'element',
'http://monUrl/monFichier.php', {
method: 'get',
parameters: 'maVar=maValeur',
insertion: Insertion.Before
} );Utilisation de Ajax.PeriodicalUpdater qui permet de relancer automatiquement la requête Ajax :
var laRequete = new Ajax.PerioducalUpdater(
'element',
'http://monUrl/monFichier.php', {
method: 'get',
parameters: 'maVar=maValeur',
insertion: Insertion.Before,
frequency: 5,
decay: 1.3
} );Extension
Utilisé seul, Prototype permet juste une simplification d’Ajax et du Javascript en général, cependant Prototype a la particularité d’être à la base d’autres frameworks comme par exemple Script.aculo.us.
| Fiche d’identité | |
|---|---|
| Nom du produit | Script.aculo.us |
| Editeur | Logiciel libre créé par Thomas Fuchs |
| Communauté | voir le site |
| Date de sortie de la première version | Juin 2005 |
| Numéro de la version étudiée | 1.8 (sortie début 2008) |
| Licence | MIT |
| Positionnement | Framework Javascript de composants |
SYNTHESE
Script.aculo.us (également écrit "Scriptaculous") est une librairie Javascript dite "de composants", basée sur Prototype. Scriptaculous permet d’ajouter de nouvelles fonctionnalités de contrôle d’éléments HTML, ainsi que des effets visuels à une page Web.
ANALYSE
Script.aculo.us est par définition une librairie Javascript de composants, et se décompose donc en plusieurs fichiers Javascript séparés : scriptaculous.js faisant lui même appel à builder.js, effects.js, dragdrop.js, controls.js, slider.js et enfin sound.js.
Tous ces fichiers sont réunis dans un fichier Zip téléchargeable ici.
Script.aculo.us se basant sur Prototype, il est primordial de l’avoir au préalable installé, il faut donc bien prendre en compte que l’intégration de Script.aculo.us rajoute environ 100 ko au chargement du site Web. Cependant, il est tout à fait possible de charger uniquement les fichiers dont on souhaite utiliser les objets.
Utilisation
Le site de Script.aculo.us fournit quelques exemples d’utilisation des différents composants ainsi qu’une documentation en anglais.
Script.aculo.us permet notamment :
- d’appliquer à des éléments HTML de nombreux effets spéciaux via le composant effects.js
- de construire dynamiquement des éléments HTML du DOM via le composant builders.js
- de rendre des éléments HTML déplaçables en Drag’n’Drop (cliquez-glissez-déposer) via le composant dragdrop.js
- de rendre des éléments HTML glissables via le composant sliders.js
Scriptaculous permet également d’implémenter l’auto-complétion ou encore une zone éditable de texte via AJAX et le composant controls.js
Exemples
Mise en place du framework Script.aculo.us :
<script src="path/to/prototype.js" type="text/javascript"></script>
<script src="path/to/scriptaculous.js" type="text/javascript"></script>Script.aculo.us propose, par le biais de la librairie effects.js une collection d’effets graphiques utiles dans les projets web : apparition/disparition d’éléments, modification de propriétés CSS, déplacement d’objets, etc. :
// apparition/disparition d'éléments
new Effect.Toggle("id_élément");
// modification de propriétés CSS
new Effect.Opacity("id_élément",
{duration:0.5, from:1.0, to:0.7});
// déplace un élément verticalement de 10px et horizontalement de 20px
new Effect.MoveBy("id_élément", 10, 20,
{duration:3, fps:25, from:0.0, to:1.0});Script.aculo.us permet également de générer de nouveaux éléments HTML du DOM en s’appuyant sur la librairie builder.js comme par exemple la création d’un nouveau paragraphe à l’intérieur d’un élément existant de la page Web :
var mon_paragraphe = Builder.node("p",
{className:"classe_du_paragraphe"},
"contenu du paragraphe");
$("id_élément_existant").appendChild(mon_paragraphe);Certains éléments d’une page Web peuvent être déplaçables grace à un comportement appliqué par la librairie dragdrop.js :
// rend un élément déplaçable
new Draggable("id_élément");
// rend les éléments d'une liste à puce interchangeable
Sortable.create("id_maListe");
Script.aculo.us offre également la possibilité de faire glisser un élément d’une page web grâce à la librairie silder.js :
new Control.Slider("id_élément_glissant","id_élément_contenant");
L’utilisation de la librairie controls.js permet quand à elle de modifier directement le contenu d’un élément d’une page Web en réalisant par exemple une zone de texte directement éditable :
new Ajax.InPlaceEditor("id_élément", "url_fichier_sauvegarde_modification");
Enfin, la librairie controls.js de Script.aculo.us permet de simplifier l’utilisation d’Ajax, notamment dans la mise en place de la fameuse auto-complétion d’un champ de recherche :
new Ajax.Autocompleter("id_du_champ_recherche", "id_élément_à_compléter", "url_fichier_fournit_réponse");
PERSPECTIVES
Script.aculo.us est un outil puissant offrant des multiples possibilités. Sa mise en place et son utilisation relativement simple en font un des frameworks Javascript les plus utilisés, malgré son poids relativement important (environ 100 ko). Enfin, sa récente mise à jour (janvier 2008) indique qu’il n’a pas encore fini de faire parler de lui.
Pour en savoir plus, nous vous invitons à lire notre livre blanc au sujet des frameworks Javascript.