Docstoc

Utiliser les fondamentaux de Microsoft Ajax Library

Document Sample
Utiliser les fondamentaux de Microsoft Ajax Library Powered By Docstoc
					Microsoft                           Utiliser les fondamentaux – Atelier 8




            Microsoft Ajax Library



                   <Atelier 8/>
            Utiliser les fondamentaux




Eté 2007             Microsoft Ajax Library                     Page 1 sur 20
Microsoft                                                                                       Utiliser les fondamentaux – Atelier 8


Sommaire

1     INTRODUCTION ..................................................................................................................................................... 3
    1.1       CONTEXTE TECHNIQUE ........................................................................................................................... 3
    1.1       CONTEXTE FONCTIONNEL ....................................................................................................................... 3
2     REFERENCER MICROSOFT AJAX LIBRARY DANS LE PROJET .............................................................. 5
3     UTILISER MICROSOFT AJAX LIBRARY ......................................................................................................... 9
4     DEBOGUER LE SCRIPT CLIENT ...................................................................................................................... 14
5     POUR ALLER PLUS LOIN… .............................................................................................................................. 20
    5.1       OU TROUVER DES REFERENCES DE MICROSOFT AJAX LIBRARY ........................................................... 20
    5.2       COMMENT APPELER UN SERVICE WEB A PARTIR D’UN SCRIPT CLIENT................................................... 20
    5.3       COMMENT DEVELOPPER EN ORIENTE OBJET ......................................................................................... 20




Eté 2007                                                            Microsoft Ajax Library                                                       Page 2 sur 20
Microsoft                                                Utiliser les fondamentaux – Atelier 8



1 Introduction
 1.1 Contexte technique
L’objectif de cet atelier est d’explorer le Framework Microsoft Ajax dans sa version cliente.

Il s’agit avant tout d’une API nommée Microsoft Ajax Library. Non seulement, cette API
peut être utilisée indépendamment d’ASP.NET mais elle prend en charge également la
compatibilité avec les grands navigateurs du marché (Safari, Mozilla, Opéra et IE).




Dans cet atelier, nous vous proposons de découvrir cette API dans le contexte d’une page web
ASP.NET. Au final, cela ne change pas grand-chose si ce n’est que nous aurons plusieurs fois
l’occasion de nous reposer sur ASP.NET et Visual Studio pour nous simplifier la vie !

Pour installer et configurer l’environnement de développement pour exécuter cet atelier,
reportez-vous aux ateliers 1 et 2 du coach AJAX.

A la fin de cet atelier, vous saurez comment :

               Développer avec les extensions de type de données,
               Développer avec les raccourcis de méthode,
               Développer avec les espaces de nom Sys.*,
               Déboguer un programme JavaScript autrement qu’en utilisant l’appel à la
                fonction alert().

La solution de cet atelier est disponible dans le répertoire ..\Atelier 8\Solution. Les fichiers
utiles, auxquels font référence les exercices sont disponibles dans le répertoire ..Atelier
8\Fichiers utiles.


 1.1 Contexte fonctionnel
Nous avons choisi pour cet exercice de reproduire un exemple d’implémentation de la
fonction glisser déplacer (drag and drop) d’un élément sur une page HTML.
L’objectif est bien sûr d’avoir un comportement 100% client, sans aucun traitement serveur !

Eté 2007                                 Microsoft Ajax Library                        Page 3 sur 20
Microsoft                                              Utiliser les fondamentaux – Atelier 8

La zone à déplacer est un simple texte encapsulé dans une balise HTML de type div standard.
Nous verrons comment afficher la position initiale et la position finale du déplacement dans
une zone de texte HTML de type textarea.




 Note :




Eté 2007                               Microsoft Ajax Library                      Page 4 sur 20
Microsoft                                                 Utiliser les fondamentaux – Atelier 8



2 Référencer Microsoft Ajax Library dans le projet
Avant de commencer à développer avec Microsoft Ajax Library dans vos pages web, il faut
référencer la bibliothèque de script dans votre projet.

Dans cet exercice, vous allez apprendre à :

   -    Configurer une page web ASP.NET pour utiliser Microsoft Ajax Library.


Objectif
L’objectif de cet exercice est de préparer une page web en vue de lui ajouter du script utilisant
Microsoft Ajax Library.

Déroulement de l’exercice :

   1.   Lancez Visual Web Developer
   2.   Cliquez Fichier > Nouveau site Web….
   3.   Sélectionnez le modèle de projet ASP.NET AJAX-Enabled Web Site.
   4.   Nommez le projet et sélectionnez votre langage de prédilection.




       Voilà une première occasion de se reposer sur Visual Studio pour nous simplifier la
vie ! En effet ce modèle de projet crée un projet constitué d’une page Default.aspx et d’un
fichier de configuration déjà configuré pour développer avec Microsoft Ajax.

Cette configuration permet notamment de travailler avec le Framework Microsoft Ajax
serveur mais d’un point de vue uniquement client, la seule chose dont vous avez besoin est de
descendre dans vos pages la bibliothèque Microsoft Ajax Library. Celle-ci n’est rien d’autres
qu’une collection de fichiers JavaScript que vous trouverez sous le dossier :
 C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX
Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0
Eté 2007                                 Microsoft Ajax Library                         Page 5 sur 20
Microsoft                                               Utiliser les fondamentaux – Atelier 8




Les fichiers d’extension *.debug.js sont les mêmes que ceux du même nom d’extension *.js.
Dans tous les cas, ils constituent les fichiers source de Microsoft Ajax Library que vous avez
donc à votre disposition  !
La seule différence réside dans le fait que les premiers servent dans un contexte de débogage
(on s’en serait douté étant donné leur nom) et qu’ils sont alors chargés par ASP.NET dans vos
pages à la place de leur équivalent .js. Si vous éditez les fichiers, vous constaterez que les
fichiers de debug sont parfaitement lisibles alors que leur équivalent .js sont légèrement
offusqués (par exemple les variables sont renommées) et surtout que leur contenu est regroupé
sur une seule ligne…




Eté 2007                                Microsoft Ajax Library                       Page 6 sur 20
Microsoft                                                  Utiliser les fondamentaux – Atelier 8

La question est donc de savoir comment descendre ces fichiers de script côté client avec votre
page ?
Avec le modèle de projet que vous venez d’utiliser, tout est déjà prévu et configuré pour
vous :
   - Premièrement, une référence à System.Web.Extensions.dll a été ajoutée
       automatiquement au projet. Faites un clic droit sur le projet dans l’Explorateur de
       solutions > Pages de propriétés :




Cette DLL qui est plongée dans le GAC (automatiquement lorsque vous installez les
extensions AJAX sur votre poste), contient les fichiers JavaScript de la Microsoft Ajax
Library en tant que ressources embarquées. Vous n’avez donc nullement besoin d’ajouter les
fichiers .js à votre projet, Visual Studio s’en est occupé pour vous…

   -   Deuxièmement, le fichier de configuration a été préconfiguré avec les références qui
       s’imposent vers l’assembly précédent :




C’est d’ailleurs ici que vous pourriez configurer le mode debug pour charger dans vos pages
les fichiers .debug.js plutôt que les fichiers .js. Il suffit de donner la valeur true à l’attribut
debug de la balise compilation.

   -   Pour terminer, celui qui va s’occuper de réaliser le chargement proprement dit des
       fichiers de la bibliothèque de script dans vos pages, c’est un contrôle fourni par les

Eté 2007                                  Microsoft Ajax Library                         Page 7 sur 20
Microsoft                                                   Utiliser les fondamentaux – Atelier 8

       extensions AJAX qui s’appelle ScriptManager et que le modèle de projet a dessiné
       automatiquement sur la page Default.aspx :




       Du coup, si vous vouliez référencer un fichier de script personnalisé que vous auriez
écrit pour le projet, il suffirait de le rajouter dans la définition du contrôle. Cela ressemblerait
à une écriture comme ceci :

<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
  <asp:ScriptReference path="VotreFichierDeScript.js" />
 </Scripts>
</asp:ScriptManager>



       Pour inclure ce fichier systématiquement sur toutes vos pages, une solution simple
consiste à créer une page maître contenant le contrôle à partir de laquelle vous allez construire
toutes les pages de l’application.

 Note :




                                                  




Eté 2007                                   Microsoft Ajax Library                         Page 8 sur 20
Microsoft                                                Utiliser les fondamentaux – Atelier 8



3 Utiliser Microsoft Ajax Library
Dans cet exercice, vous allez apprendre à :

   -   Ecrire une procédure en réponse à un évènement JavaScript à l’aide de Microsoft Ajax Library,
   -   Utiliser l’espace de nom Sys.UI de Microsoft Ajax Library,
   -   Utiliser les raccourcis de méthode de Microsoft Ajax Library.

Objectif
L’objectif de cet exercice est de se familiariser avec les éléments fournis par Microsoft Ajax
Library et de comprendre comment ceux-ci peuvent vous aider dans le développement de
script client.

Contexte fonctionnel
Dans cette partie, nous allons nous concentrer sur l’écriture du code JavaScript pour glisser
déplacer la zone de texte :




Déroulement de l’exercice :

   1. Dessinez la zone à glisser déplacer sous la forme d’une balise HTML div standard :
          Ajoutez une balise div comme suit dans le formulaire de la page
             Default.aspx :




  Le style choisi pour la zone prévoit simplement une position absolue (donc hors du flux
HTML de la page) et un contour avec une bordure de 1 pixel d’épaisseur.



        Tout comme la programmation côté serveur, vos développements clients s’appuient sur
le modèle de programmation évènementielle c’est-à-dire qu’ils consistent à écrire des
procédures de traitement en réponse aux évènements qui se produisent sur la page.
Pour initier une opération de glisser déplacer ou quelle qu’elle soit, vous devez donc écrire
une procédure en réponse aux évènements correspondants. Une première solution consiste à
utiliser le mode déclaratif pour associer vos évènements à l’aide des attributs disponibles sur
la balise div, mais vous allez devoir gérer la spécificité de chaque navigateur.




Eté 2007                                 Microsoft Ajax Library                       Page 9 sur 20
Microsoft                                                Utiliser les fondamentaux – Atelier 8



     C’est là que Microsoft Ajax Library joue sa première carte ! Elle nous fournit un
mécanisme compatible multi navigateur pour accrocher des procédures en réponse à des
évènements sur les éléments HTML. C’est même l’intégralité du Framework Ajax qui a été
pensé dans cet esprit. Du coup, vous pouvez développer les yeux fermés sans vous préoccuper
du navigateur dans lequel va s’exécuter votre page !

    2. Ecrivez une procédure au chargement de la page qui définit les procédures en réponse
       aux évènements glisser déplacer :
           Ajoutez une balise script au formulaire :




               Ajoutez une fonction nommée pageLoad comme suit :

<script type="text/javascript">
      pageLoad = function(){
      }
</script>


       Attention ! Cette fonction doit impérativement s’appeler pageLoad. Il s’agit d’un mot
réservé, tout comme son homologue pageUnload. Comme son nom l’indique, vous vous
doutez que la fonction pageLoad est appelé au chargement de la page, plus exactement elle
est invoquée tout à la fin du chargement lorsque l’ensemble des scripts du Framework et de
ceux rattachés à votre page sont chargés. La fonction pageUnload est appelée au contraire
lorsque la page est fermée donc déchargée.
Par « chargé », il faut entendre « chargé en mémoire ». En effet, pour gérer le cycle de vie de
la page côté client, Microsoft Ajax Library instancie une classe nommée Application sur
laquelle se produisent des évènements.
La particularité des fonctions pageLoad et pageUnload est que leur nom suffit à les
accrocher aux évènements correspondant dans le cycle de vie de la page. Microsoft Ajax
Library s’occupe de coller les morceaux. . En revanche, pour répondre aux autres
évènements qui marquent le cycle de vie de votre application Ajax, c’est à vous d’assurer le
branchement.
Justement, nous allons voir comment accrocher une procédure en réponse à un évènement
avec Microsoft Ajax Library dans la suite de notre algorithme.

               Accrocher une procédure nommée OnDrag en réponse à l’évènement onDrag
                de la balise HTML div :

<script type="text/javascript">
      pageLoad = function(){
        var divZoneGlissante = $get('ZoneGlissante');
        $addHandler(divZoneGlissante,'drag', OnDrag);
      }
</script>
Eté 2007                                Microsoft Ajax Library                       Page 10 sur 20
Microsoft                                                Utiliser les fondamentaux – Atelier 8



       Rappelez-vous de la carte « compatibilité inter navigateur » de Microsoft Ajax Library !
Il faut savoir que la gestion des évènements en JavaScript n’est pas simple à la base car elle
dépend du navigateur dans lequel s’exécute la page. Donc pour palier à ce problème,
Microsoft Ajax Library nous fournit un mécanisme pour ajouter des évènements au cycle de
vie de la page indépendamment du navigateur.
Bien souvent comme c’est le cas ici, les évènements en question existent au sein du DOM
HTML. Il s’agit juste de se brancher dessus. Microsoft Ajax Library fournit une classe
Sys.UI.DomEvent comprenant une méthode addHandler pour accrocher vos procédures de
réponse aux évènements du DOM et assurer donc le lien avec ceux-ci.

       Mais vous avez peut-être remarqué que dans notre cas on utilise une méthode précédée
du caractère $. Cette écriture caractérise ce qu’on appelle les raccourcis de méthodes fournis
par Microsoft Ajax Library. Comme leur nom l’indique ces méthodes agissent comme des
raccourcis vers des méthodes plus complètes. Par exemple $addHandler est un raccourci pour
Sys.UI.DomEvent.addHandler.


    $addHandler comporte trois arguments :
    - Le premier est l’élément du DOM HTML pour lequel on souhaite brancher une
       procédure de réponse à l’un de ses évènements. Pour retrouver la zone marquée par la
       balise HTML div, on utilise là encore un raccourci de méthode. $get fait l’équivalent
       d’un appel à la méthode getElementById de la classe Microsoft Ajax
       Sys.UI.DomElement qui représente un élément DOM.
    - Le second est le nom de l’évènement exposé par l’élément DOM sur lequel on
       souhaite se brancher. Vous remarquerez que les noms d’évènement ne sont pas
       préfixés par on et qu’on écrit donc drag et non ondrag. Toujours pour un souci de
       compatibilité inter navigateur, Microsoft Ajax Library nous demande juste le nom de
       l’évènement sans fioriture. 
    - Le troisième est le nom de la procédure dans laquelle on va écrire le code en réponse à
       l’évènement. C’est notre handler d’évènement !

    3. Ecrivez maintenant les procédures en réponse aux évènements que vous venez
       d’accrocher à la balise div :
            En réponse à l’évènement drag, modifiez la position de la zone div en
              correspondance avec la position de la souris :


<script type="text/javascript">

     function OnDrag(eventElement){
         Sys.UI.DomElement.setLocation($get('ZoneGlissante'),
                                      eventElement.clientX, eventElement.clientY);
      }

     pageLoad = function(){
       …
     }

Eté 2007                                Microsoft Ajax Library                       Page 11 sur 20
Microsoft                                                Utiliser les fondamentaux – Atelier 8


</script>


    En une ligne c’est fait car Microsoft Ajax Library nous fournit une méthode statique
nommée setLocation de la classe Sys.UI.DomElement, pour positionner un élément à partir
des coordonnées spécifiées. C’est tout à fait l’esprit de l’espace de nom Sys.UI (UI pour User
Interface) de Microsoft Ajax Library, dans lequel vous trouverez des classes très utiles pour
gérer le dimensionnement et le positionnement des éléments d’une page les uns par rapport
aux autres. Il contient également des énumérations qui décrivent les codes des touches du
clavier, ou encore les différents boutons qui constituent la souris.
Vous reconnaissez également l’appel au raccourci $get pour récupérer l’élément du DOM sur
lequel porte le positionnement à partir de son ID.


     Qu’est ce que c’est que cette signature de méthode au fait ? D’où sort le paramètre
eventElement ? Rappelez-vous que dans un souci de compatibilité inter navigateur, on se
repose à fond sur Microsoft Ajax Library pour gérer nos évènements. Justement, voilà la
signature type à utiliser pour répondre aux évènements sur lesquels vous vous êtes branché
avec $addHandler. Il n’y en a qu’une pour tous les navigateurs ! Elle repose sur le paramètre
de type Sys.UI.DomEvent qui vous donne toutes les informations que vous voulez avoir sur
l’évènement concerné. Par exemple, dans notre cas, on peut lire dans les propriétés clientX et
clientY la position en pixel du pointeur de la souris au moment où se produit l’évènement.

   4. Testez le fonctionnement de la page :
          Enregistrez vos changements.
          Faites un clic droit sur la page > Afficher dans le navigateur pour exécuter la
              page Default.aspx.
          Sélectionnez le texte Déplacez moi puis vérifiez que vous pouvez le glisser
              déplacer.




       Le texte doit suivre la souris tout au long du déplacement du fait de votre procédure de
traitement.



      Il existe une autre écriture encore plus concise qui permettrait d’accrocher tous les
handlers en une seule fois. Elle utilise le raccourci $addHandlers :

<script type="text/javascript">
     pageLoad = function(){
       var divZoneGlissante = $get('ZoneGlissante');
       $addHandlers(divElement,{drag:OnDrag,dragstart:OnDragStart,
                              dragend:OnDragEnd});
     }
Eté 2007                                 Microsoft Ajax Library                      Page 12 sur 20
Microsoft                  Utiliser les fondamentaux – Atelier 8


</script>

 Note :




                  




Eté 2007    Microsoft Ajax Library                    Page 13 sur 20
Microsoft                                               Utiliser les fondamentaux – Atelier 8



4 Déboguer le script client
Dans cet exercice, vous allez apprendre à :

   -   Déboguer le code JavaScript avec Microsoft Ajax Library,
   -   Utiliser les extensions de type de Microsoft Ajax Library,
   -   Utiliser l’espace de nom racine Sys de Microsoft Ajax Library.

Objectif
L’objectif de cet exercice est de continuer à découvrir Microsoft Ajax Library tout en
définissant une méthode de débogage plus confortable que le traditionnel appel à la fonction
alert() du JavaScript.


Contexte fonctionnel
Nous allons rajouter une zone de texte à la page Default.aspx dans laquelle nous afficherons
la trace de notre application Ajax écrite avec Microsoft Ajax Library. L’objectif est
d’identifier la position initiale de la zone à déplacer et sa position finale lors de chaque
déplacement :




Déroulement de l’exercice :

   1. Pour tracer le début et la fin du déplacement, ajoutez à la suite dans la fonction
      pageLoad le branchement de deux procédures OnDragStart et OnDragEnd
      respectivement en réponse aux évènements dragstart et dragend :

<script type="text/javascript">
      pageLoad = function(){
        var divZoneGlissante = $get('ZoneGlissante');
        $addHandler(divZoneGlissante,'drag', OnDrag);
        $addHandler(divZoneGlissante,'dragstart', OnDragStart);
        $addHandler(divZoneGlissante,'dragend', OnDragEnd);
      }
</script>


      Il existe une autre écriture encore plus concise qui permettrait d’accrocher tous les
handlers en une seule fois. Elle utilise le raccourci $addHandlers :

Eté 2007                                 Microsoft Ajax Library                    Page 14 sur 20
Microsoft                                               Utiliser les fondamentaux – Atelier 8


<script type="text/javascript">
      pageLoad = function(){
        var divZoneGlissante = $get('ZoneGlissante');
        $addHandlers(divElement,{drag:OnDrag,dragstart:OnDragStart,
                              dragend:OnDragEnd});
      }
</script>

   2. Ajoutez la signature de chacune des deux fonctions, en précisant bien le paramètre
      eventElement :


<script type="text/javascript">

     function OnDrag(eventElement){…}

     function OnDragStart(eventElement) {
     }

     function OnDragEnd(eventElement){
     }

      pageLoad = function(){…}
</script>


       Microsoft Ajax Library fournit dans l’espace de nom racine Sys une classe Debug
apportant des fonctionnalités de débogage et de traçage aux applications Ajax. Cette classe
contient notamment une méthode trace() pour écrire des informations dans la trace de
l’application.
Nous allons donc utiliser cette méthode pour inscrire dans la trace la position initiale de la
zone ainsi que son point d’arrivée.

   3. Inscrivez dans la trace une marque de début et de fin du déplacement à l’aide de la
      méthode Sys.Debug.trace :

<script type="text/javascript">

     function OnDrag(eventElement){…}

     function OnDragStart(eventElement) {
           Sys.Debug.trace('Début du glisser déplacer');
     }

     function OnDragEnd(eventElement){
           Sys.Debug.trace('Fin du glisser déplacer');
     }

      pageLoad = function(){…}
</script>
Eté 2007                                Microsoft Ajax Library                      Page 15 sur 20
  Microsoft                                                Utiliser les fondamentaux – Atelier 8



     4. Testez le traçage :
            Enregistrez vos changements.
            Lancez l’exécution de l’application en mode débogage (F5).
            Faites un glisser déplacer du texte dans le navigateur.
            Sans fermer le navigateur, basculez dans Visual Studio.
            La fenêtre de Sortie (CTRL+ALT+O) montre la trace de votre application
                .NET dans laquelle ont été ajoutés vos commentaires de code marquant le
                début et la fin du déplacement :




         Microsoft Ajax Library vous permet également de visualiser la trace de l’application
  dans toute zone de texte directement sur la page HTML pourvue qu’elle soit nommée avec
  l’Id TraceConsole.

                 Arrêtez le débogage.
                 Rajoutez une zone de texte HTML de type textarea juste avant la balise div de
                  la page avec les caractéristiques suivantes :

Le nom de l’id est important !




                 Enregistrez vos changements.
                 Relancez l’exécution de l’application sans débogage (CTRL F5).
                 Faites un glisser déplacer du texte dans le navigateur.




      La trace est écrite dans la zone de texte par le Framework Microsoft Ajax !



  Eté 2007                                Microsoft Ajax Library                      Page 16 sur 20
Microsoft                                                Utiliser les fondamentaux – Atelier 8



       Il vous reste également une troisième option pour visualiser la trace qui consiste à
afficher le mode Console Script dans la barre d’outils Web Development Helper, sans
oublier d’activer le débogage :




     Nous pourrions maintenant améliorer le message écrit dans la trace en inscrivant par
exemple les positions de départ et d’arrivée. Pour se faire, il nous faut manipuler les chaînes
de caractère. Or en JavaScript, nous ne disposons pas de type de données aussi riche qu’en
.NET. Par exemple le type array ne permet pas de faire appel à des méthodes Clear, IndexOf
etc…comme pour le type équivalent .NET. C’est là où Microsoft Ajax Library joue donc sa
deuxième carte  ! L’objectif est de retrouver une programmation aussi confortable et la plus
proche possible que celle que vous avez adoptée avec .NET ! Cela se traduit donc par des
extensions aux types de base JavaScript, ou encore par l’introduction de technique de
programmation orientée objet.

     Prenons l’exemple du type string. Microsoft Ajax Library fournit une méthode
format() équivalente à celle que vous utilisez lorsque vous programmez avec .NET…cool,
non  ?

   5. Améliorez le message de la trace en utilisant les extensions sur le type string :
         Ajoutez une chaîne de caractères donnant la position précise en pixels de
            l’élément au début et à la fin du déplacement :

<script type="text/javascript">

     function OnDrag(eventElement){…}

     function OnDragStart(eventElement) {
          Sys.Debug.trace('Début du glisser déplacer');
          Sys.Debug.trace(String.format('Position initiale : {0} - {1}',
                          eventElement.clientX, eventElement.clientY));
     }

      function OnDragEnd(eventElement){
            Sys.Debug.trace('Fin du glisser déplacer');
            Sys.Debug.trace(String.format('Position finale : {0} - {1}',
                            eventElement.clientX, eventElement.clientY));
      }
      pageLoad = function(){…}
</script>

Eté 2007                                Microsoft Ajax Library                       Page 17 sur 20
Microsoft                                                Utiliser les fondamentaux – Atelier 8



               Enregistrez vos changements.
               Relancez l’exécution de l’application sans débogage (CTRL F5).
               Faites un glisser déplacer du texte dans le navigateur pour observer les
                positions inscrites dans la trace :




       Toujours pour se rapprocher de vos méthodes de développement avec .NET, Microsoft
Ajax Library propose également une classe StringBuilder pour construire facilement des
chaînes de caractères complexes.
Pour illustrer la mise en œuvre de cette classe, nous allons regrouper toutes les informations à
écrire sur la trace dans une seule et même chaîne de caractères.

   6. Modifiez l’écriture dans la trace pour ne faire qu’un seul appel à la méthode
      Sys.Debug.trace() :
          Modifiez les deux procédures comme suit :

<script type="text/javascript">

     function OnDrag(eventElement){…}

     function OnDragStart(eventElement) {
           var sb = new Sys.StringBuilder('Début du glisser déplacer');
           sb.append('\r');
           sb.append(String.format('Position initiale : {0} - {1}',
                            eventElement.clientX, eventElement.clientY));
           Sys.Debug.trace(sb.toString());
     }

     function OnDragEnd(eventElement){
           var sb = new Sys.StringBuilder('Fin du glisser déplacer');
           sb.append('\r');
           sb.append(String.format('Position finale : {0} - {1}',
                            eventElement.clientX, eventElement.clientY));
           Sys.Debug.trace(sb.toString());
     }

      pageLoad = function(){…}
</script>

Eté 2007                                 Microsoft Ajax Library                      Page 18 sur 20
Microsoft                                                 Utiliser les fondamentaux – Atelier 8



      N’est-ce pas qu’on se croirait dans un programme .NET  ?

               Enregistrez vos changements.
               Relancez l’exécution de l’application sans débogage (CTRL F5).
               Faites un glisser déplacer du texte dans le navigateur pour observer la trace qui
                doit être exactement comme précédemment :




 Note :




                                                




Eté 2007                                  Microsoft Ajax Library                      Page 19 sur 20
Microsoft                                             Utiliser les fondamentaux – Atelier 8



5 Pour aller plus loin…
 5.1 Où trouver des références de Microsoft Ajax Library
La documentation de Microsoft Ajax Library est disponible en ligne à l’adresse :
http://asp.net/AJAX/Documentation/Live/ClientReference/Global/default.aspx
Vous y trouverez des informations sur tous les espaces de nom de la bibliothèque, les
descriptions des raccourcis de méthode, des extensions de type de base etc…

 5.2 Comment appeler un service web à partir d’un script client
Vous        trouverez     des     informations       en     ligne     à        l’adresse :
http://asp.net/AJAX/Documentation/Live/tutorials/ConsumingWebServicesWithAJAXTutoria
l.aspx
Une application d’exemple nommée ServiceWeb est fournie en annexe de cet atelier dans le
dossier Annexes.

 5.3 Comment développer en orienté objet
Une application d’exemple nommée POO est fournie en annexe de cet atelier dans le dossier
Annexes.




Eté 2007                               Microsoft Ajax Library                    Page 20 sur 20

				
DOCUMENT INFO