Effets javascript avec Prototype et Scriptaculous

NiKo — Sun, 19 Mar 2006 13:19:21 +0000

On a vu fleurir moult trolls velus à propos du web 2.0 et sa débauche d'AJAX et de javaScript inaccessibles, je ne les nourrirai pas ici. Par contre et pour ceux que ça interesse, les librairies prototype et script.aculo.us proposent des outils et effets très sympathiques. Voici quelques exemples très simples d'utilisation.

Installation

Le plus simple est de récupérer la dernière version de scriptaculous qui contient elle même une version toujours récente de prototype. Ceci fait, decompactez l'archive et copiez les librairies dans un répertoires de votre serveur web. Pour ma part, je mets tout ça dans un répertoire js. Il ne reste qu'à les appeller dans l'entête de votre document HTML :

<html>
  <head>
    <title>Mon test</title>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js"></script>
  </head>
  ...

Utilisation

Réalisons un petit document HTML pour commencer à utiliser quelques effets scriptaculaires :

<html>
  <head>
    <title>Mon test</title>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js"></script>
  </head>
  <body>
    <h1 id="title">
      <a href="#">Lorem ipsum dolor sit amet</a>
    </h1>
    <p id="mytext" style="display:none">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut 
    fringilla arcu at turpis. Fusce libero. Morbi libero dolor, 
    vestibulum id, facilisis quis, malesuada vel, mi. Curabitur 
    rutrum sapien at ante. Sed consectetuer accumsan sapien. 
    Suspendisse scelerisque malesuada magna. Ut laoreet, sapien 
    facilisis venenatis pharetra, metus libero malesuada purus, id 
    ultrices dolor odio id nunc. Nullam vestibulum. Vivamus lectus 
    lacus, volutpat ut, varius sit amet, gravida at, nisi. 
    Suspendisse sodales auctor mi. Mauris est.</p>
  </body>
</html>

Vous noterez que ce document fort simple n'affiche pour l'instant que le titre du document - nanti d'un lien hypertexte vide - du fait du style display:none appliqué au paragraphe principal. Pour que le texte de l'article apparaisse en fondu lors d'un clic sur le titre, il suffit d'utiliser ce simple appel javascript sur le lien de la balise de titre :

<h1 id="title">
  <a href="#" onclick="new Effect.Appear('mytext', 1)">Lorem ipsum dolor sit amet</a>
</h1>

Magique non ? Simple, assurément. La méthode Appear() de l'objet Effect accèpte deux arguments : le premier est l'identifiant unique de l'objet DOM de la page courante (dans notre exemple, l'id mytext est attribué à notre paragraphe). Le second paramètre est la durée en secondes de l'effet. Amusez-vous à en modifier la valeur et à tester le résultat.

De la même manière, vous pouvez appliquer d'autres effets à ce pauvre bloc de texte ; pour en tester une grande partie, ajoutez cette portion de code à notre page de test :

<p>
  <a href="#" onclick="new Effect.BlindDown('mytext', 1)">BlindDown</a> |
  <a href="#" onclick="new Effect.BlindUp('mytext', 1)">BlindUp</a> |
  <a href="#" onclick="new Effect.Highlight('mytext', 1)">Highlight</a> |
  <a href="#" onclick="new Effect.Grow('mytext', 1)">Grow</a> |
  <a href="#" onclick="new Effect.Shrink('mytext', 1)">Shrink</a> |
  <a href="#" onclick="new Effect.Squish('mytext', 1)">Squish</a> |
  <a href="#" onclick="new Effect.SwitchOff('mytext', 1)">SwitchOff</a> |
  <a href="#" onclick="new Effect.Shake('mytext', 1)">Shake</a> |
  <a href="#" onclick="new Effect.Pulsate('mytext', 1)">Pulsate</a> |
  <a href="#" onclick="new Effect.Fold('mytext', 1)">Fold</a> |
  <a href="#" onclick="new Effect.DropOut('mytext', 1)">DropOut</a> |
  <input type="button" value="Reset" onclick="new Effect.Appear('mytext', 1)" />
</p>

Voila une page vous permettant de tester les exemples :

Page de démonstration des différents effets

Notez également la possibilité d'utiliser un méthode de scrolling doux lors de la navigation au sein d'une même page grâce à l'utilisation d'ancres nommées, et ce grâce à l'effet ScrollTo : encore une fois, un exemple vaut mieux qu'un long discours :

Exemple de scrolling fluide entre ancres nommées

La syntaxe de l'appel à cette fonction est extrêmement simple :

<a href="#nav1" onclick="new Effect.ScrollTo('nav1',{duration:1});return false;">Lorem ipsum dolor sit amet</a>

Vous l'aurez compris, il faut passer en premier argument l'id DOM que vous ciblez (qui fera office d'ancre nommée), et en second paramètre la durée du défilement.

Vous trouverez sur le wiki officiel de la librairie une liste complète d'exemples d'utilisation des effets combinés.

Et l'accessibilité dans tout ça ?

L'influence de l'utilisation d'effets javascript sur l'accessibilité n'est que de votre ressort. Dans notre exemple précédent, la page est potentiellement inaccessible puisque notre paragraphe mytext possède un attribut de style display:none, non lu par quelques lecteurs d'écran du marché. Qu'à cela ne tienne, il nous faut impérativement gérer le contenu de l'attribut href de nos balises de liens utilisant javascript, de manière à ce que javascript ne soit pas nécessaire à la consultation des informations et qu'un clic sur le lien nous amène à une page affichant le contenu de notre paragraphe. Par exemple, on pourrait imaginer :

<a href="afficher_article.php?full=1" onclick="new Effect.Appear('mytext', 1)">Test d'accessibilit&eacute;</a>

Parfait, notre lien est cliquable et nous redirige vers une autre page. Ah oui, mais nous avons un problème : du coup ce lien prend la main sur notre effet javascript... Qu'à cela ne tienne, le problème est résolu en renvoyant la valeur false lors de l'execution de l'action clic sur le lien :

<a href="afficher_article.php?full=1" onclick="new Effect.Appear('mytext', 1);return false">Test d'accessibilit&eacute;</a>

AJAX rend vos pages plus brillantes

Prototype et Scriptaculous proposent des outils qui vous simplifient la vie pour faire de l'AJAX. Par exemple, la fameuse autocompletion du champ recherche relève du jeu d'enfant. Imaginons que vous souhaitiez proposer l'autocompletion d'un champ de formulaire pour le choix d'un prénom. Voici le formulaire de base :

<form action="" method="post">
  <label for="prenom">Quel est votre pr&eacute;nom ?</label>
  <input type="text" size="30" name="prenom" id="prenom" />
</form>

Scriptaculous propose un objet Ajax très pratique et disposant nativement d'une méthode Updater() permettant de s'acquitter de la tâche qui nous interesse. Voici le code final :

<form action="" method="post">
  <label for="prenom">Quel est votre pr&eacute;nom ?</label>
  <input type="text" size="30" name="prenom" id="prenom" />
  <div id="prn_update"></div>
</form>
<script type="text/javascript">
new Ajax.Autocompleter (
  'prenom',      // ID of the source field
  'prn_update',  // ID of the DOM element to update
  'prenoms.php', // Remote script URI
  {method: 'post', paramName: 'prenom'}
);
</script>

Je pense que le code parle de lui-même, mais au cas où cela ne soit pas clair pour tout le monde, détaillons ensemble les différents éléments :

<div id="prn_update"></div>

Cet élément sera le receptacle de nos appels asynchrones au script prenoms.php ; c'est dans cet élément que seront inscrites les informations reçues, en l'occurence ici la liste des prénoms correspondants aux lettres saisies dans l'élément de formulaire prenom.

new Ajax.Autocompleter (
  'prenom',      // ID of the source field

Le premier argument de notre objet sera l'identifiant DOM du champ de formulaire à qui l'on destine l'autocompletion.

  'prn_update',  // ID of the DOM element to update

Ce deuxième argument est l'identifiant DOM du receptacle des informations reçues.

  'prenoms.php', // Remote script URI

Le troisième argument n'est autre que l'URI du script qui nous fournira nos données. A titre d'exemple, pour notre liste de prénoms, le script PHP pourrait être :

<?php
$p = array("Aaron", "Abdallah", "Abdel", "Vous pouvez completer cette liste a votre guise...", "Yvon", "Zoubida", "Zouhir", "Zorobabel");
$q = $_POST['prenom']; $i = 0;
if ($q != "") {
  echo '<ul>';
  foreach($p as $prn) {
    if (substr(strtolower($prn),0,strlen($q)) == strtolower(stripslashes($q))) {
      echo '<li><a href="#" onclick="return false">'.htmlentities($prn).'</a></li>';
      if (++$i >= 10) die('<li>...</li></ul>');
    }
  }
  echo '</ul>';
}
?>

Enfin, le quatrième argument de notre objet Ajax.Updater est un objet javascript de paramétrage de la requête :

  {method: 'post', paramName: 'prenom'}
);

La propriété method spécifie la méthode HTTP que vous souhaitez utiliser pour interroger votre script (dans notre cas, post) et paramName déclare le nom de la variable à passer au script pour l'interrogation ; dans notre cas nous passons prenom qui sera ainsi correctement interprétée et traitée par notre script PHP en utilisant $_POST['prenom'].

Bien évidemment, il est possible de grandement améliorer l'esthétique du menu généré grâce à l'utilisation de règles CSS appropriées. Par exemple :

  #prn_update {
    border: 1px solid #999;
    background: #fafafa;
  }
  #prn_update ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #prn_update a {
    display: block;
    padding: .2em .3em;
    text-decoration: none;
    color: #333;
  }
  .selected {
    background: lightyellow;
  }

Enfin, voila un lien vers l'exemple en live :

Test de l'autocompletion

Conclusion

Nous avons à peine survolé un dixième des capacités de ces librairies au potentiel pour le moins énorme. Et comme vous avez pu le constater, la facilité de mise en place et d'utilisation sont au rendez-vous, les résultats spéctaculaires et améliorant de façon significative la navigation et la consultation des informations.