3부: PageControl 개체 및 탐색(HTML)

Applies to Windows only

이전 자습서에서 만든 "Hello, world" 앱은 콘텐츠 페이지가 하나밖에 포함되어 있지 않습니다. 대부분의 실제 앱은 여러 페이지를 포함합니다.

Windows 스토어 앱에서 사용할 수 있는 다양한 탐색 패턴이 있습니다. 탐색 패턴은 앱에 가장 적합한 탐색 패턴을 선택하는 데 도움이 됩니다.

참고  

앱 기능 전체 프로세스 시리즈의 일부로 두 가지 기본 탐색 패턴(플랫 탐색계층적 탐색)의 작동 방법을 살펴보세요.

이 자습서에서는 "Hello, world" 앱에서 Navigation App 템플릿을 사용하는 새 앱으로 코드를 복사한 다음 페이지를 추가합니다.

학습할 내용:

  • Navigation App 프로젝트 템플릿을 사용하여 콘텐츠 페이지가 여럿인 앱 만들기
  • PageControl 개체를 사용하여 모듈 단위로 코드 분리
  • 단일 페이지 탐색 모델을 사용하여 페이지 간 탐색
  • NavBar를 사용하여 탐색 명령 제공

  

자습서를 건너뛰고 바로 코드를 보려면 JavaScript 시작: 자습서 시리즈의 전체 코드(영문)를 참조하세요.

시작하기 전에...

  • 이 자습서는 시리즈 중 세 번째 자습서입니다. 이 자습서를 시작하기 전에 2부: 앱 수명 주기 및 상태 관리를 읽어 보세요. 여기에서는 2부에서 만든 코드를 가지고 시작합니다.

Windows 스토어 앱에서의 탐색 정보

거의 모든 웹 사이트는 일정한 탐색 형식을 제공하는데, 대개 다른 페이지로 클릭하여 이동하는 하이퍼링크 형식입니다. 각 페이지에는 JavaScript 함수 및 데이터의 집합, 표시할 HTML의 새로운 집합, 스타일 정보 등이 있습니다. 이러한 탐색 모델을 여러 페이지 탐색이라고 합니다. 이 디자인은 대부분의 웹 사이트에서 잘 작동하지만 서로 다른 페이지 간에 상태를 유지하기 어렵게 만들기 때문에 앱에 문제가 발생할 수 있습니다.

또 다른 탐색 모델은 단일 페이지 탐색인데, 여기서는 앱에 단일 페이지를 사용하여 필요에 따라 이곳에 추가 데이터를 로드합니다. 응용 프로그램은 여전히 여러 파일로 나누어지지만, 페이지에서 페이지로 이동하는 대신 기본 페이지에 다른 문서를 로드하는 것입니다. 기본 페이지는 언로드되지 않으므로 스크립트도 언로드되지 않습니다. 따라서 상태, 전환 또는 애니메이션을 더욱 손쉽게 관리할 수 있습니다. Windows 스토어 앱에서는 단일 페이지 탐색 모델을 사용할 것을 권장합니다.

단일 페이지 탐색 모델을 사용하는 앱 만들기를 지원하기 위해, JavaScript용 Windows 라이브러리는 WinJS.UI.Pages.PageControl 개체를 제공합니다. 또한 일부 탐색 인프라를 추가로 제공하는 Navigation App 프로젝트 템플릿도 있습니다. 다음 단계에서 이 템플릿을 사용하여 새 프로젝트를 만들 예정입니다.

1단계: Visual Studio에서 새 탐색 앱 만들기

Navigation App 템플릿을 사용하는 HelloWorldWithPages라는 새 앱을 만들어 보겠습니다. 방법은 다음과 같습니다.

  1. Microsoft Visual Studio Express 2013 for Windows를 시작합니다.
  2. 파일 메뉴에서 새 프로젝트를 선택합니다.

    새 프로젝트 대화 상자가 나타납니다. 대화 상자의 왼쪽 창에서 표시할 템플릿 유형을 선택할 수 있습니다.

  3. 왼쪽 창에서 설치됨, 템플릿을 차례로 확장한 다음 JavaScript를 확장하고 Windows 스토어 템플릿 유형을 선택합니다. 대화 상자의 가운데 창에 JavaScript용 프로젝트 템플릿 목록이 표시됩니다.

    이 자습서에서는 Navigation App 템플릿을 사용합니다.

  4. 가운데 창에서 Navigation App 템플릿을 선택합니다.
  5. Name 텍스트 상자에 "HelloWorldWithPages"를 입력합니다.
  6. 솔루션용 디렉터리 만들기 확인란의 선택을 취소합니다.

    새 프로젝트 창

  7. 확인을 클릭하여 프로젝트를 만듭니다.

    Visual Studio에서 프로젝트를 만들고 솔루션 탐색기에 표시합니다.

    HelloWorldWithPages 프로젝트의 솔루션 탐색기

Navigation App에는 "Hello, world" 앱보다 약간 많은 파일이 포함되어 있습니다. 이 새 파일을 살펴보겠습니다.

  • /pages/home/home.css, /pages/home/home.html 및 /pages/home/home.js

    이 세 페이지는 앱의 홈페이지에 대한 PageControl을 정의합니다. PageControl은 HTML 파일, JavaScript 파일 및 CSS 파일로 구성됩니다. PageControl은 HTML 페이지처럼 탐색하거나 사용자 지정 컨트롤로 사용할 수 있는 HTML, CSS 및 JavaScript의 모듈 단위입니다. PageControl 개체를 사용하면 큰 앱을 더 작고 관리하기 쉬운 부분으로 분할할 수 있습니다.

    PageControl 개체는 느슨한 HTML, CSS 및 JavaScript 페이지의 모음을 사용하는 것보다 더 쉽게 앱에서 이들을 사용하도록 해주는 여러 메서드를 지원합니다. 다음 단계에서 이러한 메서드에 대해 자세히 알아볼 예정입니다.

  • /js/navigator.js

    이 파일은 PageControl 개체를 표시하고 개체 간에 탐색하기 위해 사용할 수 있는 PageControlNavigator 도우미 클래스를 제공합니다. PageControl을 표시할 필요는 없지만, 이를 통해 개체를 더 쉽게 사용할 수 있습니다.

이제 새 앱의 default.html 페이지를 살펴보겠습니다.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorldWithPages</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- HelloWorldWithPages references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>

    <div id="contenthost" data-win-control="Application.PageControlNavigator" 
        data-win-options="{home: '/pages/home/home.html'}"></div>
    <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" 
            type="button"></button>
    </div> -->
</body>
</html>

파일의 body에는 두 가지 요소가 들어 있습니다. 하나는 PageControlNavigator에 대한 div 요소이고 다른 하나는 AppBar에 대한 주석 처리된 div입니다. 지금은 app bar는 잠시 미뤄 두고 첫 번째 div 요소를 자세히 알아보겠습니다.



    <div id="contenthost" data-win-control="Application.PageControlNavigator" 
        data-win-options="{home: '/pages/home/home.html'}"></div>
 

div 요소는 PageControlNavigator 컨트롤을 만듭니다. PageControlNavigator는 홈페이지를 로드하고 표시합니다. 개발자가 data-win-options 특성을 사용하여 로드할 페이지(/pages/home/home.html)를 컨트롤에 알려 줍니다.

계속 진행하여 앱을 실행하세요.

HelloWorldWithPages 앱

잘 보이지는 않지만 사실 앱은 default.html과 home.html을 모두 표시하고 있습니다. 이는 iframe을 사용하여 에 다른 HTML 내부에 HTML 페이지를 표시하는 것과 비슷합니다.

home.html PageControl은 default.html 페이지 내에서 표시됩니다.

2단계: "Hello, world" 앱에서 HTML과 CSS 콘텐츠 복사

새 앱에는 default.html과 home.html이라는 두 개의 HTML 페이지가 있습니다. 콘텐츠를 어디에 두시겠어요?

  • 앱이 표시 중인 페이지가 어느 것이든 상관없이, 항상 나타나야 하는 UI에 대해 default.html을 사용하세요. 예를 들어, default.html을 사용하여 탐색 모음을 호스트할 수 있습니다.

  • 앱에서 개별 화면을 구성하는 콘텐츠에 대해서는 home.html 같은 페이지를 사용하세요.

이제 home.html을 열고 포함되어 있는 일부 태그를 살펴보겠습니다.

  • 이 페이지에는 WinJS 코드 및 스타일시트에 대한 참조가 들어 있는 head 요소가 있습니다. 또한 앱의 기본 스타일시트(default.css)에 대한 참조와 홈페이지(home.css 및 home.js)를 구성하는 다른 파일에 대한 참조도 포함되어 있습니다.

    
    
    <head>
        <meta charset="utf-8" />
        <title>homePage</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    
        <link href="/css/default.css" rel="stylesheet" />
        <link href="/pages/home/home.css" rel="stylesheet" />
        <script src="/pages/home/home.js"></script>
    </head>
    
    
    
  • 그리고 뒤로 탐색을 위한 BackButton과 제목 영역이 포함된 페이지 머리글 영역이 있습니다. 템플릿에는 뒤로 탐색할 수 있을 때 뒤로 단추를 자동으로 활성화하는 코드가 포함되어 있습니다. 앞으로 두 번째 페이지를 추가하여 탐색할 때까지는 뒤로 단추가 보이지 않습니다.

    
    
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to HelloWorldWithPages!</span>
                </h1>
            </header>
    
    
    
  • 주 콘텐츠에 대한 섹션이 있습니다.

    
    
            <section aria-label="Main content" role="main">
                <p>Content goes here.</p>
            </section>
    
    
    

이제 "Hello, world" 앱에서 새 HelloWorldWithPages 프로젝트의 홈페이지(home.html)에 콘텐츠를 추가해 보겠습니다.

JJ663505.wedge(ko-kr,WIN.10).gif""Hello, world"" 앱에서 HTML과 CSS를 추가하려면

  1. "Hello, world" 앱의 default.html 파일에서 최종 HTML 콘텐츠를 새 프로젝트의 /pages/home/home.html 주 콘텐츠 섹션에 복사합니다.
    
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to HelloWorldWithPages!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
    
                <!-- Copied from "Hello, world" -->
                <h1 class="headerClass">Hello, world!</h1>
                <div class="mainContent">
                    <p>What's your name?</p>
                    <input id="nameInput" type="text" />
                    <button id="helloButton">Say "Hello"</button>
                    <div id="greetingOutput"></div>
                    <label for="ratingControlDiv">
                        Rate this greeting: 
                    </label>
                    <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
                    </div>
                    <div id="ratingOutput"></div>
                </div>
            </section>
        </div>
    </body>
    
    
  2. 복사한 제목 콘텐츠를 home.html이 제공한 h1 요소로 이동합니다. home.html에는 주 콘텐츠 섹션이 이미 포함되어 있으므로 방금 복사한 "mainContent" div 요소를 제거합니다(단, 콘텐츠는 그대로 둠).
    
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to HelloWorldWithPages!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
     
                <p>What's your name?</p>
                <input id="nameInput" type="text" />
                <button id="helloButton">Say "Hello"</button>
                <div id="greetingOutput"></div>
                <label for="ratingControlDiv">
                    Rate this greeting: 
                </label>
                <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
                </div>
                <div id="ratingOutput"></div>
            </section>
        </div>
    </body>
    
    
  3. 밝은 스타일시트로 전환합니다. 어두운 스타일시트에 대한 참조를
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    다음으로 대체합니다.

    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
    
    
  4. PageControl에는 고유의 CSS 스타일시트 파일이 있습니다.

    1부: "Hello, world!" 앱 만들기에서 만든 default.css 파일에서 greetingOutput 스타일을 home.css로 복사합니다.

    
    .homepage section[role=main] {
        margin-left: 120px;
        margin-right: 120px;
    }
    
    #greetingOutput {
        height: 20px; 
        margin-bottom: 40px;
    }
    
    
  5. 앱을 실행합니다.

    Hello, world 앱에서 가져온 콘텐츠가 포함된 HelloWorldWithPages

    지금까지 원래 "Hello, world" 앱에서 가져온 콘텐츠를 다시 만들었습니다. 다음은 "Hello, world" 이벤트 처리기를 복사하여 대화형 작업을 추가해 보겠습니다.

3단계: 이벤트 처리기 복사

PageControl에는 고유의 JavaScript 파일이 있습니다. 이제 "홈" PageControl인 home.js용으로 Visual Studio가 만든 JavaScript 파일을 살펴보겠습니다.


(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
        }
    });
})();

이 파일은 현재의 default.js 파일과는 상당히 달라 보입니다. 일단 길이가 훨씬 짧습니다. 이는 default.js가 활성화 및 핵심 앱 논리를 처리했기 때문입니다. 따라서 각 PageControl은 페이지 자체의 논리만 포함하면 됩니다.

코드 첫 줄 중 하나인 WinJS.UI.Page.define 함수에 대한 호출은 PageControl 개체를 만듭니다. 이 함수는 페이지의 URI(이 예제에서는 "/pages/home/home.html")와 PageControl의 멤버를 정의하는 개체 등, 두 가지 매개 변수를 사용합니다. 개발자는 원하는 멤버 형식을 추가할 수 있습니다. 또한 IPageControlMembers 인터페이스에서 설명하는 특수 멤버 집합을 구현할 수 있습니다. 이 특수 멤버는 개발자가 PageControl을 사용하면 앱에 의해 자동으로 호출됩니다.

템플릿으로 만든 home.js 파일은 이러한 특수 멤버 중 하나인 ready 함수를 정의합니다. ready 함수는 페이지가 초기화되고 렌더링된 후에 호출되며, 이벤트 처리기를 추가하기 좋은 위치입니다.

그런데 코드에는 WinJS.UI.processAll에 대한 호출이 포함되어 있지 않습니다. PageControl이 자동으로 호출하기 때문입니다. ready 함수가 호출될 때는 WinJS.UI.processAll이 이미 호출되었고 처리가 완료된 상태입니다.

JJ663505.wedge(ko-kr,WIN.10).gif이벤트 처리기를 추가하려면

  1. 1부: "Hello, world!" 앱 만들기2부: 앱 수명 주기 및 상태 관리에서는 3개의 이벤트 처리기(buttonClickHandler, ratingChangednameInputChanged)를 정의했습니다. 이 이벤트 처리기를home.js 파일에 복사하고 PageControl의 멤버로 만듭니다. 템플릿으로 만든 ready 함수 뒤에 이를 추가합니다.

    
        WinJS.UI.Pages.define("/pages/home/home.html", {
    
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
            },
    
            buttonClickHandler: function (eventInfo) {
    
                var userName = document.getElementById("nameInput").value;
                var greetingString = "Hello, " + userName + "!";
                document.getElementById("greetingOutput").innerText = greetingString;
    
                // Save the session data. 
                WinJS.Application.sessionState.greetingOutput = greetingString;
            },
    
            ratingChanged: function (eventInfo) {
    
                var ratingOutput = document.getElementById("ratingOutput");
                ratingOutput.innerText = eventInfo.detail.tentativeRating;
    
                // Store the rating for multiple sessions.
                var appData = Windows.Storage.ApplicationData.current;
                var roamingSettings = appData.roamingSettings;
                roamingSettings.values["greetingRating"] = eventInfo.detail.tentativeRating;
            },
    
            nameInputChanged: function (eventInfo) {
                var nameInput = eventInfo.srcElement;
    
                // Store the user's name for multiple sessions.
                var appData = Windows.Storage.ApplicationData.current;
                var roamingSettings = appData.roamingSettings;
                roamingSettings.values["userName"] = nameInput.value;
            }
    
    
        });
    
    
  2. 이제 이벤트 처리기를 추가해야 합니다. 1부 및 2부에서는 WinJS.UI.processAll에서 반환된 Promise에 대한 then 함수를 만들었습니다. 지금은 ready 함수를 사용하여 이벤트 처리기를 추가할 수 있으므로 작업이 더 간단합니다. ready 함수는 PageControl이 자동으로 WinJS.UI.processAll을 호출한 뒤에 호출됩니다.

    이벤트 처리기를 추가하는 코드를 home.js의 ready 함수에 복사합니다.

    
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
                // Retrieve the div that hosts the Rating control.
                var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                // Retrieve the actual Rating control.
                var ratingControl = ratingControlDiv.winControl;
    
                // Register the event handler. 
                ratingControl.addEventListener("change", this.ratingChanged, false);
    
                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", this.buttonClickHandler, false);
    
                // Retrieve the input element and register our
                // event handler.
                var nameInput = document.getElementById("nameInput");
                nameInput.addEventListener("change", this.nameInputChanged);
    
            },
    
    
  3. 앱을 실행합니다. 이름을 입력하고 단추를 클릭하면 인사말이 표시됩니다. 인사말을 평가할 경우 숫자로 된 평점이 표시됩니다.

    평점을 선택한 후 HelloWorldWithPages 앱

4단계: 앱 상태 복원

지금까지 "Hello, world" 앱의 기능을 거의 다시 만들었습니다. 이제 사용자가 앱을 실행하면 앱 상태를 복원하기만 하면 됩니다.

복원할 두 가지 형식의 앱 상태는 다음과 같습니다.

  • 사용자 이름 및 암호. 앱이 어떻게 종료되었는지에 상관없이 이 상태를 복원합니다.
  • 개인 설정 인사말. 앱이 마지막으로 실행되었을 때 성공적으로 종료된 경우에만 이 상태를 복원합니다.

JJ663505.wedge(ko-kr,WIN.10).gif앱의 상태를 복원하려면

  1. "Hello, world" 앱에서 사용자 이름과 평점을 복원하는 코드를 복사합니다. 이 코드를 home.js의 ready 함수에 추가합니다.
    
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
                // Retrieve the div that hosts the Rating control.
                var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                // Retrieve the actual Rating control.
                var ratingControl = ratingControlDiv.winControl;
    
                // Register the event handler. 
                ratingControl.addEventListener("change", this.ratingChanged, false);
    
                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", this.buttonClickHandler, false);
    
                // Retrieve the input element and register our
                // event handler.
                var nameInput = document.getElementById("nameInput");
                nameInput.addEventListener("change", this.nameInputChanged);
    
                // Restore app data. 
                var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
    
                // Restore the user name.
                var userName =
                    Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
                if (userName) {
                    nameInput.value = userName;
                }
    
                // Restore the rating. 
                var greetingRating = roamingSettings.values["greetingRating"];
                if (greetingRating) {
                    ratingControl.userRating = greetingRating;
                    var ratingOutput = document.getElementById("ratingOutput");
                    ratingOutput.innerText = greetingRating;
                }
    
            },
    
    
  2. 실행했던 마지막 시간에 앱이 정상적으로 종료된 경우에만 개인 설정된 인사말이 복원되도록 할 수 있습니다. 안타깝게도 PageControl에서는 앱의 이전 실행 상태를 확인하는 방법을 기본적으로 제공하지 않습니다. 이러한 상태 정보는 default.js 파일의 onactivated 이벤트 처리기에 제공됩니다. 하지만 이 문제를 쉽게 해결하는 방법이 있습니다. PageControl에서 액세스할 수 있도록 sessionState 개체에 앱의 이전 실행 상태를 저장하기만 하면 됩니다.
    1. default.js 파일에서는 이전 실행 상태를 저장하기 위해 onactivated 처리기에 코드를 추가합니다. 속성을 이름이 previousExecutionStatesessionState 개체에 추가하여 상태를 저장합니다.
      
          app.addEventListener("activated", function (args) {
              if (args.detail.kind === activation.ActivationKind.launch) {
                  if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                      // TODO: This application has been newly launched. Initialize
                      // your application here.
                  } else {
                      // TODO: This application has been reactivated from suspension.
                      // Restore application state here.
                  }
      
                  // Save the previous execution state. 
                  WinJS.Application.sessionState.previousExecutionState = 
                      args.detail.previousExecutionState;
      
                  if (app.sessionState.history) {
                      nav.history = app.sessionState.history;
                  }
                  args.setPromise(WinJS.UI.processAll().then(function () {
                      if (nav.location) {
                          nav.history.current.initialPlaceholder = true;
                          return nav.navigate(nav.location, nav.state);
                      } else {
                          return nav.navigate(Application.navigator.home);
                      }
                  }));
              }
          });
      
      
    2. home.js 파일에서 previousExecutionState 데이터를 확인하는 ready 메서드에 코드를 추가합니다. 이전 실행 상태가 terminated이면 개인 설정된 인사말을 복원합니다. "Hello, world" 앱의 default.js 파일에서 이 작업을 수행하는 코드를 복사할 수 있습니다.
      
                  // If the app was terminated last time it ran, restore the personalized
                  // greeting. 
                  if (
                      WinJS.Application.sessionState.previousExecutionState
                      === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                      var outputValue = WinJS.Application.sessionState.greetingOutput;
                      if (outputValue) {
                          var greetingOutput = document.getElementById("greetingOutput");
                          greetingOutput.innerText = outputValue;
                      }
      
                  }
      
      

      다음은 전체 ready 메서드입니다.

      
              // This function is called whenever a user navigates to this page. It
              // populates the page elements with the app's data.
              ready: function (element, options) {
                  // TODO: Initialize the page here.
      
                  // Retrieve the div that hosts the Rating control.
                  var ratingControlDiv = document.getElementById("ratingControlDiv");
      
                  // Retrieve the actual Rating control.
                  var ratingControl = ratingControlDiv.winControl;
      
                  // Register the event handler. 
                  ratingControl.addEventListener("change", this.ratingChanged, false);
      
                  // Retrieve the button and register our event handler. 
                  var helloButton = document.getElementById("helloButton");
                  helloButton.addEventListener("click", this.buttonClickHandler, false);
      
                  // Retrieve the input element and register our
                  // event handler.
                  var nameInput = document.getElementById("nameInput");
                  nameInput.addEventListener("change", this.nameInputChanged);
      
                  // Restore app data. 
                  var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
      
                  // Restore the user name.
                  var userName =
                      Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
                  if (userName) {
                      nameInput.value = userName;
                  }
      
                  // Restore the rating. 
                  var greetingRating = roamingSettings.values["greetingRating"];
                  if (greetingRating) {
                      ratingControl.userRating = greetingRating;
                      var ratingOutput = document.getElementById("ratingOutput");
                      ratingOutput.innerText = greetingRating;
                  }
      
                  // If the app was terminated last time it ran, restore the personalized
                  // greeting. 
                  if (
                      WinJS.Application.sessionState.previousExecutionState
                      === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                      var outputValue = WinJS.Application.sessionState.greetingOutput;
                      if (outputValue) {
                          var greetingOutput = document.getElementById("greetingOutput");
                          greetingOutput.innerText = outputValue;
                      }
      
                  }
      
              },
      
      
  3. 앱을 실행합니다. 지금까지 원래 "Hello, world" 앱의 기능을 복제했습니다.

5단계: 다른 페이지 추가

대부분의 앱은 여러 페이지를 포함하고 있습니다. 앱에 다른 페이지를 추가해 보겠습니다. 현재 탐색 앱 템플릿을 사용 중이므로 페이지를 추가하기가 쉽습니다.

JJ663505.wedge(ko-kr,WIN.10).gif다른 페이지를 추가하려면

  1. 솔루션 탐색기에서 페이지 폴더를 마우스 오른쪽 단추로 클릭하고 추가 > 새 폴더를 선택합니다. 프로젝트에 새 폴더가 나타납니다.
  2. 폴더의 이름을 "page2"로 바꿉니다.
  3. page2 폴더를 마우스 오른쪽 단추로 클릭하고 추가 > 새 항목...을 선택합니다. 새 항목 추가 대화 상자가 나타납니다.
  4. 목록에서 페이지 컨트롤을 선택합니다. 이름 텍스트 상자에 "page2.html"을 입력합니다.

  5. 추가를 클릭하여 PageControl을 추가합니다. 솔루션 탐색기에 새 PageControl이 나타납니다.

    HelloWorldWithPages 프로젝트

    PageControl에는 page2.css, page2.html 및 page2.js 등, 세 개의 파일이 있습니다.

  6. page2.html 파일에서 어두운 스타일시트에 대한 참조를
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    다음으로 대체합니다.

    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
    
    

지금까지 새 페이지를 만들었습니다. 다음 단계에서는 페이지 탐색 방법에 대해 알아보겠습니다.

6단계: 탐색 함수를 사용하여 페이지 간 이동

이제 두 번째 페이지가 있지만 사용자가 이 페이지로 이동할 방법이 없습니다. page2.html에 대한 링크를 추가하여 home.html 페이지를 업데이트해 보겠습니다.

JJ663505.wedge(ko-kr,WIN.10).gif페이지 간에 이동하려면

  1. home.html을 열고 page2.html에 대한 링크를 추가합니다.
    
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Hello, world!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
     
                <p>What's your name?</p>
                <input id="nameInput" type="text" />
                <button id="helloButton">Say "Hello"</button>
                <div id="greetingOutput"></div>
                <label for="ratingControlDiv">
                    Rate this greeting: 
                </label>
                <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
                </div>
                <div id="ratingOutput"></div>
    
                <!-- A hyperlink to page2.html. -->
                <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
            </section>
        </div>
    </body>
    
    
  2. 앱을 실행하고 링크를 클릭합니다. 제대로 작동하는 것 같습니다. 앱에 page2.html이 표시됩니다.

    새 항목 추가 대화 상자

그런데 문제가 있습니다. 앱이 최상위 수준 탐색을 수행했습니다. 즉, home.html에서 page2.html로 이동하는 대신 default.html에서 page2.html로 이동합니다.

최상위 수준 탐색 수행

원하는 작업은 home.html의 콘텐츠를 page2.html로 바꾸는 것입니다.

page2.html로 이동하는 권장 방법.

다행히 PageControlNavigator 컨트롤을 사용하면 이러한 탐색 유형을 아주 쉽게 수행할 수 있습니다. PageControlNavigator 코드(앱의 navigator.js 파일)는 WinJS.Navigation.navigated 이벤트를 처리합니다. 이벤트가 발생하면 PageControlNavigator는 이벤트에서 지정한 페이지를 로드합니다.

탐색을 위해 WinJS.Navigation.navigate, WinJS.Navigation.back 또는 WinJS.Navigation.forward 함수를 사용하면 WinJS.Navigation.navigated 이벤트가 발생합니다.

하이퍼링크의 기본 동작을 사용하는 대신 직접 WinJS.Navigation.navigate를 호출해야 합니다. 링크를 단추로 대체하고, 단추의 클릭 이벤트 처리기를 사용하여 WinJS.Navigation.navigate를 호출할 수 있습니다. 또는 사용자가 링크를 클릭하면 앱이 WinJS.Navigation.navigate를 사용하여 링크 대상으로 이동할 수 있도록 하이퍼링크의 기본 동작을 변경할 수도 있습니다. 이를 위해서는 하이퍼링크의 click 이벤트를 처리하고 이 이벤트를 사용하여 하이퍼링크의 기본 탐색 동작을 중지한 다음 WinJS.Navigation.navigate 함수를 호출하여 이를 링크 대상에 전달합니다.

JJ663505.wedge(ko-kr,WIN.10).gif기본 하이퍼링크 동작을 다시 정의하려면

  1. home.js 파일에서 하이퍼링크에 대한 click 이벤트 처리기를 정의하고 PageControl의 멤버로 만듭니다. 이름을 linkClickEventHandler로 지정하고 nameInputChanged 처리기 뒤에 추가합니다.
    
    
            nameInputChanged: function (eventInfo) {
                var nameInput = eventInfo.srcElement;
    
                // Store the user's name for multiple sessions.
                var appData = Windows.Storage.ApplicationData.current;
                var roamingSettings = appData.roamingSettings;
                roamingSettings.values["userName"] = nameInput.value;
            },        
    
     
            linkClickEventHandler: function (eventInfo) {
    
            }
    
    
  2. preventDefault 메서드를 호출하여 기본 링크 동작(지정된 페이지로 직접 이동)이 일어나지 않도록 합니다.
    
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
    
            }
    
    
  3. 이 이벤트를 트리거한 하이퍼링크를 검색합니다.
    
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
                var link = eventInfo.target;
    
            }
    
    
  4. WinJS.Navigation.navigate 함수를 호출하여 이를 링크 대상에 전달합니다. 이때 선택적으로 해당 페이지의 상태를 설명하는 상태 개체를 전달할 수도 있습니다. 자세한 내용은 WinJS.Navigation.navigate 페이지를 참조하세요.
    
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
                var link = eventInfo.target;
                WinJS.Navigation.navigate(link.href);
            }
    
    
  5. home.js 파일의 ready 함수에서 이벤트 처리기를 하이퍼링크에 추가합니다.

    WinJS는 페이지에서 많은 요소를 쉽게 검색할 수 있도록 하는 WinJS.Utilities.query 함수를 제공합니다. WinJS.Utilities.query 함수는 이벤트 처리기를 추가 및 제거하기 위한 메서드를 추가로 제공하는 QueryCollection을 반환합니다. WinJS.Utilities.query 컬렉션 및 listen 메서드를 사용하여 linkClickEventHandler를 추가해 보겠습니다.

    
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
                WinJS.Utilities.query("a").listen("click", 
                    this.linkClickEventHandler, false);
    
    

    이러한 접근 방식의 이점은 페이지의 링크 개수가 많든 적든 상관없이 작동한다는 것입니다. 지금은 링크가 하나밖에 없지만 이 접근 방식을 사용할 경우 링크를 더 추가할 수 있고 코드를 변경할 필요도 없습니다.

  6. 앱을 실행하고 page2.html에 대한 링크를 클릭합니다.

    이제 앱은 page2.html을 올바르게 표시합니다.

    이제 적절한 탐색 패턴을 사용하여 페이지가 표시됩니다.

    page2.html로 이동한 후 콘텐츠 분석 결과

7단계: 추가 탐색을 위한 NavBar 추가

NavBar는 탐색 명령에만 사용되는 AppBar와 같습니다. 실제로 NavBarAppBar의 하위 클래스입니다. 간단한 링크 목록을 포함할 수 있으며, 범주로 구성된 여러 수준의 링크를 포함할 수 있습니다. 항목을 하드 코드하거나, 프로그래밍 방식으로 업데이트하거나, 데이터 바인딩을 사용하여 NavBar를 채울 수 있습니다.

NavBar는 사용자가 필요로 할 때 앱 화면 맨 위에 나타납니다. 사용자는 가장자리를 살짝 밀거나, Windows 로고 키+Z를 누르거나, 마우스 오른쪽 단추를 클릭하여 NavBar를 호출합니다.

NavBar는 세로 레이아웃 및 분할 탐색 항목(하위 탐색 옵션이 있는 탐색 항목)도 지원합니다. NavBar는 자유롭게 사용자 지정할 수 있습니다. CSS를 사용하여 NavBar의 거의 모든 측면과 해당 콘텐츠의 스타일을 지정할 수 있으며, 사용자 지정 탐색 항목을 만들 수도 있습니다.

탐색 모음은 WinJS 컨트롤입니다. HTML에서 탐색 모음을 선언하려면 다음 구문을 사용합니다.



<div id="navbar" data-win-control="WinJS.UI.NavBar">

</div>


NavBar에는 다음 세 가지 구성 요소가 있습니다.

  • NavBar 자체.
  • NavBarContainer 개체. 이 개체는 탐색 항목(NavBarCommand 개체)을 포함하며 페이지 매김과 이동 및 스크롤을 모두 지원합니다. 하나의 NavBarNavBarContainer 개체가 하나 이상 있을 수 있습니다. NavBarContainer 개체를 사용하여 탐색 옵션 그룹을 정의합니다.
  • 하나 이상의 NavBarCommand 개체. 사용자가 탐색을 위해 클릭하는 항목입니다.

다음은 간단한 NavBar의 예제입니다.


<div id="NavBar" data-win-control="WinJS.UI.NavBar">
    <div id="GlobalNav" data-win-control="WinJS.UI.NavBarContainer">
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                label: 'Home',
                icon: WinJS.UI.AppBarIcon.home,
                location: '/html/home.html',
                splitButton: false
                }">
            </div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                label: 'Your apps',
                icon: WinJS.UI.AppBarIcon.favorite,
                location: '/html/yourapps.html',
                splitButton: false
                }">
            </div>
    </div>
</div>

현재의 앱에는 여러 페이지가 포함되어 있습니다. 탐색 모음을 어디에 추가해야 할까요?

  • 탐색 모음에 모든 페이지에서 사용할 수 있어야 하는 명령이 포함되어 있으면 탐색 모음을 default.html 파일에 추가합니다.
  • 탐색 모음이 페이지별로 다르면 각 PageControl 개체에 서로 다른 탐색 모음을 정의할 수 있습니다.
  • 또한 default.html에 중앙 탐색 모음을 정의한 다음 다른 PageControl 개체를 로드할 때 수정할 수도 있습니다.

사용자가 home.html과 page2.html 간을 이동할 수 있는 간단한 탐색 모음을 만들어 보겠습니다. 여기서는 default.html 파일에 탐색 모음을 정의합니다.

JJ663505.wedge(ko-kr,WIN.10).gif탐색 모음을 추가하려면

  1. default.html 파일을 엽니다. NavBar 컨트롤을 body 요소의 첫 번째 자식으로 추가합니다.

    
    
        <div id="navbar" data-win-control="WinJS.UI.NavBar">
    
        </div>
     
    
    
  2. 각 탐색 모음에 NavBarContainer 개체가 하나 이상 포함됩니다. NavBarContainer 개체를 사용하여 탐색 옵션 그룹을 정의합니다. 탐색 모음에 NavBarContainer를 추가합니다.

    
    
        <div id="navbar" data-win-control="WinJS.UI.NavBar">
            <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer">
                   
            </div>
        </div>
     
    
    
  3. NavBarContainerNavBarCommand 개체가 하나 이상 포함됩니다. 사용자가 탐색을 위해 클릭하는 항목입니다. NavBarContainerNavBarCommand 개체를 추가합니다.

    다음은 각 NavBarCommand에 대해 설정할 속성입니다.

    • label: 명령에 대해 표시할 레이블

    • icon: 명령에 대해 표시할 아이콘, 또는 사용자 지정 PNG 파일에 대한 경로(아이콘 값 목록은 AppBarIcon 참조)

    • location: 이동할 위치

    • splitButton: 명령에 하위 메뉴가 있는지 여부. 기본값은 false입니다.

    
    
        <div id="navbar" data-win-control="WinJS.UI.NavBar">
            <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer">
                    <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                        label: 'Home',
                        icon: WinJS.UI.AppBarIcon.home,
                        location: '/pages/home/home.html',
                        splitButton: false
                        }">
                    </div>
                    <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                        label: 'Page 2',
                        icon: WinJS.UI.AppBarIcon.page,
                        location: '/pages/page2/page2.html',
                        splitButton: false
                        }">
                    </div>
            </div>
        </div>
     
    
    

    이 예제에서는 NavBarCommand 개체를 인라인에서 정의하는 방법을 보여 주며, 데이터 원본에서 생성할 수도 있습니다. 예제는 HTML NavBar 샘플을 참조하세요.

  4. 앱을 실행합니다. 앱 바를 표시하려면 가장자리를 살짝 밀거나, Win + Z를 누르거나, 마우스 오른쪽 단추를 클릭합니다.

    간단한 앱 바

    단추를 클릭하면 탐색 모음이 자동으로 navigate를 호출하고 해당 페이지로 이동합니다.

    이제 탐색 모음을 선언했습니다. 다음은 스타일을 지정할 차례입니다.

  5. default.css 파일을 열고 파일의 시작 부분에 배경색이 변경되는 앱 바에 대한 CSS 스타일을 만듭니다.
    
    #navbar {
    
        background-color: #03abe2;
    }
    
    
    
  6. 앱을 실행합니다. 이제 탐색 모음을 사용하여 두 페이지 간에 이동할 수 있습니다.

    앱 바가 표시된 HelloWorldWithPages 앱

요약

축하합니다. 세 번째 자습서를 마쳤습니다! 지금까지 탐색 앱 템플릿을 사용하는 프로젝트를 만드는 방법과 PageControl 개체를 사용하는 방법, 그리고 앱 바를 만드는 방법을 알아보았습니다.

샘플 다운로드

난관에 봉착했나요? 또는 작업의 확인이 필요하세요? 이 경우 JavaScript 시작 샘플을 다운로드(영문)하세요.

다음 단계

이 자습서 시리즈의 다음 부분에서는 보다 복잡한 앱을 만드는 방법에 대해 알아봅니다. 4부: 레이아웃 및 뷰로 이동합니다.

관련 항목

JavaScript 시작: 자습서 시리즈의 전체 코드
HTML, CSS 및 JavaScript를 사용하여 Windows 8 앱 프로그래밍(전자책)
디자이너용
탐색 패턴
명령 패턴
레이아웃
허브
아래쪽 앱 바
맨 위 앱 바
뒤로 단추
허브 컨트롤에 대한 지침
앱 바에 대한 지침(Windows 스토어 앱)
앱 바에 접근성 구현
개발자용(HTML)
탐색 및 탐색 기록 샘플
앱 바 추가
탐색 모음 추가
페이지 간 탐색(HTML)
HTML 허브 컨트롤 샘플
HTML AppBar 컨트롤 샘플
HTML NavBar 컨트롤 샘플
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object

 

 

표시:
© 2014 Microsoft