Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

JQuery et Visual Studio 2008 by klutzfu47

VIEWS: 87 PAGES: 9

									JQuery et Visual
  Studio 2008
   Intégration de JQuery dans ASP.NET




   Courtois Baptiste ; Lasvigne Pierre ; Mornas
Sébastien

   Version 1.0

   9 Pages

   20/11/2007

   ASP-.NET-JQUERY-AJAX-JAVASCRIPT
            JQuery et Visual Studio 2008 - Courtois Baptiste ; Lasvigne Pierre ;
                                                                                      20 novembre 2007
          Mornas Sébastien

Propriétés du document

        Auteur               Courtois Baptiste ; Lasvigne Pierre ; Mornas Sébastien
     Version                 1.0
     Nombre de pages         99
     Références            ASP-.NET-JQUERY-AJAX-JAVASCRIPT


Historique du document

         Date de      Version        Auteur                   Changements
         révision
      20/11/2007         1.0       TRIGRAM


Source du document

      La dernière version de ce document est téléchargeable sur http://mti.epita.net/blogs/




                       JQuery et Visual Studio 2008| Introduction                             2/9
                      JQuery et Visual Studio 2008 - Courtois Baptiste ; Lasvigne Pierre ;
                                                                                                                                           20 novembre 2007
                    Mornas Sébastien

Sommaire

    Introduction ...........................................................................................................................................4
    Intégration dans Visual Studio 2008 ......................................................................................................4
       Installation de la bibliothèque ...........................................................................................................4
           Pré-requis.......................................................................................................................................4
           Installation de jQuery ....................................................................................................................4
       Utilisation ...........................................................................................................................................5
    JQuery en détails ...................................................................................................................................5
       Les bases de jQuery ...........................................................................................................................5
           L’objet jQuery, les filtres et sélecteurs ..........................................................................................5
           Les événements .............................................................................................................................7
           Les requêtes AJAX ..........................................................................................................................8
           Les effets graphiques .....................................................................................................................8
       La bibliothèque jQuery UI ..................................................................................................................8
           Mises en forme avancée ................................................................................................................9
           Interaction avec l’utilisateur ..........................................................................................................9
    Conclusion..............................................................................................................................................9




                                        JQuery et Visual Studio 2008| Introduction                                                                      3/9
                  JQuery et Visual Studio 2008 - Courtois Baptiste ; Lasvigne Pierre ;
                                                                                              20 novembre 2007
                Mornas Sébastien

Introduction

     Avec l’ère du web 2.0, le JavaScript est remis au goût du jour. Validation client, interface
  ergonomique et dynamique, effet visuels, requêtes asynchrones … tout ceci nécessite le support de
  JavaScript. Cependant avec la multiplication des navigateurs internet, il est complexe pour un
  développeur de réaliser du code JavaScript qui puissent fonctionner efficacement partout.

      Il existe de plus en plus de bibliothèque JavaScript, offrant des fonctionnalités pouvant être
  utilisées sur n’importe quel navigateur, l’une d’entre elle nous intéresse plus particulièrement. C’est
  bien entendu, jQuery, que Microsoft à choisi pour être intégrée à ASP.NET.




Intégration dans Visual Studio 2008

     Installation de la bibliothèque

      Pré-requis
      L’installation de la bibliothèque jQuery est assez simple en soit. Bien entendu, pour commencer, il
  est nécessaire de posséder une version de Visual Studio 2008 ainsi que de se procurer une version, la
  plus à jour possible (actuellement 1.3.1), du Framework jQuery, disponible sur le site officiel :
  www.jquery.com. Le site propose trois versions de la bibliothèque :

             La version non compressée (uncompressed version), plus lourde que les suivantes mais
             lisible aisément par l’homme et donc préférable pour le développement et le débug.
             La version minimisée (minimized version), où tous les caractères inutiles comme les
             espaces, les tabulations et les retours à la ligne ont été supprimés. C’est une version légère
             préposée à l’utilisation sur un site en production.
             La version compressée (packed version), grâce au format GZIP, est la plus légère des trois,
             mais n’est pas recommandés pour une utilisation en production.

      Pour commencer le développement d’une application web utilisant jQuery, la version non
  compressée semble donc être le meilleur choix. Le site officiel propose aussi une bibliothèque
  JavaScript (jquery vsdoc) permettant l’utilisation du système d’auto-complétion « IntelliSense » de
  Visual Studio. Pour qu’ « IntelliSense » fonctionne au mieux avec jQuery, Microsoft a publié un patch
  pour Visual Studio 2008 disponible sur le site MSDN de Microsoft, sous la référence KB958502
  (http://code.msdn.microsoft.com/KB958502).

      Installation de jQuery
      Une fois en possession d’une version de jQuery et d’un Visual Studio 2008 patché, l’installation de
  la bibliothèque au sein d’un projet en ASP.NET se fait en quelques clics et lignes de code. Il suffit
  d’ouvrir ou de créer un projet Web, de se rendre dans une page aspx et d’insérer la ligne de code
  HTML permettant de charger la bibliothèque.

     INSERTION DE LA BIBLIOTHEQUE JQUERY EN UTILISANT LES BALISES <SCRIPT></SCRIPT> :

     <script language="javascript" src="jquery-1.3.1.js"></script>


                              JQuery et Visual Studio 2008| Introduction                              4/9
                   JQuery et Visual Studio 2008 - Courtois Baptiste ; Lasvigne Pierre ;
                                                                                                   20 novembre 2007
                 Mornas Sébastien

      Une seconde méthode, est d’utiliser le script manager ASP, pour rappel celui-ci doit être placé au
  sein d’une balise form possédant l’attribut runat ayant server pour valeur.

     INSERTION DE LA BIBLIOTHEQUE JQUERY EN UTILISANT LE SCRIPT MANAGER ASP

          <form id="form1" runat="server">
          <asp:ScriptManager ID="ScriptManager1" runat="server">
              <Scripts>
                  <asp:ScriptReference Path="~/jquery-1.3.1.js" />
              </Scripts>
          </asp:ScriptManager>
          </form>



     Utilisation
      L’utilisation de jQuery dans Visual Studio 2008 est simple, il suffit d’ajouter, dans le code ASPX, les
  scripts JavaScripts utilisant ses fonctionnalités, soit dans des fichiers externes, soit directement entre
  deux balises « script ». L’outil « IntelliSense » de Microsoft permet à tout moment d’un simple
  raccourci (CTRL + ESPACE) d’afficher toutes les fonctionnalités disponibles via l’objet jQuery. Si la
  documentation est installée, en plus de l’auto-complétion, « IntelliSense » offre des informations sur
  les différentes méthodes de l’objet.


JQuery en détails

      La bibliothèque jQuery offre un cheptel énorme de possibilités de tout ordre. Ainsi on retrouvera
  des fonctionnalités permettant d’interagir avec la page HTML en elle-même, modifier sa structure, son
  style CSS, de faire des requêtes http en utilisant les appels asynchrone AJAX, de réagir aux actions de
  l’utilisateur …

     Les bases de jQuery

      L’objet jQuery, les filtres et sélecteurs
  Comme dit précédemment, jQuery propose de multiples fonctionnalités, mais pour faciliter son
  utilisation tout est centralisé dans un seul et même objet, l’objet jQuery, à partir du quel on exécute
  des requêtes. Cet objet, au sens POO, est accessible de bien des manières. En effet, jQuery met à
  disposition plusieurs variables et moyens d’accéder à cet objet.

  LISTE DES DIFFERENTS MOYENS D’ACCES A L’OBJET JQUERY

     jQuery
     window.jQuery
     window.$
  Ces trois variables ne sont en fait que des alias pour la méthode d’initialisation de jQuery :

  INITIALISATION DE L’OBJET JQUERY

     new jQuery.fn.init( selector, context );
  Cette méthode qui ressemble fortement à un constructeur retourne une nouvelle instance de l’objet
  jQuery, en fonction du sélecteur et du contexte passés en paramètres. Le sélecteur correspond à la
  requête permettant de sélectionner des nœuds sur la portion de l’arbre DOM de la page qui
  correspond s’il est fourni au paramètre optionnel contexte.

                             JQuery et Visual Studio 2008| JQuery en détails                              5/9
                 JQuery et Visual Studio 2008 - Courtois Baptiste ; Lasvigne Pierre ;
                                                                                            20 novembre 2007
               Mornas Sébastien



   L’enchainement des requêtes
L’objet jQuery et ses fonctionnalités, ont été pensées dans l’optique de pouvoir enchainer les
requêtes. C’est pourquoi l’instance retournée par cette méthode pourra être réutilisée pour d’autres
requêtes.

    La sélection d’élément sur la page
Grâce à l’objet jQuery et ses « sélecteurs » il est donc facile de récupérer tel ou tel élément de la page
en fonction de certains critères. Ci-dessous, quelques exemples de sélections effectuées sur l’ensemble
de la page :

EXEMPLES DE RECUPERATION D’ELEMENTS GRACE A L’OBJET JQUERY

   $('#Identifiant')       //   récupère   l'élèment ayant pour id "identifiant"
   $('head meta')          //   récupère   les balises meta situées dans la balise head de la page
   $('#Idenfiant p')       //   récupère   les paragraphes contenu par l'élément d'id "identifiant"
   $('p.maClasseCSS')      //   récupère   tous les paragraphes ayant pour classe CSS "maClasseCSS"

   Filtrer la sélection
Pour affiner la requête de récupération d’éléments, jQuery met à dispositions des filtres permettant de
préciser les différents critères de sélections. Il existe cinq grandes catégories de filtres :

        Les filtres de positions, qui permettent de filtrer les éléments par rapport à leur position dans
        l’arbre DOM.
        Les filtres d’héritages, qui permettent de sélectionner certains enfants des nœuds qui
        correspondent à l’expression de la requête.
        Les filtres de contenu, qui permettent de filtrer les éléments sur leur contenu.
        Les filtres d’attributs qui permettent de filtrer les éléments sur leurs attributs.
        Les filtres de formulaires qui permettent de récupérer certains éléments d’un formulaire.

    La liste des filtres de jQuery est disponible dans sa documentation, mais voici quelques exemples
de filtres simples :

EXEMPLES D’UTILISATIONS DE FILTRES

   $('p:empty')                   // liste les paragraphes vides
   $('p:first')                   // récupère le premier paragraphe de la page
   $('p:hidden')                  //récupère les paragraphes invisible à l'utilisateur
   $('p[id=Identifiant')          // récupère le paragraphe ayant pour id "identifiant"

    Utiliser le résultat d’une requête
JQuery est puissant, et permet d’effectuer des requêtes complexes grâces à ses filtres et sélecteurs,
mais où est le résultat ? En effet, la méthode principale de jQuery nous retourne une nouvelle instance
de l’objet jQuery pour pouvoir être réutilisée directement en enchainant les requêtes, mais ce n’est
pas exactement le résultat que l’on voudrait. Dans l’instance retournée, jQuery garde le résultat et
offre des méthodes pour les traiter :

LISTE DES METHODES POUR TRAITER UN ENSEMBLE DE RESULTAT RETOURNER PAR L’OBJET JQUERY

   $('p').each(callback) // appelle la fonction "callback" pour chaque élément du résultat
   $('p').length         // retourne la nombre d'élément composant le résultat
   $('p').eq(position)   // retourne l'élément à la position "position"

                           JQuery et Visual Studio 2008| JQuery en détails                           6/9
                JQuery et Visual Studio 2008 - Courtois Baptiste ; Lasvigne Pierre ;
                                                                                           20 novembre 2007
              Mornas Sébastien

   $('p').get()             // retourne l'ensemble du résultat en un tableau d'élément DOM
   $('p').get(position)     // retourne l'élément DOM à la position "position"
   $('p').index(elem)       // cherche l'élément "elem" dans l'ensemble et retourne sa position
   Le fait que jQuery offre la possibilité d’enchaîner les requêtes, filtres et autres fonctions, permet
donc d’effectuer des traitements complexes sur la structure de la page.

   Les événements
   JavaScript est un langage événementiel, et jQuery ne l’oublie pas. En effet, jQuery permet de gérer
tous les événements habituels de JavaScript, voir plus pour certains élément. Ci-dessous une liste des
événements que l’on peut écouter avec jQuery :

              Beforeunload : événement engendré juste avant que la page soit décharger par le
              navigateur (fermeture de fenêtre, changement d’url, etc.)
              Blur : engendré lorsque un élément perd la main, l’utilisateur à donc cliquer ailleurs ou
              utilisé une touche d’accessibilité.
              Change : engendré lorsque un élément perd la main et que son contenu à changé.
              Click : engendré lorsque l’utilisateur appui sur un bouton de la souris.
              Dblclick : engendré lorsque l’utilisateur appui deux fois brièvement sur un bouton de la
              souris.
              Error : engendré lorsque l’objet Window du navigateur détecte une erreur.
              focus : engendré par la prise de main d’un élément. (inverse de blur)
              Keydown : lorsque l’utilisateur presse une touche du clavier.
              Keyup : lorsque l’utilisateur arrête de presser une touche du clavier.
              Load : engendré lorsque tous les éléments ont été chargés.
              Mousedown : engendré lorsque l’utilisateur presse un bouton de la souris.
              Mouseenter : engendré lorsque le curseur de la souris entre dans la zone de survol d’un
              élément.
              Mouseleave : invese de mouseenter, engendré lorsque le curseur sort de la zone de
              survol d’un élément.
              Mousemove : engendré lorsque la position du curseur de la souris change.
              Mouseout : engendré lorsque la souris est déplacée en dehors de la zone de survol d’un
              événement.
              Mouseover : inverse de mouseout, engendré lorsque la souris est déplacée dans la zone
              de survol d’un événement.
              Mouseup : inverse de mousedown, engendré lorsque l’utilisateur relâche le bouton de
              la souris.
              Resize : engendré lorsqu’un élément est redimensionné.
              Scroll : engendré lorsqu’un élément est défilé.
              Select : engendré lorsqu’un élément est selectionné.
              Unload : engendré lorsque la page est déchargée.

   Tous ces évènements peuvent être captés par jQuery et associés à une méthode, grâce à la
fonction « bind ».

   UTILISATION DE LA METHODE BIND


                         JQuery et Visual Studio 2008| JQuery en détails                           7/9
                JQuery et Visual Studio 2008 - Courtois Baptiste ; Lasvigne Pierre ;
                                                                                            20 novembre 2007
              Mornas Sébastien

   $('p').bind('click', null, toggleVisibility) // associe l'événement "click" de tous les
paragraphes, à l'appelle de la fonction toggleVisibility



   La méthode « bind » prend 3 paramètres, le premier est l’événement à associer, le second les
données à envoyer en paramètres à la méthode passée comme troisième argument.

   Il existe d’autres méthodes d’association, et de dé-association d’événements :

           Bind qui associe une fonction à un événement.
           One qui associe pour une unique fois une fonction à un événement
           Unbind qui supprime l’association faite entre un événement et un élément.
           Trigger qui active déclenche l’événement.

   Les requêtes AJAX
Depuis l’ère du Web 2.0, les sites internet ne peuvent plus se passer d’AJAX, et bien sûr, jQuery ne
manque pas à l’appel. En effet, elle fourni des fonctions permettant de réaliser des requêtes AJAX sans
avoir à penser à tous les navigateurs possibles.

La principale fonction utilisée pour généré une requête AJAX est la fonction éponyme, « $.ajax() ».

EXEMPLE D’UTILISATION DE LA FONCTION AJAX

   $.ajax(
   {
       type: "GET", // définit le type de requête à GET
       url: "maPage.aspx", // définit l’url de la requête
       success: function(response) { // définit une fonction à appeler en cas de succes
              alert(response);
       }
   });
   La méthode AJAX permet de gérer différent scénario pour la requête :

           Success : succès de la requête
           Failure : echec de la requête
           Complete : fin de la requête, appelée après failure ou success

   Les effets graphiques
   La bibliothèque jQuery permet en plus de toutes les fonctionnalités citées précédemment, de
générer facilement des effets visuels.

           Effet sur la visibilité (affiche ou cache un élément à l’utilisateur)
           Effet de glissade
           Effet d’atténuation (fait apparaitre ou disparaitre un élément de façon progressive)
           Effet d’animation (permet de générer tout type d’animation personnalisée)

   La bibliothèque jQuery UI
    Comme dit plus haut, jQuery intègre nativement des méthodes permettant de réaliser des effets
visuels simples. Cependant jQuery ne pouvait s’arrêter là, lorsqu’on sait que d’autres bibliothèques
JavaScript offrent des possibilités plus ou moins similaires. C’est pourquoi, il existe une extension à la
bibliothèque jQuery basique, qui s’appelle jQuery UI (disponible sur http://ui.jquery.com).

                         JQuery et Visual Studio 2008| JQuery en détails                              8/9
                   JQuery et Visual Studio 2008 - Courtois Baptiste ; Lasvigne Pierre ;
                                                                                                 20 novembre 2007
                 Mornas Sébastien

     Cette bibliothèque, basée sur le noyau de jQuery, apporte de nouvelles fonctionnalités pour
  réaliser facilement des interfaces agréables, légères et dynamiques.

     Mises en forme avancée
     Avant l’utilisation massive du JavaScript, il était fréquent que les sites web obligeaient l’utilisateur à
  charger plusieurs pages pour bien structuré leur contenu. JQuery offre une alternative à ce procédé
  archaïque. En effet, grâces aux fonctionnalités de la bibliothèque UI, il est aisé de réorganiser sa page
  pour par exemples :

             Afficher une liste d’article en accordéon.
             Afficher plusieurs catégories en onglets.
             Ouvrir une boite de dialogue dynamique (interne à la page en cours)

  Ce qui a pour effet d’alléger la mise en page, et de facilité l’ergonomie du site.

      Interaction avec l’utilisateur
  La bibliothèque UI, permet aussi d’améliorer les interactions avec l’utilisateur. Avant JavaScript, et tant
  que HTML 5.0 n’est pas pris en charge sur tous les navigateurs, les utilisateurs devaient entrer des
  dates dans un champ de texte, sélectionner une couleur en entrant son code hexadécimal, et pour
  savoir s’il avait mal entré une donnée dans un formulaire, il devait recharger l’intégralité de la page.

  Avec jQuery UI, ces problèmes n’existent plus, pour sélectionner une date, on utilise l’élément
  datePicker :




                                         Figure 1 élément datePicker de jQuery UI

      jQuery UI offre donc de nombreux nouveaux élément encore inexistant en HTML, tels que le
  colorPicker, le slider, la barre de progression, le datePicker. Tout ceci dans le but d’améliorer
  l’expérience utilisateur, et l’ergonomie du site.


Conclusion

     jQuery est une bibliothèque qui, couplée à son extension UI, permet de répondre à tous les besoins
  d’un webmaître, soucieux de l’ergonomie, le dynamisme, et la conformité « Web 2.0 » de son site.

      C’est une bibliothèque légère et complète, qui permet aisément de réaliser des requêtes
  asynchrones ou la manipulation des éléments DOM. Ce qui représente un gain de temps énorme pour
  tout développeur web. C’est un choix judicieux qu’a fait Microsoft d’intégrer jQuery dans Visual Studio
  et ASP.NET.
                               JQuery et Visual Studio 2008| Conclusion                                   9/9

								
To top