Guida introduttiva: Aggiunta di controlli pagina (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Come creare e visualizzare un oggetto PageControl.
Prerequisiti
Partiamo dal presupposto che tu sappia come creare una semplice app di Windows Store in JavaScript che usi i controlli della Libreria Windows per JavaScript. Per istruzioni di base sui controlli della WinJS, vedi Guida introduttiva: Aggiunta di controlli e stili WinJS.
Per creare un controllo pagina
A differenza di altre librerie di Windows per i controlli JavaScript, non devi creare direttamente un'istanza di PageControl. Devi invece creare un PageControl richiamando il metodo WinJS.UI.Pages.define e passandogli l'URI (Uniform Resource Identifier) del file HTML che definisca il PageControl e un oggetto che definisca i membri di PageControl.
Ecco un esempio di definizione di PageControl. È costituito da tre file: un file HTML, un file CSS e un file 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
});
})();
Per creare un controllo Pagina in Microsoft Visual Studio, scegli Progetto > Aggiungi nuovo elemento dal menu principale, quindi seleziona Controllo pagina.
Visualizzare un controllo pagina
Una volta definito il PageControl, puoi visualizzarlo in diversi modi:
Usa la funzione 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();Esponi pubblicamente il costruttore dell'oggetto PageControl e usalo per creare il 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 funzione WinJS.UI.Pages.get per ottenere un costruttore per il PageControl.
Crea un'istanza del controllo in HTML come se fosse una libreria di Windows per il controllo JavaScript (quale è). Per far sì che funzioni, devi esporre pubblicamente il costruttore dell'oggetto PageControl.
<div data-win-control="Controls_PageControls.SamplePageControl" data-win-options="{controlText: 'This was created declaratively', message: 'Declarative control' }"> </div>Usa un HtmlControl per eseguire il rendering della pagina.
<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>
Riepilogo e passaggi successivi
Hai imparato a creare e visualizzare oggetti PageControl.
Per ulteriori info sull'uso degli oggetti PageControl, vedi Guida introduttiva: Uso dell'esplorazione a pagina singola.