언어: HTML | XAML

빠른 시작: 명령을 제공하는 앱 바 추가(HTML)

Applies to Windows and Windows Phone

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

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

사전 요구 사항

지침

Hh465309.wedge(ko-kr,WIN.10).gif빈 앱 템플릿을 사용하여 새 프로젝트 만들기

  1. Microsoft Visual Studio를 시작합니다.

  2. 시작 페이지 탭에서 새 프로젝트를 클릭합니다. 새 프로젝트 대화 상자가 열립니다.

  3. 설치됨 창에서 템플릿JavaScript를 확장한 후 스토어 앱 템플릿 종류를 클릭합니다. 대상으로 지정할 플랫폼(범용 앱, Windows 앱 또는 Windows Phone 앱)을 선택합니다. 이 빠른 시작에서는 범용 앱을 사용합니다.

  4. 가운데 창에서 빈 앱(범용 앱) 프로젝트 템플릿을 선택합니다(아직 확인은 클릭하지 않음).

  5. 이름 텍스트 상자에 앱 바 데모를 입력합니다.

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

2. 프로젝트에 앱 바 정의 추가

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

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

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

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 app bar, 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 app bar buttons: <strong>Camera</strong>,
      <strong>Add</strong>, <strong>Remove</strong>, or <strong>Delete</strong>
    </li>
    <li>
      To dismiss the app bar, 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 app bar -->
  <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:'global', tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove', section:'global', tooltip:'Remove item'}"></button>
    <hr data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{type:'separator',section:'global'}" /> <!-- SEPARATOR NOT AVAILABLE ON PHONE -->
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdDelete', label:'Delete', icon:'delete', section:'global', tooltip:'Delete item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'selection', tooltip:'Take a picture'}"></button>
  </div>
  <!-- ENDTEMPLATE -->
  <div id="statusMessage"></div>
</body>
</html>

Windows Phone - 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 app bar button, or swipe the ellipsis and tap the Camera app bar button.
  </p>
  <!-- BEGINTEMPLATE: Template code for an app bar -->
  <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:'global', tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove', section:'global', tooltip:'Remove item'}"></button>
    <!-- <hr data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{type:'separator',section:'global'}" /> SEPARATOR NOT AVAILABLE ON PHONE -->
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdDelete', label:'Delete', icon:'delete', section:'global', tooltip:'Delete item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'selection', tooltip:'Take a picture'}"></button>
  </div>
  <!-- ENDTEMPLATE -->
  <div id="statusMessage"></div>
</body>
</html>

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

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

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 파일에 주입됩니다.

참고  앱 바에서는 AppBarCommands만 사용할 수 있습니다. AppBarIcon 열거에서 사용할 수 있는 아이콘 목록을 참조하세요.

요약

이 빠른 시작에서는 앱에 앱 바를 추가했습니다.

관련 항목

WinJS.UI.AppBar
WinJS.UI.AppBarCommand
AppBarIcon

 

 

표시:
© 2015 Microsoft