TP jQuery

Regarder des exemples interactifs

Commencez par faire tourner et étudier le code des exemples de cette page web : http://www.w3schools.com/jquery/jquery_examples.asp

Les exemples tournent dans un mini IDE inclu dans une page web, ils vous serviront pour les exercices suivants.

A FAIRE EN PREMIER : suivre cette présentation interactive d'utilisation des selecteurs :

• http://ejohn.org/apps/workshop/intro/#11

Manipulation des sélecteurs

Utilisez pour tester l'IDE en ligne http://jsbin.com/, vous ferez des copier/coller du code html et javascript dans cet outil, vous le testerez et à la fin vous créerez une page html contenant le javascript pour la tester dans votre navigateur.

Nous allons jouer sur un fichier html de test qui est annoté par des balises sans effet pour le moment :

Vous remarquerez qu'on a des attributs class= dans ce document. Ils correspondent à des classes CSS. Vous ajouterez des règles CSS à la volée avec jQuery en vous inspirant de cet exemple qui selectionne la classe "vert" et lui applique la règle css color:green :

Ouvrez jsbin.com et collez ce texte dans la zone html . Sauvegardez votre projet (menu jsbin/create milestone de jsBin). Si vous voulez conserver votre travail, il faudra copier/coller l'URL et le conserver quelque part avant de fermer l'onglet jsbin. Dans ce code on ajoute directement la librairie jQuery depuis les repositories de Google (au passage, dans le code c'est une vieille version de jQuery, mais pour ce que l'on fait cela n'a pas d'importance).

N'oubliez pas de cocher la case 'autorun JS' si vous voulez voir en temps réel les résultats de vos modifications.

Maintenant nous devons écrire en javascript (onglet javascript) le code jQuery pour effectuer les actions correspondants au titre des boutons !

Vous devez coder les fonctions suivantes (dans une balise <script>...</script> dans le document html :

Par exemple, le premier bouton doit mettre de l'italique, du gras du souligné et du style barré autours des textes dont la classe est "gras", "italique", etc. On a "classifié" des bouts de texte à l'aide de balises <span class="italique">, etc. Vous avez deux possibilités pour modifier le style d'un texte :

• Modifier à la volée la css de cette classe d'éléments (voir le cours interactif : http://ejohn.org/apps/workshop/intro/#11 et la page suivante pour la modification de style via css),
• Ne pas modifier forcément le style mais rajouter des balises <i>, <b>, etc. autours du texte trouvé par le selecteur. Pour cela on pourra utiliser la fonction wrap(<balise></balise>);. Par exemple : essayer d'écrire une fonction qui lorsqu'elle est invoquée fait : $("#contenu").wrap(<h1></h1>); Voilà, vous avez compris le principe.
  

Remarque : laquelle des deux méthodes est la plus élégante ?

Un exemple de correction:

Pour d'autres opérations, vous devrez utiliser d'autres fonctions applicables sur les objets trouvés par les sélecteurs :

• hide() pour cacher,
• show() pour montre,
• remove() pour supprimer définitivement,
• empty() pour "vider" le contenu,
• html() pour récupérer le contenu html,
• text() pour récupérer le contenu texte,
• html("du html ici") pour remplacer le contenu html,
• clone() pour cloner le contenu trouvé,
• appendTo("p" ou autre) pour ajouter à un élément du dom,
• wrap("<h1></h1>") pour encadrer par des h1,
• wrapAll("<h1></h1>") pour encadrer tous les objets trouvés en les regroupant entre des h1,
• css("border","3px solid red") pour changer le style, etc
• Etc...

Pour les questions plus difficiles (enlever les éléments décorés, par exemple), relire les ressources sur les selecteurs depuis la page Ressources JQuery.

Ne passez pas plus de 25mns sur cet exercice, si vous n'y arrivez pas,  allez voir une correction ici : http://jsbin.com/udihez/9/edit

Changment des attributs des balises et travail avec des classes CSS 

Dans chaque balise html, nous retrouvons des attributs différents comme : title, alt, width, height etc.  JQuery permet de manipuler ces attributs facilement à l'aide de la fonction .attr("name","parametre");

Regardons un exemple : http://jsbin.com/uxejug/14/edit dont voici quelques extraits du code html/css/js : 

 code CSS :

JavaScript :

Utilisation d'extensions de vos navigateurs pour debugger tester...

Je vous conseille fortement d'utiliser l'extension firebug pour firefox  c'est une excellent outil de debug. Ou encore le debugger de Chrome (qu'on appelle avec ctrl-shift i ou F12), depuis la console de ces deux debuggers, vous pourrez taper des commandes JavaScript. Mais pour chrome et jQuery il y a une extension très pratique : jQuery Shell. Lancez chrome et allez sur le site de gestion des extensions : https://chrome.google.com/extensions/search?itemlang=&hl=en&q=jquery+shell

Installez ces deux extensions. Vous devriez avoir deux boutons en haut à droite de Chrome. Elles permettent de tester des commandes jQuery sur n'importe quelle page web, même si elle n'utilise pas jQuery. La première extension (jQuery Shell) ouvre une jolie fenêtre pour taper des commandes, l'autre permet de le faire depuis le debugger Chrome, en entrant les commandes dans la console.

Pour ceux qui sont avec firefox  firebug, vous pouvez faire de même en utilisant la scriplet jQueryfy : http://www.learningjquery.com/2009/0...fy-bookmarklet

Exercice :

Allez sur la home page de Michel Buffa, la vieille page qui date du siècle dernier ;-) et ouvrez le jQuery Shell, tapez dans la console $("h1").hide(); par exemple, vous voyez l'intérêt ? Utilisez également le debugger (ctrl-shift-i) pour inspecter le code html de la page, comprendre sa structure et tester vos sélecteurs jQuery.

Vérification de login/password en Ajax

Voici un formulaire de saisie HTML, légèrement amélioré pour qu'on puisse référencer les champs depuis du javascript (on a rajouté des ids), et au début un code javascript/jQuery qui intercepte l'envoi du formulaire pour le faire en ajax (noter que la réponse renvoyée par la servlet est soit 0 soit 1 qui sont en javascript assimilables à true ou false) :

Et voici le code issu de la Servlet correspondante (ici on renvoie 1 si login/password = toto/toto) :

 Travail à faire :

1. Vous pouvez tester ce code dans netbeans/eclipse en le complétant (pour la partie servlet),
2. Essayer de réduire au maximum le code de l'appel ajax en jQuery en particulier en étudiant les exemples de ce tutorial : http://viralpatel.net/blogs/2009/04/...velopment.html (regardez aussi la doc de la méthode serialize() utilisable sur les formulaires : http://api.jquery.com/serialize/)

jQuery et JSON

De nombreux web services sur le web public sont accessible en REST de manière simple et savent exporter leurs résultats en JSON. L'exemple du cours qui affiche des photos en provenance de flickr est le suivant : http://jsbin.com/ezogeq/2/edit et voici son code :

Cet exemple invoque l'url :

• http://api.flickr.com/services/feeds...&jsoncallback=?

Qui renvoie un objet json contenant des définitions d'images de Biot. Invoquez à la main cet URL et regardez le résultat retourné. C'est un objet javascript sous forme de chaine de caractère, le format s'appelle JSON !

jQuery propose des fonctions toute faites pour 1) appeler des web services qui renvoient du JSON c'est le $.getJSON(url, callback), et 2) cette fonction admet en second argument un callback qui reçoit en paramètre l'objet javascript correspondant à la chaine JSON reçue. Rappel, en javascript une chaine n'est pas un objet. Voir le cours ou la doc sur JSON (site de référence : http://json.org)

Travail à faire : faire tourner l'exemple ci-dessus dans  dans une de vos pages html + js, trouver la donc de l'api REST de flickr sur le web et comprendre comment on a pu trouver l'URL à invoquer.

Jouons un peu avec un plugin jQuery d'affichage d'images

Je vous propose de travailler sur une gallerie de photos. On vous propose un joli plugin jQuery : http://sorgalla.com/projects/jcarousel/ il permet de présenter élégamment des photos.

Travail à faire :

1. Et bien marions ce plugin avec l'exemple précédent ! A vous de faire une jolie application avec un champs de recherche qui invoque un appel ajax sur flickr et qui affiche de jolie photos dans un caroussel.
2. Maitenant ajoutons de la fonctionnalité pour chercher des photos sur picasa ou sur bing le moteur de recherche de microsoft ! Voici quelques liens intéressants :
   
   • http://msdn.microsoft.com/en-us/library/dd251094.aspx pour la page sur l'API javascript de Bing/images,
   • Pour picasa, le plus simple : ouvrez votre page d'albums photos : http://picasaweb.google.com/votre_gmail_login et vous devriez voir vos photos picasa, ensuite, avec firefox vous cliquez sur le bouton des flux rss à droite de la barre d'adresse. Regardez l'URL : changes alt=rss en alt=json, voilà, vous avez la description de vos albums en json. Reste plus qu'à récupérer les bons éléments là dedans et à les afficher !

Bonne chance !

Autre exemple : un plugin pour Google Maps : JMapping

La page officiel de ce plugin : https://github.com/vigetlabs/jmapping TESTEZ LES EXEMPLES SUR LE SITE, ILS MARCHENT, VIEW SOURCE etc...

Ce plugin a des dépendences vers quelques autres plugins :

• JQuery Metadata (https://github.com/jquery/jquery-metadata),
• MarkerManager ( http://google-maps-utility-library-v...nager/1.0/src/ et des examples d'utilisation http://google-maps-utility-library-v.../examples.html ),
• StyledMarker ( http://google-maps-utility-library-v.../styledmarker/ ).

Pour pouvoir utiliser JMapping, il faut donc inclure tous les fichiers javascript de ces plugins :

Le code HTML

JavaScript pour afficher la carte, on utilise les microdatas de HTML5 dans les balises, ce sont des attributs speciaux du standard html5 pour la géolocalisation, les plus curieux peuvent aller voir la page des ressources HTML5 que Michel Buffa a compilées pour un autre cours : ressources HTML5, la partie métadonnées/sémantique...

Travail à faire :

• récupérez les plugins, faites marcher le code dans une page html à vous et aussi dans un jsbin,
• il faudrait faire que ce soit possible d'ajouter des marqueurs/points d'intérêt avec un formulaire HTML et JQuery.

AJAX + JQuery UI

Les thèmes de jQuery UI : http://jqueryui.com/themeroller/ 

Nous allons créer une page qui doit contenir : un search box, une table avec les résultats de recherche, une table avec les résultats sélectionnés  

1. On récupère les données de l'exemple avec flicker.com un peu plus haut (celui qui affiche des photos de Biot) et on veut consruire une table HTML pour afficher les résultats. On utilise $.getJSON() pour la requête Ajax et génèrera la table avec content http://api.jquery.com/jQuery.getJSON/ 
2. Drag & Drop d'images or Selectable. $("#result").selectable() : http://jqueryui.com/selectable/ or http://jqueryui.com/draggable/ & http://jqueryui.com/droppable/ - pour la table de resultats de recherche
3. Dialogue pour créer les données dans la table de résultats sélectionnés, on utilise des appels de type $("#dialog-add").dialog et $("#button-add").button, voir les documentations : http://jqueryui.com/dialog/#modal-form et http://jqueryui.com/button/ 
4. Ajouter dans la table de sélection (list), la table avec les buttons "supprimer" et "edit", et offrir la possibilité de trier les resultats selectionnés avec sortable: http://jqueryui.com/sortable/ 

PS: pour les icones : http://www.petefreitag.com/cheatsheets/jqueryui-icons/