Freigeben über


將部落格轉成 Windows Store App - 並加入「搜尋」功能

以下這個分成五個部份的 step-by-step 文章,是個學習 Windows 8 App 開發很好的出發點;而文章的第五個部份: 建立部落格閱讀程式,則提供了開發者直接將某部落格轉成 Windows 8 App 的一條捷徑。
https://msdn.microsoft.com/zh-tw/library/windows/apps/hh974581.aspx 
image
 
本文的目的即是:
1. 修改 Sample Code 以讀取自訂的 Blogs RSS/Atom feeds
2. 加入Search contract 讓使用者能搜尋文章內文部落格標題
開始 Coding!
(若想直接觀看結果或下載程式碼請至: 程式碼下載- 將 Blogs 轉為 Windows 8 App)
1. 修改 Sample Code 以讀取自訂的 Blogs RSS/Atom feeds
首先至 Windows 8 App 範例程式集散地取得 Sample Code,另外有 JavaScript 版本可供下載,以下我則以 C# 為例作說明。
image
下載 C# Sample Code 並解壓完畢,以 Visual Studio 2012 打開 GettingStarted_CSTutorials.sln 後,先將 WindowsBlogReader 設為起始專案,然後按 F5 ,確認可正常編譯並能順利執行及開啟第一個畫面:
image
接下來就要把我們想訂閱的部落格加進去了!
首先當然要準備好某個部落格的 RSS/Atom feeds,舉例而言本站文章的 RSS 即為 https://blogs.msdn.com/b/mengtsai/rss.aspx
image
然後在 FeedData.cs 的 GetFeedsAsync() 方法中,將您要訂閱的RSS/Atom 連結加入:
image
就這樣! 我們已經完成本文章的第一個目的了! 微笑
以下是 run 起來的樣貌:
imageimage
接下來是重頭戲! 當您的 Blogs 數目及文章數眾多時,提供一個合適的搜尋功能就非常重要了:
2. 加入Search contract 讓使用者能搜尋文章內文部落格標題
要在您的 Windows Store App 加入 Search contract 有幾種不同的方式,其中一種描述在我的另一篇文章中,在這我介紹另一種方式,您只要三個步驟就能加入搜尋功能!
步驟一: 首先打開 Package.appxmanifest 檔案,並加入「搜尋」 (Search) 的宣告 (Declaration):
image 
步驟二: 現在要作的是,讓使用者能夠搜尋某部落格的文章內文 (Content),並將含有此搜尋字串的文章列出來。因為要搜尋文章內文,我們就先打開 SplitPage.xaml.cs 檔案,然後在 SplitPage 的 constructor 中加入一個 event handler,來接收使用者由 Charms bar->搜尋->鍵入字串->然後按 Enter 的動作:
     Windows.ApplicationModel.Search.SearchPane.GetForCurrentView().QuerySubmitted <br>        += SplitPage_QuerySubmitted; 

image

接下來我們要將 feedData 設為全域變數 (global variable), 這樣在 SplitPage_QuerySubmitted() 方法中才能存取到這個變數,因此我們在 SplitPage class 的第一行即宣告此變數,然後記得在 LoadState() 及 SaveState() 這兩個 methods 中拿掉 feedData 的宣告:

image

image

image

步驟三: 就是實作 SplitPage_QuerySubmitted()  方法了:
     void SplitPage_QuerySubmitted(
           Windows.ApplicationModel.Search.SearchPane sender, 
           Windows.ApplicationModel.Search.SearchPaneQuerySubmittedEventArgs args)
    {
        this.DefaultViewModel["Items"] = from dynamic item in feedData.Items                                         where<br>                                         item.Content.Contains(args.QueryText)<br>                                         select item; 

    }
您可以看到我是使用 LINQ 語法在 feedData.Items 的 Content 中,檢查是否有吻合使用者的搜尋字串 (arg.QueryText),然後透過 DefaultViewModel 作顯示,以下是 run 起來的畫面:

image

你可以想見,這個搜尋的功能可以進一步的延伸下去,只要修改 LINQ 語法,並在合適的 page 之中作修改即可。
舉例而言,假設我的部落格數目非常多,我想提供使用者搜尋部落格的標題 (Title) 的話,同樣是三個步驟如下:
步驟一: 打開 ItemsPage.xaml.cs 檔案,並在 ItemsPage() 的 constructor 之中加入一個 event hander :
   Windows.ApplicationModel.Search.SearchPane.GetForCurrentView().QuerySubmitted <br>      += ItemsPage_QuerySubmitted; 
步驟二: 將 feedDataSource 設為全域變數並在 LoadData() 中將宣告拿掉。

image

步驟三: 實作 ItemsPage_QuerySubmitted() 方法如下,您會注意到我修改了 LINQ statement ,改由在 feedDataSource.Feeds 中找尋 Title (標題):
     void ItemsPage_QuerySubmitted(
    Windows.ApplicationModel.Search.SearchPane sender,               
     Windows.ApplicationModel.Search.SearchPaneQuerySubmittedEventArgs args)
    {
       this.DefaultViewModel["Items"] = from dynamic item in feedDataSource.Feeds                                        where<br>                                        item.Title.Contains(args.QueryText)<br>                                        select item; 

    }
完成之後,搜尋部落格標題的結果如下:

image

We are done! 微笑
程�����碼下載 (Source Code download)