Skip to main content
Démarrage rapide : ajout de contrôles HTML et gestion des événements (HTML)

Applies to Windows and Windows Phone

Chaque application a besoin de contrôles, tels que des boutons, cases à cocher et listes déroulantes. Les applications Windows Runtime en JavaScript peuvent utiliser deux types de contrôles : les contrôles HTML intrinsèques et les contrôles de la bibliothèque Windows pour JavaScript. Les contrôles HTML intrinsèques sont les éléments (boutons, cases à cocher, et ainsi de suite) qui font partie intégrante de la norme HTML.

Nous nous concentrons ici sur la création et l’utilisation des contrôles HTML. La rubrique suivante, Démarrage rapide : ajout de contrôles et de styles WinJS, explique comment créer et utiliser les contrôles WinJS.

(Windows uniquement) Voir cette fonctionnalité appliquée dans notre série Fonctionnalités d’application, de A à Z:   Interaction utilisateur : entrée tactile... et plus encore et Interface utilisateur des applications du Windows Store de A à Z.

Prérequis

Qu’est-ce qu’un contrôle ?

Dans de nombreux modèles de programmation d’application, un contrôle est nécessaire pour afficher un contenu ou interagir avec ce dernier. La plupart des éléments HTML étant capables d’afficher du contenu et de répondre à divers événements, il n’est pas toujours aisé de distinguer contrôle et élément dans les applications Windows Runtime en JavaScript. Nous faisons référence à des éléments et objets dont l’objectif principal est de fournir une interactivité, tout comme les contrôles. Pour obtenir la liste des éléments et des objets qui relèvent de cette catégorie, voir Contrôles classés par fonction.

Ajout d’un contrôle HTML

Vous pouvez utiliser n’importe quel contrôle HTML de votre application Windows Runtime en JavaScript.

Hh465402.wedge(fr-fr,WIN.10).gif Pour ajouter un contrôle HTML

  • Pour ajouter un contrôle HTML, il vous suffit d’ajouter le code HTML du contrôle à votre page, comme vous le feriez pour une page Web classique. Cet exemple crée un contrôle button :
    <button id="button1">An HTML Button</button>

    Il est généralement conseillé d’assigner un ID ou un nom de classe au contrôle pour en faciliter la récupération et la manipulation. Par la suite, lorsque nous vous montrerons comment lier des événements, vous utiliserez l’ID du bouton pour rechercher ce dernier.

Le code HTML d’un contrôle n’est pas toujours aussi évident que celui du bouton. Par exemple, pour créer un contrôle slider, vous devez utiliser l’élément d’entrée input :

<input type="range" />

Pour obtenir la liste des contrôles HTML disponibles et le balisage à utiliser pour les créer, voir la liste des contrôles.

Gestion des événements

Chaque contrôle fournit des événements qui vous permettent de répondre aux actions de l’utilisateur. Par exemple, le contrôle button fournit un événement click qui est déclenché lorsque l’utilisateur clique sur le bouton. Vous créez une fonction appelée gestionnaire d’événements pour gérer l’événement, puis vous associez le gestionnaire d’événements au contrôle en l’enregistrant.

Il existe deux manières d’enregistrer un gestionnaire d’événements. La première consiste à ajouter le gestionnaire d’événements à votre HTML en définissant l’attribut événement du contrôle sur le nom d’une fonction du gestionnaire d’événements ou sur des instructions Javascript. Pour plus d’informations sur cette approche, voir la section Pourquoi il est déconseillé de définir un gestionnaire d’événements dans le balisage.

La seconde consiste à ajouter le gestionnaire d’événements par programme. C’est l’approche que nous recommandons.

Hh465402.wedge(fr-fr,WIN.10).gifPour enregistrer un gestionnaire d’événements par programme

  1. Créez le contrôle et affectez-lui un ID. Cet exemple crée un bouton et lui attribue l’ID "button1".
    <button id="button1">An HTML button</button>
  2. Pour cet exemple uniquement, créez un élément de paragraphe et assignez-lui l’ID "button1Output". Vous l’utiliserez pour afficher des informations sur l’événement Click du bouton.

    <p id="button1Output"></p>
  3. Dans votre code JavaScript, définissez un gestionnaire d’événements. La plupart des gestionnaires d’événements utilisent un seul argument, à savoir, un objet Event qui contient des informations sur l’événement. Il se peut que d’autres événements renvoient d’autres types d’objets d’informations d’événements qui fournissent des informations spécifiques pour cet événement.

    L’événement click fournit un objet MouseEvent qui contient des informations sur l’événement indiquant, par exemple, le bouton de la souris qui a été sollicité et l’objet qui a déclenché l’événement. Cet exemple crée un gestionnaire d’événements click qui utilise l’objet MouseEvent pour obtenir les coordonnées x et y du point sur lequel l’utilisateur a cliqué.

    (L’événement click répond également à l’interaction tactile et du clavier. Les exemples de cette rubrique supposent que l’utilisateur clique avec une souris. Pour plus d’informations sur l’interaction avec les périphériques tactiles et autres, voir Réponse à l’interaction utilisateur.)

    function button1Click(mouseEvent) {
        var button1Output = document.getElementById("button1Output");
        button1Output.innerText =
        mouseEvent.type
        + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";
    
    }
  4. Vous devez maintenant lier l’événement à votre contrôle en le récupérant et en appelant addEventListener. La question est : quand devez-vous récupérer le contrôle ? Vous pouvez l’ajouter n’importe où dans votre code JavaScript, mais dans ce cas il risque d’être appelé avant que le contrôle existe.

    • Si vous ajoutez le contrôle à la page de démarrage de votre application, qui est définie par default.html et default.js, utilisez la fonction WinJS.UI.processAll pour inscrire vos gestionnaires d’événements. Chaque modèle Microsoft Visual Studio crée un fichier default.js qui appelle WinJS.UI.processAll dans le gestionnaire d’événements activated. Comme il s’agit d’une méthode asynchrone, la méthode WinJS.UI.processAll retourne un objet Promise. Pour lier vos gestionnaires d’événements, fournissez une fonction then ou done à l’objet Promise retourné par WinJS.UI.processAll et servez-vous de cette fonction pour lier vos gestionnaires d’événements. (Pour plus d’informations sur les promesses, voir Programmation asynchrone en JavaScript.)

      Cet exemple utilise WinJS.UI.processAll pour lier le gestionnaire d’événements du bouton.

      (function () {
          "use strict";
      
          var app = WinJS.Application;
          var activation = Windows.ApplicationModel.Activation;
          WinJS.strictProcessing();
      
          app.onactivated = function (args) {
              if (args.detail.kind === activation.ActivationKind.launch) {
                  if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                      // TODO: This application has been newly launched. Initialize
                      // your application here.
                  } else {
                      // TODO: This application has been reactivated from suspension.
                      // Restore application state here.
                  }
                  args.setPromise(WinJS.UI.processAll().done(function () {
                      var button1 = document.getElementById("button1");
                      button1.addEventListener("click", button1Click, false);
                      })
                  );
              }
          };
      
          app.oncheckpoint = function (args) {
              // TODO: This application is about to be suspended. Save any state
              // that needs to persist across suspensions here. You might use the
              // WinJS.Application.sessionState object, which is automatically
              // saved and restored across suspension. If you need to complete an
              // asynchronous operation before your application is suspended, call
              // args.setPromise().
          };
      
          // The click event handler for button1
          function button1Click(mouseEvent) {
              var button1Output = document.getElementById("button1Output");
              button1Output.innerText =
                  mouseEvent.type
                  + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";
      
          }
      
          app.start();
      })();
      

      Pour plus d’informations sur la méthode WinJS.UI.processAll, voir Démarrage rapide : ajout de contrôles et de styles WinJS.

    • Si vous ajoutez votre contrôle à un contrôle Page, utilisez la fonction ready du contrôle Page pour lier vos gestionnaires d’événements.

      Le contrôle WinJS  Page offre la possibilité de diviser vos contenus en unités modulaires réutilisables. Votre application peut contenir automatiquement un ou plusieurs contrôles Page, selon le modèle Visual Studio que vous utilisez pour le créer.

      Lorsque vous créez un contrôle Page, il inclut automatiquement une fonction ready que vous pouvez utiliser pour ajouter un gestionnaire d’événements pour votre bouton. Cet exemple montre le code JavaScript complet d’un contrôle Page qui ajoute un gestionnaire d’événements click à un bouton.

      // home.js
      (function () {
          "use strict";
      
          WinJS.UI.Pages.define("/pages/home/home.html", {
              // This function is called whenever a user navigates to this page. It
              // populates the page elements with the app's data.
              ready: function (element, options) {
                  // TODO: Initialize the page here.
                  var button1 = element.querySelector("#button1");
                  button1.addEventListener("click", this.button1Click, false);
              },
      
              button1Click: function(mouseEvent) {
                  var button1Output = document.getElementById("button1Output");
                  button1Output.innerText =
                  mouseEvent.type
                  + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";
      
              }
          });
      })();
      

      Pour plus d’informations sur les contrôles Page, voir Ajout de contrôles Page.

    • Si vous ajoutez le contrôle à vos propres fichiers HTML et JavaScript personnalisés, gérez l’événement DOMContentLoaded et utilisez-le pour appeler WinJS.UI.processAll. Vous pouvez vous inscrire à l’événement DOMContentLoaded n’importe où dans votre code, car l’objet document existe déjà avant l’exécution du code. Fournissez une fonction then ou done à l’objet Promise retourné par WinJS.UI.processAll et servez-vous de cette fonction pour lier vos gestionnaires d’événements.

Lorsque vous exécutez l’application et cliquez sur le bouton, les coordonnées du point sur lequel vous avez cliqué s’affichent.

Pourquoi il est déconseillé de définir un gestionnaire d’événements dans le balisage

Vous pouvez ajouter des gestionnaires d’événements dans le balisage, mais cela s’avère parfois plus difficile que de les ajouter à l’aide de la méthode addEventListener en raison de problèmes de champ d’application. Quand vous utilisez Visual Studio pour créer une application Windows Runtime en JavaScript avec le modèle Application vide, il crée ce fichier default.js :

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    app.start();
})();

Tout le code est enveloppé dans une fonction globale anonyme. Cette pratique de codage est bonne puisqu’elle limite le champ d’application du code et évite de polluer l’espace de noms global. Si vous ajoutez le gestionnaire d’événements décrit ci-dessus, le code derrière le fichier a la forme suivante :

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    function button1Click(mouseEvent) {
        var button1Output = document.getElementById("button1Output");
        button1Output.innerText =
        mouseEvent.type
        + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

    }

    app.start();
})();

Si vous définissez le gestionnaire d’événements dans le balisage plutôt que dans votre code, le bouton des exemples précédents a la forme :

<!-- Incorrect code. Do not use this in your solution. -->
<button id="button1" onclick="button1Click(event)">An HTML button</button>

Lorsque vous exécutez l’application et cliquez sur le bouton, rien ne se passe. C’est parce que la fonction button1Click est englobée dans une fonction anonyme et qu’elle n’est pas directement accessible à votre balisage. Pour que votre code fonctionne, vous devez placer button1Click à l’extérieur de la fonction anonyme.

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    app.start();
})();

function button1Click(mouseEvent) {
    var button1Output = document.getElementById("button1Output");
    button1Output.innerText =
    mouseEvent.type
    + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

}

Mais à présent, la fonction button1Click est globale et ce n’est pas ce que vous souhaitez. Une meilleure approche consiste à redéplacer la définition button1Click dans la fonction anonyme, puis à utiliser WinJS.Namespace.define pour la rendre publiquement accessible (pour obtenir un exemple de procédure, voir Comment définir des gestionnaires d’événements de façon déclarative).

Notes

N’utilisez pas d’URI JavaScript

N’utilisez pas d’URI de JavaScript dans votre gestionnaire d’événements parce que votre application ne les exécutera pas. Par exemple, si vous essayez ce qui suit, rien ne se produit lorsque vous cliquez sur le bouton :

<!-- Incorrect code. Do not use this in your solution. -->
<button id="button1" onclick="javascript: 2 + 2;">An HTML Button</button>

Cette restriction s’applique au code du contexte local de l’application (code inclus au package de l’application), mais ne s’applique pas au code des pages Web externes auxquelles accède votre application.

Utilisation de formulaires

Sur un site Web HTML traditionnel, les contrôles et les autres éléments d’entrée sont généralement contenus dans un élément form. Les éléments form permettent de transmettre des données au serveur. La plupart des opérations de programmation d’une application classique étant basées sur les clients, l’utilisation d’un élément form est en général inutile.

Utilisation de couches transparentes

Une pratique courante consiste à utiliser une couche transparente plein écran, tel qu’un élément div vide, pour détecter certaines interactions utilisateur ou pour afficher des animations. Toutefois, le fait de couvrir un contrôle HTML d’une couche transparente peut le rendre moins réactif à l’interaction utilisateur. Pour conserver la réactivité de vos contrôles HTML, évitez de placer une couche transparente sur eux.

Récapitulatif et étapes suivantes

Vous avez appris à créer des contrôles HTML et à les lier à des gestionnaires d’événements.

Découvrez à présent comment utiliser les nouveaux contrôles WinJS qui sont fournis pour les applications Windows Runtime en JavaScript en lisant Démarrage rapide : ajout de contrôles et de styles WinJS.

Pour en savoir plus sur des contrôles particuliers, voir la liste des contrôles.

Exemples

Rubriques associées

Codage d’applications de base
Démarrage rapide : ajout de contrôles et de styles WinJS
Liste des contrôles

 

 

Microsoft réalise une enquête en ligne pour comprendre votre opinion sur le site Web de. Si vous choisissez de participer, l’enquête en ligne vous sera présentée lorsque vous quitterez le site Web de.

Souhaitez-vous y participer ?