빠른 시작: 탐색 모음(NavBar) 추가
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
JavaScript로 작성한 Windows 스토어 앱에 탐색 모음("탐색 모음" 또는 "맨 위 앱 바"라고도 함)을 추가하는 방법에 대해 알아봅니다. WinJS(JavaScript용 Windows 라이브러리)에는 단일 페이지 탐색 앱을 빌드하는 데 도움이 되는 NavBar, NavBarCommand, NavBarContainer 컨트롤이 포함되어 있습니다.
참고 NavBar, NavBarCommand, NavBarContainer는 Windows 8.1의 새로운 컨트롤입니다. Windows 8에서는 AppBar 컨트롤 및 placement 속성을 사용하여 탐색 모음을 제공합니다.
대부분의 Windows 스토어 앱용 Microsoft Visual Studio 2013 템플릿은 탐색 프레임워크를 구현하므로 별도로 구현할 필요가 없습니다. 페이지 컨트롤 항목 템플릿(페이지 컨트롤 추가 참조)을 비롯하여 이러한 템플릿에는 사용자에게 뒤로 탐색을 제공하는 데 사용할 수 있는 BackButton 컨트롤이 포함되어 있습니다.
참고 일반적으로 Windows 스토어 앱은 두 가지 탐색 패턴(플랫 및 계층적 탐색 패턴) 중 하나를 사용합니다. 플랫 탐색 앱에서는 BackButton 개체를 사용하지 않는 것이 좋습니다. 자세한 내용은 탐색 패턴을 참조하세요.
여기에서 설명하는 예제에서는 Microsoft Visual Studio 빈 앱 템플릿을 사용합니다. 기본 스타일과 태그를 사용하면 NavBar 컨트롤에 배치한 명령에 적절한 스타일이 지정됩니다. 여기에는 명령 아이콘에 대한 이미지 스프라이트와 글꼴 문자 모양이 모두 포함됩니다.
앱에 가장 적합한 탐색 패턴을 선택하는 방법을 보려면 탐색 패턴을 참조하세요.
또한 앱 기능 전체 프로세스 시리즈의 일부로 플랫 탐색 및 계층적 탐색 패턴의 작동 방법을 살펴볼 수 있습니다.
사전 요구 사항
지침
1. 빈 앱 템플릿을 사용하여 새 프로젝트 만들기
Visual Studio 2013을 시작합니다.
참고 Visual Studio를 처음 실행하면 개발자 라이선스를 다운로드하라는 메시지가 표시됩니다.
파일 > 새 프로젝트를 선택하거나 시작 페이지 탭에서 새 프로젝트를 클릭합니다. 새 프로젝트 대화 상자가 열립니다.
설치됨 창에서 템플릿 및 JavaScript를 확장하고 Windows 스토어 앱 템플릿 유형을 선택합니다. JavaScript에 사용할 수 있는 프로젝트 템플릿이 대화 상자의 가운데 창에 표시됩니다.
가운데 창에서 빈 앱 프로젝트 템플릿을 선택합니다.
이름 입력란에 프로젝트의 이름을 입력합니다. 이 항목의 예에서는 Nav bar demo를 사용합니다.
확인을 클릭하여 프로젝트를 만듭니다.
2. 프로젝트에 탐색 모음 정의 추가
탐색 모음은 HTML 페이지에서 선언적으로 정의하거나 페이지와 함께 로드된 JavaScript 파일에서 런타임에 정의할 수 있습니다. 이 예제에서는 HTML 태그에서 선언적으로 탐색 모음을 만듭니다.
default.html을 열고 body 요소 내에서 다음 HTML을 삽입합니다. 탐색 모음은 body 요소의 직계 자식이어야 합니다.
여기서는 두 개의 NavBarCommand 컨트롤과 함께 NavBarContainer를 포함하는 NavBar 컨트롤을 선언합니다.
참고 유효하지만 NavBarCommand 컨트롤을 NavBar의 직계 자식 요소로 추가하지 않는 것이 좋습니다. 단추 레이아웃과 키보드 접근성이 모두 손상됩니다.
<div id="navBar" data-win-control="WinJS.UI.NavBar">
<div id="globalNav" data-win-control="WinJS.UI.NavBarContainer">
<div data-win-control="WinJS.UI.NavBarCommand"
data-win-options="{
label: 'Home',
tooltip: 'Take me home',
id:'homeButton',
icon: WinJS.UI.AppBarIcon.home,
location: '/pages/home/home.html',
}">
</div>
<div data-win-control="WinJS.UI.NavBarCommand"
data-win-options="{
label: 'Page 2',
tooltip: 'Take me to Page 2',
id:'page2Button',
icon: WinJS.UI.AppBarIcon.page,
location: '/pages/page2/page2.html',
}">
</div>
</div>
</div>
3. 탐색 처리기 코드 추가
태그에 선언된 NavBarCommand 개체는 기본적으로 탐색 이벤트(Navigation.onnavigating 및 Navigation.onnavigated)를 발생시키므로 NavBarCommand 개체에 처리기 코드를 추가할 필요가 없습니다. 대신에 default.html 파일과 연결된 default.js 파일의 Navigation.onnavigating 또는 Navigation.onnavigated 이벤트에 처리기 코드를 추가해야 합니다.
이 예제에서는 Navigation.onnavigated 이벤트에 처리기를 추가합니다. 이 처리기는 이벤트 개체(NavBarCommanddata-win-options 특성의 location 속성에 정의되어 있음)에서 탐색할 위치의 URL을 가져옵니다. 그런 다음 처리기는 기존 콘텐츠의 콘텐츠 호스트(페이지 컨트롤)을 비우고 호스트에서 새 페이지를 렌더링합니다.
솔루션 탐색기의 js 폴더에서 default.js를 엽니다.
default.js에서 기본 코드를 다음 코드로 바꿉니다.
(function () { "use strict"; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; var nav = WinJS.Navigation; 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. } var start = WinJS.UI.processAll(). then (function () { return nav.navigate("/pages/home/home.html"); }); args.setPromise(start); } }; app.oncheckpoint = function (args) { // Add app suspension code here. }; nav.onnavigated = function (evt) { var contentHost = document.body.querySelector("#contenthost"), url = evt.detail.location; // Remove existing content from the host element. WinJS.Utilities.empty(contentHost); // Display the new page in the content host. WinJS.UI.Pages.render(url, contentHost); } app.start(); })();
4. 탐색할 두 페이지 추가
이러한 페이지는 수동으로 추가하거나 필요한 모든 태그 및 JavaScript 코드를 제공하는 Visual Studio 페이지 컨트롤 항목 템플릿을 통해 추가할 수 있습니다.
.gif "Dn376409.wedge(ko-kr,WIN.10).gif")
수동으로 프로젝트에 새 페이지 추가
솔루션 탐색기에서 프로젝트 이름(Nav bar demo)을 마우스 오른쪽 단추로 클릭하고 추가, 새 폴더를 차례로 선택합니다. 새 폴더의 이름을 "pages"로 지정합니다.
방금 만든 pages 폴더를 마우스 오른쪽 단추로 클릭하고 추가, 새 폴더를 선택합니다. 새 폴더의 이름을 "home"으로 지정합니다.
pages 아래에 두 번째 폴더를 만듭니다. 이 폴더의 이름을 "page2"로 지정합니다.
home 폴더를 마우스 오른쪽 단추로 클릭하고 추가, 새 HTML 파일을 선택합니다. 새 항목 추가 대화 상자에서 이 파일의 이름을 "home.html"로 지정하고 추가를 선택합니다.
기본 HTML을 다음 코드로 바꿉니다.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>Home</p> </body> </html>page2 폴더에 대해 이전 단계를 반복합니다. 파일의 이름을 "page2.html"로 지정합니다.
기본 HTML을 다음 코드로 바꿉니다.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>Page2</p> </body> </html>
또는 Visual Studio에서 Windows 스토어 앱용 JavaScript 항목 템플릿을 사용할 수 있습니다.
페이지 컨트롤 항목 템플릿을 사용하여 프로젝트에 새 페이지 추가
앞에서 설명한 대로 home 및 page2 하위 폴더가 있는 pages 폴더를 만듭니다.
home 폴더를 마우스 오른쪽 단추로 클릭하고 **추가 > 새 항목...**을 선택합니다. 새 항목 추가 대화 상자가 나타납니다.
목록에서 페이지 컨트롤을 선택합니다. 이름 입력란에 "home.html"을 입력합니다.
.png "페이지 컨트롤 항목 템플릿 대화 상자")
추가를 클릭합니다. 그러면 새 PageControl 개체가 솔루션 탐색기에 나타납니다.
새 PageControl에는 home.css, home.html, home.js 파일이 포함되어 있습니다.
참고 이런 방식으로 추가된 HTML 파일에는 BackButton 컨트롤에 대한 코드가 포함되어 있습니다. 앞에서 설명한 대로 플랫 탐색 패턴을 사용하는 경우 BackButton을 사용하지 않는 것이 좋습니다. 따라서 이 코드를 안전하게 삭제할 수 있습니다. 자세한 내용은 탐색 패턴을 참조하세요.
page2 폴더를 마우스 오른쪽 단추로 클릭하고 **추가 > 새 항목...**을 선택합니다. 새 항목 추가 대화 상자가 나타납니다.
목록에서 페이지 컨트롤을 선택합니다. 이름 입력란에 "page2.html"을 입력합니다.
추가를 클릭합니다. 그러면 새 PageControl 개체가 솔루션 탐색기에 나타납니다.
새 PageControl에는 page2.css, page2.html, page2.js 등, 세 개의 파일이 있습니다.
5. 앱 테스트
F5 키를 눌러 앱을 실행합니다. 앱에 홈페이지가 표시됩니다.
앱이 실행되는 동안 앱에서 아무 곳이나 마우스 오른쪽 단추로 클릭하여 탐색 모음을 표시한 다음 Page2를 선택합니다.
Page2 페이지가 앱의 페이지 컨트롤에 나타납니다.
다시 마우스 오른쪽 단추를 클릭하여 탐색 모음을 표시한 다음 홈을 선택합니다.
홈페이지가 앱의 페이지 컨트롤에 나타납니다.
요약 및 다음 단계
이 빠른 시작에서는 NavBarContainer 개체 한 개와 NavBarCommand 개체 네 개가 있는 NavBar 개체를 앱에 추가했습니다. 또한 Navigation.onnavigated 이벤트에 대한 간단한 처리기 함수를 추가했습니다.
더 복잡한 계층적 탐색 및 레이아웃 예제는 Hub 컨트롤에 대한 다음 자습서를 참조하세요.
관련 항목
첫 번째 앱 - 3부: PageControl 개체 및 탐색
디자이너용