Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Inicio rápido: Agregar controles de página (aplicaciones de la Tienda Windows con JavaScript y HTML)

Aprende a crear y mostrar objetos PageControl.

Requisitos previos

Se supone que sabes crear una aplicación básica de la Tienda Windows desarrollada para Windows con JavaScript que use controles de la Biblioteca de Windows para JavaScript. Para obtener ayuda para empezar a usar controles de la Biblioteca de Windows para JavaScript, consulta Inicio rápido: Agregar controles y estilos de WinJS.

Para crear un PageControl

A diferencia de los controles de la biblioteca de Windows para JavaScript, no se puede crear una instancia de un PageControl de manera directa. En cambio, para crear un PageControl, puedes llamar al método WinJS.UI.Pages.define y pasarle el identificador uniforme de recursos (URI) del archivo HTML que define el PageControl y un objeto que define los miembros del PageControl.

Este es un ejemplo de una definición de PageControl. Se compone de tres archivos: un archivo HTML, un archivo CSS y un archivo 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
    });
})();

Para crear un control Page en Microsoft Visual Studio Express 2012 for Windows 8, selecciona Proyecto > Agregar nuevo elemento en el menú principal. Después, selecciona Control Page.

Mostrar un PageControl

Una vez que hayas definido tu PageControl, podrás emplear varios métodos para mostrarlo:

  • Usa la función 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();
    
    
  • Expone públicamente el constructor del objeto PageControl y úsalo para crear el 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"
    });
    
    
  • Usa la función WinJS.UI.Pages.get para obtener un constructor para el PageControl.
  • Crea una instancia del control en HTML como si fuera un control de la biblioteca Windows para JavaScript (ya que lo es). Para que esto funcione, debes exponer públicamente el constructor del objeto PageControl.
    
    <div data-win-control="Controls_PageControls.SamplePageControl"
        data-win-options="{controlText: 'This was created declaratively', message: 'Declarative control' }">
    </div>
    
    
  • Usa un HtmlControl para representar la página.
    
     <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>
    
    

Resumen y next steps

Aprendiste a crear y mostrar objetos PageControl.

Para obtener más información sobre cómo usar objetos PageControl, consulta Inicio rápido: Usar la navegación de una sola página.

 

 

Mostrar:
© 2018 Microsoft