À la découverte de script.aculo.us

Cette série d'articles a pour but de vous faire découvrir les différentes fonctions du framework script.aculo.us.

Dans un premier temps, nous allons voir comment mettre en place le framework dans une page HTML.

1 commentaire Donner une note à l'article (5)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Avant-propos

Avec l'avènement de ce que l'on appelle (avec du reste beaucoup de mal à le définir !) le Web 2.0, les développeurs Web se tournent de plus en plus vers les frameworks JavaScript pour concevoir et dynamiser leurs pages.
Parmi ces bibliothèques, Prototype est particulièrement appréciée. Cependant, Prototype est essentiellement axée vers la simplification de la syntaxe, la navigation dans le DOM, les appels AJAX et surtout la portabilité du code sur différents navigateurs.
Afin d'ajouter du dynamisme et de l'ergonomie aux pages, script.aculo.us a été créée, se basant sur la puissance de Prototype et en y ajoutant de nombreuses fonctionnalités que nous détaillerons par la suite.

Tous les exemples de cette série d'articles sont valides xhtml 1.0 transitional et css 2.1 et ont été testés sous : Internet Explorer 6 et 7, Firefox 2 et 3, Safari 3, Opera 9.6, Netscape 9 et Chrome.

Intégrer script.aculo.us à sa page HTML

La première des choses à faire est bien entendu de télécharger l'archive du framework disponible ici puis de la décompresser !

Pourquoi utiliser script.aculo.us ?

Tout d'abord, avant d'essayer d'aller plus loin, la première question à se poser est la suivante : "Ai-je réellement besoin de cette librairie pour mes pages ?"
En effet, différentes motivations peuvent inciter à utiliser un framework, des bonnes et des mauvaises. Or ces bibliothèques imposent de télécharger (parfois à chaque page en fonction des réglages du serveur et/ou de la configuration du cache du navigateur) jusqu'à 300ko de fichiers, ce qui peut ralentir la navigation sur votre site.

Parmi les bonnes raisons :
  • Utiliser beaucoup de fonctionnalités complexes du framework.
  • Mutualiser des fonctions génériques sur plusieurs pages.
  • Etre à l'aise avec JavaScript, mais vouloir optimiser son code dans un aspect "cross-browser".
  • Savoir faire un ratio facilité de coder / difficulté de reproduire les fonctionnalités.
Parmi les mauvaises raisons :
  • Apprécier un raccourci de code ou une fonctionnalité !
  • Méconnaissance de JavaScript.
  • Croire que le framework vous permettra de surmonter les difficultés à coder.

A titre d'exemple :

 
Sélectionnez

Event.observe(window, 'load', function(){
    $('une_image').setOpacity(0.5);
    $('une_image').observe('mouseover',function(){
        new Effect.Opacity('une_image', {from: 0.5, to: 1});
    });
    $('une_image').observe('mouseout', function(){
        new Effect.Opacity('une_image', {from: 1, to: 0.5});
    });
});

Voir l'exemple

aura le même comportement que

 
Sélectionnez

var IsIE = !!document.all;
function fadePic(elt, debut, fin){
    if(debut == fin){ return false }
    IsIE ? elt.filters[0].opacity=debut : elt.style.opacity=debut/100;
    debut > fin ? debut -= 2 : debut += 2;
    setTimeout(function(){ fadePic(elt, debut, fin); }, 10);
}
window.onload=function(){
    var elt = document.getElementById('une_image');
    if(IsIE){
        elt.style.filter = 'alpha(opacity = 50)';
        elt.filters[0].opacity = 50;
    }
    else{ elt.style.opacity = '0.5'; }
    elt.onmouseover = function(){ fadePic(elt, 50, 100) }
    elt.onmouseout = function(){ fadePic(elt, 100, 50) }
}

Voir l'exemple

Nous voyons bien ici qu'intégrer une librairie comme script.aculo.us (presque 250ko et 8000 lignes de code) n'est pas forcément optimisée pour n'utiliser que quelques fonctions réalisables par soi-même pour peu que l'on maîtrise un minimum JavaScript et la compatibilité des navigateurs !

En revanche, dans de nombreux cas, les fonctionnalités vous aideront à concevoir et coder vos pages avec énormément d'efficacité.

Présentation de l'archive

L'archive fournie dans le lien est supposée contenir les fichiers et dossiers suivants :

Contenu de l'archive
  • 3 fichiers (CHANGELOG MIT-LICENCE et README)
  • Répertoire 'lib' ;
  • Répertoire 'src' ;
  • Répertoire 'test'.

Les fichiers, bien que sans extension, sont des fichiers texte dont je vous invite à prendre connaissance.
Le répertoire 'test' contient des pages HTML permettant de faire tourner des tests unitaires ou fonctionnels.
Le répertoire 'lib' contient la bibliothèque Prototype, elle est indispensable pour pouvoir utiliser script.aculo.us. Pour cet article, c'est la version 1.6.0.3 de Prototype et 1.8.2 de script.aculo.us qui ont été prises comme référence.
Le répertoire 'src' contient les fichiers source de script.aculo.us, organisés par modules.

Les différents modules

Le fonctionnement de script.aculo.us se fait par un système de modules. Chaque module regroupant un ensemble de fonctions d'un même type. L'intérêt de cette structure étant de pouvoir ne charger que les modules dont on a réellement besoin comme nous le verrons au chapitre suivant.
Les différents modules sont les suivants :

Modules script.aculo.us
  • effects.js : gère les fonctions relatives aux effets ;
  • controls.js : gère essentiellement les fonctions d'auto-complétion et de champs éditables ;
  • dragdrop.js : gère les fonctions de glisser déplacer ;
  • slider.js : gère les fonctions de barres de mesure ;
  • builder.js : gère la création d'éléments du DOM ;
  • sound.js : gère l'intégration de sons.

Le fichier unittest.js ne faisant pas à proprement parler partie du framework, il ne sera pas abordé dans cet article.

Le fichier de base du framework, 'scriptaculous.js' ne contient aucune fonction importante. Il n'est en fait qu'un loader utilisé pour vérifier la compatibilité avec la version de Prototype chargée et charger les modules désirés (par défaut, tous les modules). L'originalité de la librairie étant de pouvoir indiquer en paramètre du fichier les modules à installer.

Intégrer le script à la page

Il ne reste donc plus qu'à insérer les scripts dans la page HTML.
Pour cela, nous allons insérer les balises <script> dans le head de notre page.

Contrairement à d'autres frameworks, les différents modules sont indépendants entre eux (à l'exception de controls.js et dragdrop.js qui utilisent des effets de effects.js), ainsi, aucune fonction de script.aculo.us ne nécessite la présence d'un module autre que celui qui la contient.

 
Sélectionnez

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>scripaculous</title>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js"></script>
</head>

Nous avons évoqué la possibilité de ne charger que certains modules, dans ce cas, si vous souhaitez par exemple ne charger que les fichiers effects.js et dragdrop.js, il suffit de remplacer la seconde ligne par :

 
Sélectionnez

<script type="text/javascript" src="js/scriptaculous.js?load=effects,dragdrop"</script>

et le script se charge du reste !

Il est bien évidemment possible de charger directement les scripts, mais d'une part, pourquoi se priver d'une fonctionnalité créée spécialement pour cela et d'autre part, encore une fois, la vérification de la compatibilité Prototype / script.aculo.us est bien pensée pour les "étourdis" !

Il existe une archive très pratique, nommée protopack, qui contient beaucoup de choses utiles :
- Les dernières versions des fichiers ;
- Des versions avec différents niveaux de compression des deux framework (appelées protoculous) ;
- Différentes versions de protoculous intégrant uniquement le fichier effects ;
- Une version faiblement compressée (shrinkvar) de protoculous, facilement éditable pour se créer sa librairie personnalisée.
Cette archive est disponible ici mais ne comprend actuellement que la version 1.8.1 de script.aculo.us.

En conclusion

Maintenant que script.aculo.us est chargé dans votre page, il ne reste qu'à utiliser ses fonctions !
Nous partons ici du principe que vous connaissez les bases de Prototype, si ce n'est pas le cas, je vous invite à prendre connaissance de cet article

Les prochains articles de cette série aborderont les différents modules en détail.

Articles de la série

Remerciements

Un grand merci à Kerod pour sa relecture avisée !

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+