Inicio rápido: agregar controles de página (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]
Aprende a crear y mostrar objetos PageControl.
Requisitos previos
Damos por hecho que sabes crear una aplicación de la Tienda Windows básica con JavaScript que use controles de la Biblioteca de Windows para JavaScript. Para obtener instrucciones sobre cómo empezar a usar controles de WinJS, 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, 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 siguientes pasos
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.