dom:loaded : l’évènement personnalisé de Prototype

Quoi de plus naturel que de présenter le seul évènement personnalisé de Prototype, mais pas des moindres : dom:loaded. Cet évènement est transmis par Prototype lorsque l’arbre DOM est chargé, ce qui permet de lancer des actions javascript sans avoir besoin d’attendre le téléchargement des éléments « lourds » de la page (images, flash, …). Son utilisation est très simple, puisqu’il suffit de placer un écouteur comme pour n’importe quel autre type d’évènement :

function doAnything( event ) {
  // faire quelque chose
}
document.observe( 'dom:loaded', doAnything );

Dans quel cas utiliser des évènements personnalisés ?

Dans de nombreux développement basés sur javascript, on est souvent habitué à utilisé des fonctions de callback, qui permettent d’utiliser une fonction spécifique à un moment particulier du code. D’ailleurs bien souvent, cette fonction de callback est nécessaire au bon déroulement de l’application.

Dans d’autres cas, on peut préférer avertir qui veut bien que telle action s’est déroulée, libre aux autres scripts d’intercepter cette information et d’en faire ce que bon lui semble !

Prenons l’exemple d’un script générique permettant d’afficher ou de cacher un bloc selon son état :

function toggleElement( element ) {
  element = $( element );
  if( element.visible() ) {
    element.hide();
    element.fire( 'element:hided' );
  }
  else {
    element.show();
    element.fire( 'element:showed' );
  }
}

On pourrait avoir aucun ou mille autres scripts qui auraient la possibilité d’utiliser les évènements transmis pour effectuer des opérations quelconques :

$( 'elementId' ).observe( 'element:showed', function( event ){
  // doAnything
});
$( 'elementId' ).observe( 'element.hided', function( event ){
  // doAnything
});
toggleElement( 'elementId' );

Pour vous procurer la dernière version de Prototype,  rendez-vous sur la page de téléchargement.

La fonction $() : la base de Prototype

Prototype défini la fonction fondamentale $(). Pour bon nombre de débutants, cette fonction tend à être un raccourci du classic document.getElementByID(); si connu. Il n’en est rien !

Certes, elle réalise le même travail qui est de récupérer l’élément unique de la page ayant pour valeur d’attribut id le paramètre passé à la fonction :

<div id="monDiv">...</div>
<script type="text/javascript">
// Javascript standard
var monDiv = document.getElementById( 'monDiv' );
// Avec Prototype
var monDiv = $( 'monDiv' );

On a effectivement dans notre variable monDiv l’élément div sur lequel on peut effectuer des opérations grâce à javascript. Mais le fait de l’avoir récupéré avec la fonction de Prototype a permis de lui attribuer toutes les fonctionnalités offertes par le Framework, qui sont, je vous l’assure, aussi nombreuses que puissantes :

// Cacher l'élément
monDiv.style.display = 'none'; // Standard
monDiv.hide(); // Prototype
/* Facile, je l'accorde ! */
// Afficher l'élément
monDiv.style.display = 'block; // Standard
monDiv.show(); // Prototype
/* Aussi simple ! */
/* Affiche ou cache un élément
* selon son état actuel
*/
function myToggle( el ) {
el = document.getElementById( el );
if( 'block' === el.style.display ) {
el.style.display = 'none';
}
else {
el.style.display = 'block';
}
}
// Prototype
monDiv.toggle();
<div id="unDiv">...</div>
<p id="unP">...</p>
<ul id="unUl"></ul>
myToggle( 'unDiv' );
myToggle( 'unP');
myToggle( 'unUl' );
// Prototype
$( 'unDiv', 'unP', 'unUl' ).invoke( 'toggle' );
/* Ah ouai, quand même! */

Bien sûr, ces exemples ne sont là que pour vous présenter rapidement les fonctionnalités de Prototype et j’aurai tout le loisir de vous en proposer des biens plus élaborés afin de vous persuader de l’utilité d’une telle bibliothèque!

$$(), presque comme $() … mais en mieux!

la fonction $$() de Prototype permet elle aussi de récupérer facilement des éléments du DOM. Sa particularité et qu’au lieu de lui passer l’identifiant d’un élément HTML, on lui passe directement un sélecteur CSS. Je vous laisse imaginer toute la puissance de cette fonction :

$$( 'p' ); // Tous les éléments "p" de la page
$$( 'ul#nav a.select' ); // Tous les liens possédant la class "select" de la liste identifiée par #nav
$$( 'a[href="#"]' ); // tous les liens de la page dont la balise href vaut #

Depuis la version 1.5.1 de Prototype, tous les sélecteurs CSS3 sont émulés!

Comme avec $(), tous les éléments renvoyés sont automatiquement étendu pour bénéficier des fonctionnalités de Prototype.

Simplifiez-vous AJAX avec Prototype

Une autre particularité de Prototype est la facilité d’intégration d’AJAX au sein de vos pages. Plus besoin d’effectuer autant de tests que de navigateurs existant pour instancier un objet XMLHttpRequest, Prototype s’occupe de tout !

new Ajax.Request( 'http://www.monsite.com/ajax_server.php', {
onComplete: function( oResponse ) {
// met à jour div#monDiv avec le texte renvoyé
$( 'monDiv' ).update( oResponse.responseText );
},
onFailure: function() {
alert( 'Oups! Il y a eu un petit problème !' );
}
});

Gérer les événements javascript

La gestion des événements en javascript est peut-être ce qu’il y a de plus compliqué car vraiment différente selon les navigateurs. Prototype propose de résoudre cette difficulté à travers plusieurs fonctions dont vous ne pourrez plus vous passer :

// Une utilisation très répandu
<a href="http://www.un-site-externe.com/" onclick="window.open(this.href);return false;">clic</a>
// Avec Prototype
<a href="http://www.un-site-externe.com/">clic</a>
<script type="text/javascript">
$$( 'a' ).each(function( link ) {
if(is_externe( link ) ) { // is_externe est a implémenter
link.observe( 'click', function( event ) {
// Stope la propagation et prévient de l'action par défaut
event.stop();
// Ouvre le lien dans une nouvelle fenêtre
window.open( event.element().href );
});
}
});
</script>

Tout ceci n’est qu’une mise en bouche de tout ce que nous pourrons voir ensemble sur les fonctionnalités de Prototype. D’autres articles devraient bientôt suivre.

Une fois de plus, je vous renvoie vers la documentation officielle, contenant énormément d’exemples sur la mise en pratique de la librairie.

Pour ma part, il m’a toujours fallu faire beaucoup de recherche avant de trouver celui qui correspond le mieux à mes besoins. Le type de projet qu’on réalise, la plateforme utilisée, les librairies javascripts incluses dans son site, le type de données à afficher à l’aide de son lightbox sont autant de paramètres qui rentrent en compte dans ce choix et qui peut se révéler un véritable casse-tête!

Mais, récemment, je suis tombé sur ce comparatif de Lightbox qui va nous faire gagner un temps fou puisqu’il compare plus de 30 scripts de lightbox avec un sytème de filtrage très performant selon le framework javascript utilisé et les capacités du lightbox à afficher tel type d’élément.

A garder dans ses favoris !