언어: HTML | XAML

빠른 시작: 명령을 포함한 앱 바 추가(JavaScript 및 HTML로 작성한 Windows 런타임 앱)

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를 확장하고 스토어 앱 템플릿 종류를 클릭합니다. JavaScript에 사용할 수 있는 프로젝트 템플릿이 대화 상자의 가운데 창에 표시됩니다.

  4. 가운데 창에서 대상으로 지정할 플랫폼에 대한 빈 앱 프로젝트 템플릿을 선택합니다(Windows, Windows Phone 또는 둘 다).

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

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

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

앱 바는 해당 JavaScript 파일과 함께 HTML 파일에 정의됩니다.

default.html을 열고 자동으로 생성된 HTML을 다음 HTML로 바꿉니다. 앱 바는 <body> 요소의 직속 자식이어야 합니다. 앱을 끌 때 최선의 레이아웃이 표시되도록 DOM에서 상황에 맞는 명령 앞에 전역 명령을 배치하는 것이 좋습니다.

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

default.html Windows


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App bar demo</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 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/appbar.js"></script>
</head>
<body>
    <!-- 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'}" />
        <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>



default.html Windows Phone


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App bar demo</title>

    <!-- WinJS references -->
    <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 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/appbar.js"></script>
</head>
<body>
    <!-- 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'}" />
        <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";
    var page = WinJS.UI.Pages.define("default.html", {
        ready: function (element, options) {
            document.getElementById("cmdAdd")
                .addEventListener("click", doClickAdd, false);
            document.getElementById("cmdRemove")
                .addEventListener("click", doClickRemove, false);
            document.getElementById("cmdDelete")
                .addEventListener("click", doClickDelete, false);
            document.getElementById("cmdCamera")
                .addEventListener("click", doClickCamera, false);
            WinJS.log && WinJS.log("To show the bar, swipe up from " +
                "the bottom of the screen, right-click, or " +
                "press Windows Logo + z. To dismiss the bar, " +
                "tap in the application, swipe, right-click, " +
                "or press Windows Logo + z again.", "sample", "status");
        },
    });

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

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

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

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

    WinJS.log = function (message) {
        var statusDiv = document.getElementById("statusMessage");
        if (statusDiv) {
            statusDiv.innerText = message;
        }
    };
})();


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

요약

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

관련 항목

WinJS.UI.AppBar
WinJS.UI.AppBarCommand
AppBarIcon

 

 

표시:
© 2014 Microsoft