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

增加菜譜搜尋

在練習 2 中，我們為Contoso Cookbook增加搜尋支援，使使用者可以使用Search常用鍵搜尋菜譜資料。例如，如果使用者想要尋找所有含有糖的菜譜，那麼他可以調用Search常用鍵，在搜尋方塊中輸入“sugar”，然後就會顯示一個含糖菜譜列表。

任務 1 –調用Search常用鍵

在為Contoso Cookbook增加搜尋支援之前，我們先來瞭解一下當Contoso Cookbook處於前端時調用搜尋 UI 的效果。

1.      按 F5 啟動應用程式。

2.      如果您使用觸控螢幕裝置，那麼從右至左輕掃螢幕左邊緣，或者按Win-C 鍵，顯示常用鍵工具列。

3.      點擊 Search 常用鍵，顯示 Metro 搜尋窗格。

4.      在搜尋方塊中輸入“sugar”（不帶雙引號），按斷行符號鍵，或者點擊搜尋方塊右邊的放大鏡表徵圖。

5.      這時 Windows 8 會顯示“No apps match your search.（無匹配的應用）”如果增加了搜尋支援，搜尋結果將會發生變化。

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

 

任務 2 –增加搜尋支援

要實現搜尋，您必須為應用編寫一個搜尋Contracts。Visual Studio 將會協助完成大部分的工作，將 JavaScript contract插入到應用中。修改JavaScript，就可以實現應用資料的特定域搜尋功能。這個過程很簡單，具體見以下幾個步驟。

1.      右鍵點擊Solution Explorer的html檔案夾，選擇“Add - New Item”命令，添加一個搜尋Contractsearch.html， 3 所示。

圖3

添加搜尋Contracts

2.      Visual Studio 會在html 檔案夾建立3個檔案：search.html、search.css和search.js。將search.css 移動到項目的 css 檔案夾，將 search.js 移動到項目的 js 檔案夾。

3.      在default.html中添加以下語句，保證應用啟動時能夠載入search.js：

HTML

<scriptsrc="/js/search.js"></script>

4.      開啟search.js，找到searchData函數。這個函數是在使用者通過Search常用鍵發起搜尋時所調用搜尋Contracts的一部分。需要修改這個函數的代碼，才能實現菜譜搜尋。在函數最後是使用Regex調用三次match的return語句，要將它修改為：

JavaScript

return (item.title.match(regex) ||item.directions.match(regex));

注意：上面的代碼會在ContosoCookbook中搜尋在每一個菜譜的標題與做法屬性，找到與搜尋方塊所輸入內容相匹配的菜譜。搜尋內容會通過參數queryText傳遞給searchData函數。如果想要將搜尋範圍擴大到其他菜譜屬性，您可以修改這個參數。

5.      還是在search.js中，找到itemInvoked函數。當使用者選擇搜尋結果列表ListView的一個項目時，就會調用這個函數。去掉nav.navigate調用語句之前的注釋符，並將它修改為轉到itemDetailPage.html：

JavaScript

nav.navigate("/html/itemDetailPage.html",{ item: item.data });

6.      開啟search.html，其中有一段HTML 程式碼定義了搜尋結果的顯示方式。找到類設定為“item”的 DIV，在該元素中找到類設定為“item-content”的 DIV。將該 DIV 的內容（包括 1 個 H3 元素和 2 個 H4 元素）替換為以下語句：

HTML

<h3 class="item-title win-type-ellipsis"data-win-bind="innerHTML: shortTitlesearch.markText"></h3>

<h4 class="item-subtitlewin-type-x-small win-type-ellipsis">

    Preparation time:<spandata-win-bind="textContent: preptime"></span>minutes

</h4>

7.      還是在search.html中，將 LINK 元素的引用地址修改為search.css，使它引用css檔案夾的search.css（在第 2 步時已將它移到這個檔案夾）：

HTML

<link href="/css/search.css"rel="stylesheet">

8.      開啟search.css，添加下面高亮顯示的代碼。它們的效果是稍微增大搜尋結果所顯示菜譜映像的尺寸，但是同時保證映像仍然保持原來的尺寸比例：

CSS

.search section[role=main] .resultslist.item {

   /* Define a grid with columns for an icon, spacing and item details */

-ms-grid-columns:62px 8px 1fr;

   -ms-grid-rows: 1fr;

   display: -ms-grid;

   height: 100%;

   width: 100%;

}

 

.search section[role=main] .resultslist.item .item-image {

   -ms-grid-column: 1;

   -ms-grid-row: 1;

height:45px;

   margin-top: 5px;

width:60px;

}

9.      按 F5 啟動應用程式。

10.  顯示常用鍵工具列。

11.  點擊“Search”常用鍵，顯示 Metro 的搜尋窗格。

12.  在搜尋窗格頂部的搜尋方塊中輸入“rice”（不帶雙引號），然後按斷行符號鍵，或者點擊搜尋方塊右邊的放大鏡表徵圖。

13.  確認搜尋結果中出現 4 個菜譜（ 4 所示）。

 

 

 

圖4

搜尋“rice”的結果

14.  選擇其中一個菜譜，確認菜譜細節顯示。

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

 

任務 3 –最佳化搜尋結果頁面

到目前為止，一切正常。在VisualStudio中添加搜尋Contracts非常簡單。進行一些小修改，就可以實現ContosoCookbook應用的搜尋功能。但是，您是否注意到搜尋結果頁面頂端的奇怪術語？它並沒有顯示具體的組名，如“Chinese”和“Italian”，而是顯示“Group 1”、“Group 2+”等。只要簡單地修改 search.js，就可以修改顯示結果。

1.      開啟search.js，找到檔案頂部的備註陳述式“TODO: Replace or remove examplefilters.”。

2.      將注釋下面的兩行代碼（兩次調用this.filters.push）替換為以下語句：

JavaScript

data.groups.forEach(function (group) {

this.filters.push({ results: null, text:group.title, predicate: function (item) { return item.group.key === group.key;} });

}, this);

注意：這些語句將 Visual Studio 產生的寫入程式碼組名替換為應用的菜譜分組。

3.      重新啟動應用，再次搜尋“rice”。這時頁面頂部的萬用群組名會被替換為菜譜組名， 5 所示。

圖5

帶有菜譜分組標題的搜尋結果 

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

 

任務 4 –添加搜尋建議

我們給搜尋體驗作最後一個改進，在使用者在搜尋方塊輸入搜尋索引鍵時提供一些建議。這很容易實現；我們只需要添加一個SuggestionsRequested事件處理器。方法如下：

1.      開啟search.js，在檔案底部（onquerysubmitted事件處理器之後）添加以下函數：

JavaScript

appModel.Search.SearchPane.getForCurrentView().onsuggestionsrequested= function (eventObject) {

var text =eventObject.queryText.toLowerCase();

var terms = ["salt","pepper", "water", "egg", "vinegar","flour", "rice", "oil"];

 

terms.forEach(function(term) {

      if (term.indexOf(text) == 0) {

              eventObject.request.searchSuggestionCollection.appendQuerySuggestion(term);}

   });

};

注意：上面所添加代碼為salt、pepper、water、egg、vinegar、flour、rice和oil等單詞提供模式比對搜尋建議。如果使用者輸入“sa”，那麼單詞salt就會顯示在搜尋窗格中，作為建議的補全詞彙。當然，我們可以添加更多的建議。如果想要在使用者輸入“ke”時顯示ketchup，那麼只需要將這個詞添加到列表中。

2.      重新啟動應用，搜尋“vinegar”。確認“vinegar”出現在搜尋方塊下面的建議列表中， 6 所示。

圖6

搜尋建議執行效果 

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

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

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