Design and Development of Windows 8 Metro-application bar

In this experiment, you can learn more about contoso cookbook. You can add an application Program Bar, use it as a shortcut to use these features, and learn how to change the content of the application bar for each page of the application. Add an application bar

To enableContoso recipeYou can capture photos and videos and share them with other apps. First, we need to modify the user interface and add interfaces to access these functions. The application bar can achieve this goal well.Visual StudioA simple application bar has been embedded in the application, but this application bar is commented out by default. Now, remove the comment on the application bar, customize the application bar, and add some buttons. In the application bar, this is called adding some "commands ".

Task1-Add application bar

To display the application bar, first modifyDefault.htmlFile. Next, we will add three commands:Photo,VideoAndHome.

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

2. open the default.html file, find id as " Div label of "> appabr . Once a project is created, the application bar is automatically created in the project (note data-win-control = "winjs. UI. appBar attribute). However, the application bar is currently in the annotation state. Therefore, uncomment the application column.

3.The command in the application bar usesButtonAnd set its attributeData-win-control = "winjs. UI. appbarcommand". Each command contains multiple attributes.Section"Attribute is"Selection", Indicating that the command is displayed on the left side of the application bar;"Section"Attribute is"Global", Indicating that the command is displayed on the right side of the application bar. Generally, the application Bar contains only one command. Use the following commands to replace the default commands:

Html

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

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

<Button data-win-control = "winjs. UI. appbarcommand "data-win-Options =" {ID: 'home', label: 'home', icon: '', Section: 'global'}"> </button>

Note: In the application bar command, " label " attribute is used to set the text at the bottom of the command. " icon " is used to set the icon on the interface. For example, " camera " and " Home " is named in UI. the characters defined in the JS file and mapped to the character encoding in the segoe UI symbol character set. You can view these characters and start Windows 8 Character Map application, select segoe UI symbol in the drop-down font list ", scroll to the bottom of the page and you will immediately see many icons!

4.PressF5Start the application, scroll up from the bottom of the screen or pressWin-zTo view the application bar.

5.Confirm that the application Bar containsPhotoCommands andVideoCommand, includingHomeCommand,1.

Figure1

TheContoso cookbook

6.ReturnVisual StudioAnd stop debugging.

 

 

Task2-Display commands on each page

Now, the application columns on each page of the application are the same. However, in real life, you often want different commands to be displayed on different pages. In this experiment, we hope that,PhotoCommands andVideoCommand, that is,Itemdetailpage.htmlPage is displayed. To hide these two commands on other pages. To implement this function, we useWinjs. UI. AppBarThe object indicates the application bar, usingWinjs. UI. AppBarObject display and hide commands.

1.OpenGroupeditemspage. jsTo findCode.

2.Add the following statements to the Code:

Javascript

Varappbar = Document. queryselector ("# AppBar"). wincontrol;

AppBar. showonlycommands (["home"]);

Note:ShowonlycommandsThe method indicates that only the array is displayed in the application bar.IDThe specified command without displaying other commands. In this exampleGroupeditemspage.htmlWhen the file is displayed, onlyHomeCommand without displaying other commands.

3.On the project details page(Groupdetailpage. JS)To add the same statement.

4.OpenItemdetailpage. jsFile, add the following statement in the Code Section:

Javascript

Varappbar = Document. queryselector ("# AppBar"). wincontrol;

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

5.PressF5Run the application. Show the application bar on the homepage and check whether the page contains only oneHomeCommand.

6.Click a group name and the"Group-Detail"Page, the application bar appears again, check whether the application bar on this page only containsHomeCommand.

7.Click"Item-Detail"Page, the application bar is displayed on the page, and you can check whether all three buttons are displayed on the page,1.

8.ReturnVisual StudioAnd stop debugging.

 

Task3-Add a click handler for the command

Currently, the commands in the application bar only seem to be usable, but these commands cannot implement any function yet. In this task, we will write a click handler for these commands.

1.InDefault.htmlFileHomeCommand to add highlighted text:

Html

<Button data-win-control = "winjs. UI. appbarcommand "data-win-Options =" {ID: 'home', label: 'home', icon: '', Section: 'global ',Onclick: contosocookbook. navigatehome} "> </Button>

2.PressF5Start the application.

3.Click a recipe to go to"Recipe-Detail"Page.

4.Click"Home"Button to confirm whether to return to the home page.

Note:Added in the codeOnclickAttribute createdHomeButton andContosocookbook. navigatehomeThe connection between functions. However,Contosocookbook. navigatehomeWhere is the function defined? You canNavigator. jsFind the function in the file, which is near the bottom of the file. This function belongsContosocookbookNamespace, which can callWinjs. namespace. Define.Winjs. namespace. DefineIsWinjsTo avoid confusion in the global namespace.

5.ReturnVisual StudioAnd stop debugging.

6. In Solution Explorer, right-click the JS folder and run the "Add-new item" command to add a Javascript file named media. js to the project, as shown in figure 2 ).

Figure2

AddMedia. js

7.InMedia. jsAdd the following code:

Javascript

(Function (){

"Use strict ";

 

Vardtm = windows. ApplicationModel. datatransfer. datatransfermanager;

VaR capture = windows. Media. capture;

 

Winjs. namespace. Define ("Media ",{

Writable file: NULL, // photo or video to be shared

 

Sharephoto: function (){

DTM. showdeskui ();

},

 

Audio Video: function (){

DTM. showdeskui ();

}

});

})();

Note:Windows. ApplicationModel. datatransfer. datatransfermanager. showui UIFunction is used to display the shared user interface.Charms barSelect the share super button. This user interface will also appear. This Code enables the event handler to display the shared user interface when you select a photo or video command in the application bar. UseWinjs. namespace. DefineThe global namespace can be easily managed.

8.InDefault.htmlAdd the followingScriptElement:

Html

<SCRIPT src = "/JS/media. js"> </SCRIPT>

9.Add highlighted text to the photo and video commands in the application bar:

Html

<Button data-win-control = "winjs. UI. appbarcommand "data-win-Options =" {ID: 'photo ', label: 'photo', icon: '', Section: 'selection', Onclick: media. sharephoto} "> </Button>

<Button data-win-control = "winjs. UI. appbarcommand "data-win-Options =" {ID: 'video', label: 'video', icon: '', Section: 'selection', Onclick: media. Audio Video} "> </Button>

10.Run the application and click the recipe to go to"Item-Detail"Page.

11.The application bar is displayed on this page. ClickPhotoCommand to check whether it appears on the right side of the screenMetro. Similarly,VideoCommand to perform the same operation.

12.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