Antoine.Guiral.Info » JS http://antoine.guiral.info Mon, 15 Feb 2010 16:24:16 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 [google closure] Hello world avec Closure Library http://antoine.guiral.info/2009/12/30/google-closure-hello-world-avec-closure-library/ http://antoine.guiral.info/2009/12/30/google-closure-hello-world-avec-closure-library/#comments Tue, 29 Dec 2009 23:08:02 +0000 Antoine http://antoine.guiral.info/?p=616 Allez hop, maintenant que vous connaissez Google Closure on va pouvoir attaquer les tutoriels :) Bien sûr on ne va pas echapper au traditionnel « hello world » :D

Première étape, chopper la « Closure Library« . Il va falloir faire un checkout SVN du projet.

Cette ligne de commande suffit (placez vous dans le dossier de votre projet ;) ). Sinon utilisez votre client SVN préféré…

  1. svn checkout http://closure-library.googlecode.com/svn/trunk/ closure-library-read-only

Voila, maintenant vous avez la Closure Library nous allons pouvoir attaquer les choses sérieuses :)

L’objectif va être de créer un script javascript qui va créer un noeud dans l’arbre DOM de la page pour y insérer une balise H1 comprenant le texte…. »hello world »!

Allez C’est partit, créez un fichier javascript et appelez le, heu…hello.js.

A l’intérieur de celui ci, copiez ce petit bout de code. Essayer de le comprendre, les explications vont suivre ;)

  1. //on appelle les libs google
  2. goog.require('goog.dom');
  3.  
  4. //on crée une fonction qui dit bonjour <img src='http://antoine.guiral.info/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
  5. function ditBonjour() {
  6.   //on crée notre balise H1
  7.   var newTitle = goog.dom.createDom('h1', {'style': 'background-color:#EEE'},
  8.     'Hello world!');
  9.   //puis on l'append au body de notre page html
  10.   goog.dom.appendChild(document.body, newTitle);
  11. }

Je pense que les commentaires dans le code ont dû vous aider :p Si je résume. Dans un premier temps on fait appel aux librairies google. « goog » est le namespace utilisé par google. Donc on utilise la méthode require du namespace « goog » et on lui demande de charger le namespace « goog.dom » afin de pouvoir utiliser ses méthodes. Les namespaces sont étroitements liés à l’objet, vous en déduirez qu’il va être très facile de faire du javascript objet avec Closure Library!! Ensuite nous créons notre balise h1 en utilisant la méthode « createDom » du namespace (ou package en java) « goog.dom » (lui même dans le namespace goog, vous suivez?). 3 paramètres : le type de balise qu’on veut créer, les attributs de cette balises au format json (ici des styles) et enfin le contenu de la balise.

Testons maintenant notre script. Un petit fichier html, allez, soyons fou : index.html.

  3.     <script src="closure-library-read-only/closure/goog/base.js"></script>
  4.     <script src="hello.js"></script>
  5.   </head>
  6.   <body onload="ditBonjour()">
  7.   </body>
  8. </html>

Pas besoin d’explication je pense à ce niveau :) On link les librairies et notre script puis on appelle notre méthode au chargement de la page.

Plus qu’à tester dans votre navigateur favori!! (chrome? firefox?)

]]> http://antoine.guiral.info/2009/12/30/google-closure-hello-world-avec-closure-library/feed/ 0 [tuto mozilla jetpack] Débuter avec jetpack http://antoine.guiral.info/2009/11/04/tuto-mozilla-jetpack-debuter-avec-jetpack/ http://antoine.guiral.info/2009/11/04/tuto-mozilla-jetpack-debuter-avec-jetpack/#comments Wed, 04 Nov 2009 11:23:46 +0000 Antoine http://antoine.guiral.info/?p=278 Je regarde depuis plusieurs mois du coté des extensions firefox. Deux options, soit me mettre au xul pour fournir un beau .xpi à installer. Soit utiliser jetpack, une des dernières nouveautés sortie du labs de mozilla.

Je me suis tourné vers jetpack. C’est tout neuf, c’est plutôt simle (javascript+html+css) et l’installation d’un plugin ne demande pas de redémarrage du navigateur :) . Seul contrainte, utiliser firefox 3.5 et plus.

Première étape, il faut installer jetpack sur votre navigateur. Pour cela, cliquez sur le gros lien tout en bas de cette page.

Ensuite tout se joue sur la page about:jetpack.

capture de about:jetpack

capture de about:jetpack

Pour commencer, 4 onglets sont importants :

  • Develop : une console en ligne pour tester directement votre code (et ca c’est magique)
  • Installed features : pour vois les extensions déjà installées, utile pour le petit bouton refresh
  • Tutorial : pour commencer :D
  • API référence : une très petite documentation sur les fonctions diposnible

Avant de rentrer dans le vif du sujet, je vous propose d’aller sur la page « Tutorial ». Vous allez trouver plusieurs bloc de code. Vous pouvez directement les tester en cliquant dessus pour les passer en mode édition, puis en testant le code en cliquant sur le petit lien juste en dessous du code « try out this code ».

exemple de code

Vous pouvez alors cliquer sur le petit « Boom! » en bas a droite de la status bar. Je ne pense pas avoir besoin de détailler le code, il est plus que limpide :D C’est toute la force de jetpack : c’est facile.

Dans un prochain billet, nous fabriquerons notre première extensions. En attendant vous pouvez vous amuser à bidouiller un peu ce code ou repartir de zéro dans l’onglet « Develop » !

Stay tuned !

]]> http://antoine.guiral.info/2009/11/04/tuto-mozilla-jetpack-debuter-avec-jetpack/feed/ 1 Accessibilité : Faire du javascript non-intrusif http://antoine.guiral.info/2009/05/02/accessibilite-faire-du-javascript-non-intrusif/ http://antoine.guiral.info/2009/05/02/accessibilite-faire-du-javascript-non-intrusif/#comments Sat, 02 May 2009 18:03:57 +0000 Antoine http://antoine.guiral.info/?p=189 Aujourd’hui, en accord avec les standards actuels, il est important de faire des sites accessibles. Et parmi les principes d’accessibilité, il en est un qui nous concerne, nous les développeurs, particulièrement. Le fait de faire du javascript non intrusif.

Et dans cet optique, je crois que le plus dur n’est pas la réalisation technique mais l’adaptation « philosophique » de la conception d’un site web. En effet, on a souvent tendance à vouloir faire les choses trop vite, à vouloir que notre travail soit de suite joli, hyper fonctionnel avec de l’ajax dans tout les sens, etc etc…

Mais cette façon de penser nous fait souvent passer à coté de l’essentiel. Prenons un exemple simple : un formulaire d’inscription. De manière classique, on voudrait, dès le squelette du formulaire fini, réaliser les contrôles en javascript sur le mot de passe ou la validité des champs. Or imaginez un instant que le javascript soit désactivé!! Dans le meilleur des cas vous ajoutez un champ incomplet dans votre base de données. Dans le pire des cas, l’utilisateur ne pourra pas s’inscrire et aura droit à un magnifique message d’erreur. L’idéal serait de d’abord réaliser tout les contrôles coté serveur. Cela nous permet de renvoyer des messages d’erreurs adaptés et de contrôler nos enregistrement en base de données. Mais surtout, notre version dégradée (sans javascript) reste fonctionnelle!!

Donc ca c’était pour le coté philosophique du javascript non intrusif. Mettons un peu les mains dans le cambouis.

Je vous propose un petit screencast que j’ai réalisé et qui explique comment faire un formulaire d’inscription accessible (au moins au niveau des contrôles, ce qui correspond pour moi à la base). Pour votre confort je vous conseille de le visionner en HD (le texte est difficilement lisible sinon…) et en plein écran :)

javascript non intrusif [accessibilité] from Antoine Guiral on Vimeo.

Bien sûe je reste ouvert à vos questions, critiques, suggestions tant sur le font que sur la forme (le screencast :) ).

Stay tuned :)

]]> http://antoine.guiral.info/2009/05/02/accessibilite-faire-du-javascript-non-intrusif/feed/ 5 [tuto jquery] drag’n drop avec jquery et ajax V2 http://antoine.guiral.info/2008/10/03/tuto-jquery-dragn-drop-avec-jquery-et-ajax-v2/ http://antoine.guiral.info/2008/10/03/tuto-jquery-dragn-drop-avec-jquery-et-ajax-v2/#comments Fri, 03 Oct 2008 21:12:31 +0000 Antoine http://antoine.guiral.info/?p=114 Ca y est, cela fait un mois que l’article que j’ai rédigé pour linux+ magasine est sorti. Je peux donc vous le faire partager sur ce blog. Vous allez me dire que c’est du déjà vu…oui! C’est une mise à jour par rapport aux nouvelle versions de jquery et de jquery UI. Le première version de ce tuto était faite en deux parties : une partie sur les drag ‘n drop et l’autre sur les traitement en ajax effectués après le drop.

Là l’article propose les bases pour bien débuter avec jQuery puis le tutoriel sur les drag’n drop. Vous en apprendrez plus sur les sélécteurs jQuery avec XPATH qui donne le tournis quand on l’approfondit.

Bien sûr je suis ouvert à vos commentaires, questions, suggestions :D

Allé, je n’en dis pas plus et vous laisse découvrir la suite :D :

]]> http://antoine.guiral.info/2008/10/03/tuto-jquery-dragn-drop-avec-jquery-et-ajax-v2/feed/ 4 [tuto jQuery] navigation en ajax non-intrusif (2/2) http://antoine.guiral.info/2008/05/02/tuto-jquery-navigation-en-ajax-non-intrusif-22/ http://antoine.guiral.info/2008/05/02/tuto-jquery-navigation-en-ajax-non-intrusif-22/#comments Fri, 02 May 2008 00:09:49 +0000 Antoine http://antoine.guiral.info/?p=94 Vous l’attendiez avec impatience, la voila! La fin du tutoriel pour faire une navigation ajaxifiée tout en restant accessible. Un petit point sur ce que l’on a déjà fait :

  • La partie php qui va chercher le bon article en fonction des paramètres
  • Notre squelette XHTML
  • un peu d’habillage CSS

Nous allons maintenant jQueriser notre document. Cette transformation va se présenter en trois parties.

Appeler nos script

Il faut modifier notre squelette xhtml afin de lier nos scripts à notre page. Cela se passe entre les balises head. Il faut préalablement télécharger jQuery si vous ne l’avez pas déjà.

  1.  
  2.         <!-- les deux lignes du dessous -->
  3.     <script src="jquery.js" type="text/javascript"><!--mce:0--></script>
  4.     <script src="script.js" type="text/javascript"><!--mce:1--></script>

La transformation des liens

En premier lieu nous allons modifier tous nos liens. En effet ils se présentaient sous cette forme :

  1. <a href="index.php?page=1">page 1</a>

Or, si nous les gardons sous cette forme notre page va s’afficher « en cascade » puisque nous afficherions dans notre div « contenu » notre index.php.

  1. //pour chaque lien contenu dans un élément de liste
  2. $('li&gt;a').each(function() {
  3.     //on récupere le contenu de l'attribut href
  4.     var link=$(this).attr("href");
  5.     //et on remplace le index par page pour obtenir un lien : page.php?page=x&amp;article=x
  6.     $(this).attr("href",link.replace("index","page"));
  7.   });

L’ « ajaxification » des liens

Maintenant il faut faire appel à la méthode load de jquery pour charger notre article dans le div « contenu ».

  1. //à chaque clic sur un lien contenu dans un élément de liste
  2. $('li&gt;a').click(function() {
  3.     //on récupère l'attribut href
  4.     var link=$(this).attr("href");
  5.     //et on charge le document avec load dans le div d'id contenu
  6.     $("#contenu").load(link);
  7.         return false;
  8. });

Le script final :

  1. $(document).ready(
  2.     //construction du menu
  3.     function()
  4.     {
  5.         //pour chaque lien contenu dans un élément de liste
  6.         $('li&gt;a').each(function() {
  7.             //on récupere le contenu de l'attribut href
  8.             var link=$(this).attr("href");
  9.             //et on remplace le index par page pour obtenir un lien : page.php?page=x&amp;article=x
  10.         $(this).attr("href",link.replace("index","page"));
  11.       });
  12.  
  13.         //à chaque clic sur un lien contenu dans un élément de liste
  14.         $('li&gt;a').click(function() {
  15.             //on récupère l'attribut href
  16.             var link=$(this).attr("href");
  17.             //et on charge le document avec load dans le div d'id contenu
  18.         $("#contenu").load(link);
  19.             return false;
  20.       });
  21.     }
  22. )

Voilà, vous devriez avoir un menu parfaitement fonctionnel. Vous pouvez modifiez votre fichier page.php pour faire des includes de vos fichiers dans les switchs plutôt que d’écrire votre texte en dur.

Montrez nous vos réalisations et n’hésiter pas à faire des remarques, poser des questions, etc ;-)

]]> http://antoine.guiral.info/2008/05/02/tuto-jquery-navigation-en-ajax-non-intrusif-22/feed/ 1 [tuto jQuery] navigation en ajax non-intrusif (1/2) http://antoine.guiral.info/2008/04/20/tuto-jquery-navigation-en-ajax-non-intrusif-12/ http://antoine.guiral.info/2008/04/20/tuto-jquery-navigation-en-ajax-non-intrusif-12/#comments Sun, 20 Apr 2008 13:26:55 +0000 Antoine http://guiralantoine.wordpress.com/?p=79 Ca y est, il arrive. Le tutoriel sur la navigation en ajax non-intrusif débarque sur vos écrans! Le but est donc de proposer une navigation en ajax (on ne rechergera que le contenu de la page) qui soit non-intrusive. Cela veut dire que si le javascript n’est pas activé le site fonctionnera toujours. Un petit exemple :-)

Nous allons commencer par faire notre site de manière classique, celle qui sera affichée quand le javascript sera désactivé. Afin de factoriser le code je vais utiliser du php pour afficher le contenu, mais le fonctionnement serait le même en utilisant différent fichiers.

  • Le XHTML

Notre fichier html portera l’extension .php parce que nous allons utiliser le même fichier de base (index.php). Grâce au php nous allons factoriser le code. Cela complique un poil le tuto mais qui peut le plus peut le moins! Donc nous aurons un titre une liste, pour les articles, imbriquée dans une liste pour les pages.

  1.  
  2. <h1>Tuto navig ajax non-intrusif</h1>
  3.  
  4. Pour tester pleinement ce tuto, testez la navigation puis désactivez le javascript et testez la à nouveau
  5. <div id="”menu”">
  8. <a href="”index.php?page=1″">page 1</a></li>
  10. <a href="”index.php?page=2″">page 2</a></li>
  12. <a href="”index.php?page=3″">page 3</a>
  15. <a href="”index.php?page=3&amp;article=1″">article 1</a></li>
  17. <a href="”index.php?page=3&amp;article=2″">article 2</a></li>
  18. </ul>
  19. </li>
  20. </ul>
  21. </div>
  22. <div id="”contenu”"></div>
  23.  

  • Le php

Rien de très tordu ici : je récupère le numéro de la page que je veux afficher et le numéro de l’article le cas échéant et je l’affiche. Plus d’explications dans les commentaires du code du fichier page.php ;-)

  1.  
  2.  
  3. Normalement ça devrait marcher! Mais ce n'est pas très beau...
  4. <ul>
  5. <li>
  6. <h2>Le CSS</h2>
  7. </li>
  8. </ul>
  9.  
  10. Un rapide fichier de styles pour avoir quelque chose de moins brut.
  11. <pre lang="css">h1{
  12. text-align:center;
  13. }
  14. #menu{
  15. border:1px solid black;
  16. width:180px;
  17. float:left
  18. }
  19. #menu ul{
  20. list-style:none;
  21. }
  22. #contenu{
  23. width:800px;
  24. margin-left:200px
  25. }

Hop là! Un titre centré, un coup d'anti-puces (facile celle là...) et un menu qui flotte à gauche du contenu.
La prochaine fois nous grefferons nos scripts jQuery afin de transformer la navigation actuelle en une belle navigation en ajax.
[edit] La suite est ici :-D

]]> http://antoine.guiral.info/2008/04/20/tuto-jquery-navigation-en-ajax-non-intrusif-12/feed/ 0 [tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (2/2) http://antoine.guiral.info/2008/03/09/tuto-jquery-drag-%e2%80%98n-drop-avec-sauvegarde-automatique-en-base-de-donnees-22/ http://antoine.guiral.info/2008/03/09/tuto-jquery-drag-%e2%80%98n-drop-avec-sauvegarde-automatique-en-base-de-donnees-22/#comments Sat, 08 Mar 2008 22:03:01 +0000 Antoine http://guiralantoine.wordpress.com/?p=55 Ça y est, la suite est enfin là! Dans la première partie de ce tutoriel nous avions vu comment faire un drag’n drop avec jQuery. Maintenant nous allons voir comment effectuer notre sauvegarde automatique grâce à l’AJAX. Il y a deux modifications majeures à apporter à notre code. La première est la partie base de données : création des tables, des requêtes,etc… La seconde est l’ajout d’un traitement lors d’un drop d’ingrédient dans une recette. Autrement dit, effectuer les requêtes au bon moment.

  • La BDD

Notre base sera composée de 3 tables :

  • la table recette sera composée d’un identifiant (id_recette) et d’un nom de recette (recette).
  • la table ingrédient avec un identifiant (id_ingredient) et le nom de l’ingrédient (ingredient).
  • la table recette_ingredient qui contiendra les compositions de nos recettes sous la forme de couples id_recette,id_ingredient.

Cette organisation vient de nos cardinalités : un ingrédient peut être dans plusieurs recettes et une recette peut contenir plusieurs ingrédients.

Voici le code SQL pour créer les tables :

  1.  
  2. CREATE DATABASE `tuto_drag` ;
  3.  
  4. CREATE TABLE `recettes` (
  5. `id_recette` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  6. `recette` VARCHAR( 50 ) NOT NULL
  7.  
  8. ) ENGINE = innodb;
  9.  
  10. CREATE TABLE `ingredients` (
  11. `id_ingredient` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  12. `ingredient` VARCHAR( 50 ) NOT NULL
  13.  
  14. ) ENGINE = innodb;
  15.  
  16. CREATE TABLE `recette_ingredient` (
  17. `refid_ingredient` INT NOT NULL ,
  18. `refid_recette` INT NOT NULL
  19.  
  20. ) ENGINE = INNODB CHARACTER SET latin1 COLLATE latin1_swedish_ci
  21.  
  22. ALTER TABLE `recette_ingredient` ADD PRIMARY KEY ( `id_ingredient` , `id_recette` )
  23.  
  24. INSERT INTO `ingredients` ( `id_ingredient` , `ingredient` )
  25. VALUES (NULL,’oeuf’),(NULL,’sucre’),(NULL,’farine’),(NULL,’sel’),(NULL,’lait’);
  26.  
  27. INSERT INTO `recettes` ( `id_recette` , `recette` )
  28. VALUES (NULL,’Pâte à crêpe’),(NULL,’Pâte brisée’);

  • Les traitements coté serveur

Maintenant que nous avons une base de données il faut créer les scripts qui vont nous permettre d’interagir avec elle. Nous devons pouvoir ajouter une recette, un ingrédient et faire nos sauvegarde de composition de recette. Appelons notre fichier « traitement.php ».

  1.  
  2. <?php
  3. // on se connecte à MySQL
  4. $mysql_link=mysql_connect(”localhost”, “root”, “”);
  5. //on selectionne notre base de donnée
  6. mysql_select_db(”tuto_drag”, $mysql_link);
  7.  
  8. //une petite fonction qui permet de proteger votre bdd des injections SQL
  9. function protection($string){
  11. if(ini_get(’magic_quotes_sybase’)) {
  12. $string = str_replace(”””, “‘”,$string);
  13. } else {
  14. $string = stripslashes($string);
  15. }
  16. }
  17.  
  18. return mysql_real_escape_string($string);
  19. }
  20.  
  21. //nous switchons suivant le parametre “action” vers le cas qui nous interesse
  22. switch($_REQUEST['action']){
  23. //je pense que les case sont assez clair
  24. case ‘ajout_ingredient_recette’:
  25. $id_recette=substr($_GET['id_recette'],1,1);
  26. $id_ingredient=$_GET['id_ingredient'];
  27.  
  28. $sql=’insert into recette_ingredient values(\”.$id_recette.’\',\.$id_ingredient.’\')’;
  29. $req=mysql_query($sql) or die(’Erreur SQL !
  30. ’.$sql.’
  31. ’.mysql_error());
  32. break;
  33.  
  34. case ’suppression_ingredient_recette’:
  35. $id_recette=substr($_GET['id_recette'],1,1);
  36. $id_ingredient=$_GET['id_ingredient'];
  37.  
  38. $sql=’delete from recette_ingredient where refid_recette=’.$id_recette.’ and refid_ingredient=’.$id_ingredient;
  39. $req=mysql_query($sql) or die(’Erreur SQL !
  40. ’.$sql.’
  41. ’.mysql_error());
  42. break;
  43.  
  44. }
  45.  
  46. ?>

  • Modification de notre page XHTML

Alors qu’allons nous faire de cette page…Vu que nous voulons ajouter des ingrédients et des recettes dans notre base de données, il faut que nous générions notre page « creation-recette.html » dynamiquement. La première chose à faire est donc de renommer notre fichier en « creation-recette.php ». Ensuite deux petites requêtes, avec deux boucles et en avant guingammmmmmmpppppp!

  1.  
  2. <?php
  3. // on se connecte à MySQL
  4. $mysql_link=mysql_connect(”localhost”, “root”, “”);
  5. //on selectionne notre base de donnée
  6. mysql_select_db(”tuto_drag”, $mysql_link);
  7.  
  8. //requete pour les recettes
  9. $sql=’select * from recettes order by recette’;
  10. $req_recettes=mysql_query($sql);
  11.  
  12. //requete pour les ingredients
  13. $sql=’select * from ingredients order by ingredient’;
  14. $req_ingredients=mysql_query($sql);
  15.  
  16. echo’
  17. <html>
  18. <head>
  19.  
  20. <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
  21. <script type=”text/javascript” src=”jquery.js”></script>
  22. <script type=”text/javascript” src=”interface.js”></script>
  23. <script type=”text/javascript” src=”script.js”></script>
  24. <link rel=”stylesheet” type=”text/css” href=”styles.css” media=”all”/>
  25. </head>
  26. <body>
  27. <div>
  28. <h1>Waouuuuuuuhhhhhh</h1>
  29. <div class=”ingredient”>’;
  30. //une petite boucle pour afficher les ingredients
  31. while($data=mysql_fetch_assoc($req_ingredients)){
  32. echo’
  33. <div id=”‘.$data['id_ingredient'].’” class=”drag”>’.$data['ingredient'].’</div>
  34.  
  35. ’;
  36. }
  37. echo’</div>
  38.  
  39. ’;
  40. //une autre boucle pour afficher les recettes…
  41. while($data=mysql_fetch_assoc($req_recettes)){
  42. echo’
  43. <div class=”recette” id=”‘.$data['id_recette'].’”>
  44. <h3>’.$data['recette'].’</h3>
  45. <div class=”recette_ingredient”>’;
  46. //…si les recettes ont des ingredients il faut les récuperer et les afficher…
  47. $sql=’select * from recette_ingredient left join ingredients on refid_ingredient=id_ingredient where refid_recette=’.$data['id_recette'];
  48. $req_compo_recette=mysql_query($sql);
  49. //…avec une boucle! sans oublié de rajouter l’attribut recette sinon les drop de suppression ne marcherons plus! Allez y testez!
  50. while($data1=mysql_fetch_assoc($req_compo_recette)){
  51. echo’
  52. <div id=”‘.$data1['id_ingredient'].’” class=”drag” recette=”‘.$data['id_recette'].’”>’.$data1['ingredient'].’</div>
  53.  
  54. ’;
  55. }
  56. echo’</div>
  57. </div>
  58.  
  59. ’;
  60. }
  61. echo’</div>
  62.  
  63. </body>
  64. </html>’;
  65. ?>

  • Notre script avec l’AJAX (hyper simple au passage :-p)

On reprend le script du premier tutoriel en rajoutant la méthode get qui nous permet de faire de l’AJAX très simplement grâce à jQuery pooooowwwwwaaaaaaaa.

  1.  
  2. //on créé uen fonction pour rendre nos éléments draggable (merci piouPiouM ^^)
  3. function addDraggable(el){
  4. el.Draggable(
  5. {
  6. revert: true,
  7. zIndex: 1000,
  8. ghosting: true,
  9. opacity: 0.7
  10. }
  11. )
  12. };
  13.  
  14. $(document).ready(
  15.  
  16. function()
  17. {
  18. //Nos élements draggable sont définis ici. Ce sont tous les éléments avec la class CSS ‘.drag’.
  19. addDraggable($(’.drag’));
  20.  
  21. //le div avec la class ‘.ingredient’ est notre première zone droppable. Elle contient nos ingrédients (original hein!).
  22. $(’.ingredient’).Droppable(
  23. {
  24. //elle accept les élément ayant la class ‘drag’
  25. accept : ‘drag’,
  26. //ici cela affecte des classes css suivant que la zone est active ou hover. Pratique pour changer de style au survol.
  27. //activeclass: ‘activeEmplacement’,
  28. //hoverclass: ‘hoverEmplacement’,
  29. //plusieurs zone de tolérance existe. Allez faire un tour sur la doc.
  30. //Ici nous choisissons de pouvoir dropper un élément quand le pointeur de la souris est dans la zone.
  31. tolerance: ‘pointer’,
  32. //on définit ce qu’il va se passer lorsqu’on drop un élément dans la zone. On passe l’élément draggé en paramètre.
  33. ondrop: function (drag)
  34. {
  35. //on récupère l’attribut recette si le drag en possede un
  36. var id_recette=$(drag).attr(’recette’);
  37. //et l’id de l’ingredient pour le cas de la suppression
  38. var id_ingredient=$(drag).attr(’id’);
  39. //si il en possède un on suprime le drag. Cela correspond à si un ingredient d’une recette est enlevé de sa recette.
  40. //supprimez le bloc et testez!
  41. if(id_recette){
  42. $(drag).remove();
  43. //nous utilisons la methode get sur l’objet jQuery ($).
  44. //le premier parametre est la page de script (dans notre cas “traitement.php”)
  45. //le second est un tableau d’arguments sous la forme clé/valeur
  46. $.get(”traitement.php”,{action:”suppression_ingredient_recette”,id_ingredient:id_ingredient,id_recette:id_recette});
  47. }
  48. },
  49. fit: true
  50. }
  51. );
  52. //Ici nous allons dropper nos ingrédient pour construire nos recettes.
  53. $(’.recette_ingredient’).Droppable(
  54. {
  55. accept : ‘drag’,
  56. activeclass: ‘activeEmplacement’,
  57. hoverclass: ‘hoverEmplacement’,
  58. tolerance: ‘pointer’,
  59. ondrop: function (drag)
  60. {
  61. //nous récuperons l’id de la recette. Il est contenu dans le div parent de la zone droppabe (allez revoir le xhtml ;-p).
  62. var id_recette=$(this).parents().attr(’id’);
  63. //on clone l’élément draggable. Cela permet de réutiliser un autre élément pour une autre recette!
  64. var drag1 = $(drag).clone();
  65. //nous ajoutons un attribut recette ayant pour valeur l’id de la recette.
  66. $(drag1).attr(’recette’,id_recette);
  67. //puis nous récuperons l’id de l’ingredient…
  68. var id_ingredient=$(drag1).attr(’id’);
  69. //…pour verifier qu’il ne soit pas déjà présent!
  70. if (!$(this).children().is(’#’ + id_ingredient)) {
  71. //s’il n’est pas présent on l’ajoute
  72. $(this).append(drag1);
  73. //on rend notre “clone” draggable
  74. addDraggable(drag1);
  75. //même combat pour l’ajax ^^
  76. $.get(”traitement.php”,{action:”ajout_ingredient_recette”,id_ingredient:id_ingredient,id_recette:id_recette});
  77. //avec un petit effet pour l’apaprition :p
  78. $(drag1).fadeIn(”slow”);
  79. }
  80. },
  81. fit: true
  82. }
  83. );
  84.  
  85. }
  86. );

  • Le CSS

Bon ben là je vous renvoi vers la première partie du tutoriel :-) .

Voila! C’est fini! Bon j’aurais pu optimiser un peu le code par moment…en factorisant la connexion à la base, en evitant la requette pour chaque recette…mais bon ce n’était pas le but du tuto hein :-p. Si vous voulez vous entrainer vous pouvez par exemple rajouter deux champ qui permettent d’ajouter une recette et un ingrédient en AJAX!

Si vous avez des questions, comme d’hab’ n’hésitez pas je me ferais un plaisir d’essayer d’y répondre! Et montrez moi vos essais! ;-)

]]> http://antoine.guiral.info/2008/03/09/tuto-jquery-drag-%e2%80%98n-drop-avec-sauvegarde-automatique-en-base-de-donnees-22/feed/ 29 [tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (1/2) http://antoine.guiral.info/2008/02/24/tuto-jquery-drag-n-drop-avec-sauvegarde-automatique-en-base-de-donnees-12/ http://antoine.guiral.info/2008/02/24/tuto-jquery-drag-n-drop-avec-sauvegarde-automatique-en-base-de-donnees-12/#comments Sun, 24 Feb 2008 17:24:19 +0000 Antoine http://guiralantoine.wordpress.com/?p=50 Bonjour!

Je profite d’un peu de répit ce dimanche pour terminer la première partie de ce tutoriel. Nous allons voir comment faire des drag’n drop (glisser déposer) avec JQuery. Dans un second temps nous verrons comment sauvegarder les modifications directement en base de donnée avec de l’ajax. Pour voir un exemple je vous propose d’aller faire un tour sur mon site de gestion d’une équipe de rugby (projet en cour) : teamManagerXV.

Bon allez on attaque?!

  • Le coté client : XHTML

Comme d’habitude le code puis les explications :-)

  1.  
  4.  
  5. <meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ />
  6. <script type=”text/javascript” src=”jquery.js”></script>
  7. <script type=”text/javascript” src=”interface.js”></script>
  8. <script type=”text/javascript” src=”script.js”></script>
  9. <link rel=”stylesheet” type=”text/css” href=”styles.css” media=”all”/>
  10. </head>
  13. <h1>Waouuuuuuuhhhhhh</h1>
  14. <div class=”ingredient”>
  15. <div id=”1″ class=”drag”>sucre</div>
  16. <div id=”2″ class=”drag”>lait</div>
  17. <div id=”3″ class=”drag”>farine</div>
  18. <div id=”4″ class=”drag”>oeuf</div>
  19. <div id=”5″ class=”drag”>sel</div>
  20. </div>
  21. <div class=”recette” id=”r_1″>
  22. <h3>Pâte à crêpe</h3>
  23. <div class=”recette_ingredient”></div>
  24. </div>
  25. <div class=”recette” id=”r_2″>
  26. <h3>Pâte brisée</h3>
  27. <div class=”recette_ingredient”></div>
  28. </div>
  29. </div>
  30.  
  31. </body>
  32. </html>

Alors rien de particulier pour le moment en terme de structure du document. Vous pouvez remarquer que nous avons 3 divs « principaux » : un pour les ingrédients et un pour chaque recette. Celui pour les ingrédients contient nos éléments draggables tandis que ceux pour les recettes contiennent nos récepteurs (zone de drop).

  • un peu de style : CSS
  1.  
  2. div{border:1px solid black}
  3. .drag,.recette_ingredient{height:20px;width:60px}

Pas grand chose ici! Juste des bordures pour que ce soit « compréhensible » et un largeur/hauteur définie pour les zones de drop et les drags.

  • Enfin des trucs cool! Le javascript!

Comme notre code est basé sur le framework JQuery il faut que vous téléchargiez la librairie ainsi que la sur-couche « interface » (vous pouvez télécharger les deux sur le site d’interface). Ajustez les noms avec votre fichier xhtml. Enfin créez votre fichier script.js. Je pense avoir suffisament commenté le code pour ne pas revenir dessus. Si vous avez des questions n’hésitez pas, un petit commentaire et je vous répond dans la journée!

EDIT : grâce à piouPiouM j’ai pu résoudre le problème du mouseover.

  1.  
  2. //on créé uen fonction pour rendre nos éléments draggable (merci piouPiouM ^^)
  3. function addDraggable(el){
  4. el.Draggable(
  5. {
  6. revert: true,
  7. zIndex: 1000,
  8. ghosting: true,
  9. opacity: 0.7
  10. }
  11. )
  12. };
  13.  
  14. $(document).ready(
  15. function()
  16. {
  17. //Nos élements draggable sont définis ici. Ce sont tous les éléments avec la class CSS ‘.drag’.
  18. addDraggable($(’.drag’));
  19.  
  20. //le div avec la class ‘.ingredient’ est notre première zone droppable. Elle contient nos ingrédients (original hein!).
  21. $(’.ingredient’).Droppable(
  22. {
  23. //elle accept les élément ayant la class ‘drag’
  24. accept : ‘drag’,
  25. //ici cela affecte des classes css suivant que la zone est active ou hover. Pratique pour changer de style au survol.
  26. //activeclass: ‘activeEmplacement’,
  27. //hoverclass: ‘hoverEmplacement’,
  28. //plusieurs zone de tolerance existe. Allez faire un tour sur la doc.
  29. //Ici nous choisissons de pouvoir dropper un élément quand le pointeur de la souri est dans la zone.
  30. tolerance: ‘pointer’,
  31. //on définit ce qu’il va se passer lorsqu’on drop un élément dans la zone. On passe l’élément draggé en parametre.
  32. ondrop: function (drag)
  33. {
  34. //on on récupère l’attribut recette si le drag en possede un
  35. var id_recette=$(drag).attr(’recette’);
  36. //si il en possède un on suprime le drag. Cela correspond à si un ingredient d’une recette est enlevé de sa recette.
  37. //supprimez le bloc et testez!
  38. if(id_recette){
  39. $(drag).remove();
  40. }
  41. },
  42. fit: true
  43. }
  44. );
  45. //Ici nous allons dropper nos ingrédient pour construire nos recettes.
  46. $(’.recette_ingredient’).Droppable(
  47. {
  48. accept : ‘drag’,
  49. activeclass: ‘activeEmplacement’,
  50. hoverclass: ‘hoverEmplacement’,
  51. tolerance: ‘pointer’,
  52. ondrop: function (drag)
  53. {
  54. //nous récuperons l’id de la recette. Il est contenu dans le div parent de la zone droppabe (alez revoir le xhtml ;-p).
  55. var id_recette=$(this).parents().attr(’id’);
  56. //on clone l’élément draggable. Cela permet de réutiliser un autre élément pour une autre recette!
  57. var drag1 = $(drag).clone();
  58. //nous ajoutons un attribut recette ayant pour valeur l’id de la recette.
  59. $(drag1).attr(’recette’,id_recette);
  60. //puis nous récuperons l’id de l’ingredient…
  61. var id_ingredient=$(drag1).attr(’id’);
  62. //…pour verifier qu’il ne soit pas déjà présent!
  63. if (!$(this).children().is(’#’ + id_ingredient)) {
  64. //s’il n’est pas présent on l’ajoute
  65. $(this).append(drag1);
  66. //on rend notre “clone” draggable
  67. addDraggable(drag1);
  68. //avec un petit effet pour l’apaprition :p
  69. $(drag1).fadeIn(”slow”);
  70. }
  71. },
  72. fit: true
  73. }
  74. );
  75.  
  76. }
  77. );

Voila! Cette première partie est fini! Je ferais bientôt la suite avec la sauvegarde de vos recettes dans une base de donnée grâce à l’ajax!

Si vous voulez que je détail un point précis demandez via un petit commentaire! Puis si vous avez aimé n’hésitez pas à le dire c’est toujours sympa et ça motive :p

]]> http://antoine.guiral.info/2008/02/24/tuto-jquery-drag-n-drop-avec-sauvegarde-automatique-en-base-de-donnees-12/feed/ 26 [tuto mashup] Galerie photo animée via Flickr : animer votre galerie (2/2) http://antoine.guiral.info/2008/01/22/tuto-mashup-galerie-photo-animee-via-flickr-animer-votre-galerie-22/ http://antoine.guiral.info/2008/01/22/tuto-mashup-galerie-photo-animee-via-flickr-animer-votre-galerie-22/#comments Tue, 22 Jan 2008 18:10:12 +0000 Antoine http://guiralantoine.wordpress.com/2008/01/22/tuto-mashup-galerie-photo-animee-via-flickr-animer-votre-galerie-22/ La suite du tutoriel sur les mashup avec flickr est là! Sachez que ce tutoriel est applicable avec toutes vos photos, qu’elles proviennent de flickr ou non.

Pour ceux qui ne veulent pas ou n’ont pas le temps ou l’envie de lire la première partie voici ma page de test pour la galerie avec flickr (des fois il y a un bug, faites f5 le temps que je corrige ce problème…).

  • Le javascript : jquery

Nous allons d’abord télécharger notre framework préféré >>JQuery<< et le plugin >>Interface<< qui nous intéresse.

Choisissez bien!

Je vous conseil de mettre vos deux librairie dans un dossier que vous nommerez scripts et qui contiendra tous vos scripts javascript et vos librairies. Maintenant que votre espace de travaille est préparé reprenons le fil du tutoriel précédent :

  1.  
  2.  <?php
  3. require(’flickr.php’);
  4. // Paramètres API :
  5. $apiKey = ‘010e8*************8c3e*******22′;
  6. $apiSecret = ‘98*********418e’;
  7. // Id du User :
  8. $userId = ‘22********3@N07′;
  9. //Id de l’album :
  10. $albumId = ‘721***************4′;
  11. // Nouvelle instance de Flickr :
  12. $flickr = new Flickr( $apiKey , $apiSecret );
  13. // Nouvelle instance de Album :
  14. $album = new Album( $flickr , $albumId , $userId );
  15.  
  16. ?>
  17.  
  18. <?php
  19. // Affiche les “thumbs” de toutes les photos de l’album :
  20. foreach( $album->getPhotos() as $photo ) {
  21. echo ‘<a href=”#”>’.$photo['imgThumbs'].’</a>’ ;
  22. }
  23. ?>

Pour rappel, ce petit bout de code permet de récupérer des photos que l’on héberge chez flickr. Nous allons le compléter. Vous remarquez que j’ai séparé le code en deux parties : la première regroupe tous les traitements (les instances, les assignations, les appels de fonctions,etc…) tandis que la seconde concerne l’affichage des photos. Vous remarquez aussi que j’ai rajouté un lien sur nos photos. Nous ne nous en servirons pas mais vous pourriez par exemple afficher la même image en taille réelle!…

Nous allons commencer par placer notre entête XHTML. Elle contient une DTD qui spécifie au navigateur dans quelle langue vous « parlez » (HTML ou XHTML et quelle version). Viennent ensuite les balises « head » qui contiennent beaucoup d’informations dont les différent liens vers vos fichiers de styles ou de scripts.

  1.  
  2.  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
  3. <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”fr” lang=”fr”>
  5. <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
  6. <meta http-equiv=”Content-Style-Type” content=”text/css” />
  7. <link rel=”stylesheet” type=”text/css” media=”screen” href=”styles/styles.css” />
  8. <script type=”text/javascript” src=”scripts/jquery.js”></script>
  9. <script type=”text/javascript” src=”scripts/interface.js”></script>
  10. </head>

Vient ensuite le corps de la page, le « body« . Le notre sera très sommaire : un titre et un div qui contiendra notre galerie. Pour y avoir accès facilement dans notre CSS nous lui assignerons un identifiant unique ( »id« ).

  1.  
  3. <h2>Test flickr</h2>
  4. <div id=”carousel”>
  5. //mes photos</div>
  6.  
  7. </body>
  8. </html>

Là si j’ai bien expliqué vous devriez déjà avoir copier le second bout de php à la place du commentaire « //mes photos« . Sinon ben faites le vite :-) .

  • Le CSS

On est bientot arrivé! Il faut maintenant donner un peu de style à tout ça. Qu’est ce qu l’on a : un div avec un identifiant « carousel » et des images dans ce div. Et bien allons-y! Petit rappel : nous travaillons dans le fichier styles.css qui se trouve dans le dossier styles à la racine de notre site web. Le border:none; sur les images permet de ne pas avoir une belle bordure bleu autour de vos magnifiques photos de vacances. Le position:absolute; sur les liens est nécessaire au bon fonctionnement du plugin!

  1.  
  2. #carousel a
  3. {
  4. position: absolute;
  5. width: 110px;
  6. }
  7.  
  8. #carousel img
  9. {
  10. border: none;
  11. }

Voila le tuto est fini! J’espère qu’il vous a apporté des choses! Envoyez moi vos réalisations! Cela me ferait vraiment plaisir! De plus nous pourrions échanger sur nos façons de faire, ou si vous trouvez des p’tites astuces…enfin bref : laissez moi un commentaire qu’on discute un peu :p

See you!

]]> http://antoine.guiral.info/2008/01/22/tuto-mashup-galerie-photo-animee-via-flickr-animer-votre-galerie-22/feed/ 17 [tuto jquery] cadres extensibles animés avec jquery http://antoine.guiral.info/2008/01/15/tuto-jquery-cadres-extensibles-animes-avec-jquery/ http://antoine.guiral.info/2008/01/15/tuto-jquery-cadres-extensibles-animes-avec-jquery/#comments Mon, 14 Jan 2008 22:09:05 +0000 Antoine http://guiralantoine.wordpress.com/2008/01/15/tuto-jquery-cadres-extensibles-animes-avec-jquery/ Un petit tutoriel rapide pour terminer les explications par rapport à mon cv en ligne. Je vous conseille de lire le tutoriel précédent sur les cadres extensibles en xhtml/css.

JQuery est un framework javascript. Il en existe d’autres comme MooTools [en] ou script.aculo.us [en]. Cela rajoute une couche javascript qui permet de manier les éléments DOM plus facilement. Ils fournissent aussi une quantité impressionnante d’effets très « 2.0 » ou vous permettent d’utiliser AJAX de manière très simple.

  • Télécharger JQuery et faire le « linkage »

Allez vite télécharger la dernière version stable de JQuery sur le site officiel. Ensuite ouvrez votre editeur préféré et ouvrez le fichier html sur lequel vous voulez tester cet effet (si vous avez fait le tutoriel précédent servez vous en ;-p).

Placez vous entre vos balises <head> et </head> et faites le lien entre votre fichier html et votre fichier javascript qui contient JQuery :

  1. <script src="path/to/jquery.js" type="text/javascript"><!--mce:0--></script>

Puis entre votre fichier html et le fichier composé de vos fonctions et/ou effets maisons basés sur JQuery (ou pas!) :

  1. <script src="scripts/script.js" type="text/javascript"><!--mce:1--></script>

Nous sommes parés pour rentrer dans le vif du sujet!

  • La base

Le sélécteur universel JQuery : « $« . « $ » désigne un objet JQuery étant lui même un ensemble d’éléments DOM.

Par exemple : $( »a ») désigne tout les liens présent dans le document. Un autre exemple plus « CSS » : $( ».ma_class ») retourne tout les éléments auxquels on a affécté la classe CSS ma_class. Nous allons donc accéder aux éléments que nous voulons animer grâce à ce sélécteur.

Animate est une méthode JQuery. C’est à dire qu’une fois un ensemble d’éléments séléctionné on va leurs affecter cette méthode. Cette affectation ce fait avec le « . » : $( »mes_elements »).ma_methode();. Cette méthode peux prendre 4 arguments. Dans notre cas nous n’en utiliserons que 2 : le premier pour les attributs CSS que nous voulons modifier, le second pour la vitesse à laquelle s’executera l’effet.

Vous pouvez déclancher vos effets sur plusieurs événements. Dans ce tutoriel nous utiliserons le click qui se traduit par la méthode : « .clic() ». Pour mon cv j’utilise la méthode « .mouseover » pour faire bouger mes 3 cadres au passage de la sourie sur l’un d’eux.

  • Le code pour un seul cadre
  1. $("#L").click(function(){
  2.  
  3. $("#L").animate({width: 300,left:300,top:190}, "fast");
  4.  
  5. $("#B").animate({height: 130}, "fast");
  6.  
  7. });

Commentaire 1 : les effets seront déclanchés sur un clic sur l’élément « #L ». Le premier sélécteur JQuery est donc utilisé pour déclencher l’événement.

Commentaire 2 : on utilise ensuite une fonction anonyme. C’est juste la création d’une fonction temporaire qui n’a pas de nom. On l’a créé juste pour l’occasion et elle ne sera pas réutilisable à un autre endroit dans le code.

Commentaire 3 : on sélectionne ensuite les éléments que l’on veux animer grâce à un nouveau sélécteur JQuery. Dans notre cas nous sélectionnons le cadre le plus externe $( »#L ») pour l’élargir (ainsi tous les div plus « internes » prendront toute la largeur qu’on leur donne ce qui placera nos bordures correctements) en passant comme premier arguments à .animate() : {width:300,left:300,top:190}. Cela à pour effet de passer la largeur de l’élément séléctionné à 300, puis de positionner le cadre à 300 px du bord gauche de la fenêtre et 190 px du bord supérieur de la fenêtre. Le second argument définit la vitesse de l’animation, ici : « fast ». On aurais pu mettre un chiffre en milliseconde (par exemple 300). La même opération est effectuée sur le div le plus « interne » pour forcer l’étirement du cadre en hauteur.

Commentaire 4 : les attributs CSS composé comme « margin-left » s’ecriront « marginLeft » quand ils seront attributs de .animate().

Voila c’est fini! Surtout n’hésitez pas à me poser vos question. Et j’attend avec impatience les url’s de vos réalisations!

A bientôt!

]]> http://antoine.guiral.info/2008/01/15/tuto-jquery-cadres-extensibles-animes-avec-jquery/feed/ 0