使用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;

	@Override
	public 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 loading
			public boolean shouldOverrideUrlLoading(WebView view, String url) {
				view.loadUrl(url);
				return true;
			}
                        
                        ...
                }

 

 以下是在WebViewClient中，截获并且修改其它的事件行为的代码。例子代码中截获的事件包括网页加载前，加载后，错误，重复提交，加载资源等。比如，发生网页错误的时候，可以用自己的错误信息取代浏览器插件的错误提示。

 

			// Intercepts the resource loading events
			@Override
			public 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 message
			public void onReceivedError(WebView view, int errorCode,
					String description, String failingUrl) {
				Log.i(TAG, failingUrl);
				Toast.makeText(activity, "网页错误: " + errorCode + " 网页不可用",
						Toast.LENGTH_LONG).show();
			}

			// Intercepts form resubmission
			public void onFormResubmission(WebView view, Message dontResend,
					Message resend) {
				Log.i(TAG, "Resubmission");
				Toast.makeText(activity, "不可重复提交，按Back回到上级网页",
						Toast.LENGTH_SHORT).show();

			}

			// Intercepts page started event
			public void onPageStarted(WebView view, String url, Bitmap favicon) {
				Log.i(TAG, "Page load start");
			}

			// Intercepts page finished event
			public 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 plugin
		if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
			String url;
			mWebView.goBack();
			return true;
		}
		// Pops up a dialog before exit
		if ((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() {
							@Override
							public void onClick(DialogInterface dialog,
									int which) {
								}
							})
					.setPositiveButton(R.string.confirm,
						new DialogInterface.OnClickListener() {
							@Override
							public 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 οnlοad="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