빠른 시작: 단일 페이지 탐색 사용(HTML)

  • 아티클

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

단일 페이지 탐색 모델과 PageControl 개체 및 WinJS.Navigation 기능을 사용해 이를 앱에서 구현하는 방법에 대해 알아봅니다.

앱에 가장 적합한 탐색 패턴을 선택하는 방법을 보려면 탐색 패턴을 참조하세요.

또한 앱 기능 전체 프로세스 시리즈의 일부로 플랫 탐색 및 계층적 탐색 패턴의 작동 방법을 살펴볼 수 있습니다.

사전 요구 사항

기본 링크 만들기

가장 단순하며 가장 일반적으로 사용되는 탐색 양식 중 하나는 하이퍼링크입니다. 다음은 page2.html로 이동하는 하이퍼링크를 만드는 HTML 코드입니다.

<p><a href="page2.html">Go to page 2</a></p>

이것은 상대적 링크이므로 page2.html이 앱의 일부이며 현재 문서의 기준 URL에 상대적인 로컬 페이지라고 가정합니다. 예를 들어 링크가 /folder/default.html에 표시되는 경우 링크를 클릭하면 /folder/page2.html로 이동됩니다.

참고  지역화를 위해 앱을 최적화한 경우(항상 이렇게 하는 것이 좋음) 이 동작은 /folder/ 아래의 지역화된 콘텐츠 폴더에 따라 달라집니다. 앱 세계화를 참조하세요.

 

응용 프로그램에 있는 로컬 파일의 전체 URI를 명시적으로 지정하려는 경우 다음과 같이 새로운 패키지 콘텐츠 URL 스키마(ms-appx)를 사용합니다.

  • **ms-appx://package name/**file path

원하는 경우 패키지 이름을 생략할 수 있습니다.

  • **ms-appx:///**file path

예를 들면 다음과 같습니다.

<p><a href="ms-appx:///page2.html">Go to page 2</a></p>

ms-appx URL 스키마를 사용하여 앱의 패키지에 포함된 파일을 참조할 수 있습니다. 그러나 문서의 기준 URL에 따라 자동으로 확인되는 상대 URL을 사용하는 것이 좋습니다.

단일 페이지 탐색: 권장 모델

이전 예제에서는 상위 수준 탐색을 수행하는 링크를 만드는 방법을 보여 주었습니다. 상위 수준 탐색은 웹 페이지에 적합하지만 다음과 같은 여러 가지 이유로 앱에서는 수행하면 안 됩니다.

  • 앱이 다음 페이지를 로드하는 동안 빈 화면이 됩니다.
  • 스크립트 컨텍스트가 삭제되고 다시 초기화해야 합니다. 앱이 시스템 이벤트를 받을 수 있지만 스크립트 컨텍스트가 삭제되어 다시 초기화되었으므로 이벤트를 처리할 수 없습니다.

단일 페이지 탐색을 사용하면 상위 수준 탐색보다 더 나은 성능과 좀 더 앱 같은 환경이 제공됩니다. 새 Microsoft Visual Studio 프로젝트에서는 탐색 컨트롤이 자동으로 제공되지 않으므로 새 페이지로 상위 수준 탐색을 하려면 수동으로 링크나 다른 탐색 메커니즘을 만들어 돌아가야만 첫 번째 페이지로 돌아갈 수 있습니다. 시작 페이지는 앱의 수명 주기 관리 방법, 앱이 시작되거나, 종료되거나, 일시 중단될 때 작동하는 방법 등을 정의하는 곳이기도 합니다. 여러 상위 수준 페이지가 있는 경우 각 페이지에 앱의 수명 주기 및 상태를 관리하기 위한 논리를 포함해야 합니다.

콘텐츠를 기본 페이지로 가져오려면 어떤 컨트롤을 사용해야 할까요?

  • 다른 소스에서 문서를 로드하려면 DOM(문서 개체 모델)을 사용할 수 있습니다.
  • 간단한 HTML 콘텐츠(대화형 방식이 아니고 스크립트 참조를 포함하지 않는 콘텐츠)에는 HtmlControl 개체를 사용합니다.
  • 외부 웹 콘텐츠에는 가능한 한 x-ms-webview 컨트롤을 사용합니다. iframe에 비해 이 컨트롤은 격리, 탐색, SmartScreen 필터 가용성을 제공하며 iframe에서 호스트할 수 없는 사이트를 지원합니다.
  • 다른 모든 콘텐츠에는 페이지 컨트롤을 사용합니다.

Visual Studio는 탐색을 더 쉽게 관리하는 데 도움이 되도록 몇 가지 앱용 JavaScript 프로젝트 템플릿을 제공합니다. 이러한 프로젝트 템플릿은 PageControlNavigator라는 탐색 컨트롤을 제공하고, 이 컨트롤을 사용하여 PageControl 개체 간에 이동할 수 있습니다. PageControlNavigator 클래스는 PageControl을 사용해 단일 페이지 탐색을 쉽게 수행할 수 있는 한 가지 방법을 보여 줍니다.

다음 단계에서는 여러 PageControl 개체를 포함하는 앱을 만드는 방법 및 단일 페이지 탐색 모델을 사용해 그러한 페이지를 탐색하는 방법을 보여줍니다.

1단계: 새 탐색 앱 프로젝트 만들기

  1. Microsoft Visual Studio 2013 Update 2를 시작합니다.

    참고  Visual Studio를 처음 실행하면 개발자 라이선스를 다운로드하라는 메시지가 표시됩니다.

     

  2. 파일 > 새 프로젝트를 선택하거나 시작 페이지 탭에서 새 프로젝트를 클릭합니다. 새 프로젝트 대화 상자가 열립니다.

  3. 왼쪽 템플릿 창에서 설치됨 => 템플릿 => JavaScript => 스토어 앱을 확장합니다.

  4. 범용 앱 템플릿 형식을 선택합니다. JavaScript에 사용할 수 있는 프로젝트 템플릿이 대화 상자의 가운데 창에 표시됩니다.

  5. 가운데 창에서 탐색 앱(범용 앱) 프로젝트 템플릿을 선택합니다.

  6. 이름 입력란에 프로젝트의 이름을 입력합니다. 이 항목의 예에서는 "NavigationAppExample"을 사용합니다.

    JavaScript 범용 앱 템플릿을 표시하는 새 프로젝트 대화 상자입니다.

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

    새 탐색 앱 프로젝트에는 시작 페이지, 홈페이지 및 몇 가지 추가 지원 파일이 포함됩니다. 이 프로젝트는 솔루션 탐색기에 다음과 같이 표시됩니다.

    새 탐색 응용 프로그램 프로젝트의 파일.

    새 탐색 앱 프로젝트에는 여러 파일이 포함됩니다. 일부는 Windows 앱에 관련되고 일부는 Phone 앱에 관련되고 일부는 공유됩니다.

    프로젝트에는 다음 HTML 파일이 포함됩니다.

    • default.html—시작 페이지입니다. 이 페이지가 먼저 로드됩니다. 여기에는 PageControlNavigator(각 페이지를 주 창에 로드함)의 인스턴스가 포함되며, 앱에서 사용하는 경우 여기서 AppBar를 만들 수 있습니다.참고  HTML 페이지는 default.html에 선언된 div 요소인 단일 콘텐츠 호스트로 로드됩니다. default.html에서 콘텐츠 호스트 div 요소는 WinJS(JavaScript용 Windows 라이브러리)에서 제공하는 data-win-control 특성을 사용하여 PageControlNavigator 유형의 컨트롤로 선언됩니다.  
    • home.html—홈페이지입니다. "시작" 제목을 표시합니다.

    이 프로젝트에는 다음 JavaScript 파일이 포함됩니다.

    • default.js—앱이 시작될 때의 동작을 지정합니다.
    • home.js—홈페이지와 관련된 동작을 지정합니다.
    • navigator.js—Windows 스토어 앱 JavaScript 템플릿의 탐색 모델을 지원하는 PageControlNavigator 개체를 구현합니다.

    이 프로젝트에는 다음 CSS 파일이 포함됩니다.

    • default.css—콘텐츠 호스트 페이지와 앱 전체의 CSS 스타일을 지정합니다.
    • home.css—홈페이지의 CSS 스타일을 지정합니다.

    프로젝트에는 앱 패키지에 대해 설명하는 package.appxmanifest 파일도 포함됩니다. 마지막으로 프로젝트에는 시작 화면 이미지에 사용되는 splashscreen.png, Windows 스토어에 사용되는 storelogo.png 등의 이미지 파일이 여러 개 들어 있습니다.

  8. 앱을 실행합니다. 디버그 > 디버깅 시작을 선택하거나 F5 키를 선택합니다. 디버깅을 중지하고 Visual Studio로 돌아가려면 Shift+F5를 선택합니다.

    다음은 Windows 앱의 스크린샷입니다.

    새 Windows 탐색 앱

    다음은 Phone 앱의 스크린샷입니다.

    새 Phone 탐색 앱

    지금 보이는 콘텐츠는 default.html 파일에서 정의한 것이 아니라 별도의 페이지인 home.html 파일에서 정의한 것으로, 홈페이지의 콘텐츠를 검색하여 default.html 내에 표시하는 PageControlNavigator입니다.

    탐색 컨트롤인 PageControlNavigator는 다음과 같이 표시되며, 탐색에 사용되는 여러 가지 함수를 정의합니다. 이 컨트롤은 navigator.js에서 구현됩니다.

    
WinJS.Namespace.define("Application", {
    PageControlNavigator: WinJS.Class.define(
        // Define the constructor function for the PageControlNavigator.
        function PageControlNavigator(element, options) {
            // Initialization code.
            }, {
                // Members specified here.
            }
    ), // . . .
});

    생성자 함수가 탐색 컨트롤을 초기화합니다. 몇 가지 중요한 초기화 작업에는 WinJS.Navigation.onnavigating 이벤트와 같은 WinJS 이벤트에 대한 처리기 설정과 앱의 홈페이지 설정 등이 있습니다. 홈 값은 contenthost DIV 요소의 data-win-options 특성에 지정됩니다.

    
// Initialization code.
this.home = options.home;
// . . .
// The 'nav' variable is set to WinJS.Navigation.
addRemovableEventListener(nav, 'navigating', this._navigating.bind(this), false);
addRemovableEventListener(nav, 'navigated', this._navigated.bind(this), false);

    앱의 탐색 컨트롤(default.html에 있음)로 선언된 DIV 요소는 모든 앱 페이지에 대한 콘텐츠 호스트를 제공합니다. DIV 요소는 WinJS data-win-control 특성을 사용하여 탐색 컨트롤로 선언되며, 이 컨트롤이 앱의 탐색 모델을 제공합니다. 모든 페이지 콘텐츠는 이 DIV에 로드됩니다.

    default.html 페이지의 전체 태그는 다음과 같습니다.

    
<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>NavigationAppExample</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>

    <!-- NavigationAppExample 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'}">
        </button>
    </div> -->
</body>
</html>

    다음 그림은 앱의 창에 나타나는 다른 콘텐츠 단위를 보여줍니다.

    탐색 응용 프로그램의 콘텐츠 분석.

다음 단계에서는 PageControlNavigator 및 PageControl 개체가 있는 페이지 추가에 대해 자세히 알아봅니다.

2단계: 새 페이지 만들기

PageControl은 논리 페이지의 역할을 하는 HTML, CSS 및 JavaScript의 모듈식 단위입니다.

Visual Studio 2013 프로젝트에 새 페이지를 추가할 경우 다음과 같이 해야 합니다.

  1. Visual Studio에서 페이지 컨트롤 항목 템플릿을 사용하여 새 페이지를 추가합니다.
  2. WinJS.Navigation.navigate 함수를 사용하여 새 페이지로 이동하는 코드를 추가합니다. 팁  이 함수는 직접 탐색을 수행하지 않지만 navigator.js에서 처리되는 WinJS.Navigation.onnavigated 이벤트를 호출합니다. navigator.js의 코드는 새 페이지에서 ready 함수를 호출합니다. 일반적으로 navigator.js를 수정할 필요가 없습니다.  
  3. 필요한 경우 앱에 적합한 UI 및 이벤트 처리기를 추가하여 페이지 탐색 코드를 호출합니다.

페이지에는 라이브러리에서 미리 정의된 순서로 자동으로 호출하는 미리 정의된 메서드 집합이 있습니다. WinJS.UI.Pages.define 함수는 이러한 구현에 대한 메서드를 표시합니다.

Hh452768.wedge(ko-kr,WIN.10).gif페이지 추가

  1. 솔루션 탐색기에서 pages 폴더를 마우스 오른쪽 단추로 클릭하고 추가 > 새 폴더를 선택합니다.참고  이 예에서는 공유 페이지를 추가합니다. 필요한 경우 Windows 또는 Phone 프로젝트에 고유한 페이지를 추가할 수 있습니다.

     

  2. 새 폴더의 이름을 page2로 지정합니다.

  3. page2 폴더를 마우스 오른쪽 단추로 클릭하고 추가 > 새 항목을 선택합니다.

  4. 새 항목 추가 대화 상자의 가운데 창에서 페이지 컨트롤을 선택합니다.

  5. 페이지의 이름을 page2.html로 지정하고 추가를 선택합니다.

    page2.html 파일이 두 개의 다른 프로젝트 파일인 page2.css 및 page2.js와 함께 page2 폴더에 만들어집니다. 이 파일들이 모여 논리 페이지를 나타냅니다.

    팁  항목 템플릿을 프로젝트의 다른 위치에 추가하려면 page2.html의 스크립트 및 CSS 참조를 업데이트해야 할 수도 있습니다.

     

  6. page2.js를 열고 define 함수에서 URI가 올바른지 확인합니다. 다음은 이 함수의 URI 형식입니다.

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
    // . . .
    ready: function (element, options) {
        // ready function implementation.
    },
    // . . .
});

3단계: 페이지 사용자 지정

이제 다른 메시지 및 요일을 표시하도록 새 페이지를 수정합니다.

  1. page2.html를 엽니다. 페이지 컨트롤 항목 템플릿은 헤더 섹션(뒤로 단추 포함) 및 페이지의 기본 콘텐츠에 대한 섹션을 포함하는 HTML 페이지를 만듭니다.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</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="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <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 page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>
        </section>
    </div>
</body>
</html>

  2. 기본 콘텐츠 섹션을 다음으로 교체합니다.

    
        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>

    이제 page2.html 파일이 다음과 같이 표시됩니다.

    
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</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="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <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 page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>
    </div>
</body>
</html>

  3. page2.js를 엽니다. PageControl에는 미리 정의된 순서에 따라 자동으로 호출되는, 미리 정의된 함수 집합이 포함되어 있습니다. 페이지 컨트롤 항목 템플릿에는 ready 함수와 updateLayout 및 unload 함수가 포함되어 있습니다.

    PageControlNavigator는 사용자가 세로와 가로를 전환하거나 앱 창 크기를 변경할 때 updateLayout 함수를 호출합니다. 이 항목에서는 updateLayout 정의 방법을 설명하지 않지만, 이 함수는 모든 앱에서 정의해야 합니다. 길고 좁은 레이아웃에 맞게 창 크기를 조정하기 위한 지침 및 UWP(유니버설 Windows 플랫폼) 앱용 반응형 디자인 101을 참조하세요.

    ready 함수는 페이지의 DOM이 로드되고, 컨트롤이 활성화되고, 페이지가 기본 DOM으로 로드될 때 호출됩니다.

    PageControl은 페이지 수명 주기에 대한 추가 함수를 지원합니다. 자세한 내용은 페이지 컨트롤 추가를 참조하세요.

    다음은 페이지 컨트롤 항목 템플릿으로 만든 page2.js 파일입니다.

    
// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.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.
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();

  4. 2단계에서 만든 범위("dayPlaceholder")를 검색하고 innerText를 현재 날짜로 설정하도록 ready 함수를 수정합니다.

    
// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.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.

            var dayPlaceholder = document.querySelector("#dayPlaceholder");
            var calendar = new Windows.Globalization.Calendar();
            dayPlaceholder.innerText =
                calendar.dayOfWeekAsString();
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();

지금까지 페이지를 만들고 사용자 지정했습니다. 다음 단계에서는 사용자가 앱을 실행하여 페이지로 이동하도록 합니다.

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

지금 앱을 실행하면 home.html이 표시되며, 사용자가 page2.html로 이동할 수 있는 방법이 없습니다. 사용자가 page2.html로 이동하는 간단한 방법은 home.html에서 해당 페이지에 대한 링크를 사용하는 것입니다.


<!-- home.html -->
<!DOCTYPE html>
<html>
<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>
<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 NavigationAppExample!</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>

            <!-- A hyperlink to page2.html. -->
            <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
        </section>
    </div>
</body>
</html>

앱을 실행하고 링크를 클릭하면 작동하는 것처럼 보이며, 앱에 page2.html이 표시됩니다. 문제는 앱에서 상위 수준 탐색을 수행한다는 것입니다. home.html에서 page2.html로 이동하는 대신 default.html에서 page2.html로 이동합니다.

상위 수준 탐색 수행.

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

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

다행히 PageControlNavigator 컨트롤을 사용하면 이러한 탐색 유형을 아주 쉽게 수행할 수 있습니다. PageControlNavigator 코드(앱의 navigator.js 파일)는 WinJS.Navigation.onnavigated 이벤트를 처리합니다. 이벤트가 발생하면 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 함수를 호출하여 이를 링크 대상에 전달합니다. 방법은 다음과 같습니다.

  1. home.js 파일에서 하이퍼링크에 대해 click 이벤트 처리기를 정의합니다.

    
function linkClickEventHandler(eventInfo) {

}

  2. preventDefault 메서드를 호출하여 기본 링크 동작(지정된 페이지로 직접 이동)이 일어나지 않도록 합니다.

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
}

  3. 이 이벤트를 트리거한 하이퍼링크를 검색합니다.

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
    var link = eventInfo.target;
}

  4. WinJS.Navigation.navigate 함수를 호출하고 링크 대상을 전달합니다. 이때 선택적으로 해당 페이지의 상태를 설명하는 상태 개체를 전달할 수도 있습니다. 자세한 내용은 WinJS.Navigation.navigate를 참조하세요.

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
    var link = eventInfo.target;
    WinJS.Navigation.navigate(link.href); 
}

  5. home.js의 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.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 

        }
    });

이것이 마지막 단계입니다. 다음은 home.js 파일의 전체 코드입니다.


// home.js
(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.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 
        
        }
    });

    function linkClickEventHandler(eventInfo) {
        eventInfo.preventDefault();
        var link = eventInfo.target;
        WinJS.Navigation.navigate(link.href);
    }


})();

앱을 실행하고 page2.html에 대한 링크를 클릭합니다. 다음과 같이 표시됩니다.

뒤로 단추가 있는 page2.html 화면

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

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

페이지 컨트롤 템플릿에는 탐색을 위해 WinJS.Navigation 함수를 사용하면 활성화되는 뒤로 단추가 포함되어 있습니다. WinJS.Navigation 함수를 사용하면 앱에서 탐색 기록을 저장합니다. 해당 기록을 사용해, WinJS.Navigation.back을 호출하여 뒤로 이동하거나 WinJS.Navigation.forward를 호출하여 앞으로 이동할 수 있습니다.

참고  일반적으로 Windows 스토어 앱은 두 가지 탐색 패턴(플랫 및 계층적 탐색 패턴) 중 하나를 사용합니다. 플랫 탐색 앱에서는 BackButton 개체를 사용하지 않는 것이 좋습니다. 자세한 내용은 탐색 패턴을 참조하세요.

 

앱을 일시 중단하면 탐색 기록 저장

앱을 일시 중단하거나 종료해도 탐색 기록이 자동으로 저장되지는 않지만 이 정보를 쉽게 저장할 수 있습니다. WinJS.Navigation.history 속성을 사용하여 탐색 기록을 검색하고 WinJS.Application.sessionState 개체를 사용하여 저장합니다. 부드러운 일시 중단/다시 시작 환경을 보장하려면 사용자가 탐색할 때마다 이 정보를 저장하는 것이 가장 좋습니다.

앱이 다시 시작되면 WinJS.Application.sessionState 개체에서 기록 정보를 검색한 다음 해당 정보를 사용하여 WinJS.Navigation.history 속성을 설정합니다.

WinJS.Application.sessionState 개체를 사용하여 세션 데이터를 저장 및 복원하는 방법에 대한 예는 2부: 앱 수명 주기 및 상태 관리를 참조하세요. 일시 중단 및 다시 시작에 대한 자세한 내용은 실행, 다시 시작 및 멀티태스킹을 참조하세요.

요약

WinJS.UI.Pages 네임스페이스의 개체 및 메서드를 사용해 단일 페이지 탐색 모델을 지원하는 방법을 배웠습니다.

단일 페이지 탐색 모델을 사용하여 앱을 빌드하는 방법에 대해 살펴봤습니다. 템플릿에서 제공하는 PageControlNavigator 클래스를 사용하여 PageControl 개체 및 WinJS.Navigation 기능을 통해 앱에 이 모델을 구현했습니다.

관련 항목

개발자용

첫 번째 앱 - 3부: PageControl 개체 및 탐색

앱 바 추가

빠른 시작: 탐색 모음(NavBar) 추가

빠른 시작: 레이아웃 및 탐색에 허브 컨트롤 사용

WinJS.Navigation Namespace

WinJS.UI.Hub object

WinJS.UI.AppBar object

WinJS.UI.NavBar object

WinJS.UI.BackButton object

HTML 허브 컨트롤 샘플

HTML AppBar 컨트롤 샘플

HTML NavBar 컨트롤 샘플

탐색 및 탐색 기록 샘플

디자이너용

탐색 패턴

명령 패턴

레이아웃

뒤로 단추

허브 컨트롤에 대한 지침

앱 바에 대한 지침(Windows 스토어 앱)

앱 바에 접근성 구현