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

在本教程的前兩篇文章中，筆者分別向大家介紹了使用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中被調用。這個方法的主要作用是當從新聞分類頁面跳轉到新聞詳細頁面時使用。

1、首先通過showProgress()來顯示進度表徵圖的等待狀態;

2、jQuery的get()方法中實際上是一個特定的jQuery ajax()方法，在get方法中，我們傳入一個空的字串和一個回調的事件控制代碼，去設定window.location為我們要查看的具體新聞內容頁面的地址。當新聞內容詳細頁載入完畢後，就會替換掉等待的表徵圖，顯示新聞內容頁的詳細內容;

3、因為在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; 
  
 
  
  public void 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"); 
  
  } 
  
  ... 
  
} 
 

1、首先在onCreate方法中，調用了setContentView方法載入了res/layout檔案夾下的R.layout.main布局檔案;

2、接下來，我們通過findViewById(R.id.webview)得到了一個WebView控制項的執行個體，並設計一個自訂的WebViewClient執行個體作為給WebView控制項的參數，這個自訂的WebViewClient我們命名為NewsClient,我們稍後會介紹。接著我們設定這個WebView容器能支援Javascript和Dom;

3、最後，使用loadUrl將之前我們做的android_asset/www/index.html載入進來，在新聞詳細內容頁中，當使用者點後退按鈕後，會回到新聞分類頁，在Android中，我們可以捕捉其onKeyDown事件代碼，如下：

 

  
public class NewsActivity extends Activity { 
  
    WebView mWebView; 
  
  public boolean onKeyDown(int keyCode, KeyEvent event) { 
  
    if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) { 
  
      mWebView.goBack(); 
  
      return true; 
  
    } 
  
    return super.onKeyDown(keyCode, event); 
  
  } 
  
  ... 
  
} 
 

接下來看下我們如何編寫一個自訂的WebViewClient，代碼如下：

 

  
public class NewsActivity extends Activity {  
  
    WebView mWebView;  
  
  private class NewsClient extends WebViewClient {  
  
  
  
    public boolean shouldOverrideUrlLoading(WebView view, String url) {  
  
      view.loadUrl("javascript:changeLocation('" + url + "')");  
  
      return true;  
  
    }  
  
  }  
  
...  
  
}  
 

首先，我們繼承了WebViewClient這個Android內建的瀏覽器類，並重寫了其中的shouldOverrideUrlLoading方法，在這個方法中，調用了之前寫的changeLocation方法，而如果我們不定義自己的WebViewClient,那麼新聞詳細內容頁將會在顯示在一個單獨的新開啟的瀏覽器中，而我們希望新聞內容頁只是顯示在同一個瀏覽器頁面中。