명령이 포함된 AppBar 추가(HTML)

아티클
03/04/2016

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

이 문서에서는 JavaScript로 작성한 Windows 런타임 앱에 AppBar를 추가하는 방법을 설명합니다. 다음 예제에 표시된 기본 스타일과 태그를 사용하면 AppBar에 배치한 명령에 적절한 스타일이 지정됩니다. 명령 아이콘에는 이미지 스프라이트(image sprite)와 글꼴 문자 모양(font glyph)이 지원됩니다.

(Windows만 해당) 앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요. : Windows 스토어 앱 UI 전체 프로세스

사전 요구 사항

지침

1. 비어 있는 앱 템플릿을 사용하여 새 프로젝트 만들기

Microsoft Visual Studio를 시작합니다.
시작 페이지 탭에서 새 프로젝트를 클릭합니다. 새 프로젝트 대화 상자가 열립니다.
설치됨 창에서 템플릿 및 JavaScript를 확장한 후 스토어 앱 템플릿 종류를 클릭합니다. 대상으로 지정할 플랫폼(범용 앱, Windows 앱 또는 Windows Phone 앱)을 선택합니다. 이 빠른 시작에서는 범용 앱을 사용합니다.
가운데 창에서 비어 있는 앱(유니버설 앱) 프로젝트 템플릿을 선택합니다(아직 확인은 클릭하지 않음).
이름 입력란에 AppBar 데모를 입력합니다.
확인을 클릭하여 프로젝트를 만듭니다.

2. 프로젝트에 AppBar 정의 추가

AppBar는 해당 JavaScript 파일(Windows 및 Windows Phone용 파일)을 사용해서 HTML 파일로 정의됩니다.

아래 표시된 것처럼 각 플랫폼(즉, Windows 및 Windows Phone)에 대해 default.html을 열고 자동 생성된 HTML을 다음 HTML로 바꿉니다. 응용 프로그램별로 하나의 전역 AppBar를 만드는 것이 좋습니다. 이 AppBar는 <body> 요소의 직계 자식이어야 합니다. 또한, 앱을 끌 때 최상의 레이아웃이 표시되도록 DOM에서 상황에 맞는 명령 앞에 전역 명령을 배치하는 것이 좋습니다.

다음 예제에서는 왼쪽 맞춤 명령 하나와 오른쪽 맞춤 명령 세 개가 구분 기호로 나뉜 AppBar를 추가합니다.

Windows - default.html

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

  <!-- App_bar_demo.Windows references -->
  <link href="/css/default.css" rel="stylesheet" />
  <script src="/js/default.js"></script>
  <script src="/js/appbar.js"></script> <!-- Not part of the stock template. -->
</head>
<body>
  <ol>
    <li>
      To show the AppBar, swipe up from the bottom of the screen, swipe down from
      the top of the screen, right-click, or press Windows&nbsp;Logo&nbsp;+&nbsp;Z.
    </li>
    <li>
      Click or tap one of the following AppBar buttons: <strong>Camera</strong>,
      <strong>Add</strong>, <strong>Remove</strong>, or <strong>Delete</strong>
    </li>
    <li>
      To dismiss the AppBar, click or tap in the application, swipe, right-click,
      or press Windows&nbsp;Logo&nbsp;+&nbsp;Z again.
    </li>
  </ol>
  <!-- BEGINTEMPLATE: Template code for an AppBar -->
  <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdAdd', label:'Add', icon:'add', section:'primary', tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove', section:'primary', tooltip:'Remove item'}"></button>
    <hr data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{type:'separator',section:'primary'}" /> <!-- SEPARATOR NOT AVAILABLE ON PHONE prior to WinJS 4.0 -->
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdDelete', label:'Delete', icon:'delete', section:'primary', tooltip:'Delete item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'secondary', tooltip:'Take a picture'}"></button>
  </div>
  <!-- ENDTEMPLATE -->
  <div id="statusMessage"></div>
</body>
</html>

주의 다음 샘플 코드 블록은 Windows Phone 버전 2.1까지에만 유효합니다. WinJS 4.0 이상을 사용하는 경우 Windows 및 Windows Phone 앱의 AppBar에 동일한 HTML 코드를 사용하는 것이 올바른 방법입니다.

Windows Phone 2.1에만 해당 - default.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>App_bar_demo.WindowsPhone</title>

  <!-- WinJS references -->
  <!-- At runtime, ui-themed.css resolves to ui-themed.light.css or ui-themed.dark.css
  based on the user’s theme setting. This is part of the MRT resource loading functionality. -->
  <link href="/css/ui-themed.css" rel="stylesheet" />
  <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
  <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

  <!-- App_bar_demo.Phone references -->
  <link href="/css/default.css" rel="stylesheet" />
  <script src="/js/default.js"></script>
  <script src="/js/appbar.js"></script> <!-- Not part of the stock template. -->
</head>
<body class="phone">
  <p>
    Tap the Add, Remove, or Delete AppBar button, or swipe the ellipsis and tap the Camera AppBar button.
  </p>
  <!-- BEGINTEMPLATE: Template code for an AppBar -->
  <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdAdd', label:'Add', icon:'add', section:'primary', tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove', section:'primary', tooltip:'Remove item'}"></button>
    <!-- <hr data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{type:'separator',section:'primary'}" /> SEPARATOR NOT AVAILABLE ON PHONE -->
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdDelete', label:'Delete', icon:'delete', section:'primary', tooltip:'Delete item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'secondary', tooltip:'Take a picture'}"></button>
  </div>
  <!-- ENDTEMPLATE -->
  <div id="statusMessage"></div>
</body>
</html>

Hh465309.wedge(ko-kr,WIN.10).gif Appbar.js 파일 추가

솔루션 탐색기에서 js 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 가리킨 다음 새 항목을 클릭합니다.
설치됨 창에서 JavaScript를 확장하고 대화 상자의 가운데 창에서 JavaScript 파일 을 클릭합니다.
이름 텍스트 상자(대화 상자 아래쪽)에 Appbar.js를 입력합니다.
추가를 클릭하여 파일을 만들고 해당 파일을 프로젝트에 추가합니다.

Appbar.js(필요한 경우)를 열고 다음 코드를 추가합니다.

(function () {
  "use strict";

  WinJS.UI.Pages.define("default.html", {
    ready: function (element, options) {
      // Use element.querySelector() instead of document.getElementById() to ensure that the correct default.html page is targeted:
      element.querySelector("#cmdAdd").addEventListener("click", doClickAdd, false);
      element.querySelector("#cmdRemove").addEventListener("click", doClickRemove, false);
      element.querySelector("#cmdDelete").addEventListener("click", doClickDelete, false);
      element.querySelector("#cmdCamera").addEventListener("click", doClickCamera, false);
    }
  });

  // Command button functions
  function doClickAdd() {
    WinJS.log && WinJS.log("Add button pressed", "status");
  }

  function doClickRemove() {
    WinJS.log && WinJS.log("Remove button pressed", "status");
  }

  function doClickDelete() {
    WinJS.log && WinJS.log("Delete button pressed", "status");
  }

  function doClickCamera() {
    WinJS.log && WinJS.log("Camera button pressed", "status");
  }

  WinJS.log = function (message, messageType) {
    var statusDiv = document.getElementById("statusMessage"); // For a multi-page app, always ensure that each element ID is unique (across all pages).

    if (statusDiv && messageType === "status") {
      statusDiv.innerText = "STATUS: " + message;
    }
  };
})();

Appbar.js 파일이 해당 <script src="/js/appbar.js"></script> 마크업을 통해 2개의 default.html 파일에 주입됩니다.

3. 개발자 참고 사항

AppBar에서는 AppBarCommands만 사용할 수 있습니다. AppBarIcon 열거에서 사용할 수 있는 아이콘 목록을 참조하세요.
AppBar는 빠른 해제가 가능한 오버레이입니다. 즉, 화면의 일부를 항상 차지하고 있습니다.
다른 모든 빠른 해제가 가능한 오버레이와 마찬가지로 AppBar는 항상 <body> 요소의 직계 자식이어야 합니다.
다른 화면 콘텐츠를 가리는 AppBar 오버레이의 특성을 완화하려면 화면 위 또는 아래에 닫힌 AppBar의 공간을 예약합니다. 그러면 열린 AppBar만 다른 콘텐츠를 가립니다.
닫힌 AppBar의 높이는 closedDisplayMode 속성으로 제어할 수 있습니다.
AppBar의 맨 위 또는 맨 아래 위치는 placement 속성으로 제어할 수 있습니다.

요약

이 빠른 시작에서는 응용 프로그램에 AppBar를 추가했습니다.

Share via

명령이 포함된 AppBar 추가(HTML)

사전 요구 사항

지침

1. 비어 있는 앱 템플릿을 사용하여 새 프로젝트 만들기

2. 프로젝트에 AppBar 정의 추가

3. 개발자 참고 사항

요약

관련 항목

추가 리소스