jquery mobile android浏覽器,使用jQuery Mobile實作新聞浏覽器（3）

【IT168 技術】在本教程的前兩篇文章中，筆者分别向大家介紹了使用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類，代碼如下：

packagecom.news;

importandroid.app.Activity;

importandroid.webkit.WebView;

importandroid.os.Bundle;

...

publicclassNewsActivityextendsActivity...{

    WebView mWebView;

publicvoidonCreate(Bundle savedInstanceState)...{

super.onCreate(savedInstanceState);

    setContentView(R.layout.main);

    mWebView=(WebView) findViewById(R.id.webview);

    mWebView.setWebViewClient(newNewsClient());

    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事件代碼，如下：

publicclassNewsActivityextendsActivity...{

    WebView mWebView;

publicbooleanonKeyDown(intkeyCode, KeyEvent event)...{

if((keyCode==KeyEvent.KEYCODE_BACK)&&mWebView.canGoBack())...{

      mWebView.goBack();

returntrue;

    }

returnsuper.onKeyDown(keyCode, event);

  }

  ...

}

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

publicclassNewsActivityextendsActivity...{

    WebView mWebView;

privateclassNewsClientextendsWebViewClient...{

publicbooleanshouldOverrideUrlLoading(WebView view, String url)...{

      view.loadUrl("javascript:changeLocation('"+url+"')");

returntrue;

    }

  }

...

}

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