使用HTML5開發Android本地應用（一）

HTML5是現在最熱門的技術之一，Android內建的WebKit瀏覽器對於HTML5有著不錯的支援，而各種瀏覽器的最新版本都開始普遍的支援HTML5。使用HTML5開發手機應用的主要好處有兩個：一個是應用可以跨平台，包括不同的手機平台和PC；二是可以從伺服器下載應用的內容，但是不依賴於後台Server也可以運行，可以把Web應用和本地應用更好的結合在一起。

 

這一系列文章的目的在於研究和實驗使用HTML5開發Android本地應用的優缺點和可行性，包括HTML5本身的優點和局限性，網頁部分和應用環境之間的互動，以及我們可以怎樣控制和修改瀏覽器外掛程式的行為，把它和手機本身的環境更好的結合在一起。

 

首先是把一個WebView嵌入到應用介面中，建立起它和環境的互動，然後載入一個簡單的HTML5頁面。要被載入的HTML檔案放在asset目錄中，可以通過url "file:///android_asset/index.html"來載入。這個頁面的作用只是用canvas畫一個簡單的圖形。

 

String path = "file:///android_asset/index.html";String TAG = "WebClientDemo";boolean isLoadResources = true;WebView mWebView;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.webview1);init();mWebView.loadUrl(path);}

 

初始化WebView，設定參數，關鍵是設定語言為UTF-8和保證支援JavaScript

 

mWebView = (WebView) findViewById(R.id.myWebView1);mWebView.setBackgroundColor(Color.WHITE);mWebView.getSettings().setDefaultTextEncodingName("UTF-8");mWebView.getSettings().setSupportZoom(true);mWebView.getSettings().supportMultipleWindows();mWebView.getSettings().setJavaScriptEnabled(true);mWebView.clearView();

 

WebViewClient負責截獲並修改載入網頁過程中的各種事件。首先給mWebView設定一個新的WebViewClient，然後重寫函數shouldOverrideUrlLoading。這麼做的原因保證點擊WebView外掛程式中的Url連結的時候，仍然是在WebView外掛程式中顯示頁面，而不是調用系統的網路瀏覽器。

 

mWebView.setWebViewClient(new WebViewClient() {// Intercepts url loadingpublic boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return true;}                                                ...                }

 

 以下是在WebViewClient中，截獲並且修改其它的事件行為的代碼。例子代碼中截獲的事件包括網頁載入前，載入後，錯誤，重複提交，載入資源等。比如，發生網頁錯誤的時候，可以用自己的錯誤資訊取代瀏覽器外掛程式的錯誤提示。

 

// Intercepts the resource loading events@Overridepublic void onLoadResource(WebView view, String url) {if (!isLoadResources) {Log.i(TAG, "Block resource loading:" + url);return;} else {Log.i(TAG, "Continue resource loading:" + url);super.onLoadResource(view, url);}}// Intercepts error messagepublic void onReceivedError(WebView view, int errorCode,String description, String failingUrl) {Log.i(TAG, failingUrl);Toast.makeText(activity, "網頁錯誤: " + errorCode + " 網頁不可用",Toast.LENGTH_LONG).show();}// Intercepts form resubmissionpublic void onFormResubmission(WebView view, Message dontResend,Message resend) {Log.i(TAG, "Resubmission");Toast.makeText(activity, "不可重複提交，按Back回到上級網頁",Toast.LENGTH_SHORT).show();}// Intercepts page started eventpublic void onPageStarted(WebView view, String url, Bitmap favicon) {Log.i(TAG, "Page load start");}// Intercepts page finished eventpublic void onPageFinished(WebView view, String url) {Log.i(TAG, "Page load finish");}

 

在Webview下，當按下Back鍵時，需要調用WebView中Back，訪問曆史頁面，當沒有曆史頁面的時候提示是否要退出。

需要在當前Activity中重寫onKeyDown函數，處理Back事件。

 

public boolean onKeyDown(int keyCode, KeyEvent event) {// Forwards the back key event to browser pluginif ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {String url;mWebView.goBack();return true;}// Pops up a dialog before exitif ((keyCode == KeyEvent.KEYCODE_BACK) && (!mWebView.canGoBack())) {new AlertDialog.Builder(this).setTitle(R.string.title).setMessage(R.string.quit_desc).setNegativeButton(R.string.cancel,new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog,int which) {}}).setPositiveButton(R.string.confirm,new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog,int whichButton) {android.os.Process.killProcess(android.os.Process.myPid());}}).show();return true;}return super.onKeyDown(keyCode, event);}

 

WebChromeClient負責處理Javascript的對話方塊，網站表徵圖，載入進度條等。下面的代碼，在Activity上添加一個載入網頁的進度條

 

mWebView.setWebChromeClient(new WebChromeClient() {public void onProgressChanged(WebView view, int progress) {activity.setProgress(progress * 100);}});

 

退出提示框

 

 

 

HTML5顯示效果和頁面代碼：

 

  <script type="application/x-javascript">    function drawText() {      var canvas = document.getElementById("canvas");      if (canvas.getContext) {        var ctx = canvas.getContext("2d");        var message = "First HTML5 page"        ctx.fillStyle = "#FF0000";        ctx.font = "30px serif";var xPosition = 20;var yPosition = 30;                ctx.fillText (message,xPosition,yPosition);      }    }  </script> <body onload="drawText();">   <canvas id="canvas" width="300" height="300"></canvas> </body>

 

 

 

在以後的文章中，我們會討論HTML5的其它功能和在手機上的應用方式。

轉自：http://community-china.developer.motorola.com/t5/MOTODEV-%E5%8D%9A%E5%AE%A2/%E4%BD%BF%E7%94%A8HTML5%E5%BC%80%E5%8F%91Android%E6%9C%AC%E5%9C%B0%E5%BA%94%E7%94%A8-%E4%B8%80/ba-p/1742