Windows8 Metro 設計與開發-應用程式欄

在本實驗中，您可以加深對 Contoso Cookbook 的理解.您可以添加一個應用程式欄，把它作為使用這些功能的捷徑，並瞭解如何對應用的每個頁面改變應用程式欄的內容。 添加一個應用程式欄

                                         

為了能讓 Contoso Recipe 使用者捕捉照片和視頻，並分享到其他應用中。我們首先需要修改使用者介面，添加訪問這些功能的介面。應用程式欄可以很好地實現這一目標。Visual Studio 已經在應用中嵌入了一個簡單的應用程式欄，但是預設情況下這個應用程式欄被注釋掉了。現在，我們取消對應用程式欄的注釋，自訂該應用程式欄，添加一些按鈕，在應用程式欄中這稱為添加一些“命令”。

任務 1 – 添加應用程式欄

為了顯示應用程式欄，我們首先修改 default.html 檔案。接下來，我們將會添加三個命令：Photo、Video 和 Home 。

1.       在 Visual Studio 中，開啟實驗 3 中已經完成的 ContosoCookbook 項目。如果您沒有完成實驗 3 或者希望從參考副本開始操作，可以在原始材料中找到該實驗的完整版本。

2.       開啟 default.html 檔案，在頁面底部附近找到 ID 為“appabr”的 DIV 標籤。一旦建立項目，就會自動在項目中建立應用程式欄（注意 data-win-control=”WinJS.UI.AppBar” 屬性），但是，目前應用程式欄處於注釋狀態。因此，首先取消對應用程式欄的注釋。

3.       應用程式欄的命令以 BUTTON 元素的形式顯示，並設定其屬性為 data-win-control=”WinJS.UI.AppBarCommand”。每個命令都包含多種屬性，其中，“section”屬性為“selection”時，表示命令顯示在應用程式欄左側；“section”屬性為“global”時，表示命令顯示在應用程式欄右側。通常情況下，應用程式欄只包含一個命令。用下面的這些命令替換預設的命令：

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>

注意：在應用程式欄的命令中，“label”屬性用於設定命令底部的文本，“icon”屬性用於設定介面上的表徵圖。像“camera”和“home”這樣的名稱是在 WinJS 的 ui.js 檔案中定義的，並映射到 Segoe UI Symbol 字元集中的字元編碼。您可以自己查看一下這些字元，啟動 Windows 8 的 Character Map 應用程式，在下拉字型清單中選擇“Segoe UI Symbol”，並滾動到頁面底部，就會立刻看到許多表徵圖！

4.       按 F5 啟動應用程式，從螢幕底部向上滾動滑鼠或按 Win-Z，便可以看到應用程式欄。

5.       確認應用程式欄左側包含 Photo 命令和 Video 命令，右側包含 Home 命令， 1所示。

圖 1

包含應用程式欄的 Contoso Cookbook

6.       返回 Visual Studio並停止調試。

 

 

任務 2 – 顯示每個頁面的命令

現在，應用中每個頁面的應用程式欄都是一樣的。但是，在實際生活中，您往往希望不同的頁面顯示不同的命令。在本實驗中，我們希望只有在使用者查看菜譜時，Photo 命令和 Video 命令才顯示出來，也就是說，itemDetailPage.html 頁面才顯示出來。在其他頁面中，要隱藏這兩個命令。為了實現這一功能，我們使用 WinJS.UI.AppBar 對象表示應用程式欄，採用 WinJS.UI.AppBar 對象的方法顯示和隱藏命令。

1.       開啟 groupedItemsPage.js，找到實現顯示功能的代碼部分。

2.       在代碼中添加下列語句：

JavaScript

varappbar = document.querySelector("#appbar").winControl;

appbar.showOnlyCommands(["home"]);

注意：showOnlyCommands 方法表示應用程式欄只顯示數組中 ID 所指定命令，而不顯示其他命令。在本例中，表示當 groupedItemsPage.html 檔案顯示的時候，只顯示 Home 命令，而不顯示其他命令。

3.       在項目詳細資料頁面 (groupDetailPage.js) 中，添加相同的語句。

4.       開啟 itemDetailPage.js 檔案，在代碼部分添加下面的語句：

JavaScript

varappbar = document.querySelector("#appbar").winControl;

appbar.showOnlyCommands(["photo", "video", "home"]);

5.       按 F5 運行應用程式。在首頁中顯示應用程式欄，確認是否頁面中只包含一個 Home 命令。

6.       點擊一個組名，便會出現“group-detail”頁面，在頁面中再次出現應用程式欄，確認該頁面的應用程式欄中是否只包含 Home 命令。

7.       點擊菜譜的“item-detail”頁面，在頁面中將顯示應用程式欄，確認是否在該頁面中三個按鈕都能顯示出來， 1 所示。

8.       返回 Visual Studio並停止調試。

 

任務 3 – 為命令添加點擊處理常式

現在，應用程式欄中的命令只是看起來可以使用，但是這些命令還無法實現任何功能。在本任務中，我們將為這些命令編寫點擊處理常式。

1.       在 default.html 檔案的 Home 命令中添加高亮顯示的文本：

HTML

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'home', label:'Home', icon:'', section: 'global', onclick: ContosoCookbook.navigateHome}"></button>

2.       按 F5 啟動應用程式。

3.       點擊某個菜譜，進入“recipe-detail”頁面。

4.       在該頁面的應用程式欄中點擊“Home”按鈕，確認是否返回首頁。

注意：在代碼中添加的 onclick 屬性建立了 Home 按鈕與 ContosoCookbook.navigateHome 函數之間的串連，但是，ContosoCookbook.navigateHome 函數是在哪裡定義的呢？您可以在 navigator.js 檔案中找到該函數，該函數在檔案底部附近。該函數屬於 ContosoCookbook 命名空間，可以調用它所包含的 WinJS.Namespace.define。WinJS.Namespace.define 是一個WinJS 方法，用於對命名空間中的函數進行分組，從而可以避免全域命名空間中出現混亂的現象。

5.      返回 VisualStudio並停止調試。

6.      在方案總管中，右鍵點擊 js 檔案夾，使用“Add - New Item”命令，在項目中添加一個名為 media.js 的 JavaScript 檔案（ 2所示）。

圖 2

在項目中添加  media.js

7.      在 media.js 中添加下面的代碼：

JavaScript

(function () {

    "use strict";

 

vardtm = Windows.ApplicationModel.DataTransfer.DataTransferManager;

var capture = Windows.Media.Capture;

 

WinJS.Namespace.define("media", {

shareFile: null, // Photo or video to be shared

 

sharePhoto: function () {

dtm.showShareUI();

        },

 

shareVideo: function () {

dtm.showShareUI();

        }

    });

})();

注意：Windows.ApplicationModel.DataTransfer.DataTransferManager.showShareUI 函數用於顯示共用的使用者介面，如果使用者在 charms bar 中選擇共用常用鍵，同樣會出現該使用者介面。這段代碼的作用是當使用者在應用程式欄中選擇照片或視頻命令時，使事件處理常式顯示共用的使用者介面。使用 WinJS.Namespace.define 可以使全域命名空間易於管理。

8.       在 default.html 檔案中添加下列 SCRIPT 元素：

HTML

<script src="/js/media.js"></script>

9.       在應用程式欄的照片和視頻命令中添加高亮顯示的文本：

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.shareVideo}"></button>

10.   運行應用，並點擊菜譜轉向“item-detail”頁面。

11.   在該頁面中可以顯示應用程式欄，點擊 Photo 命令，確認在螢幕右側是否出現 Metro 的共用使用者介面。同理，對 Video 命令進行同樣的操作。

12.   返回 Visual Studio並停止調試。

注意:本文章為msdn上windows8線上實驗的指令碼，僅供學習參考。如果想體驗完整實驗可以點擊以下msdn的線上實驗室

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