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

아티클
12/11/2015

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

JavaScript를 사용하는 Windows 스토어 앱에 Hub 컨트롤을 추가하는 방법에 대해 알아봅니다.

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

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

사전 요구 사항

지침

1. 빈 앱 템플릿을 사용하여 새 프로젝트 만들기

Microsoft Visual Studio Express 2013 for Windows를 시작합니다.
시작 페이지 탭에서 새 프로젝트를 클릭합니다. 새 프로젝트 대화 상자가 열립니다.
설치됨 창에서 템플릿 및 JavaScript를 확장하고 Windows 스토어 앱 템플릿 종류를 클릭합니다. JavaScript에 사용할 수 있는 프로젝트 템플릿이 대화 상자의 가운데 창에 표시됩니다.
가운데 창에서 빈 앱 프로젝트 템플릿을 선택합니다.
이름 텍스트 상자에 허브 데모를 입력합니다.
확인을 클릭하여 프로젝트를 만듭니다.

2. 프로젝트에 허브 정의 추가

Hub 컨트롤은 HTML 페이지에서 선언적으로 정의하거나 페이지와 함께 로드된 JavaScript를 사용하여 런타임에 정의합니다. 이 예제에서는 HTML 태그에서 선언적으로 허브를 만듭니다.

default.html을 열고 body 요소 내에서 다음 HTML을 삽입합니다. 허브는 body 요소의 직속 자식이어야 합니다. 사용자가 앱 크기를 조정할 때 최상의 레이아웃이 표시되도록 DOM(문서 개체 모델)에서 상황에 맞는 명령 앞에 전역 명령을 배치하는 것이 좋습니다.

이 예제에서는 HubSection 개체 3개를 사용하여 선언적으로 허브를 추가합니다. 두 번째 HubSection은 Hub의 첫 번째 표시 섹션입니다. 기본 스타일을 사용하거나 Hub 및 HubSection 컨트롤에 대한 CSS 스타일시트를 직접 작성합니다.


<div data-win-control="WinJS.UI.Hub" id="hub"
    data-win-options="{
        sectionOnScreen : '1',
    }">
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Ancient Greek authors',
            isHeaderStatic: true
        }">
        My favorite authors of Ancient Greek (Homeric, Attic, Ionic):
        <ul>
            <li>Homer</li>
            <li>Herodotus</li>
            <li>Thucydides</li>
            <li>Plato</li>
        </ul>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Latin authors'
        }">
        <div>
            My favorite authors of works in Classical Latin:
            <ul>
                <li>Marcus Tullius Cicero</li>
                <li>Caius Julius Caesar</li>
                <li>Publius Virgilius Maro (Virgil)</li>
                <li>Titus Livius Patavinus (Livy)</li>
            </ul>
        </div>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'English authors',
            isHeaderStatic: false
        }">
        My favorite authors of works in Middle and Early Modern English: 
        <ul>
            <li>Geoffrey Chaucer</li>
            <li>William Shakespeare</li>
            <li>Christopher Marlowe</li>
        </ul>
    </div>
</div>

3. 코드를 추가하여 허브 이벤트 처리

이 예제에서 HubSection 개체 중 2개에는 동적 헤더가 있습니다. 이 헤더를 클릭하면 기본적으로 Hub.onheaderinvoked 이벤트가 발생합니다. 동적 또는 정적 헤더를 설정하려면 HubSection.isHeaderStatic 속성을 사용합니다. 이 속성을 기본적으로 false로 설정되어 있습니다.

Hub.onheaderinvoked 이벤트 처리기에서 HubSection 개체 또는 호출된 HubSection 개체의 인덱스는 이벤트 인수에서 추출할 수 있습니다. 인덱스는 0부터 시작합니다.

다음 예제에서는 Hub.onheaderinvoked 이벤트에 처리기를 추가합니다. 처리기는 호출된 HubSection의 인덱스를 가져오고 Hub.sectionOnScreen 값을 설정합니다.

솔루션 탐색기의 js 폴더에서 default.js를 엽니다.

default.js 파일에서 기존 코드를 다음 코드로 바꿉니다.


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var hub;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // Add your initialization code here.
            } else {
                // Restore app state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }

        // Get the hub control from the HTML page and
        // add a handler to the headerInvoked event.
        hub = WinJS.Utilities.query("#hub")[0];
        hub.winControl.onheaderinvoked = onHeaderInvoked;
    };

    app.oncheckpoint = function (args) {
        // Add app suspension code here.
    };

    // When a HubSection header is clicked, call this code to
    // make the section completely visible within the hub.
    function onHeaderInvoked(args) {
        hub.winControl.sectionOnScreen = args.detail.index;
    }

    app.start();
})();

런타임 환경을 시뮬레이터로 설정하고 F5 키를 눌러 앱을 실행합니다.
시뮬레이터 창의 해상도를 변경하면 허브 페이지가 왼쪽으로 이동할 때 마지막 허브 섹션이 부분적으로 화면 밖에 표시됩니다.
허브에서 부분적으로 표시된 마지막 섹션의 헤더를 클릭하여 허브 섹션이 완전히 표시되도록 허브 페이지를 이동합니다.

4. 허브 앱 내에서 탐색

허브 앱은 계층적 탐색 패턴을 따릅니다. Windows 스토어 앱의 탐색 사용자 환경에 대한 추가 정보는 탐색 패턴을 참조하세요.

사용자가 탐색할 수 있는 큰 콘텐츠 컬렉션이나 여러 가지 콘텐츠 섹션을 포함하는 앱에서 사용자가 앞으로 탐색한 것과 동일한 방식으로 신속하게 뒤로 탐색할 수 있는 방법을 제공하려고 합니다. 허브 앱의 페이지 및 섹션 제목은 BackButton 컨트롤을 호스트할 수 있습니다. 각 페이지는 다른 페이지에서 해당 페이지로 이동할 때까지 숨겨져 있는 뒤로 단추를 호스트하여 뒤로 단추를 페이지에 표시할 수 있습니다. BackButton 컨트롤은 페이지의 HTML에서 선언적으로 만들거나 JavaScript를 사용하여 런타임에 만들 수 있습니다.

BackButton 컨트롤에서는 많은 작업을 수행할 필요가 없습니다. 실제로 뒤로 단추의 탐색 기능과 관련된 대부분의 코드는 WinJS(JavaScript용 Windows 라이브러리) 플랫폼에 기본 제공됩니다. 다음과 같이 HTML 태그에서 컨트롤을 선언하면 됩니다.

<!DOCTYPE html>
<html>
<head>
    <title>home</title>
</head>
<body>
    <header role="banner">
        <button data-win-control="WinJS.UI.BackButton"></button>
        <h1 class="titlearea">Home</h1>
    </header>
</body>
</html>

스타일을 지정하지 않으면 BackButton 컨트롤은 페이지 제목 위에 있는 별도의 블록에 표시됩니다. 뒤로 단추가 제목과 함께 인라인에 표시되는 Windows 스타일을 얻으려면 몇 가지 사용자 지정 CSS를 프로젝트에 추가해야 합니다. 특히, 두 요소를 나란히 정렬하는 부모 요소(<section> 태그) 내에 그리드를 만들어야 합니다.

default.css(css 폴더에 있음)에서 다음 CSS 코드를 추가하여 페이지에서 BackButton 컨트롤 및 제목의 레이아웃을 조정합니다.

#contenthost {
    height: 100%;
    width: 100%;
}

header[role=banner] {
    display: -ms-grid;
    -ms-grid-columns: 37px 83px 1fr;
    -ms-grid-rows: 1fr;
}

    header[role=banner] button {
        -ms-grid-column: 2;
        margin-top: 57px;
    }

    header[role=banner] h1 {
        -ms-grid-column: 3;
        margin-top: 37px;
    }

요약

이 빠른 시작에서는 HubSection 개체가 세 개 있는 Hub 컨트롤을 추가했습니다. 또한 Hub.onheaderinvoked 이벤트에 단순 처리기 함수를 추가했습니다.

앱의 각 페이지에 BackButton 컨트롤도 추가했습니다.

다음을 통해 공유