Web2 Web Dynamique et Multimédia Vers les RIA Thomas Bourdeaud'huy, Diego Cattaruzza, Arnaud Charlier, Laurent Wrowblewski thomas.bourdeaud_huy@ec-lille.fr Ecole Centrale de Lille / IG2I
Plan Organisation du module S1 : HTTP & php pour le Multimédia S2 : Rappels de javascript, Présentation d'ajax, Objet XHR De 3 à 5 couches... Cas d'étude : «google suggest» S3 : Cas d'étude : «google suggest» S4 : JQUERY S5, S6 : Frameworks de développement d'ihm côté client : JQUERY UI, boostrap, culture de CSS3/HTML5 [Sous réserves] T. Bourdeaud'huy 2015/2016 Web 2.0 2
Organisation du module Objectifs Planning des séances Evaluation Prérequis Ressources
Objectifs Applications Multimédia pour le Web De la page Web à l'application Web Qu'est ce que le multimédia? Qu'est ce qu'une application Web? Objectifs transversaux : Culture du Web Bon sens & Bonnes pratiques Des outils pour le PINF T. Bourdeaud'huy 2015/2016 Web 2.0 4
Evaluation Tests à la fin des séances Exercices à terminer CTP 2h POC pour le PINF T. Bourdeaud'huy 2015/2016 Web 2.0 5
Prérequis Bonne connaissance de CSS Sélecteurs, modèle de boîte, position, display Appropriation de Firefox/Firebug Doit être installé sur votre navigateur, et devenir un réflexe Console (erreurs CSS/JS, logs), explorateur DOM, affichage des requêtes HTTP... Seule une bonne maîtrise de ces éléments vous permettra de suivre... T. Bourdeaud'huy 2015/2016 Web 2.0 6
Ressources ISIM1 devient WEB1 HTML CSS, JS, PHP WEB2 Copie d'articles Refcards Livres pdf T. Bourdeaud'huy 2015/2016 Web 2.0 7
S4 : JQUERY «Le framework Javascript du Web 2.0»
Kezako? Framework Javascript libre et open source Simplifie les interactions DOM/HTML/CSS/Javascript «Write Less, Do More» Facilite la production d interfaces riches (RIA) Développé par John Resig Également auteur du plugin CCK de drupal Version 2.1.4 à télécharger sur internet http://jquery.com/ T. Bourdeaud'huy 2015/2016 Web 2.0 9
Ressources http://docs.jquery.com/tutorials http://api.jquery.com/ http://speckyboy.com/2010/03/31/20 jquery cheats heets docs and references for every occasion/ Refcard sur moodle D'autres supports sur le serveur T. Bourdeaud'huy 2015/2016 Web 2.0 10
Installation Télécharger, décompacter le fichier js Le placer dans votre projet Commencer à coder! Charger la librairie dans votre code source <script type= text/javascript src= <chemin> ></script> Exercice J1 : Définir une classe allume Définir plusieurs balises (p, div...) de la classe exemple cachés Écrire une fonction decollage, appelée lors du clic sur un bouton $("p.exemple").addclass("allume").show("slow"); T. Bourdeaud'huy 2015/2016 Web 2.0 11
Sélecteurs $ représente la fonction jquery(selector, context) selector est une chaîne de caractère dénotant un ou plusieurs élément du DOM Accepte les valeurs classiquement admises en CSS $("p"); $("#id") ; $(".class") $("div > span"); $("div + span"); Filtres de formulaires; de visibilité; d'attributs; de contenu; de parité $("#controle:checked"); $("form:input") $("div:hidden"); $("input[value=toto]") $("div:contains(coucou)") $("tr:odd") Cf. refcard T. Bourdeaud'huy 2015/2016 Web 2.0 12
Accès au contenu Balise quelconque : $( balise ).html() $( balise ).text() Champ de formulaire : $( champ ).val() Edition : $( balise ).html( nouveau contenu ) $( champ ).val( nouveau contenu ) Insertion / Suppression $(".menu").remove();.empty() $("#id").replacewith("nouveau");.append("nouveau"),.prepend("nouveau"),.after("nouveau");.before("nouveau") T. Bourdeaud'huy 2015/2016 Web 2.0 13
Exercice Modifier le label et le comportement du bouton pour qu'il permette de cacher les éléments qui avaient été affichés Créer plusieurs boutons synchronisés entre eux pour cacher/afficher Le premier en haut, l'autre en bas Insérer des boutons permettant d'ajouter de nouveaux paragraphes à la page, placés avant ou après les paragraphes existants T. Bourdeaud'huy 2015/2016 Web 2.0 14
Accès au Style La fonction jquery renvoie un objet qui permet de manipuler les propriétés css des éléments considérés $("#bloc").position() $("#bloc").css("background color") $("#bloc").css("border","1px solid red") $("#bloc").css({ background color" : yellow, border":"1px solid red"}) $("#bloc").addclass(classe); removeclass, toggleclass... T. Bourdeaud'huy 2015/2016 Web 2.0 15
Effets Cacher / rendre visible show(speed,callback) hide(speed,callback) toggle(speed,callback) Animer animate(params,options) scrolltop(val)... T. Bourdeaud'huy 2015/2016 Web 2.0 16
Evénements Il est préférable d'attendre que le DOM soit complètement chargé dans la mémoire du navigateur pour commencer à exécuter des traitements $(document).ready(callback) Jquery permet de déclencher un événement $("#bloc").focus(); De définir un gestionnaire d'événement $("p").click(callback); Agit juste sur les balises p du DOM actuel $(document).on("click", "p",callback); Agit sur les balises p actuelles et les futures p insérées dans le DOM T. Bourdeaud'huy 2015/2016 Web 2.0 17
Exercice Enlever le onclick, le onload Le code HTML est purifié Définir les gestionnaires par du code au moment où le navigateur a terminé la lecture de la page Une fois en production, ne plus nommer les fonctions pour optimiser le temps d'interprétation par le navigateur $("#controle").click(function() { }); // code de la fonction Il existe des outils qui font ce travail pour vous... T. Bourdeaud'huy 2015/2016 Web 2.0 18
Quelques astuces $(this) représente l'élément cible de l'événement dans la fonction callback de traitement de cet événement Un objet événement est toujours passé aux fonctions callback de traitement d'événement Il suffit de nommer cet argument pour le récupérer! Pour récupérer le code de la touche entrée, utiliser l'événement 'keyup' et la propriété e.which $(document).keyup( function(e) { alert(e.which);} ); T. Bourdeaud'huy 2015/2016 Web 2.0 19
Quelques astuces Si on dispose d'une référence javascript vers une balise, $(lareference) permet de récupérer l'objet jquery correspondant var reftoto = document.getelementbyid( toto ); $(reftoto) est la même chose que $( #toto ) T. Bourdeaud'huy 2015/2016 Web 2.0 20
Quelques astuces Ajouter des éléments et récupérer une référence jquery vers ces éléments var string = '<div id="some_html"><span>hello kitty</span></div>'; $jq_elem = $(string); //if it's not a jquery object, make it one $("#id").after($jq_elem); //insert into DOM $jq_elem.css('color', 'red'); //still available cf. http://stackoverflow.com/questions/11695935/afterinserting element then getting it back T. Bourdeaud'huy 2015/2016 Web 2.0 21
Quelques astuces :.data Lors d'une édition, on stocke dans l'élément son état initial var nextelmt = $("<textarea>" + contenuinitial + "</textarea>").data("initvalue",contenuinitial); $(this).replacewith(nextelmt); Lorsque l'édition est annulée, on récupère les valeurs initiales $("textarea").each(function (){ }); // $(this) le textarea courant! var initvalue = $(this).data("initvalue"); $(this).replacewith('<p class="editable">' + initvalue + "</p>"); T. Bourdeaud'huy 2015/2016 Web 2.0 22
Quelques astuces : closure Comment garder une trace de la valeur d'une variable dont on aura besoin lors du traitement de la réponse asynchrone? Soit beaucoup plus tard, quand la variable aura cessé d'exister depuis longtemps! function mkhandler(i) { return function () { alert("clic sur " + i); } } $(document).ready(function () { var i; for(i=1;i<=3;i++){ /* V1 : ne marche pas... $("#" + i).click(function (){ alert("clic sur " + i); }); */ $("#" + i).click(mkhandler(i)); } }); T. Bourdeaud'huy 2015/2016 Web 2.0 23
Quelques astuces : contexte La fonction jquery(selector, context) prend deux arguments : Sélecteur CSS Contexte dans lequel rechercher les éléments à sélectionner $( p ).click(function(){ if ($("textarea",$(this)).length!= 0) return; } On recherche un textarea DANS LE CONTEXTE du p ie à l'intérieur T. Bourdeaud'huy 2015/2016 Web 2.0 24
Formulaires Filtres de formulaires $("form:input") Accès aux attributs et valeurs des champs $("#choix").attr("name","nom") On ne peut changer l'attribut "type" cf. http://stackoverflow.com/questions/1544317/jquery change type of input field $("#champ").val("value") Déclenchement d'actions $("#form1").submit() $("#nom").attr("checked",true) Gestionnaires d'évenements $("#form1").submit(callback) T. Bourdeaud'huy 2015/2016 Web 2.0 25
Exercice Formulaires Trouver le champ sélectionné dans un menu select Trouver la valeur du bouton radio actuellement coché Formulaire de login Utiliser la base isig Afficher /masquer avec apparition progressive Détecter quand la longueur du login dépasse 5 caractères T. Bourdeaud'huy 2015/2016 Web 2.0 26
Ajax Déclenchement d'une requête $("#popup").load(url,data,callback) $.get(url,data,callback,datatype) Utile pour déboguer avant d'utiliser getjson $.getjson(url,data,callback) NB : il existe une fonction json_encode en php!! $.post(url,data,callback,datatype) $.getscript(url,callback) Paramètres globaux : $.ajaxcomplete(complete) $.ajaxsuccess(callback); ajaxstart, ajaxstop... T. Bourdeaud'huy 2015/2016 Web 2.0 27
Exercice : paragraphes éditables Des boutons '+' seront affichés par jq de part et d'autre d'un div contenu Ils permettront de créer de nouveaux pararaphes lors d'un click Les paragraphes créés seront éditables Pour être éditable, un paragraphe aura juste besoin d'être de la classe éditable Version 1 : Si on clique sur un autre paragraphe alors que le premier est en cours d'édition, rien ne se passe Si on appuie sur Entrée, on valide la saisie Si on clique sur la touche 'ESC', on annule l'édition en cours en réaffichant l'ancien contenu Version 2 : Plusieurs paragraphes sont éditables en même temps On utilisera $().data pour stocker les valeurs des anciens contenus à restaurer lors de l'appui sur 'ESC' T. Bourdeaud'huy 2015/2016 Web 2.0 28
Cas d'étude Tiny CMS Utilisation d'une base de données & d'une API REST Récupérer des paragraphes depuis une base de données Les rendre éditables A chaque modification, envoyer la valeur du paragraphe édité au serveur pour le sauvegarder en base de données Interdire l'envoi d'un paragraphe vide Ajouter des fonctionnalités : Création de nouveaux paragraphes Suppression d'un paragraphe T. Bourdeaud'huy 2015/2016 Web 2.0 29
Pour aller + loin ISIG Suggest en jquery Chat 2.0 en jquery T. Bourdeaud'huy 2015/2016 Web 2.0 30
Cas d'étude : multi chat L'outil fonctionne avec une base de données La liste des utilisateurs connectés est affichée On dispose d'un login et d'une couleur unique pour toutes les conversations, que l'on peut changer dans son profil La liste des conversations actives est affichée Chaque conversation affiche la liste des interlocuteurs On crée un nouvelle conversation en double cliquant sur un interlocuteur On peut rejoindre une conversation existante On peut quitter à tout moment une conversation : la liste est mise à jour pour tout le monde Toutes les 5s, on lance des requêtes ajax pour récupérer les utilisateurs, conversations et messages en envoyant l'indice du dernier message reçu pour cette conversation L'administrateur a accès à toutes les conversations, il peut interrompre une conversation ou interdire un utilisateur Lorsqu'il n'y a plus qu'un utilisateur connecté à une conversation, elle est interrompue T. Bourdeaud'huy 2015/2016 Web 2.0 31