Design and Development of Windows 8 Metro-tile and notification (1)

In this experiment, you will first exercise the tile, screen lock notification, and toast notification, and add them to the contoso cookbook application. Finally, you will be able to use the secondary tile to pin your favorite recipe to the "Start" Screen of Metro. You will see the screen lock reminder update from the azure service, prompting you to have new recipes available. An additional tile, also known as a secondary tile, can be created for a Metro application. The secondary tile is a shortcut for starting an application, but it takes the application directly to a predefined location. For example, a weather application may allow users to create secondary magnetic stickers that represent geographical locations, such as Redmond, WA, Atlanta, and GA. Then, you can click the secondary tile to start the application and view the weather in Redmond or Atlanta. The secondary tile is created using the Windows Runtime API encapsulated in the windows. UI. startscreen. secondarytile class. The creation process is usually started by user input, such as clicking an application Program A command on the bar. Many parameters can be provided when an application creates a secondary tile, including the URI of the tile background image (if you want to switch between the square tile and the wide tile, you can specify the image URI of the two) and a string that represents the activation parameter. When the application starts from the secondary tile, the activation parameters are passed to the application by the operating system. This provides the information required by the application to indicate the state of the secondary tile. For weather applications, the activation parameter may only be the zip code. Add secondary Tile

In this exercise, you will add a command in the application bar, allowing users to pin their favorite recipes to the "Start" screen with the secondary tile. ToContosocookbookAdd the business logic to display the corresponding recipe when starting the application from the secondary tile.

Task1-Modify application bar

The first thing we need to do is add"Pin recipe"Command.

1.InVisual StudioOpen in lab6Completed inContosocookbookProject. If you have not completed the experiment6Alternatively, you can find the complete version of the experiment in the raw material if you want to start with the reference copy.

2.OpenDefault.html, FindIDForAppBar"DivElement.

3.In the statement"Video"Command after the statementDivAdd the following statement in the application barPin recipe"Command:

Html

<Buttondata-win-control = "winjs. UI. appbarcommand "data-win-Options =" {ID: 'pin', label: 'pin REE E', icon: '', Section: 'selection '}"> </button>

4.OpenItemdetailpage. js, InReadyFindAppBar. showonlycommands.

5.Change this statement to the following:

Javascript

AppBar. showonlycommands (["photo", "video", "pin", "home"]);

Note:In the lab4, We addedGroupeditemspage. js,Groupdetailpage. jsAndItemdetailpage. jsOfCode, Only the application bar buttons that are suitable for each page are displayed. Make sure that the modification is only displayed on the application bar of project details.Pinrecipe"Button.

6.Start the application and click a recipe to open its project details page.

7.Make sure that the"Pin recipe"Command,1.

Figure1

Pin recipeCommand

8.ReturnVisual StudioAnd stop debugging.

 

 

Task2-Add the code for creating the secondary Tile

When you select"Pinrecipe"Button, we want to create a secondary tile to represent the current recipe. In this task,Pinrecipe"Button to write an event handler.

1.In Solution ExplorerJSRight-click the folder and use"Add-new item"Command will be namedTile. jsOfJavascriptAdd files to folders.

2.InTiles. jsAdd the following code:

Javascript

(Function (){

"Use strict ";

 

VaR start = windows. UI. startscreen;

 

Winjs. namespace. Define ("tiles ",{

// Creates a secondary tile and submit a request to pin it

Pinrecipe: function (){

VaR logo = newwindows. Foundation. Uri ("MS-Resource: images/logo.png ");

 

VaR tile = new start. secondarytile (

Tiles. currentitem. Key, // tile ID

Tiles. currentitem. Partition title, // tile short name

Tiles. currentitem. Title, // tile display name

Tiles. currentitem. Key, // activation argument

Start. tileoptions. shownameonlogo, // tile options

Logo // tile logo

);

 

Tile. requestcreateasync ();

},

 

// Stores a reference to the current recipe

Currentitem: NULL

});

})();

Note:Although it is not displayed here, You can (optional) check whether you specifyIDWhether the secondary tile already exists. CreateIDThe same secondary tile will not cause any damage, and the new tile will replace the existing one.

3.InDefault.htmlAdd the followingScriptElement:

Html

<Scriptsrc = "/JS/tiles. js"> </SCRIPT>

4.InDefault.htmlIn thePin recipe"Command to add the following highlighted text:

Html

<Buttondata-win-control = "winjs. UI. appbarcommand "data-win-Options =" {ID: 'pin', label: 'pin REE E', icon: '', Section: 'selection', Onclick: tiles. pinrecipe} "> </Button>

 

5.OpenItemdetailpage. js, Add the following highlighted statementsReadyFunction:

Javascript

Varitem = options & options. item? Options. Item: Data. Items. getat (0 );

_ Currentitem = item;

Tiles. currentitem = item; // store this in case the user pins the recipeElement. queryselector (". titlearea. pagetitle"). textcontent = item. Group. title;

Element. queryselector ("article. item-title"). textcontent = item. title;

Element. queryselector ("article. item-subtitle"). textcontent = item. preptime;

Element. queryselector ("article. item-image"). src = item. backgroundimage;

Element. queryselector ("article. item-image"). Alt = item. Partition title;

 

 

Task3-Modify app. onactivated

It is easy to create a secondary tile, but you also need to realize that when the application starts from the secondary tile, You need to navigate to the"Item-Detail"Page.

It is easy to create a secondary tile, but you also need to realize that when the application starts from the secondary tile, You need to navigate to the"Item-Detail"Page.

1.OpenDefault. js, FindApp. onactivatedFunction.

2.Add the highlighted code lines below to the comment"Initialize your applicationhere:

Javascript

// Todo: This application has been newlylaunched. initialize

// Your application here.

If (eventobject. Detail. Arguments! = ""){

Contosocookbook. activationargs = eventobject. Detail. arguments;

}

Else {

VaR remember = appdata. Current. roamingsettings. Values ["remember"];

Remember =! Remember? False: Remember;

 

If (remember ){

VaR location = appdata. Current. roamingsettings. Values ["location"];

If (typeof (location )! = "Undefined" & location! = ""){

Contosocookbook. activationargs = location;

}

}

}

Note:StartMetroApplication Time,Eventobject. Detail. KindWill start itCauseTell you,Eventobject. Detail. previusexecutionstateIt will tell you whether the application is terminated after the last running. Similarly, when an application starts from a secondary tile,Eventobject. Detail. ArgumentsProvide the activation parameter, which is in4PassedSecondarytileThe string of the constructor. Here, when the recipe data has been loaded (for example, when the secondary tile is selected, the APP has been run), navigate to the corresponding recipe, or when the recipe data is not loaded, store the parameter string so that the specified recipe is generated after the recipe data is loaded.

Task4-Fix a recipe

Next, test the changes and fix a recipe to the Start Screen. Make sure that the right recipe is displayed when the application is started from this tile.

1.PressF5Start the application in the debugger.

2.Open"Item-Detail"Page to view the selected recipe.

3.Scroll up the application bar from the bottom of the screen (or pressWin-z), Click"Pin recipe"Button.

4.In the confirmation dialog box, click"PIN to start"Button (figure2).

Figure2

Fixed auxiliary Tile

5.ReturnVisual StudioAnd stop debugging.

6.BackMetroStart the screen and make sure that there is a secondary tile on it, which represents a fixed recipe.

7.Click"Tap the secondary Tile", OKContosocookbookStart and display the corresponding recipe.

8.ReturnVisual StudioAnd stop debugging.

Note: ThisArticleThis is the script for Windows 8 online lab on msdn. It is for your reference only. If you want to experience the complete experiment, click the msdn online lab below

Http://msdn.microsoft.com/zh-cn/hh968278