Windows 런타임 앱용 JavaScript 프로젝트 템플릿

Applies to Windows and Windows Phone

이 항목에서는 탐색 모델, 데이터 모델에 대한 구현 세부사항과 기타 세부사항을 포함하여, Windows Phone 스토어 앱과 Windows 스토어 앱의 JavaScript 프로젝트 템플릿에 대한 자세한 정보를 제공합니다.

XAML용 프로젝트 템플릿에 대해 알아보려면 Windows 스토어 앱용 C#, VB 및 C++ 프로젝트 템플릿을 참조하세요. Blend용 프로젝트 템플릿에 대한 자세한 내용은 새 프로젝트 만들기를 참조하세요.

중요  이 항목의 정보는 Windows Phone 8, Windows 8.1 Update 및 Microsoft Visual Studio 2013 업데이트 2에 대해 업데이트되었습니다. 기존 Windows 스토어 앱에 Windows Phone 지원을 추가하는 데 대한 정보는 이 항목의 범용 Windows 앱 템플릿Windows 런타임 앱을 Windows Phone에 이식을 참조하세요.

로드맵: 이 항목은 다음 항목과 연관되어 있습니다. JavaScript 사용을 위한 로드맵을 참조하세요.

템플릿 살펴보기

HTML 및 JavaScript용 템플릿 가져오기

  • Windows 개발을 지원하는 Visual Studio 버전이 필요합니다. 도구 얻기를 참조하세요.
  • 범용 Windows 앱 템플릿을 가져오려면 Windows 8.1 Update와 Visual Studio 2013 업데이트 2가 필요합니다.

Visual Studio에서 파일, 새로 만들기, 프로젝트를 차례로 선택하여 "새 프로젝트" 대화 상자를 엽니다. 템플릿은 JavaScript 다음 스토어 앱에서 사용할 수 있습니다.

템플릿을 사용하여 새 프로젝트 만들기

범용 Windows 앱 템플릿

Visual Studio 2013 Update 2에는 공유 코드를 사용하여 Windows Phone 스토어 앱과 Windows 스토어 앱의 개발을 모두 지원하는 JavaScript 프로젝트 템플릿이 포함되어 있습니다. 범용 Windows 앱은 범용 앱 템플릿을 사용하여 공유 코드에서 빌드된 앱입니다(프로젝트를 빌드할 때 두 개의 개별 앱 패키지가 작성됨). 범용 앱 템플릿에 포함된 항목은 다음과 같습니다.

  • Windows Phone 스토어 앱 프로젝트(appName.Phone) 하나. 각 프로젝트에는 스토어에 업로드할 별도의 앱 패키지가 있습니다.
  • Windows 스토어 앱 프로젝트 하나(appName.Store).
  • 공유 코드를 저장할 appName.Shared 폴더. 기본적으로 프로젝트의 모든 JavaScript 파일이 공유됩니다. HTML 및 CSS 파일도 공유할 수 있습니다.

범용 앱 템플릿에 포함된 항목은 다음과 같습니다.

공유 코드에서 플랫폼 간의 동작 차이를 처리하려면 다음을 수행합니다.

  • 사용하기 전에 기능이 지원되는지 테스트합니다. 예를 들어, 플랫폼별 DOM 요소를 사용하기 전에 서로 다른 UI를 사용하여 이 요소가 있는지 확인할 수 있습니다.
  • 특정 시나리오에서 기능 테스트가 제대로 수행되지 않는 경우 WinJS.Utilities.isPhone 속성을 사용하여 현재 플랫폼을 식별합니다.
  • PivotSettingsFlyout과 같은 일부 UI 컨트롤은 플랫폼에 따라 다릅니다. 서로 다른 UI를 지원하려면 별도의 HTML 파일을 사용하고 개별 파일을 플랫폼별 프로젝트로 이동합니다.
  • JavaScript 파일이 공유 폴더에 열려 있는 경우 컨텍스트 전환기 드롭다운 목록에서 JavaScript용 Windows 라이브러리의 대상 버전을 신속하게 변경할 수 있습니다. 그러면 대상 버전의 라이브러리에 고유한 IntelliSense가 제공됩니다.

    공유 JavaScript 파일의 컨텍스트 전환기 드롭다운 목록

  Windows Phone 에뮬레이터에서 시뮬레이터로 전환 등 빌드 및 배포 대상을 변경하려면 프로젝트 중 하나의 상황에 맞는 메뉴에서 시작 프로젝트로 설정을 선택합니다.

Hh758331.wedge(ko-kr,WIN.10).gif기존 Windows 스토어 프로젝트에 Windows Phone 솔루션을 추가하려면

  1. Visual Studio의 솔루션 탐색기에서 Windows 스토어 프로젝트를 선택합니다.
  2. 바로 가기 메뉴에서 Windows Phone 8.1 추가를 선택합니다.

    Visual Studio가 Windows Phone 프로젝트 및 공유 코드 폴더를 솔루션에 추가합니다. 새 Windows Phone 프로젝트는 항상 빈 프로젝트 템플릿입니다.

      마찬가지로 Windows Phone 프로젝트를 시작하는 경우 솔루션에 Windows 스토어 프로젝트를 추가할 수 있습니다.

  3. Windows 스토어 앱이 빈 템플릿을 기반으로 하지 않는 경우 빈 템플릿이 Windows Phone 프로젝트에 올바른 시작점인지 또는 Windows Phone 프로젝트를 별도로 만들어 새 공유 프로젝트에 파일을 이식해야 하는지를 조사해야 합니다. Windows 스토어 앱의 허브 템플릿을 기반으로 하는 앱의 경우 Windows Phone의 피벗 템플릿으로 시작하는 것이 좋습니다. 앱이 그리드 또는 분할 템플릿을 기반으로 하는 경우 추가로 앱을 공유 프로젝트에 이식해야 합니다. 피벗 템플릿은 시작점으로 작동할 수도 있고 그렇지 않을 수도 있습니다.

    허브 템플릿에서 허브/피벗 범용 앱 템플릿으로 포트된 샘플 앱을 보려면 허브/피벗 템플릿을 사용하는 JSON 웹 뷰어를 참조하세요.

    Windows Phone에 앱을 이식하는 데 대한 자세한 정보는 Windows 런타임 앱을 Windows Phone에 이식을 참조하세요.

범용 Windows 앱용 허브/피벗 프로젝트 템플릿

허브/피벗 프로젝트 템플릿을 사용하면 콘텐츠를 가로 이동 보기로 표시하고 콘텐츠에 액세스하는 다양한 방법을 제공하는 Windows Phone 스토어 앱 및 Windows 스토어 앱용 공유 솔루션을 만들 수 있습니다. 허브/피벗 앱의 예로 쇼핑 앱, 뉴스 앱, 스포츠 앱 및 미디어 허브 앱이 있습니다.

기본적으로 허브/피벗 앱은 가로 레이아웃으로 여러 섹션을 표시합니다. 각 섹션은 새 항목, 선택된 항목 및 항목 범주 등의 콘텐츠 범주를 표시합니다. 사용자가 섹션 보기 중 하나에서 항목을 선택할 경우 전체 페이지 보기에 항목에 대한 세부 정보가 표시됩니다. 다음 그림은 Windows Phone 에뮬레이터의 섹션 4를 보여 줍니다.

허브 피벗 앱 템플릿

허브 탐색 패턴에 대한 UX 지침의 자세한 내용은 탐색 패턴을 참조하세요.

허브/피벗 템플릿용 프로젝트 파일

허브/피벗 앱 템플릿에는 다음 파일이 포함됩니다.

  • 모든 공통 파일(예: default.html 및 navigator.js)
  • hub.html - 앱의 개별 섹션 또는 페이지(프로젝트에 따라 HubSection 또는 PivotItem 컨트롤)에 대한 컨테이너 페이지입니다.
  • sectionNumberPage.html - 개별 피벗 페이지에 대한 태그가 포함되어 있습니다. 예를 들어 section1Page.html에는 첫 번째 피벗 페이지나 허브 섹션 페이지에 대한 태그가 포함되어 있습니다. 일부 페이지에서는 사용자가 항목을 선택하여 해당 항목에 대한 정보를 볼 수 있습니다.
  • 항목의 범주를 표시하고 Windows 스토어 앱마다 다른 section.html. 사용자는 항목을 선택하여 해당 항목의 전체 페이지 보기를 열 수 있습니다.
  • item.html - 항목의 전체 페이지 보기입니다.
  • 앱의 각 페이지에 해당하는 JavaScript 및 CSS 파일.
  • phone.css - 콘텐츠 호스트 페이지와 앱 전체의 CSS 스타일을 지정합니다.
  • hubPhone.css - 피벗 컨트롤과 피벗 페이지의 CSS 스타일을 지정합니다. 이러한 스타일은 hub.css에 설정된 스타일을 재정의합니다.
  • 앱의 각 페이지마다 다른 CSS 파일(예: hub.css).

허브/피벗 템플릿 작동 방식

허브/피벗 템플릿의 섹션은 콘텐츠 권장 사항이 아닌 콘텐츠 예를 제공합니다. 앱 콘텐츠 요구 사항에 맞게 섹션을 손쉽게 추가하고 제거할 수 있습니다.

Windows Phone 프로젝트에서 각 섹션은 Pivot 컨트롤의 개별 PivotItem입니다. Windows 프로젝트에서 각 섹션은 개별 HubSection 컨트롤입니다.

템플릿의 섹션에는 정적 콘텐츠가 포함되어 있으므로, 전역화된 리소스를 손쉽게 제공할 수 있습니다. 샘플 리소스 파일에서는 en-us 로캘에 대한 지역화된 문자열을 제공합니다.

허브/피벗 템플릿 구현에 대한 자세한 내용은 다음을 참조하세요.

앱 섹션에 동적 데이터를 추가하기 위해 허브/피벗 템플릿을 사용자 지정하는 방법을 보여 주는 예제는 허브/피벗 템플릿을 사용하는 JSON 웹 뷰어를 참조하세요. 데이터 모델 및 Windows 런타임 앱에 대해 데이터 모델을 사용자 지정하는 방법에 대한 자세한 내용은 데이터 추가에 대한 항목을 참조하세요.

  • Applies to Windows

Windows 스토어 앱용 허브 프로젝트 템플릿

허브 프로젝트 템플릿을 사용하면 콘텐츠를 가로 이동 보기로 표시하고 콘텐츠에 액세스하는 다양한 방법을 제공하는 Windows 스토어 앱을 만들 수 있습니다. 허브 앱의 예로 쇼핑 앱, 뉴스 앱, 스포츠 앱 및 미디어 허브 앱이 있습니다. 허브 템플은 허브/피벗 템플릿의 단일 플랫폼 버전입니다.

기본적으로 허브 앱은 가로 레이아웃으로 여러 섹션을 보여 주는 홈페이지를 표시합니다. 각 섹션은 새 항목, 선택된 항목 및 항목 범주 등의 콘텐츠를 표시합니다. 사용자가 대화형 섹션 제목(제목 다음에 ">"로 표시)을 탭할 경우 앱은 섹션과 연결된 항목이 나열된 섹션 페이지를 엽니다. 사용자가 홈페이지 또는 섹션 페이지에서 항목을 선택할 경우 전체 페이지 보기에 항목에 대한 세부 정보가 표시됩니다. 다음 그림은 최소 세 개의 섹션이 포함된 홈페이지를 보여 줍니다.

허브 앱 프로젝트 템플릿

허브 탐색 패턴에 대한 UX 지침의 자세한 내용은 탐색 패턴을 참조하세요.

허브 템플릿용 프로젝트 파일

허브 앱 템플릿에는 다음 파일이 포함됩니다.

  • 모든 공통 파일(예: default.html 및 navigator.js)
  • hub.html - 홈페이지에 섹션과 항목을 표시합니다. 사용자는 항목을 선택하여 해당 항목에 대한 정보를 열거나, 섹션 레이블을 선택하여 해당 섹션에 대한 정보를 열 수 있습니다.
  • item.html - 항목의 전체 페이지 보기입니다.
  • 항목의 범주를 표시하고 Windows 스토어 앱마다 다른 section.html. 사용자는 항목을 선택하여 해당 항목의 전체 페이지 보기를 열 수 있습니다.
  • 앱의 각 페이지에 해당하는 JavaScript 및 CSS 파일.

허브 템플릿 작동 방식

허브 템플릿의 섹션은 포함할 콘텐츠 유형에 대한 권장 사항이 아니라 콘텐츠 예를 제공하도록 고안되었습니다. 앱 콘텐츠 요구 사항에 맞게 섹션을 손쉽게 추가하고 제거할 수 있습니다.

템플릿의 섹션에는 정적 콘텐츠가 포함되어 있으므로, 전역화된 리소스를 손쉽게 제공할 수 있습니다. 샘플 리소스 파일에서는 en-us 로캘에 대한 지역화된 문자열을 제공합니다.

허브 템플릿 구현에 대한 자세한 내용은 다음을 참조하세요.

허브 섹션에 동적 데이터를 추가하기 위해 허브 템플릿을 사용자 지정하는 방법을 보여 주는 예제는 허브 템플릿을 사용하는 JSON 웹 뷰어를 참조하세요. 데이터 모델과 허브 템플릿에 대해 해당 모델을 사용자 지정하는 방법에 대한 자세한 내용은 데이터 추가에 대한 항목을 참조하세요.

  • Applies to Windows Phone

Windows Phone 스토어 앱용 피벗 프로젝트 템플릿

피벗 템플릿은 허브/피벗 템플릿의 단일 플랫폼 버전입니다.

피벗 앱 템플릿을 사용하면 여러 보기나 페이지를 빠르게 관리할 수 있습니다. 이 템플릿을 사용하여 큰 데이터 집합을 필터링하거나 여러 데이터 집합을 보기 또는 앱 보기를 전환할 수 있습니다. 피벗 템플릿은 각각 피벗 페이지를 나타내는 개별 PivotItem 컨트롤이 포함된 Pivot 컨트롤을 구현합니다. Pivot 컨트롤은 터치 조작 및 탐색을 기본적으로 지원합니다.

피벗 앱 템플릿

피벗 템플릿용 프로젝트 파일

피벗 앱 템플릿에는 다음 파일이 포함됩니다.

  • 모든 공통 파일(예: default.html 및 navigator.js)
  • hub.html - 개별 피벗 페이지(PivotItem 컨트롤)에 대한 컨테이너 페이지입니다.
  • sectionNumberPage.html - 개별 피벗 페이지에 대한 태그가 포함되어 있습니다. 예를 들어 section1Page.html에는 첫 번째 피벗 페이지에 대한 태그가 포함되어 있습니다. 일부 페이지에서는 사용자가 항목을 선택하여 해당 항목에 대한 정보를 볼 수 있습니다.
  • item.html - 항목의 전체 페이지 보기입니다.
  • 앱의 각 페이지에 해당하는 JavaScript 및 CSS 파일.
  • phone.css - 콘텐츠 호스트 페이지와 앱 전체의 CSS 스타일을 지정합니다.
  • hubPhone.css - 피벗 컨트롤과 피벗 페이지의 CSS 스타일을 지정합니다. 이러한 스타일은 hub.css에 설정된 스타일을 재정의합니다.

피벗 템플릿 작동 방식

피벗 템플릿의 섹션은 콘텐츠 권장 사항이 아닌 콘텐츠 예를 제공합니다. 앱 콘텐츠 요구 사항에 맞게 PivotItem 컨트롤로 구현된 섹션을 손쉽게 추가하고 제거할 수 있습니다.

템플릿의 섹션에는 정적 콘텐츠가 포함되어 있으므로, 전역화된 리소스를 손쉽게 제공할 수 있습니다. 샘플 리소스 파일에서는 en-us 로캘에 대한 지역화된 문자열을 제공합니다.

피벗 템플릿 구현에 대한 자세한 내용은 다음을 참조하세요.

데이터 모델 및 Windows 런타임 앱용으로 데이터 모델을 사용자 지정하는 방법에 대한 자세한 내용은 데이터 추가에 대한 항목을 참조하고 허브/피벗 템플릿을 사용하는 JSON 웹 뷰어를 참조하세요.

Windows 런타임 앱용 탐색 프로젝트 템플릿

탐색 앱 템플릿은 Windows 런타임 앱에 권장되는 탐색 모델을 사용하여 기본 탐색을 제공합니다. 이 템플릿에는 최소 페이지 조각 하나만 포함되어 있으며, 페이지 컨트롤 항목 템플릿을 사용하여 페이지 조각을 쉽게 추가할 수 있습니다. 그런 다음 콘텐츠를 추가할 수 있습니다.

탐색 템플릿은 Windows Phone 및 Windows 스토어용 범용 Windows 앱이나 단일 플랫폼 앱으로 사용할 수 있습니다.

탐색 앱은 다음과 같이 기본적으로 "시작" 제목을 표시하는 홈페이지로 설정됩니다.

탐색 응용 프로그램 프로젝트 템플릿

탐색 템플릿용 프로젝트 파일

탐색 앱 템플릿에는 다음 파일이 포함됩니다.

  • 대부분의 공통 파일(예: default.html 및 navigator.js).
  • home.html - 홈페이지입니다. "시작" 제목을 표시합니다. 범용 앱 템플릿에서는 이 파일이 공유됩니다.
  • home.js - 홈페이지와 관련된 동작을 지정합니다. 범용 앱 템플릿에서는 이 파일이 공유됩니다.
  • home.css - 홈페이지의 CSS 스타일을 지정합니다. 범용 Windows 앱을 위한 탐색 템플릿을 사용할 때 각 프로젝트에는 이 파일이 포함됩니다.

탐색 템플릿 작동 방식

탐색 템플릿 구현에 대한 자세한 내용은 다음을 참조하세요.

앱에 페이지를 추가하려면 페이지 컨트롤 항목 템플릿을 사용합니다. 페이지 컨트롤 추가에 대한 예는 페이지 컨트롤 항목 템플릿 추가를 참조하세요.

간단한 탐색 템플릿 구현은 단추-탭 탐색기 샘플을 참조하세요. 이 샘플 앱에는 탐색 컨트롤에 대한 몇 가지 사용자 지정이 포함되어 있습니다.

탐색 템플릿에서 레이아웃 변경을 처리하는 특별 한 동작을 포함해야 하는 경우, 그리드 및 분할 템플릿에서 사용되는 것과 동일한 패턴을 사용하는 것이 좋습니다. 이 패턴은 HTML 페이지에서 updateLayout을 구현합니다. 자세한 내용은 디스플레이 변경 처리를 참조하세요. updateLayout 지원은 공유 탐색 모델에서 제공됩니다.

앱에 가장 적합한 탐색 패턴을 선택하는 방법을 보려면 탐색 패턴을 참조하세요. 또한 앱 기능 전체 프로세스 시리즈의 일부로 플랫 탐색 패턴의 작동 방법을 참조하세요.

  • Applies to Windows

Windows 스토어 앱용 그리드 형태 프로젝트 템플릿

그리드 앱 템플릿을 사용하여 Windows 스토어 앱을 시작하는 것이 좋습니다. 이 템플릿을 사용자 지정하면 사용자가 범주 검색을 통해 완전히 빠져드는 콘텐츠를 찾을 수 있습니다. 예를 들면, 쇼핑 앱, 뉴스 앱, 사진 또는 동영상 앱이 있습니다. 이 템플릿은 Windows 스토어 앱에 권장되는 JavaScript 탐색 모델을 사용합니다.

그리드 앱은 기본적으로 그룹 목록을 표시하는 홈페이지로 설정됩니다. 그룹은 개별 소매 항목이 포함된 가상 백화점의 일부와 같이 명명된 항목 집합을 나타냅니다. 사용자가 그룹을 선택하면 앱에서 오른쪽에 항목 목록이 있는 그룹 세부 정보 페이지가 열립니다. 사용자는 홈페이지나 그룹 세부 정보 페이지에서 항목을 선택할 수 있습니다. 그러면 항목 세부 정보를 표시하는 전체 페이지 보기가 열립니다. 홈페이지는 아래와 같이 표시됩니다.

그리드 앱 프로젝트 템플릿

그리드 템플릿용 프로젝트 파일

그리드 앱 템플릿에는 다음 파일이 포함됩니다.

  • 모든 공통 파일(예: default.html 및 navigator.js)
  • groupedItems.html - 홈페이지입니다. 사용자는 이 페이지에서 그룹 및 항목을 보고, 항목을 선택하여 전체 페이지 항목 보기로 이동하거나 그룹 레이블을 선택하여 그룹 세부 정보 페이지로 이동할 수 있습니다.
  • groupDetail.html - 이 페이지에서 사용자는 왼쪽의 그룹 세부 정보와 오른쪽의 항목을 보고 항목을 선택하여 전체 페이지 항목 보기로 이동할 수 있습니다.
  • itemDetail.html - 항목의 전체 페이지 보기입니다.
  • 앱의 각 페이지에 해당하는 JavaScript 파일 및 CSS 파일(예: groupedItems.js).

그리드 템플릿 작동 방식

그리드 템플릿 구현에 대한 자세한 내용은 다음을 참조하세요.

데이터 추가에 대한 항목에는 그리드 템플릿에 동적 데이터를 추가하고 데이터를 UI에 바인딩하는 방법을 보여 주는 예가 포함되어 있습니다.

  • Applies to Windows

Windows 스토어 앱용 분할 프로젝트 템플릿

분할 앱 템플릿은 사용자가 2열 보기에서 항목 목록과 항목 세부 정보를 볼 수 있도록 사용자 지정할 수 있는 Windows 스토어 앱을 만드는 데 적합합니다. 이 보기에서 사용자는 항목 간에 빠르게 전환할 수 있으며 목록이 동적으로 업데이트될 수도 있습니다. 예를 들면, 뉴스 읽기 프로그램, 스포츠 득점 앱, 메일 앱 등이 있습니다. 이 템플릿은 Windows 스토어 앱에 권장되는 JavaScript 탐색 모델을 사용합니다.

분할 앱은 기본적으로 그룹 목록을 표시하는 홈페이지로 설정됩니다. 그룹은 뉴스를 제공하는 뉴스 소스와 같은 명명된 항목 집합입니다. 사용자가 그룹을 탭하거나 클릭하여 선택하면 앱이 왼쪽에 항목이 표시되고 오른쪽에 현재 항목에 대한 세부 정보가 표시된 분할 보기 페이지를 엽니다. 분할 보기 페이지는 아래와 같이 표시됩니다.

분할 앱 프로젝트 템플릿

분할 보기 페이지에는 2열 보기(또는 마스터/세부 정보 보기)가 표시됩니다. 사용자가 왼쪽에서 항목을 선택하면 오른쪽에 있는 세부 정보가 바뀝니다. 왼쪽에 뉴스 목록이 있고 오른쪽에 실제 뉴스가 있다고 가정해 보세요.

분할 템플릿용 프로젝트 파일

분할 앱 템플릿에는 다음 파일이 포함됩니다.

  • 모든 공통 파일(예: default.html 및 navigator.js)
  • items.html - 홈페이지입니다. 사용자는 이 페이지에서 그룹을 선택하여 앱의 분할 보기 페이지로 이동할 수 있습니다.
  • split.html - 분할 보기 페이지입니다. 왼쪽의 항목 목록에 사용되는 섹션과 오른쪽의 항목 세부 정보에 사용되는 섹션 등 두 개의 섹션을 정의합니다.
  • 앱의 각 페이지에 포함되는 JavaScript 및 CSS 파일(예: split.js 및 split.css).

분할 템플릿 작동 방식

분할 템플릿 구현에 대한 자세한 내용은 다음을 참조하세요.

데이터 추가에 대한 항목에는 분할 템플릿에 동적 데이터를 추가하고 데이터를 UI에 바인딩하는 방법을 보여 주는 예가 포함되어 있습니다.

분할 템플릿에 검색 기능을 추가하는 방법에 대한 예제는 검색 계약 항목 템플릿 추가를 참조하세요.

Windows 런타임 앱용 빈 프로젝트 템플릿

빈 앱 템플릿은 컴파일과 실행은 가능하지만 사용자 인터페이스 컨트롤이나 데이터는 포함되지 않은 최소한의 Windows 런타임 앱을 제공합니다. 빈 프로젝트 템플릿을 기반으로 하는 앱을 실행하면 자리 표시자 텍스트가 포함된 검정색 화면이 표시됩니다.

빈 템플릿은 Windows Phone 스토어 앱 및 Windows 스토어 앱용 범용 앱 템플릿이나 단일 플랫폼 앱으로 사용할 수 있습니다.

빈 템플릿용 프로젝트 파일

빈 앱 템플릿에는 다음 파일이 포함됩니다.

  • 대부분의 공통 파일(예: default.html 및 package.appxmanifest).

빈 템플릿 작동 방식

빈 템플릿 구현에 대한 자세한 내용은 다음을 참조하세요.

빈 템플릿의 전체 동작과 모양은 CSS 스타일시트 ui-dark.css에 의해 생성됩니다. HTML 페이지에서 이 참조를 ui-light.css로 변경할 수 있습니다. 자세한 내용은 CSS 스타일시트를 참조하세요.

일반적인 프로젝트 서식 파일

다음 파일은 대부분의 프로젝트 템플릿에서 공통된 사항입니다.

파일설명
default.html이 페이지가 먼저 로드됩니다. 단일 페이지 탐색 모델을 포함하는 템플릿 앱의 경우 이 페이지는 콘텐츠 호스트의 태그를 제공합니다(각 페이지가 기본 창에 로드됨). 범용 앱 템플릿에서는 각 프로젝트에 이 파일이 포함됩니다.
navigator.jsJavaScript 프로젝트 템플릿에는 단일 페이지 탐색 모델을 구현합니다. 빈 프로젝트 템플릿에는 이 파일이 포함되지 않습니다.

일반적으로 템플릿에 구현된 탐색 동작을 사용자 지정할 필요가 없습니다. 하지만 탐색 컨트롤(navigator.js)이 표준 프로젝트 파일로 구현되어 필요할 경우 수정할 수 있습니다. 자세한 내용은 다음을 참조하세요.

data.js나머지 앱에 데이터를 노출하는 데이터소스 개체(WinJS.Binding.List)를 제공합니다. 이 파일에는 샘플 데이터가 포함되어 있습니다. 데이터 모델에 대한 자세한 내용은 프로젝트 템플릿의 데이터 사용자 지정을 참조하세요. 탐색 및 빈 프로젝트 템플릿에는 이 파일이 포함되지 않습니다.
package.appxmanifestWindows 스토어 및 Windows Phone 스토어 앱의 앱 패키지에 대해 설명합니다. 범용 앱 템플릿에서는 각 프로젝트에 이 파일이 포함됩니다.
PFX 파일이 파일은 appxmanifest 파일에 서명하는 데 사용합니다. 이 파일은 명령줄에서 Windows 스토어 앱 빌드를 지원하기 위한 프로젝트 파일로 포함됩니다.
default.jsdefault.js앱이 시작될 때 앱의 동작 방식을 지정합니다. 범용 앱 템플릿에서는 각 프로젝트에 이 파일이 포함됩니다.
default.css앱의 CSS 스타일을 지정합니다. 범용 앱 템플릿에서는 각 프로젝트에 이 파일이 포함됩니다.
다양한 이미지 파일 기본적으로 포함된 이미지 파일에는 시작 화면 이미지용 splashscreen.png과 Windows 스토어에 사용되는 storelogo.png 및 기타 파일이 포함됩니다.
resources.json지역화 문자열이 포함된 샘플 리소스 파일입니다.

 

일반 코딩 기능

다음 기능은 모든 프로젝트 템플릿에서 공통되는 사항입니다.

  • 각 JavaScript 파일은 다음과 같이 자체 실행 익명 함수로 코드를 래핑합니다.
    
    (function () {
        // . . .
    })();
    
    

    익명 함수 내부에 추가된 멤버는 private 유형이지만 WinJS.Namespace.define 함수를 사용하여 이를 public 유형으로 만들 수 있습니다. 익명 함수를 사용하면 자체 이벤트 처리기를 추가할 때와 같이 일부 코드를 쓰는 데 필요한 방식이 변경됩니다. 자세한 내용은 기본 앱 코딩을 참조하세요.

  • 각 JavaScript 파일은 "use strict" 문으로 Strict 모드의 사용을 지정합니다. 자세한 내용은 JavaScript 언어 참조의 Strict 모드를 참조하세요.
  • 엄격한 선언 처리가 항상 사용됩니다. 함수에서 선언 처리를 사용하도록 지정하려면 WinJS.Utilities.markSupportedForProcessing을 사용해야 합니다.

XML 문서 주석은 JavaScript 파일의 몇몇 위치에 사용되어 보다 완벽한 IntelliSense 환경을 제공합니다. 자세한 내용은 JavaScript IntelliSense를 참조하세요.

앱 수명 주기

앱 수명 주기의 구현은 Windows 런타임 앱용 JavaScript 프로젝트 템플릿에서 모두 동일합니다. 앱 수명 주기는 앱이 시작될 때 시작하고 앱이 종료될 때 끝납니다. 프로젝트 템플릿에는 앱 수명 주기를 관리하기 위한 일반 패턴이 포함되어 있습니다. 프로젝트 템플릿을 기반으로 하는 앱을 만드는 경우 앱이 일시 중단되거나 종료될 때의 데이터 처리와 같은 추가 시나리오를 처리할 코드를 포함해야 할 수도 있습니다.

default.html 파일은 각 템플릿의 시작 페이지로 설정됩니다. default.html에 해당하는 JavaScript 파일에는 앱 이벤트 디스패치를 시작하는 다음 WinJS.Application.start 호출이 들어 있습니다.


var app = WinJS.Application;
// . . .
app.start();

앱 수명 주기 관리와 관련된 코드는 default.js에 추가하는 것이 좋습니다. default.js 구현은 모든 프로젝트 템플릿에서 동일합니다. 이 파일에는 WinJS onactivated 이벤트를 처리하는 코드가 포함됩니다. 이 이벤트는 Windows 런타임이 활성화될 때 발생합니다. onactivated 이벤트 처리기의 코드는 앱이 Windows 시작 화면에서 시작되었는지 여부를 확인하고 WinJS.UI.processAll을 호출합니다. processAll 함수는 컨트롤의 DIV 요소에 data-win-control 특성을 포함하는 모든 컨트롤을 로드합니다. 다음은 processAll 함수를 포함하는 코드입니다.



app.addEventListener("activated", function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // . . .
        } else {
            // . . .
        }
        // . . .
        }
        // . . .

        // . . .
        var p = ui.processAll().then(function () {
            return nav.navigate(nav.location || Application.navigator.home, nav.state);
        }).then(function () {
            return sched.requestDrain(sched.Priority.aboveNormal + 1);
        }).then(function () {
            ui.enableAnimations();
        });

        args.setPromise(p);
    }
});

앱에서 초기 상태를 설정할 때 실행해야 하는 코드가 있는 경우 WinJS onactivated 이벤트 처리기에 해당 코드를 포함해야 합니다. 또한 앱이 일시 중단된 후 다시 활성화된 경우 추가 코드를 포함하는 것이 필요할 수도 있습니다. 이 코드를 코드 설명으로 표시된 곳에 추가합니다.



if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
    // TODO: This application has been newly launched. Initialize
    // your application here.
} else {
    // TODO: This application has been reactivated from suspension.
    // Restore application state here.
}


앞서 설명했듯이, 이 템플릿은 앱 일시 중단을 처리하는 코드를 포함하지 않습니다. 코드에서 이 앱 상태를 처리하기 위해 WinJS oncheckpoint 이벤트 처리기(여기서는 default.js에 있음)에 코드를 추가하거나 Windows 런타임 suspending 이벤트를 등록하기 위해 코드를 추가할 수 있습니다(oncheckpoint 호출).


app.oncheckpoint = function (args) {
    // TODO: This application is about to be suspended. Save any state
    // that needs to persist across suspensions here. If you need to 
    // complete an asynchronous operation before your application is 
    // suspended, call args.setPromise().
    app.sessionState.history = nav.history;
};

WinJS 또는 Windows 런타임 이벤트나 두 이벤트의 조합을 사용하여 앱 수명 주기를 관리할 수 있습니다. 하지만 대부분의 앱은 WinJS 이벤트와 함수로도 충분합니다. 자세한 내용은 앱을 일시 중단하는 방법앱을 다시 시작하는 방법을 참조하세요.

다음은 앱 수명 주기와 관련된 몇 가지 WinJS 이벤트와 함수입니다.

탐색 모델

허브, 그리드, 분할탐색 앱 프로젝트 템플릿에 사용되는 탐색 모델이 HTML과 JavaScript를 사용하는 Windows 런타임 앱에 권장되는 탐색 모델입니다. 이 모델에서 페이지의 URI를 통해 로드된 HTML 페이지는 앱 수준의 단일 컨텍스트로 로드됩니다. 페이지는 대체로 사용자 작업에 대한 응답으로 필요에 따라 로드됩니다. 일반적으로 웹 개발자는 이 유형의 탐색 모델을 단일 페이지 탐색이라고 합니다. navigator.js 파일에서 탐색 모델을 구현합니다. 단일 페이지 탐색 모델은 보다 매끄럽고 앱과 유사한 페이지 간 전환을 제공하며, 스크립트가 언로드되지 않으므로 더 쉽게 상태를 관리할 수 있게 해 줍니다.

  앱에 가장 적합한 탐색 패턴을 선택하는 방법을 보려면 탐색 패턴을 참조하세요. 또한 앱 기능 전체 프로세스 시리즈의 일부로 플랫 탐색 패턴의 작동 방법을 참조하세요.

프로젝트 템플릿에 제공된 단일 페이지 탐색 모델을 사용하여 앱의 탐색을 사용자 지정하려면

  • 앱에 navigator.js가 있고 탐색 컨트롤에 필요한 콘텐츠 호스트 태그가 default.html에 포함되어 있는지 확인합니다(아래 참조).
  • 각 페이지가 PageControl로 구현되었는지 확인합니다. Visual Studio를 사용하여 PageControl 항목 템플릿을 추가할 수 있습니다.
  • ready 또는 init 함수에서 각 페이지에 대한 초기화 코드를 구현합니다.
  • WinJS.Navigation.navigate를 호출하여 새 페이지로 이동합니다.

이러한 요구 사항에 대한 자세한 내용은 다음과 같습니다.

템플릿 같은 프로젝트 템플릿에는 navigator.js 파일이 포함되어 있지 않습니다. 이 템플릿에서는 navigator.js 프로젝트 파일을 수동으로 추가하지 않는 경우 사용자 지정 탐색을 구현해야 합니다. 페이지 간 탐색을 위해 단일 페이지 탐색 모델과 WinJS.Navigation.navigate를 사용하는 경우 WinJS.Navigation.navigate는 탐색을 직접 수행하지 않는다는 점을 기억해야 합니다. 이 함수는 현재 위치와 관련된 상태 개체를 저장한 후 WinJS.Navigation.onnavigated 이벤트를 호출하는 래퍼 함수입니다. JavaScript로 작성한 Windows 스토어 앱에서 단일 페이지 탐색을 사용하는 예제 및 탐색에 대한 자세한 내용은 빠른 시작: 단일 페이지 탐색 사용을 참조하세요.

그리드, 분할, 허브 및 탐색 앱 템플릿에서 사용되는 단일 페이지 탐색 모델에서, 앱의 탐색 컨트롤로 선언된 DIV 요소는 모든 앱 페이지에 대한 콘텐츠 호스트를 제공합니다. 모든 페이지 콘텐츠는 이 DIV에 로드됩니다. 여기에 표시된 요소는 프로젝트 템플릿의 default.html에 포함되어 있습니다.


<div id="contenthost" data-win-control="Application.PageControlNavigator"
    data-win-options="{home: '/pages/items/items.html'}">
</div>

탐색 컨트롤 자체는 navigator.js에서 구현되며, 대부분의 앱에서 수정할 필요가 없습니다. 탐색 컨트롤은 WinJS.Navigation.onnavigated 이벤트 처리기를 설정합니다.

콘텐츠 호스트에 로드된 페이지는 PageControl 개체여야 합니다. 각 페이지 컨트롤은 HTML, CSS 및 JavaScript 코드의 모듈 단위를 나타냅니다. 탐색 컨트롤은 페이지를 로드할 때 내부적으로 정의된 IPageControlMembers 인터페이스의 메서드(예: ready)를 호출합니다.

프로젝트 템플릿은 ready 함수를 구현하며 일부 템플릿에서는 init 함수를 구현합니다. ready 함수는 페이지가 로드되고 완전히 처리되었을 때 호출됩니다.

  페이지 로드 프로세스에 대한 자세한 내용은 IPageControlMembers.init를 참조하세요.

새 페이지로 이동하기 위해 각 템플릿 앱은 WinJS.Navigation.navigate를 호출합니다. 이 호출이 발생하면 탐색 컨트롤이 HTML 파일을 콘텐츠 호스트 DIV 요소에 로드합니다. 템플릿 페이지에서 WinJS(JavaScript용 Windows 라이브러리)의 navigate 함수를 호출하는 함수는 다음과 같습니다.

  • _itemInvoked 함수 - 목록 보기의 항목 선택을 처리합니다. 현재 페이지 및 컨텍스트에 따라 개별 항목이나 그룹이 선택될 수 있습니다.
  • _selectionChanged 함수 - split.html(분할 템플릿)의 항목 선택을 처리합니다.

페이지 탐색 구현에 대한 자세한 내용은 페이지 간 이동을 참조하세요.

CSS 스타일

템플릿의 전체 동작과 모양은 CSS 스타일시트 ui-dark.css에 의해 생성됩니다. 이 스타일시트는 기본 색 구성표, 글꼴 및 기타 스타일 속성을 정의하는 WinJS 스타일시트입니다. 프로젝트 참조는 다음과 같습니다.


<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">

모든 HTML 페이지에서 이 참조를 ui-light.css로 변경할 수 있습니다. 이 스타일시트는 Windows 런타임 앱에 권장되는 대체 색상표와 스타일입니다.


<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

표 형태 및 분할 프로젝트 템플릿의 HTML 페이지는 대부분 Visual Studio 프로젝트 및 항목 템플릿과 동일하지 않은 WinJS 템플릿을 하나 이상 사용하여 여러 데이터 인스턴스를 표시하고 형식을 지정합니다. 예를 들어 페이지에서 ListView 컨트롤이 있는 위치에 관계없이 itemtemplate의 클래스 이름을 사용하여 WinJS 템플릿을 찾습니다. 클래스 이름은 JavaScript 파일에서 요소를 검색하고 CSS를 지정하는 데 사용됩니다. 다음은 분할 프로젝트 템플릿의 items.html에 있는 항목 템플릿입니다.


<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
    <div class="item-overlay">
        <h4 class="item-title" 
            data-win-bind="textContent: title"></h4>
        <h6 class="item-subtitle win-type-ellipsis" 
            data-win-bind="textContent: subtitle"></h6>
    </div>
</div>


중요  itemtemplate 템플릿은 컨텍스트에 따라 그룹이나 개별 데이터 항목일 수 있는 모든 유형의 ListView 항목에 사용됩니다.

HTML 페이지 및 해당 WinJS 템플릿과 관련된 CSS 스타일은 범위가 있는 CSS 스타일입니다. 범위가 있는 스타일을 사용하면 특정 페이지에만 스타일이 적용됩니다. 이 경우 특정 CSS 스타일의 원본이 명확하지 않을 때 발생하는 문제를 수정하는 데 걸리는 시간을 줄일 수 있습니다. 다음은 범위가 있는 스타일의 사용 예입니다. items.css의 이 코드 섹션에서는 이전 항목 템플릿의 IMG 요소에 설정된 CSS 속성을 보여 줍니다. 이 요소는 ListView의 각 항목에 연결된 이미지를 나타냅니다.


.itemspage .itemslist .item .item-image {
    -ms-grid-row-span: 2;
}


이전 예제에서 itemspage 항목은 스타일의 범위를 설정하여, items.html에서 선언된 itemspage DIV 요소에 있는 요소에만 CSS를 적용합니다. itemslist 항목은 홈페이지의 주 콘텐츠 섹션에만 CSS를 적용하도록 추가로 제한합니다. ListView를 선언하는 items.html의 주 콘텐츠 섹션은 다음과 같이 표시됩니다.


<div class="itemslist win-selectionstylefilled" 
    aria-label="List of groups" 
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ selectionMode: 'none' }">
</div>


오른쪽에서 왼쪽으로 쓰기 체계에 대한 스타일시트 지원은 Microsoft Visual Studio 2012 Update 1의 템플릿에서 제공됩니다. 다음 예에서는 groupedItems.css(그리드 템플릿)에서 오른쪽에서 왼쪽으로 표시된 그룹 헤더에 대한 CSS 스타일을 보여 줍니다.


.groupeditemspage .groupeditemslist.win-rtl .group-header .group-chevron:before {
    content: "\E26C";
}

오른쪽에서 왼쪽 스타일을 사용하려면 프로젝트에 오른쪽에서 왼쪽 언어에 대한 리소스를 포함시켜야 하며, Windows가 올바른 언어 설정으로 설정되어야 합니다. 자세한 내용은 빠른 시작: UI 리소스 번역을 참조하세요. Windows 런타임 앱에서 오른쪽에서 왼쪽으로 쓰기 체계를 지원하는 방법에 대해서는 양방향 UI를 지원하는 방법을 참조하세요.

디스플레이 변경 처리

허브, 그리드 및 탐색 템플릿은 레이아웃 컨트롤에서 제공하는 것 이외에 디스플레이 크기나 레이아웃 변경 사항의 처리를 위한 특별한 지원을 구현하지 않지만, 레이아웃의 변경 사항에 대한 응답으로 사용자 지정을 수행할 수 있는 기본 프레임워크를 제공합니다. 레이아웃 변경 사항은 프로젝트 템플릿 탐색 모델 내에서 처리될 수 있습니다. 자세한 내용은 탐색 모델을 참조하세요.

  레이아웃 변경이 UI에만 영향을 주는 경우에는 보통 CSS 파일에서 @media 쿼리를 사용하여 이러한 변경 내용을 처리할 수 있습니다.

navigator.js에서 탐색 컨트롤은 window.onresize 이벤트에 대한 처리기를 만듭니다.


window.onresize = this._resized.bind(this);


PageControlNavigator에 대한 생성자 코드에서 onresize 이벤트는 궁극적으로 현재 HTML 페이지와 연결된 JavaScript 파일에 구현된 updateLayout 함수에 매핑됩니다. 런타임에 onresize 이벤트는 이 함수를 호출합니다.

updateLayout의 구현은 각 페이지별로 수행되지만, 프로젝트 템플릿에서는 대개 구현되지 않습니다. 이 코드는 허브 템플릿의 섹션 페이지에 있는 updateLayout에 대한 스텁 코드를 보여 줍니다.


updateLayout: function (element) {
    /// <param name="element" domElement="true" />

    // TODO: Respond to changes in layout.
},


분할 템플릿에서는 디스플레이 상태와 관련된 고유한 동작을 지원합니다. 기본적으로 분할 템플릿의 분할 보기 페이지(split.html)는 —마스터/세부 정보 보기라는 2열 보기입니다. 분할 템플릿은 문서의 루트 노드 너비를 확인하여 설정하는 1열 보기라고 하는 대체 보기를 정의합니다. 1열 보기를 정의하고 설정하는 코드는 split.js에 있습니다. _isSingleColumn 함수는 1열 보기를 정의합니다.


_isSingleColumn: function () {
    return document.documentElement.offsetWidth <= 767;
},


split.js에 있는 여러 가지 다른 메서드(예: _updateVisibility)는 _isSingleColumn을 호출합니다. _updateVisibility 함수는 앱이 현재 1열 보기에 있는지 및 항목이 선택되었는지 여부에 따라 열의 표시 여부를 켜거나 끕니다. _updateVisibility는 페이지가 로드될 때 split.js에서 ready 함수에 의해 호출되고, 크기 조정 이벤트가 발생할 때 updateLayout에 의해 호출됩니다. 자세한 내용은 분할 템플릿의 split.js를 참조하세요.

레이아웃 변경 사항 처리에 대한 자세한 내용은 창 크기 및 화면에 맞게 크기 조정에 대한 지침을 참조하세요.

 

 

표시:
© 2015 Microsoft