Integrating with the Windows 8 environment - Build Windows 8 Apps with HTML5 and JavaScript - page 224

Note In order to be listed as share target (that is, as the Mail application you dealt with in
this exercise), an application needs to implement the Share target contract. You implement
this contract by adding a special item to the project from the Add New Item dialog of
Microsoft Visual Studio. Adding a new share target item will bring three new files to
your project and some changes to the project manifest. You'll get new CSS, HTML, and
JavaScript files that provide style, markup, and code respectively for a new page. Changes
in the manifest inform Windows 8 that your application intends to participate in the Share
contract. When the user selects your application to receive some shared content, the new
page is displayed and its logic allows you to receive and process data. A Share Target
application is not expected to display the full-blown user interface. It is, instead, expected
to display the minimum user interface for the execution of a particular task on the received
content. An example of a Share target application can be found in the Windows SDK.
Providing a Settings page
The Settings panel in the Charms bar is meant to be the place where users always look for quick
access to the settings that an application may have. A Windows Store application can provide a
collection of additional pages to be listed in the Settings panel for the user to change options that
affect the behavior of the application, as well as get to the Help or About pages. In this exercise, you'll
create a Settings page for the TodoList application.
populating the Settings charm
When the user clicks the Settings panel in the Charms bar, the application receives an onsettings
event. Therefore, providing a handler for this event is the very first step to accomplish.
Creating the settings flyout
The Settings panel is essentially a flyout component that gets configured with a list of application
commands. An application command is a HTML page and a title string. You open default.html and
add the following code before the call to app.start .
app.onsettings = function (e) {
e.detail.applicationcommands = {
"about": {
href: "/pages/about.html",
title: "About"
},
"privacy": {
href: "/pages/privacy.html",
title: "Privacy"
},