使用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>
http://community-china.developer.motorola.com/t5/MOTODEV-博客/bg-p/MOTODEV_Blog