WinJS.UI.Pages.IPageControlMembers interface

Article
01/26/2017

Provides members for a PageControl. You implement this interface when defining a new PageControl.

Members

The IPageControlMembers interface has these types of members:

Methods

Methods

The IPageControlMembers interface has these methods.

Method	Description
error	Called if an error occurs during the processing of the page.
init	Initializes the control before the content of the control is set.
load	Creates DOM objects from the content in the specified URI.
processed	Initializes the control after the content of the control is set.
ready	Called after init and render are complete. At this time, the element is ready for use.
render	Takes the elements returned by the load method and attaches them to the specified element.

Remarks

When you call WinJS.UI.Pages.define to define a PageControl, one of the parameters you provide is an object that you create that implements the IPageControlMembers interface. There are specific lifecycle methods that you can implement that will get called by the system at certain points in the PageControl object's lifecycle. All of these methods are optional. You can also use this object that you define to provide additional members.

These members are called in this order:

Examples

This example defines a PageControl.

<!-- 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.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
    });
})();

The next example renders the PageControl in another HTML file.

<h2>This control is rendered declaratively, as if it were a control. Which it is!</h2>
<div class="renderingPageControls-declarativeControl" data-win-control="Controls_PageControls.SamplePageControl"
    data-win-options="{controlText: 'This was created declaratively', message: 'Declarative control' }"></div>

For the full code, see the HTML Page controls sample (Windows).

Requirements

Minimum WinJS version	WinJS 1.0
Namespace	WinJS.UI.Pages

Share via