JavaScript item templates for Store apps
[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]
Item templates are app files that contain commonly used code that can be added to a project template to reduce development time.
Important The information in this topic applies to Windows Phone 8, Windows 8.1 Update. and Microsoft Visual Studio 2013 Update 2. For information on the Windows 8.1 templates, see the Universal app template section in JavaScript project templates and Porting your Windows Runtime app to Windows Phone.
The item templates for Windows Phone Store apps and Windows Store apps contain the appropriate references and script tags to support Windows Library for JavaScript. Some of the item templates implement a contract, which is like an agreement between one or more apps to use specific APIs. When you add a contract template (File Open Picker Contract, Share Target Contract), the app manifest is updated with the appropriate declarations. You can see the settings for these declarations on the Declarations tab of the Manifest Designer.
You can add an item template to an existing project by opening the context menu for the project in Solution Explorer and then choosing Add > New Item.
For info on item templates for other languages, see C#, VB, and C++ item templates.
Page Control item template for Store apps
This item template contains minimal content and markup for a page in your app. The HTML markup includes a header section that includes a Back button and a main content section.
When you add a Page Control item template, Visual Studio adds 3 files to your project:
- An HTML file (named pagecontrol.html by default) that includes a header section and the main content section for your page.
- A JavaScript file that provides code that supports the page. This file includes code that supports the recommended navigation model for Windows Store apps.
- A CSS file that specifies CSS styles for the page.
The navigation model used in the Page Control item template is also used in the Hub/Pivot, Hub, Pivot, Grid, Split, and Navigation project templates. We recommend using this item template when you add pages to these project templates. For more info, see Quickstart: Using single-page navigation and the "Navigation model" section in JavaScript project templates.
Caution To use the Page Control item template with the Blank template, you must add navigator.js to the project and the content host code to default.html (you can obtain navigator.js and the content host code from another project template, such as Hub/Pivot).
Share Target Contract item template for Store apps
The Share Target Contract item template enables an app to coordinate data sharing among other apps. For example, you can use this template to enable users to post a photo from Flickr on Facebook. This template includes code that enables the app to receive shared content. The app that contains this item template is started when the app is selected in the share UI.
When you add a Share Target Contract item template, Visual Studio adds 3 files to your project:
- An HTML file (named shareTarget.html by default) that's displayed when the app is selected in the share UI.
- A JavaScript file that provides code to handle the shared content.
- A CSS file that specifies styles for the page.
The HTML page includes a main content section that has markup to display a minimal portion of the shared content: an IMG element for a shared thumbnail image, a title and description for shared properties, and a standard input box to enable the user to include comments when processing the shared content.
The JavaScript code uses the activated event to check whether the app is activated to receive shared data, and then uses the ShareOperation object to access shared data and set the initial template properties—the title, description, and thumbnail image. Use the onShareSubmit function in the JavaScript file to process the shared data along with the comments.
For more info on share contracts, see QuickStart: receiving shared content.
Search Results Page item template for Windows Store apps
This item template enables an app to present a search results page for a search that's initiated from the WinJS.UI.SearchBox control.
Note: The item template for search in Microsoft Visual Studio 2013 no longer implements a contract. The name of the item template has also been changed (from Search Contract).
When you add a Search Results Page item template, Visual Studio adds 3 files to your project:
- An HTML file (named searchResults.html by default) that includes a ListView control to display the search results.
- A JavaScript file that provides code that supports the search page. The source file includes code that supports the recommended navigation model for Windows Store apps.
- A CSS file that specifies CSS styles for the search page.
The navigation model used in the item template is also used in the Hub, Grid, Split, and Navigation project templates. We recommend using this item template when you add a Search Results Page item template to these project templates. For more info, see the "Navigation model" section in JavaScript project templates.
The Search Results Page displays search results in a ListView. This works much like the WinJS templates used in the Grid and Split project templates. For more info, see Customizing data in the Visual Studio templates and the "CSS styles" section in JavaScript project templates for Windows Store apps.
For more info, see Adding a Search Results item template and QuickStart: Adding search.
File Open Picker Contract item template for Windows Store apps
The File Open Picker Contract item template enables an app to expose its data as files to other apps. For example, you can use this template to create a photo picker dialog box from which the user can pick a photo from Facebook, even if the photo isn't stored on the local hard drive.
When you add a File Open Picker Contract item template, Visual Studio adds 3 files to your project:
- An HTML file (named fileOpenPicker.html by default) that includes a ListView control to display the file list.
- A JavaScript file that provides code to handle the selection of items in the file list.
- A CSS file that specifies styles for the HTML page that contains the file list.
The File Open Picker Contract template displays the file list in a ListView. This works much like the WinJS templates used in the Grid and Split project templates. For more info, see Adding data to a project template and the "CSS styles" section in JavaScript project templates for Windows Store apps.
For more info about File Open Picker contracts, see Quickstart: Integrating with file picker contracts.
Other item templates in Visual Studio
Most of the other item templates, such as HTML Page, JavaScript File, and XML File, are standard files that don't have special features for Windows Store apps. Here's some additional info about 2 of the templates.
Resources File
To help localize a Windows Store app, you can add one or more Resources File item templates (.resjson files) to your project. For more info, see Globalizing your app.
Dedicated Worker
If you're using HTML5 Web Workers in your Windows Store app, we recommend that you include the Dedicated Worker item template in your project. This template includes a reference directive to enable IntelliSense support for the Web Worker API. For more info about using Web Workers in your Windows Store apps, see Web Workers.