Partager via

Démarrage rapide : ajout de contrôles de page (HTML)

  • Article

[ 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 ]

Découvrez comment créer et afficher des objets PageControl.

Prérequis

Nous partons du principe que vous savez créer une application élémentaire du Windows Store en JavaScript qui utilise les contrôles de la bibliothèque Windows pour JavaScript. Pour obtenir des instructions sur l’utilisation des contrôles WinJS, voir Démarrage rapide : ajout de contrôles et styles WinJS.

Pour créer un contrôle PageControl

Contrairement aux autres contrôles de la bibliothèque Windows pour JavaScript , vous ne devez pas créer d’instance de PageControl directement. Vous devez en fait créer un objet PageControl en appelant la méthode WinJS.UI.Pages.define en lui passant l’URI (Uniform Resource Identifier) du fichier HTML qui définit le contrôle PageControl et un objet définissant les membres PageControl.

Voici un exemple de définition de PageControl. Il se compose de trois fichiers : un fichier HTML, un fichier CSS et un fichier JavaScript.


<!-- samplePageControl.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>samplePageControl</title>

    <!-- WinJS references -->
    <link href="/pages/samplePageControl.css" rel="stylesheet">
    <script src="/pages/samplePageControl.js"></script>
</head>
<body>
    <div class="samplePageControl">
        <p class="samplePageControl-text"><span data-win-bind="textContent: controlText">Message goes here</span>
        <button class="samplePageControl-button">Click me</button></p>
        <p>Page controls can also contain WinJS controls. They are activated automatically.</p>
        <div class="samplePageControl-toggle" data-win-control="WinJS.UI.ToggleSwitch"></div>
    </div>
</body>
</html>


/* samplePageControl.css */
.samplePageControl
{
    padding: 5px;
    border: 4px dashed #999999;
}


// samplePageControl.js
(function () {
    "use strict";

    var ControlConstructor = WinJS.UI.Pages.define("/pages/samplePageControl.html", {
        // This function is called after the page control contents
        // have been loaded, controls have been activated, and
        // the resulting elements have been parented to the DOM.
        ready: function (element, options) {
            options = options || {};
            this._data = WinJS.Binding.as({ controlText: options.controlText, message: options.message });

            // Data bind to the child tree to set the control text
            WinJS.Binding.processAll(element, this._data);

            // Hook up the click handler on our button
            WinJS.Utilities.query("button", element).listen("click",
                // JavaScript gotcha - use function.bind to make sure the this reference
                // inside the event callback points to the control object, not to
                // window
                this._onclick.bind(this));

            // WinJS controls can be manipulated via code in the page control too
            WinJS.Utilities.query(".samplePageControl-toggle", element).listen("change",
                this._ontoggle.bind(this));
        },

        // Getter/setter for the controlText property.
        controlText: {
            get: function () { return this._data.controlText; },
            set: function (value) { this._data.controlText = value; }
        },

        // Event handler that was wired up in the ready method
        _onclick: function (evt) {
            WinJS.log && WinJS.log(this._data.message + " button was clicked", "sample", "status");
        },

        // Event handler for when the toggle control switches
        _ontoggle: function (evt) {
            var toggleControl = evt.target.winControl;
            WinJS.log && WinJS.log(this._data.message + " toggle is now " + toggleControl.checked, "sample", "status");
        }
    });

    // The following lines expose this control constructor as a global.
    // This lets you use the control as a declarative control inside the
    // data-win-control attribute.

    WinJS.Namespace.define("Controls_PageControls", {
        SamplePageControl: ControlConstructor
    });
})();

Pour créer un contrôle Page dans Microsoft Visual Studio, sélectionnez Projet > Ajouter un nouvel élément dans le menu principal, puis sélectionnez Contrôle de page.

Affichage d’un contrôle PageControl

Après avoir défini votre objet PageControl, plusieurs façons de l’afficher vous sont possibles :

  • Utilisez la fonction WinJS.UI.Pages.render.

    <div class="renderingPageControls-renderedControl"></div>

    // Render the page control via a call to WinJS.UI.Pages.render. This lets
// you render a page control by referencing it via a url.
var renderHost = element.querySelector(".renderingPageControls-renderedControl");
WinJS.UI.Pages.render("/pages/SamplePageControl.html", renderHost, {
    controlText: "This control created by calling WinJS.UI.Pages.render",
    message: "Render control"
}).done();

  • Exposez publiquement le constructeur de l’objet PageControl, puis utilisez ce dernier pour créer le contrôle PageControl.

    <div class="renderingPageControls-createdProgrammatically"></div>

    // Render the page control by creating the control.
var constructedHost = element.querySelector(".renderingPageControls-createdProgrammatically");
new Controls_PageControls.SamplePageControl(constructedHost, {
    controlText: "This control created by calling the constructor directly",
    message: "Constructed control"
});

  • Utilisez la fonction WinJS.UI.Pages.get pour obtenir un constructeur pour le contrôle PageControl.

  • Créez une instance du contrôle en HTML comme contrôle de la bibliothèque Windows pour JavaScript (c’est d’ailleurs le cas). Vous devez exposer publiquement le constructeur de l’objet PageControl pour que cela puisse fonctionner.

    <div data-win-control="Controls_PageControls.SamplePageControl"
    data-win-options="{controlText: 'This was created declaratively', message: 'Declarative control' }">
</div>

  • Utilisez un objet HtmlControl pour effectuer le rendu de la page.

     <div class="renderingPageControls-htmlControl" data-win-control="WinJS.UI.HtmlControl"
    data-win-options="{uri: '/pages/samplePageControl.html',
    controlText: 'This was rendered via the HtmlControl', 
    message: 'HTML Control loaded control' }"></div>

Récapitulatif et étapes suivantes

Vous venez de voir comment créer et afficher des objets PageControl.

Pour plus d’informations sur la manière d’utiliser les objets PageControl, voir Démarrage rapide : utilisation de la navigation sur une seule page.