빠른 시작: 페이지 컨트롤 추가(HTML)

아티클
03/04/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

PageControl 개체를 만들고 표시하는 방법을 알아봅니다.

사전 요구 사항

여기서는 JavaScript용 Windows 라이브러리 컨트롤을 사용하는 JavaScript로 작성한 기본 Windows 스토어 앱을 만들 수 있다고 가정합니다. WinJS 컨트롤 시작에 대한 자세한 내용은 빠른 시작: WinJS 컨트롤 및 스타일 추가를 참조하세요.

PageControl을 만들려면

다른 JavaScript용 Windows 라이브러리 컨트롤과 달리 PageControl은 직접 인스턴스화할 수 없습니다. 대신 WinJS.UI.Pages.define 메서드를 호출하고 PageControl을 정의하는 HTML 파일의 URI(Uniform Resource Identifier) 및 PageControl 구성원을 정의하는 개체에 전달하여 PageControl을 만듭니다.

다음은 PageControl 정의에 대한 예입니다. HTML 파일, CSS 파일 및 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
    });
})();

Microsoft Visual Studio에서 페이지 컨트롤을 만들려면 기본 메뉴에서 프로젝트 > 새 항목 추가를 선택한 다음 페이지 컨트롤을 선택합니다.

PageControl 표시

PageControl을 정의했으면 여러 가지 방식으로 표시할 수 있습니다.

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();

PageControl 개체의 구성자를 공개적으로 노출시키고 사용하여 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"
});

WinJS.UI.Pages.get 함수를 사용하여 PageControl에 대한 구성자를 가져옵니다.
HTML에서 JavaScript용 Windows 라이브러리 컨트롤인 것처럼 컨트롤을 인스턴스화합니다. 이렇게 하려면 PageControl 개체의 구성자를 공개적으로 노출해야 합니다.
```
<div data-win-control="Controls_PageControls.SamplePageControl"
    data-win-options="{controlText: 'This was created declaratively', message: 'Declarative control' }">
</div>
```

HtmlControl을 사용하여 페이지를 렌더링합니다.

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

요약 및 다음 단계

PageControl 개체를 만들고 표시하는 방법을 살펴보았습니다.

PageControl 개체를 사용하는 방법에 대한 자세한 내용은 빠른 시작: 단일 페이지 탐색 사용을 참조하세요.

빠른 시작: 페이지 컨트롤 추가(HTML)

사전 요구 사항

PageControl을 만들려면

PageControl 표시

요약 및 다음 단계

추가 리소스