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

  • 아티클

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

Windows Phone 8.1 앱에서 레이아웃과 탐색에 WinJS.UI.Pivot 컨트롤을 사용하는 방법을 배웁니다.

Pivot은 왼쪽이나 오른쪽으로 이동(회전목마처럼 연속적으로 래핑)하여 앱에서 콘텐츠 섹션을 빠르게 관리, 제공 및 탐색하는 방법을 제공합니다.— 큰 데이터 집합을 필터링하거나, 여러 데이터 집합을 보거나, 앱 보기를 전환하는 데 사용합니다.

피벗 구현 예제입니다.

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

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

사전 요구 사항

지침

1. 피벗 앱(Windows Phone) 템플릿을 사용하여 새 프로젝트 만들기

허브/피벗 앱(유니버설 앱) 템플릿을 사용하여 유니버설 Windows 앱을 만들 수도 있습니다. 이 예제에서는 피벗 앱(Windows Phone) 템플릿을 사용합니다.

Visual Studio의 피벗 앱 템플릿

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

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

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

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

  5. 가운데 창에서 피벗 앱(Windows Phone) 프로젝트 템플릿을 선택합니다.

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

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

2. 새 섹션(PivotItem) 추가

Pivot 내의 각 섹션은 PivotItem 컨트롤로 정의됩니다. 템플릿에는 필요한 경우 수정하거나 삭제할 수 있는 4개의 데모 섹션이 포함됩니다. 여기서는 5번째 섹션을 추가하는 방법을 보여 줍니다.

솔루션 탐색기에서 템플릿의 기본 파일 구조는 이와 같습니다.

참고   유니버설 Windows 앱과의 일관성을 유지하기 위해 템플릿은 파일 명명 규칙에 계층 구조 탐색 패턴의 허브-섹션-세부 정보/항목 모델을 사용합니다.

 

새 허브/피벗 앱 솔루션에 있는 파일입니다.

  1. Pivot 및 각 PivotItem은 pages\hub 폴더의 hub.html에 선언되어 있습니다.

    여기서 템플릿에는 정적(section1, section2, section4) 및 데이터 기반(section3) 콘텐츠가 둘 다 들어 있는 PivotItem 컨트롤(섹션) 4개와 함께 단일 Pivot 컨트롤(허브)이 포함됩니다.

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

  <link href="/css/phone.css" rel="stylesheet" />
  <link href="/pages/hub/hub.css" rel="stylesheet" />
  <link href="/pages/hub/hubphone.css" rel="stylesheet" />
  <script src="/js/data.js"></script>
  <script src="/pages/hub/hub.js"></script>
  <script src="/pages/hub/section1Page.js"></script>
  <script src="/pages/hub/section2Page.js"></script>
  <script src="/pages/hub/section3Page.js"></script>
  <script src="/pages/hub/section4Page.js"></script>
</head>
<body>
  <div class="hubpage fragment">
    <header aria-label="Header content" role="banner">
      <button class="titlearea backbutton" 
        data-win-control="WinJS.UI.BackButton">
      </button>
      <h1 class="titlearea win-type-ellipsis">
        <span class="pagetitle">PivotDemo</span>
      </h1>
    </header>

    <section aria-label="Main content" role="main">
      <!-- Customize the Hub control by modifying the 
           HubSection controls here. -->

      <div class="hub" data-win-control="WinJS.UI.Pivot">

        <div class="section1 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-options="{ isHeaderStatic: true }" 
          data-win-res="{ winControl: {'header': 'Section1'} }">
          <div class="sectioncontrol" 
            id="section1contenthost" 
            data-win-control="HubApps_SectionControls.Section1Control">
          </div>
        </div>

        <div class="section2 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-options="{ isHeaderStatic: true }" 
          data-win-res="{ winControl: {'header': 'Section2'} }">
          <div class="added pivot-item-viewport" >
            <div class="added pivot-item-surface" >
              <div class="sectioncontrol" 
                id="section2contenthost" 
                data-win-control="HubApps_SectionControls.Section2Control">
              </div>
            </div> 
          </div> 
        </div>

        <div class="section3 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-res="{ winControl: {'header': 'Section3'} }">
          <div class="section3contenthost sectioncontrol" 
            id="section3contenthost" 
            data-win-control="HubApps_SectionControls.Section3Control"
            data-win-options="{
              dataSource: select('.pagecontrol').winControl.section3DataSource,
              layout: {type: WinJS.UI.ListLayout},
              oniteminvoked: select('.pagecontrol').winControl.section3ItemNavigate}">
          </div>
        </div>

        <div class="section4 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-options="{ isHeaderStatic: true }" 
          data-win-res="{ winControl: {'header': 'Section4'} }">
            <div class="sectioncontrol" 
              id="section4contenthost" 
              data-win-control="HubApps_SectionControls.Section4Control">
            </div>
        </div>
      </div>
    </section>
  </div>
</body>
</html>

    기존 섹션 중 하나를 복사한 후 붙여넣어 추가 페이지를 선언합니다. 필요에 따라 새 섹션 사양을 수정합니다.

    여기서는 section4를 기반으로 5번째 섹션을 선언합니다.

    <div class="section4 section" 
  data-win-control="WinJS.UI.PivotItem" 
  data-win-options="{ isHeaderStatic: true }" 
  data-win-res="{ winControl: {'header': 'Section4'} }">
  <div class="sectioncontrol" 
    id="section4contenthost" 
    data-win-control="HubApps_SectionControls.Section4Control">
  </div>
</div>

<div class="section5 section" 
  data-win-control="WinJS.UI.PivotItem" 
  data-win-options="{ isHeaderStatic: true }" 
  data-win-res="{ winControl: {'header': 'Section5'} }">
     <div class="sectioncontrol" 
    id="section5contenthost" 
    data-win-control="HubApps_SectionControls.Section5Control">
  </div>
</div>

  2. hub.html에서 선언된 각 PivotItem의 레이아웃과 기능이 해당하는 HTML, JavaScript 및 가능할 경우 CSS(CSS 스타일시트) 및 리소스 파일에 정의되어 있어야 합니다.

    이 예에서는 section5Page.html 및 section5Page.js를 pages/hub 폴더에 추가합니다.

    • section5Page.html은 —섹션 콘텐츠를 지정합니다.

      이 예에서는 텍스트 링크를 항목 페이지에 표시합니다.

      <!DOCTYPE html>
<html>
<head>
   <title></title>
   <link href="/pages/hub/hub.css" rel="stylesheet" />
   <script src="/pages/hub/section5Page.js"></script>
</head>
<body>
   <div class="fragment section1page">
      <section aria-label="Main content" role="main">
        <a href="/pages/item/section5Item1.html">Link</a>
      </section>
   </div>
</body>
</html>

    • 각 섹션의 헤더 문자열은 strings/en-US 폴더의 resources.resjson에 정의되어 있습니다.

      여기서는 섹션 5에 다른 이름 값 쌍을 추가합니다.

          "Section5": "Section 5",
    "Section5Description": "",

    • section5Page.js는 —섹션과 관련된 동작을 지정합니다.

      이 예에서는 페이지에 대한 기본 ready 함수를 호출하고 section5Page를 허브에 표시할 사용자 지정 컨트롤로 노출합니다. 항목 페이지로 이동을 시작하는 텍스트 링크에 대한 클릭 처리기도 포함합니다.

      (function () {
   "use strict";

   var ControlConstructor = 
     WinJS.UI.Pages.define("/pages/hub/section5Page.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 || {};

         // Retrieve the page 2 link and register the event handler. 
         // Don't use a button when the action is to go to another 
         // page; use a link instead. 
         // See Guidelines and checklist for buttons at 
         // https://go.microsoft.com/fwlink/p/?LinkID=313598
         // and Quickstart: Using single-page navigation at 
         // https://go.microsoft.com/fwlink/p/?LinkID=320288.
         WinJS.Utilities.query("a").listen(
           "click", linkClickHandler, false);
      },
   });

   // 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("HubApps_SectionControls", {
      Section5Control: ControlConstructor
   });

   function linkClickHandler(eventInfo) {
      var link = eventInfo.target;
      eventInfo.preventDefault();
      if (link.href.indexOf("ms-appx") > -1) {
        WinJS.Navigation.navigate(link.href);
      }
      else if (link.href.indexOf("http") > -1) {
        // Create a Uri object from a URI string 
        var uri = new Windows.Foundation.Uri(link.href);
        var options = new Windows.System.LauncherOptions();
        // Launch the URI with a warning prompt
        options.treatAsUntrusted = true;
        // Launch the URI
        Windows.System.Launcher.launchUriAsync(uri, options).then(
           function (success) {
              if (success) {
                // URI launched
              } else {
                // URI launch failed
              }
           });
      }
   }
})();

    section5Page.js에 대한 참조도 pages/hub 폴더의 hub.html에 추가해야 합니다.

    <head>
   <meta charset="utf-8" />
   <title>hubPage</title>

   <link href="/css/phone.css" rel="stylesheet" />
   <link href="/pages/hub/hub.css" rel="stylesheet" />
   <link href="/pages/hub/hubphone.css" rel="stylesheet" />
   <script src="/js/data.js"></script>
   <script src="/pages/hub/hub.js"></script>
   <script src="/pages/hub/section1Page.js"></script>
   <script src="/pages/hub/section2Page.js"></script>
   <script src="/pages/hub/section3Page.js"></script>
   <script src="/pages/hub/section4Page.js"></script>
   <script src="/pages/hub/section5Page.js"></script>
</head>

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

    다음은 새 섹션이 있는 Phone 앱의 스크린샷입니다.

    새 섹션 5를 보여 주는 피벗 예입니다.

3. 허브/피벗 앱(유니버설 앱) 템플릿을 사용하여 유니버설 Windows 앱 만들기

허브/피벗 앱(유니버설 앱) 템플릿을 사용하여 Windows 및 Windows Phone용 유니버설 Windows 앱을 만듭니다.

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

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

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

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

  5. 가운데 창에서 허브/피벗 앱(범용 앱) 프로젝트 템플릿을 선택합니다.

  6. 이름 입력란에 프로젝트의 이름을 입력합니다.

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

  8. 새 허브/피벗 앱 솔루션에는 세 가지 프로젝트가 포함됩니다. 프로젝트는 각각 Windows 관련 파일, Phone 관련 파일, 공유되는 코드에 해당합니다. 테스트에 필요한 경우 시작 프로젝트를 Windows 또는 WindowsPhone 프로젝트로 설정합니다.

4. 유니버설 Windows 앱에 대한 새 섹션 추가

피벗 앱(Windows Phone) 템플릿처럼 허브/피벗 앱 템플릿에도 필요에 따라 수정하거나 삭제할 수 있는 네 개의 데모 섹션이 있습니다.

솔루션 탐색기에서 템플릿의 기본 파일 구조는 이와 같습니다.

새 허브/피벗 앱 솔루션에 있는 파일입니다.

해당하는 각 HTML, JavaScript, CSS 및 리소스 파일은 Windows 및 Phone 프로젝트에서 모두 범용으로 사용되거나 특정 플랫폼에 고유할 수 있습니다(템플릿 데모에서 다양한 프로젝트 참조).

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

참고: WindowsPhone 프로젝트를 시작 프로젝트로 설정합니다.

다음은 새 섹션이 있는 Phone 앱의 스크린샷입니다.

새 섹션 5를 보여 주는 피벗 예입니다.

다음은 Windows 앱의 새 섹션에 대한 스크린샷입니다.

새 섹션 5를 보여 주는 범용 피벗 예입니다.

요약

이 빠른 시작에서는 Visual Studio 2013 Update 2에 포함된 피벗 앱(Windows Phone) 템플릿 및 허브/피벗 앱(범용 앱) 범용 템플릿에 대해 검토했습니다. 또한 섹션 콘텐츠에 포함된 텍스트 링크에 PivotItem 컨트롤이 있는 새 섹션과 click 이벤트에 대한 간단한 처리기 함수를 추가했습니다.

관련 항목

개발자용

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

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

WinJS.Navigation Namespace

WinJS.UI.Pivot

WinJS.UI.PivotItem

HTML Pivot 컨트롤 샘플

탐색 및 탐색 기록 샘플

디자이너용

피벗에 대한 지침

탐색 패턴

명령 패턴

레이아웃