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

Article
03/04/2016

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

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

Nous partons du principe que vous savez créer une application élémentaire Windows Runtime en JavaScript qui utilise le modèle WinJS. Pour obtenir de l’aide sur la création de votre première application, voir Créer votre première application Windows Runtime en JavaScript.

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 une instruction Javascript. Pour consulter les instructions associées à cette méthode, voir Comment définir des gestionnaires d’événements de façon déclarative.

La seconde consiste à ajouter le gestionnaire d’événements par programme.

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

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>
```
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>
```
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, par exemple quel bouton de la souris a été pressé et quel objet 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 + ")";

}
```
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 joindre les gestionnaires d’événements (et utilisez l’élément querySelector au lieu de l’élément document.getElementById, comme indiqué ici).
  
  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", {
        ready: function (element, options) { // Fires when the user navigates to home.html
            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 + ")";
        }
    });
})();
```
  Dans l’exemple précédent, this fait référence à l’objet de page créée par l’appel WinJS.UI.Pages.define. En outre, button1Click: function(mouseEvent) {...} crée une propriété (qui est une fonction anonyme) pour cet objet de page. Par conséquent, l’élément this.button1Click (dans button1.addEventListener("click", this.button1Click, false)) fait effectivement référence à la fonction button1Click :
```
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.

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

Exemples de contrôles de base

Montre des exemples de nombreux contrôles HTML et WinJS.

Rubriques associées

Codage d’applications de base

Démarrage rapide : ajout de contrôles et de styles WinJS

Liste des contrôles