Windows 스토어 앱용 JavaScript 항목 템플릿

항목 템플릿은 자주 사용하는 코드가 포함된 앱 파일로, 이 파일을 프로젝트 템플릿에 추가하면 개발 시간을 줄일 수 있습니다.

중요  이 항목의 정보는 Windows 8.1에 맞게 업데이트되었습니다. 새 템플릿으로 마이그레이션하는 방법에 대한 자세한 내용은 Windows 8.1으로 Windows 스토어 앱 마이그레이션Windows 8 앱의 대상을 Windows 8.1로 변경을 참조하세요.

Windows 스토어 앱용 항목 템플릿에는 JavaScript용 Windows 라이브러리를 지원하는 적절한 참조 및 스크립트 태그가 들어 있습니다. 일부 항목 템플릿은 계약을 구현하는 데, 이는 특정 API를 사용하기 위해 하나 이상의 앱 간에 이루어지는 계약과 같은 것입니다. 계약 템플릿(파일 열기 선택기 계약, 대상 공유 계약)을 추가하면 앱 매니페스트가 적합한 선언으로 업데이트됩니다. 이러한 선언에 대한 설정은 매니페스트 디자이너선언 탭에서 확인할 수 있습니다.

솔루션 탐색기에서 프로젝트에 대한 바로 가기 메뉴를 열고 추가 > 새 항목을 클릭하면 기존 프로젝트에 항목 템플릿을 추가할 수 있습니다.

다른 언어에 대한 항목 템플릿에 대한 정보는 C#, VB 및 C++ 항목 템플릿을 참조하세요.

페이지 컨트롤 항목 템플릿

이 항목 템플릿에는 앱의 페이지에 대한 최소한의 콘텐츠와 마크업이 포함되어 있습니다. HTML 마크업에는 뒤로 단추가 포함된 헤더 섹션과 주 콘텐츠 섹션이 포함됩니다.

페이지 컨트롤 항목 템플릿을 추가하면 프로젝트에 다음 3개 파일이 추가됩니다.

  • 페이지의 헤더 섹션과 주 콘텐츠 섹션이 포함된 HTML 파일(기본적으로 pagecontrol.html로 명명됨)
  • 페이지를 지원하는 코드를 제공하는 JavaScript 파일. 이 파일에는 Windows 스토어 앱에 권장되는 탐색 모델을 지원하는 코드가 포함되어 있습니다.
  • 페이지의 CSS 스타일을 지정하는 CSS 파일

페이지 컨트롤 항목 템플릿에 사용되는 탐색 모델은 허브, 표 형태, 분할 및 탐색 프로젝트 템플릿에도 사용됩니다. 이러한 프로젝트 템플릿에 페이지를 추가하는 경우 이 항목 템플릿을 사용하는 것이 좋습니다. 자세한 내용은 빠른 시작: 단일 페이지 탐색 사용을 참조하세요.

주의  페이지 컨트롤 항목 템플릿을 빈 템플릿과 함께 사용하려면 프로젝트에 navigator.js를 추가하고 default.html에 콘텐츠 호스트 코드를 추가해야 합니다. navigator.js 및 콘텐츠 호스트 코드는 그리드 같은 다른 프로젝트 템플릿에서 가져올 수 있습니다.

검색 결과 페이지 항목 템플릿

이 항목 템플릿을 통해 앱은 WinJS.UI.SearchBox 컨트롤에서 시작한 검색의 검색 결과 페이지를 제공할 수 있습니다.

중요  Microsoft Visual Studio 2013의 검색 항목 템플릿에서는 더 이상 계약을 구현하지 않습니다. 항목 템플릿의 이름도 검색 계약에서 변경되었습니다.

검색 결과 페이지 항목 템플릿을 추가하면 프로젝트에 다음 3개 파일이 추가됩니다.

  • 검색 결과를 표시하는 ListView 컨트롤이 포함된 HTML 파일(기본적으로 searchResults.html로 명명됨)
  • 검색 페이지를 지원하는 코드를 제공하는 JavaScript 파일. 원본 파일에는 Windows 스토어 앱에 권장되는 탐색 모델을 지원하는 코드가 포함되어 있습니다.
  • 검색 페이지의 CSS 스타일을 지정하는 CSS 파일

이 항목 템플릿에 사용되는 탐색 모델은 허브, 표 형태, 분할 및 탐색 프로젝트 템플릿에도 사용됩니다. 이러한 프로젝트 템플릿에 검색 결과 페이지 항목 템플릿을 추가하는 경우 이 항목 템플릿을 사용하는 것이 좋습니다. 자세한 내용은 JavaScript 프로젝트 템플릿의 "탐색 모델" 섹션을 참조하세요.

검색 결과 페이지는 검색 결과를 ListView로 표시합니다. 이 계약은 표 형태 및 분할 프로젝트 템플릿에서 사용되는 WinJS 템플릿과 매우 유사하게 작동합니다. 자세한 내용은 프로젝트 템플릿에 데이터 추가Windows 스토어 앱용 JavaScript 프로젝트 템플릿의 "CSS 스타일" 섹션을 참조하세요.

자세한 내용은 검색 결과 항목 템플릿 추가빠른 시작: 검색 추가를 참조하세요.

파일 열기 선택기 계약 항목 템플릿

파일 열기 선택기 계약 항목 템플릿을 통해 앱은 데이터를 다른 앱에 파일로 표시할 수 있습니다. 예를 들어 이 템플릿을 사용하면 사진이 로컬 하드 드라이브에 저장되어 있지 않아도 사용자가 Facebook에서 사진을 선택할 수 있는 사진 선택기 대화 상자를 만들 수 있습니다.

파일 열기 선택기 계약 항목 템플릿을 추가하면 프로젝트에 다음 3개 파일이 추가됩니다.

  • 파일 목록을 표시하는 ListView 컨트롤이 포함된 HTML 파일(기본적으로 fileOpenPicker.html로 명명됨)
  • 파일 목록에서 항목의 선택을 처리하는 코드를 제공하는 JavaScript 파일
  • 파일 목록이 포함된 HTML 페이지의 스타일을 지정하는 CSS 파일

파일 열기 선택기 계약 템플릿에서는 파일 목록을 ListView로 표시합니다. 이 계약은 표 형태 및 분할 프로젝트 템플릿에서 사용되는 WinJS 템플릿과 매우 유사하게 작동합니다. 자세한 내용은 프로젝트 템플릿에 데이터 추가Windows 스토어 앱용 JavaScript 프로젝트 템플릿의 "CSS 스타일" 섹션을 참조하세요.

파일 열기 선택기 계약에 대한 자세한 내용은 빠른 시작: 파일 선택기 계약과 통합을 참조하세요.

대상 공유 계약 항목 템플릿

대상 공유 계약 항목 템플릿을 통해 앱은 다른 앱 간의 데이터 공유를 조정할 수 있습니다. 예를 들어 이 템플릿을 사용하면 사용자가 Facebook의 Flickr에서 사진을 게시할 수 있습니다. 이 템플릿에는 앱이 공유 콘텐츠를 받을 수 있도록 하는 코드가 포함되어 있습니다. 공유 UI에서 앱을 선택하면 이 항목 템플릿이 포함된 앱이 시작됩니다.

대상 공유 계약 항목 템플릿을 추가하면 프로젝트에 다음 3개 파일이 추가됩니다.

  • 공유 UI에서 앱을 선택할 때 표시되는 HTML 파일(기본적으로 shareTarget.html로 명명됨)
  • 공유 콘텐츠를 처리하는 코드를 제공하는 JavaScript 파일
  • 페이지의 스타일을 지정하는 CSS 파일

HTML 페이지에는 공유 미리 보기 이미지의 IMG 요소, 공유 속성의 제목과 설명, 사용자가 공유 콘텐츠 처리 시 설명을 포함할 수 있는 표준 입력 상자 등 최소한의 공유 콘텐츠를 표시하는 마크업이 있는 주 콘텐츠 섹션이 포함되어 있습니다.

JavaScript 코드는 activated 이벤트를 사용하여 앱이 공유 데이터를 받도록 활성화되어 있는지 확인한 다음 ShareOperation 개체를 사용하여 공유 데이터에 액세스하고 초기 템플릿 속성(제목, 설명 및 미리 보기 이미지)을 설정합니다. JavaScript 파일에서 onShareSubmit 함수를 사용하여 설명과 함께 공유 데이터를 처리합니다.

공유 계약에 대한 자세한 내용은 빠른 시작: 공유 콘텐츠 받기를 참조하세요.

Visual Studio의 기타 항목 템플릿

HTML 페이지, JavaScript 파일, XML 파일 등의 다른 항목 템플릿 대부분은 Windows 스토어 앱에 대한 특별한 기능이 없는 표준 파일입니다. 다음은 두 가지 템플릿에 대한 추가 정보입니다.

리소스 파일

Windows 스토어 앱을 지역화하려면 하나 이상의 리소스 파일 항목 템플릿(.resjson 파일)을 프로젝트에 추가합니다. 자세한 내용은 앱 전역화를 참조하세요.

전용 작업자

Windows 스토어 앱에서 HTML5 웹 작업자를 사용하는 경우 프로젝트에 전용 작업자 항목 템플릿을 포함하는 것이 좋습니다. 이 템플릿에는 웹 작업자 API에 대한 IntelliSense 지원을 가능하게 하는 참조 지시문이 포함되어 있습니다. Windows 스토어 앱에서 웹 작업자를 사용하는 방법에 대한 자세한 내용은 웹 작업자를 참조하세요.

관련 항목

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

 

 

표시:
© 2014 Microsoft. All rights reserved.