Programmation

RIA : drag'n drop avec jQuery

Linux+ 9/2008

l i n u x @ s o f t w a r e . c o m . p l

L'explosion du web 2.0 a permis l'émergence de nombreux outils qui permettentd'améliorer grandement l'expérience utilisateur. Parmi ces outils, nous retrouvonsFlex, Silverlight mais aussi des frameworks JavaScript tels que jQuery, MooTools,Prototype, Dojo, etc... Vous allez donc apprendre à utiliser jQuery qui est le meilleur compromis entre performance, simplicité, portabilité (iPhone ready) et possibilité.

Antoine Guiral

u travers de cet article, je vais vous fairedécouvrir le monde de jQuery. Cela va vous permettre de vous lancer dans le bain des RichInternet Application (RIA). En premier lieunous passerons rapidement sur ce qu'est jQuery et ce qu'ilva nous permettre de faire. Ensuite vous verrez sur quelquesexemples concrets comment l'utiliser. Une fois que vousmaîtriserez les bases, nous réaliserons un système completde drag'n drop avec une sauvegarde automatique en base dedonnées grâce à l'AJAX.

JQuery : kézako ?

JQuery est un framework JavaScript. Autrement dit, c'est unensemble de fonctions JavaScript qui va nous permettre dedévelopper plus rapidement tout en assurant une compatibilitémaximale entre les différents navigateurs. Il a vu le jour en jan-vier 2006, et en est aujourd'hui (à l'heure où j'écris ces lignes)à la version 1.2.6. Vous pouvez télécharger jQuery sur le siteofciel

www.jquery.com

. Vous aurez le choix entre 3 chiers :• Minied and Gzipped : version à utiliser sur votre ser-veur de production,• uncompressed : version à utiliser si vous souhaitez parcourir le code JavaScript constituant Jquery,• Packed : version à utiliser si vous ne pouvez pasappliquer de compression GZip à votre code JavaS-cript.Retenez qu'en production vous devez utiliser la version

minied

an d'optimiser vos sites. Bien sûr vous pouvezutiliser cette version en phase de développement!JQuery n'est pas le seul framework JavaScript. Maisil est le plus rapide, il possède la plus large communautéet, hormis pour la sauvegarde hors-ligne, il est celui qui propose le plus de fonctionnalités. Si vous n'êtes pas

• Les bases pour bien utiliser jQuery,• Comment utiliser les drag'n drop (glissé-déposé)avec une sauvegarde automatique des change-ments via AJAX.

Cet article explique...

RIA

maitrisez les drag'n dropavec jQuery

Programmation

RIA : drag'n drop avec jQuery

www.lpmagazine.org

encore convaincu par ce choix, lisez la suiteet vous verrez qu'il est en plus très faciled'utilisation!

JQuery : les bases

Maintenant que les présentations sont faitesnous allons pouvoir entrer dans le vif dusujet. Au menu : fonctionnement global,les sélecteurs jQuery et quelques effets de base pour s'amuser. An de partir sur des bases communes, vous allez créer un dossier (

tuto.jquery.bases

par exemple) dans lequelvous allez télécharger jQuery et créer 3 -chiers. Un pour le XHTML (

index.html

/ Lis-ting 1), un pour le CSS (

style.css

/ Listing 2)et un pour le JavaScript (

script.js

). Je ne lescommente pas car il n'y a rien de particulier dans ces deux chiers.

Pré-requis

Deux notions essentielles vont être utili-sées tout au long de cet article : le DOM etl'AJAX. Nous allons faire un peu de lumièresur ces acronymes qui, même si ils peuvent paraître triviaux pour certains d'entre vous,ont leur importance dans le développementweb et plus particulièrement avec jQuery(pour le DOM tout du moins).DOM signie

Document Object Model

ou en français

Model Objet du Document

.C'est en fait une représentation sous formed'arbre de votre document XHTML. On parlesouvent d'arbre DOM. Chaque élément devotre page va correspondre à un nœud devotre arbre. Un nœud peut avoir un parent (siil n'en a pas ce nœud s'appelle la racine), unou plusieurs frère(s) ainsi que un ou plusieursls. JQuery permet de naviguer très facile-ment à l'intérieur de cette arborescence.Vient le tour de l'AJAX. Tout déve-loppeur web a déjà entendu ce mot, qu'ilutilise cette technologie ou non. AJAX veutdire

Asynchronous JavaScript And XML

(

XML et JavaScript asynchrones

). La renom-mée de cette technologie vient de l'explosiondu web 2.0. Elle permet de faire une requêteau serveur sans forcément recharger toutela page, d'où le

Asynchronous

. Cela a pour effet immédiat de limiter les échanges dedonnées entre le client et le serveur et doncd'améliorer considérablement la vitesse dechargement d'un nouveau contenu. Et, vousl'aurez compris, l'expérience utilisateur s'entrouve grandement améliorée. Maintenantque vous savez cela, la suite devrait vous paraître limpide.

Le fonctionnement global de jQuery

JQuery est un framework codé en objet. Nous allons donc utiliser ses méthodes.

Sesméthodes? Mais sur qui? Sur quoi?

Et biensur un objet jQuery! Nous devons donc eninstancier un.Un objet jQuery est en fait un tableaud'éléments du DOM (

Document Object Mo-del

) de votre document. Il est toujours sousla forme

$("monSelecteur ")

, où

monSe-lecteur

va être votre critère de recherchedans le DOM.Autrement dit, instancier un objet jQuerysimplie grandement l'écriture des

getEle-mentById

getElementsByTagName

getE-lementsByName

. Un exemple pour clarier le tout :

document.getElementById("monId").maMethode();// méthode classique$("#monId").maMethode();// avec jQuery

Comme vous avez pu le remarquer, j'ai uti-lisé le dièse devant l'identiant en jQuery.Cela vient du fait qu'un objet jQuery prenden paramètre un sélecteur CSS ou XPath.De manière concrète, il peut être utile desélectionner tout le document, notamment pour être sûr de ne pas accéder à un élémentavant qu'il ne soit chargé. Nous allons donc préparer notre chier

script.js

en créantun objet jQuery qui contiendra tout l'arbre

Listing 1.

Base de travail en XHTML

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"> <head> <title>Un gros hello world</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" type="text/css" href="style.css" media="all"/> </head> <body> <a href="http://www.jquery.com" title="jquery">jQuery</a> <a href="#" id="helloWorld" title="hello world">Hello world</a> <a href="#" id="show" title="show">Show</a> <a href="#" id="hide" title="hide">Hide</a> <a href="#" id="hover" title="hover">Hover</a> <p>Vous pouvez mettre ici le texte que vous voulez. Un bon vieux Lorem Ipsum par exemple.</p> </body> </html>

Listing 2.

Base de travail en CSS

.bordure{border:1px solid black} .red{background-color:red} .green{background-color:green}

Listing 3.

Appliquer la classe .bordure à notre paragraphe

$(document).ready(function(){$("p").addClass("bordure"); });

Listing 4.

Appliquer la classe .red aux liens externes

$(document).ready(function(){$("p").addClass("bordure"); $("a[@href*=http://]").addClass("red"); });

Si vous avez fait un peu de JavaScript, dePHP et de SQL vous ne devriez pas êtredépaysés!

Ce qu'il faut savoir...

Programmation

RIA : drag'n drop avec jQuery

Linux+ 9/2008

DOM et nous lui appliquerons la méthode

ready()

$(document).ready(function(){});

Si vous n'aviez pas pensé à la fonctionanonyme dans la méthode

ready()

pasde problème, voici les explications. Dansla plupart des gestionnaires d'événements(

click()

ready()

hover()

, etc) nousvoulons effectuer une ou plusieurs actions.Pour pouvoir déclarer ces actions vous pou-vez utiliser des fonctions anonymes dansnos méthodes. C'est ce que nous faisonsici. Maintenant que notre document est prêt,regardons comment accéder aux autres élé-ments du DOM.

Les sélecteurs jQuery

Vous avez vu que pour instancier un objet jQuery, nous passons au constructeur unsélecteur. Ce sélecteur va vous permettre desélectionner très précisément vos élémentsdans le DOM. Nous avons plusieurs possibilités : soitutiliser les sélecteurs CSS, soit les sélec-teurs XPath, soit les deux.Donc de la même manière qu'avec duCSS, lorsque vous voudrez appliquer uneou plusieurs méthodes à tous les paragraphes (balise XHTML

<p></p>

) vous écrirez

$("p").maMethode();

. Nous allons tester cet exemple. Ouvrez le chier

script.js

et es-sayez d'appliquer la classe

.bordure

à notre paragraphe avec la méthode

addClass()

. Lacorrection se trouve dans le Listing 3.Voilà vous avez écrit votre premier script en jQuery. Oui mais ça ne sert pas àgrand chose vous allez me dire. Et bien jevous réponds que non! Imaginez une fonc-tion qui rajouterait une petite image à côtéde tous les liens sortant de votre site et quiindiquerait à l'utilisateur que c'est un lienexterne? Et bien vous avez déjà la premièremoitié du boulot puisque vous savez rajou-ter une classe à un objet jQuery!L'autre moitié (la sélection des liensexternes) peut se faire très simplement avecXPath. En effet XPath nous permet d'accéder très facilement aux attributs de nos balisesXHTML. La syntaxe est la suivante : [

@no-mAttribut

]. Pour tester les valeurs de l'attri- but on peut utiliser les symboles suivant :• =maChaine pour tester si la valeur del'attribut est exactement

maChaine

,• ^=maChaine pour tester si la valeur del'attribut commence par

maChaine

Listing 5.

Afcher un hello world lors du clic sur le lien d'id helloWorld

$(document).ready(function(){ $("p").addClass("bordure"); $("a[@href*=http://]").addClass("red"); $("a#helloWorld").click(function(){ alert("Hello World!!!"); } );});

Listing 6.

Cacher les paragraphes au chargement de la page

$(document).ready(function(){ $("p").addClass("bordure"); $("a[@href*=http://]").addClass("red"); $("a#helloWorld").click(function(){ alert("Hello World!!!"); }); $("p").hide(); });

Listing 7.

Afcher et cacher les paragraphes aux clics sur les liens correspondant

$(document).ready(function(){ $("p").addClass("bordure"); $("a[@href*=http://]").addClass("red"); $("a#helloWorld").click(function(){ alert("Hello World!!!"); });$("p").hide(); $("a#show").click(function(){ $("p").show('500'); });$("a#hide").click(function(){ $("p").hide('500'); });});

Listing 8.

Utilisation d'un callback avec hover() au survol d'un lien

$(document).ready(function(){ $("p").addClass("bordure"); $("a[@href*=http://]").addClass("red"); $("a#helloWorld").click(function(){ alert("Hello World!!!"); }); $("p").hide(); $("a#show").click(function(){ $("p").show('500'); }); $("a#hide").click(function(){ $("p").hide('500'); }); $("a#hover").hover(function(){ $(

this

).addClass("green"); },function(){ $(

this