À la découverte de 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 ;
• êre à 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.

À titre d'exemple :

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

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é.

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

Contenu de l'archive :

• trois 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.

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'autocomplé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.

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.

<!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 :

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

et le script se charge du reste !