使用jQuery Mobile實現手機新聞瀏覽器(第一章)(1)

jQuery Mobile項目是jQuery項目下的在移動開發方面的又一力作.在本文中，筆者將帶你一步步更深入學習使用jQuery Mobile架構去實現一個能在Android手機上啟動並執行新聞瀏覽器，這個新聞瀏覽器會讀取Yahoo網站上以RSS方式提供的新聞。

jQuery Mobile項目目前的最新版本是alpha 3版本，該項目的主要目的是為了能輕易地實現能在不同的移動作業系統上啟動並執行應用程式，比如能在Android,iOS和黑莓手機上運行。而本文的重點是介紹如何在Android上運行程式。本系列文章將以如下的結構進行教學：

首先，我們會向大家介紹jQuery Mobile中的基本的UI架構元素。為了達到這個目的，我們先會學習如何做一個Web應用，這個Web應用使用了Ajax和php技術，向Yahoo的伺服器發起請求，然後會把Yahoo的RSS返回的新聞列表，其實是XML格式的檔案返回進行解析。其中我們會學習使用jquery-dotimeout-plugin這個外掛程式去實現當不斷有最新的新聞返回時，而呈現的過渡漸層效果。同時我們還會使用DST.js plugin這個外掛程式，去儲存使用者選擇的要閱讀的新聞分類。這個Web應用程式套件組合括了一個HTML檔案，jQuery Mobile的庫檔案和jQuery外掛程式，同時其中用到了php程式去發起請求並且將請求返回給html檔案。最後我們提供了該應用程式在Android,iOS上的實際，以說明jQuery Mobile產生的應用的效果在不同的系統上看起來都是一致的。

在教學系列的第2、3部分，將介紹如何將我們已經做好的web應用移植到Android上去。這裡我們使用的是Android系統中的android.webkit.WebView對象容器去運行我們已經實現的HTML頁面，這是一個十分方便的實現方法，同時，這裡的修改只是把之前用PHP實現的ajax實現的請求改為真實的Yahoo新聞的RSS地址即可，我們也會介紹如何去設計Android的一些按鈕以及其中的技巧。

項目的頁面結構介紹

我們先來看下項目的頁面結構，先有個初步的認識。首先，呈現在使用者的第一個頁面，是列出了各個分類的最新的一條新聞，如：

在中，使用了jQuery Mobile的split list控制項，分成了左右兩個地區。其中左邊的是顯示了使用者選擇的新聞分類，每個分類下面顯示了最新的一條新聞，大概每隔2秒，就會以漸層過渡效果顯示最新的另外一條新聞。而每個分類的右邊有一個交叉的表徵圖，當使用者點這個表徵圖時，就會把這個分類刪除掉。此外，可以通過最上方的Add表徵圖去增加一個分類。

當使用者點了增加的按鈕後，出現如：

在中，使用者選擇下拉式清單中自己喜歡的新聞分類，然後點選“Get Category”按鈕，這樣就會將該新聞分類添加到使用者喜愛的新聞分類中去。

而點每個分類的標題，則可以在另外一個頁面中列出該分類下的所有最新新聞，如所示：

而每條新聞都有相關的新聞圖片，當點每張新聞圖片時，會跳轉到新聞的詳細串連頁面，如：

要注意的是，在我們的web應用和Android程式中，當開啟了新聞詳細頁面後，如果使用者要返回，則必須點後退按鈕或者是手機上的後退按鈕，將會返回到分類目錄的首頁中。

下面這個圖清晰地列出了整個流程：

注意在中，在頁面的過渡之間，我們使用了一個小的等待的表徵圖，這個在行動裝置上是十分常見的技巧，因為行動裝置資源有限不象平常的web應用一樣，可能有的時候要讓使用者等待，這個時候用一個等待表徵圖告訴使用者現在的裝載進度，是一個很好的使用者體驗。