Windows8 Metro 設計與開發-搜尋與共用 (1)

在這個實驗中，我們將給Contoso Cookbook增加搜尋與共用支援。您將瞭解實現搜尋和共用Contracts的第一手經驗，而且您將理解這些Contracts是如何在Metro風格應用與Metro本身之間實現進階整合的。

 

增加菜譜共用

                                       

在練習1中，我們將為ContosoCookbook增加共用支援，將菜譜共用給其他應用。第一個菜譜必須共用兩種資料：包括菜譜名、配料和做法等的文本資料，以及包括菜譜圖片展示的映像資料。

任務1 –調用Share常用鍵

首先，讓我們看看在增加共用之前，在Contoso Cookbook中調用Share常用鍵的效果。

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

2.      按 F5 啟動ContosoCookbook。

3.      點擊其中一個菜譜，顯示“item-detail”頁面。

4.      如果使用的是觸控螢幕裝置，從右至左輕掃螢幕右邊緣；否則按Win-C鍵，顯示常用鍵工具列。

5.      點擊“Share”常用鍵，顯示Metro共用窗格。

6.      由於Contoso Cookbook目前未實現共用Contracts，所以共用窗格顯示“Contoso Cookbook can’t share（Contoso Cookbook不支援共用）”。

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

 

 

任務 2 – 實現菜譜共用

現在，我們已經看到應用未支援共用時報共用窗格。接下來，我們要給 Contoso Cookbook 增加共用Contracts，使之能夠共用菜譜資料。

1.      開啟itemDetailPage.js，將以下語句添加到對 ui.Pages.define 的調用之前（位置在檔案頂部附近）：

JavaScript

var _currentItem = null;

2.   將以下高亮顯示的語句插入到隔幾行後面的 ready 函數中：

JavaScript

varitem = options &&options.item ? options.item : data.items.getAt(0);

_currentItem = item;

element.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.shortTitle;

3.   現在將以下代碼插入到 ready 函數的結尾處：

JavaScript

vardtm=Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();

 

dtm.addEventListener("datarequested",function (e) {

varitem = _currentItem;

varrequest = e.request;

request.data.properties.title= item.title;

request.data.properties.description= "Recipe ingredients and directions";

 

    // Share recipe text

varrecipe = "INGREDIENTS\r\n";

 

item.ingredients.forEach(function(ingredient) {

        recipe += ingredient +"\r\n";

    });

 

recipe+= ("\r\nDIRECTIONS\r\n" + item.directions);

request.data.setText(recipe);

});

注意：共用是通過註冊DataTransferManager的DataRequested事件處理器實現的，當使用者啟用Share常用鍵時，就會觸發該事件。在這個例子中，當事件發生時，會調用DataPackage對象中e.request.data的setText方法，填寫內容表單的內容。當共用窗格顯示一個共用目標列表時，這個列表只包含接收內容輸入的共用目標。

 

4.      按F5啟動應用程式。

5.      點擊其中一個菜譜，顯示“recipe-detail”頁面。

6.      顯示常用鍵工具列，選擇Share常用鍵，顯示Metro的共用窗格。現在，共用窗格會顯示裝置安裝的共用目標列表——即接受共用源所提供資料的應用。

注意：如果還未安裝Windows8 SDK提供的共用目標樣本，現在可以安裝。應用的名稱是共用目標樣本應用，它可以示範共用目標應用的開發方法。更重要的是，它提供了一些測試共用目標，可以作為應用開發時的共用源，而且它接受映像、文字及其他資料類型。要安裝共用目標樣本，可以在Visual Studio中開啟並運行該應用。然後，當您選擇 Metro應用的Share常用鍵時，它就會顯示在共用目標列表中。

7.      在共用窗格中選擇一個共用目標，確認它能夠接收菜譜資料。 1 所顯示，Windows8 SDK的共用目標樣本應用接收了ContosoCookbook共用的菜譜內容。

圖1

共用目標樣本應用顯示共用的菜譜

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

 

任務 3  – 實現菜譜映像共用

 

Contoso Cookbook現在可以共用文字菜譜資料，但是由於每一個菜譜都附帶有映像，所以它應該要能夠接收映像。因此，接收映像的共用目標才能夠同時顯示菜譜內容及照片（假定共用目標帶有文字及映像）。我們修改一下共用代碼，使之支援位元影像和文字。

1.      在itemDetailPage.js中，轉到任務 2 所添加的DataRequested事件處理器。

2.      將以下代碼添加到處理器之後：

JavaScript

// Share recipe image

var image =document.querySelector(".item-image");

var uri = image.getAttribute("src");

 

if (uri.indexOf("http://") == 0)

uri = newWindows.Foundation.Uri(image.src); // Remote image

else

uri = newWindows.Foundation.Uri("ms-appx:///" +image.getAttribute("src")); // Local images

 

var reference = Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(uri);

request.data.properties.thumbnail =reference;

var deferral = request.getDeferral();

request.data.setBitmap(reference);

deferral.complete();

說明：要在 HTML 頁面上共用映像，需要將映像 URL 傳遞給RandomAccessStreamReference.createFromUri，然後再將返回的RandomAccessStreamReference傳遞給DataPackage.setBitmap。createFromUri本來是同時支援本地及遠程映像，但是在Windows8消費者預覽版中，它還不支援。代碼中的 if-else 子句只是解決這個版本的問題，Windows 8最終版不存在這個問題。

3.      按 F5 啟動應用程式。

4.      點擊其中一個菜譜，顯示“recipe-detail”頁面。

5.      顯示常用鍵工具列，選擇Share常用鍵，顯示 Metro 的共用窗格。

6.      選擇共用窗格所列的一個共用目標，確認它接收了菜譜映像。 2 所示，共用目標樣本應用接收了ContosoCookbook的菜譜映像。

圖2 

共用目標樣本應用顯示共用菜譜映像 

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

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

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