使用jQuery Mobile實現新聞瀏覽器（3）

在本教程的前兩篇文章中，筆者分別向你們介紹了使用jQuery Mobile框架如何去設計手機新聞瀏覽器，其中實現了一個WEB版本的新聞瀏覽器，在本教程的最後一篇中，將講解如何將已實現的web版本的新聞瀏覽器遷移到Android手機中去，注意的是，本文但願讀者擁有一點基礎的Android知識。

遷移到Android應用中去

　　在Android應用中，將會使用index.html做爲界面的佈局，咱們將編寫一個Android的Activity類將index.html整合到android應用中去。

　　修改index.html

　　首先，將index.html中的NEWS_URI修改：

var NEWS_URI = ' http://rss.news.yahoo.com/rss/ ' ;

 　　由於咱們在這裏再也不須要使用bridge.php了，由於咱們將index.html整合到了Android應用中去，所以再也不存在跨域ajax訪問問題，接下來做以下修改：

var EMPTY = '' ; ... function changeLocation(varURI) {   showProgress();   $.get(EMPTY,function(data){     window.location = varURI;   }); }

 　　changeLocation()方法將會在android.webkit.WebViewClient中被調用。這個方法的主要做用是當重新聞分類頁面跳轉到新聞詳細頁面時使用。

　　一、首先經過showProgress()來顯示進度圖標的等待狀態；

　 　二、jQuery的get()方法中其實是一個特定的jQuery ajax()方法，在get方法中，咱們傳入一個空的字符串和一個回調的事件句柄，去設置window.location爲咱們要查看的具體新聞內容頁面 的地址。當新聞內容詳細頁加載完畢後，就會替換掉等待的圖標，顯示新聞內容頁的詳細內容；

　　三、由於在web版本中，是存在瀏覽器自己的進度條，所以changeLocation方法倒不必定須要，但在手機設備上，有一個等待的圖標是能給用戶良好的用戶體驗的。

　　編寫Activity類

　　接下來，編寫NewsActivity類，代碼以下：

package com.news; import android.app.Activity; import android.webkit.WebView; import android.os.Bundle; ... public class NewsActivity extends Activity {     WebView mWebView;   publicvoid onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.main);     mWebView = (WebView) findViewById(R.id.webview);     mWebView.setWebViewClient(new NewsClient());     mWebView.getSettings().setJavaScriptEnabled(true);     mWebView.getSettings().setDomStorageEnabled(true);     mWebView.loadUrl("android_asset/www/index.html");   }   ... }

 　　一、首先在onCreate方法中，調用了setContentView方法加載了res/layout文件夾下的R.layout.main佈局文件；

　 　二、接下來，咱們經過findViewById(R.id.webview)獲得了一個WebView控件的實例，並設計一個自定義的 WebViewClient實例做爲給WebView控件的參數，這個自定義的WebViewClient咱們命名爲NewsClient,咱們稍後會介 紹。接着咱們設置這個WebView容器能支持Javascript和Dom；

　　三、最後，使用loadUrl將以前咱們作的android_asset/www/index.html加載進來，在新聞詳細內容頁中，當用戶點後退按鈕後，會回到新聞分類頁，在Android中，咱們能夠捕捉其onKeyDown事件代碼，以下：

public class NewsActivity extends Activity {     WebView mWebView;   publicboolean onKeyDown(int keyCode, KeyEvent event) {     if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {       mWebView.goBack();       returntrue;     }     returnsuper.onKeyDown(keyCode, event);   }   ... }

 　　接下來看下咱們如何編寫一個自定義的WebViewClient，代碼以下：

public class NewsActivity extends Activity {     WebView mWebView;   privateclass NewsClient extends WebViewClient {     publicboolean shouldOverrideUrlLoading(WebView view, String url) {       view.loadUrl("javascript:changeLocation('"+ url +"')");       returntrue;     }   } ... }

 　 　首先，咱們繼承了WebViewClient這個Android內置的瀏覽器類，並重寫了其中的shouldOverrideUrlLoading方 法，在這個方法中，調用了以前寫的changeLocation方法，而若是咱們不定義本身的WebViewClient,那麼新聞詳細內容頁將會在顯示 在一個單獨的新打開的瀏覽器中，而咱們但願新聞內容頁只是顯示在同一個瀏覽器頁面中。

　　AndroidManifest.xml的配置

　　接下來，咱們來看下AndroidManifest.xml的配置：

<? xml version = " 1.0 " encoding = " utf-8 " ?> < manifest xmlns:android = " http://schemas.android.com/apk/res/android "    package = " com.news " android:versionCode = " 1 " android:versionName = " 1.0 " >      < application android:icon = " @drawable/icon " android:label = " @string/app_name " >        < activity android:name = " .NewsActivity " android:configChanges = " orientation|keyboardHidden "         android:label = " @string/app_name " >            < intent - filter >              < action android:name = " android.intent.action.MAIN " />              < category android:name = " android.intent.category.LAUNCHER " />            </ intent - filter >        </ activity >      </ application >      < uses - permission android:name = " android.permission.INTERNET " /> </ manifest > For a general discussion on the AndroidManifest.xml file refer to the official reference. In that file, there are two particular items worthy of commenting on.

 　　一、以上實際上是一個很典型的Android配置文件，但注意的是，咱們使用了configChanges屬性，這個屬性是設定了當手機的屏幕由橫屏與豎屏切換時以及當手機鍵推上合上時，應用程序的顯示界面也會隨着改動，而不是被銷燬；

　　二、由於咱們要訪問互聯網，因此要在配置文件中配置訪問網絡，必須添加android.permission.INTERNET權限。

　　strings.xml

<? xml version = " 1.0 " encoding = " utf-8 " ?> < resources >    < string name = " app_name " > News </ string > </ resources >

 　　在Strings.xml的資源文件中，定義了應用程序的名稱，這個名稱將會顯示在程序的啓動欄，應用程序的標題欄和應用程序的管理設置中，以下面圖所示：

　　設計應用程序的啓動按鈕

　 　接下來建立應用程序的啓動按鈕， Android官方提供了按鈕設計指南(http://developer.android.com/guide/practices /ui_guidelines/icon_design.html),在其中能夠下載各種Adobe的PSD格式按鈕文件，咱們下載了其中的 icon_templates-v2.0.zip而且選擇了以下兩個按鈕做爲模版 ，而且經過photoshop在上面添加了News的文字，以後根據Android的指引，把這些按鈕以低，中，高三個分辨率分別設計複製一份，它們的尺 寸分別爲36*36,48*48和72*72pixel,分別放到res\drawable-ldpi，res\drawable-mdpi和res \drawable-hdpi文件夾中。

　　Android應用的部署導入

　　到此爲止，咱們已經把Android版本的程序寫完了，接下來說解下如何將文中附件的Android代碼導入到Eclipse中以方便你們閱讀。代碼使用以下的Android SDK和工具開發：

　　　　Android SDK revision 8. 　　　　Eclipse IDE version 3.5. 　　　　Android Development Tools (ADT), version 8.0.1.

　 　項目能在Android 2.2,2.3上運行。首先咱們在Eclipse中選擇「Importing The Project」,而後將附件中的工程項目導入，在導入後，記得在Window -> Preferences -> Android中，選擇編譯項目的Android的SDK,這裏選擇Android的SDK，以下圖：

　　最後介紹下Android項目的文件結構以下圖：

　　Android新聞瀏覽器的實際運行效果圖

　　下面是在Android上和iphone 4上分別運行的效果圖，左邊的是iphone 4，右邊的是Android，能夠看到，使用jQuery Mobile設計出來的項目的確有很好的兼容性。

　　總結

　　在本系列教程中，介紹瞭如何使用jQuery Mobile框架以及其餘jQuery插件設計了一個基於WEB版本的新聞RSS閱讀瀏覽器，最後還指導如何將其遷移到Android上，讀者能夠從中學到大量關於jQuery Mobile的實用知識和技巧，請點擊這裏下載本文的附件。