HTML5开发Android应用程序.ppt

《HTML5开发Android应用程序.ppt》由会员分享，可在线阅读，更多相关《HTML5开发Android应用程序.ppt（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、移动互联网路上的囧小子姓名：杨丰盛英文名字：yarin网名：半灌水门派：移动互联网_现任公司：云晖软件（成都）有限公司开发经验：J2me、Brew、Android、Iphone、HTML5主要作品：Android应用开发揭秘Android技术内幕：系统卷新浪微博：杨丰盛（http:/ HTML5应用概述Android应用客户端应用SDK应用WEB应用浏览器应用WebView应用（browser）&（SDK+WebView）HTML5JavaScriptCSS viewportviewport适配多分辨率的Android设备Android设备的多分辨率？物理分辨率视窗大小与WEB页面比例屏幕密度

2、怎么办？viewport属性用CSS控制设备密度用JavaScript控制设备密度Android浏览器加载WEB页面时，如果用户没有禁止启用”预览模式“，那么将默认为“预览模式“，通常会缩小WEB页面。而当页面在WebView中显示时，会采用”完全载入“的方式，即保证WEB页面的原始大小。设备屏幕的密度是基于屏幕的分辨率（由每英寸所包含的点数（dpi）定义的。Android支持三种类别的屏幕密度：低（ldpi），中（mdpi）和高（hdpi）。与中等密度屏幕相比，低密度屏幕每英寸像素较少，高密度屏幕每英寸像素较多。默认情况下，Android浏览器和WebView是针对中等密度的屏幕。Andro

3、id浏览器和WebView在高密度屏幕上将Web页面缩放约1.5倍（因为中等密度屏幕像素较小），而在低密度屏幕上将Web页面缩放约0.75倍（因为中等密度屏幕像素大）。viewport属性的应用uviewport需要放置在HTML的标签中，在标签的 content属性中，就可以定义多个视窗特性。包括视窗的宽度、高度、缩放比例，目标设备密度等，但是，需要注意每个视窗属性必须有逗号隔开。Exmaple CSS控制设备密度uAndroid浏览和WebView支持CSS媒体性能（webkit-device-pixel-ratio），允许指定屏幕密度创建一些样式CSS媒体性能。该值应该是“0.75”，“

4、1”或“1.5”，它们分别表示对于低、中、高密度屏幕的设备。下面为每种密度创建独立的样式：在一个样式表中，指定不同样式：#header background:url(medium-density-image.png);media screen and(-webkit-device-pixel-ratio:1.5)/CSS for high-density screens#header background:url(high-density-image.png);media screen and(-webkit-device-pixel-ratio:0.75)/CSS for low-densi

5、ty screens#header background:url(low-density-image.png);JavaScript控制设备密度uAndroid浏览器和WebView支持查询当前设备密度的DOM特性（window.devicePixelRatio），该值指定用于当前设备按比例缩放的系数。例如，值为“1.0”，则说明设备是中等密度，并且默认页面不进行缩放；如果该值是“1.5”，那么，设备是高密度设备，并且默认页面调整1.5x（倍）；如果该值是“0.75”，那么，设备是低密度设备，并且默认页面调整0.75x（倍）。如何使用JavaScript查询设备密度：if(window.dev

6、icePixelRatio=1.5)alert(This is a high-density screen);else if(window.devicePixelRation=0.75)alert(This is a low-density screen);在Android中构建HTML5应用程序使用WebView在Android中构建Web应用处理页面导航浏览网页历史记录Android与JavaScript交互Android WebView应用WebView 类是Android View类的扩展，它允许Web页面作为Activity布局的一部分显示。它不包括完整Web浏览器的任何功能，如导航

7、控制或地址栏。默认情况下WebView 所能做的就是显示一个网页。添加WebView到应用程序中:要在WebView中加载Web页面，使用loadUrl()WebView myWebView=(WebView)findViewById(R.id.webview);myWebView.loadUrl(http:/);.处理页面导航在WebView中，当用户从Web页面里点击一个链接，在Android中，默认行为是启动一个应用程序来处理URL。通常，默认Web浏览器打开并加载这个目的URL。但是，您可以为您的 WebView忽略此默认行为，由 WebView 打开所有链接。然后，通过WebView

8、，您可以运行用户向前、向后浏览他们的Web页面的历史。private class MyWebViewClient extends WebViewClient public boolean shouldOverrideUrlLoading(WebView view,String url)if(Uri.parse(url).getHost().equals()return false;Intent intent=new Intent(Intent.ACTION_VIEW,Uri.parse(url);startActivity(intent);return true;WebView myWebVi

9、ew=(WebView)findViewById(R.id.webview);myWebView.setWebViewClient(new MyWebViewClient();浏览网页历史记录当 WebView 重写URL加载后，它会自动累计访问过Web页面的历史。你可以用goBack()和goForward()向前和向后浏览历史页面。public boolean onKeyDown(int keyCode,KeyEvent event)if(keyCode=KeyEvent.KEYCODE_BACK)&myWebView.canGoBack()myWebView.goBack();retur

10、n true;return super.onKeyDown(keyCode,event);Android与JavaScript交互u如果您计划使用JavaScript将Web页面加载到WebView 中，您就必须为您的 WebView 启用JavaScript。一旦启用JavaScript，您就可以在您的应用程序与您的JavaScript代码之间建立接口。u默认情况下，在WebView中，JavaScript是禁用的。您可以通过将WebSettings附加到您的WebView中来启用JavaScript。你可以用getSettings()检索WebSettings，然后用setJavaScri

11、ptEnabled()启动JavaScript。WebView myWebView=(WebView)findViewById(R.id.webview);WebSettings webSettings=myWebView.getSettings();webSettings.setJavaScriptEnabled(true);Android与JS通信实例演示:在Android中处理JS的警告、对话框等；在JS中调用Android接口；在Android调用JS函数。Android中调试HTML5应用如果您正在开发一个Android的Web应用程序，您可以使用控制台（console）JavaSc

12、ript API调试您的JavaScript，调试消息输出到Logcat。在Android浏览器中用控制台API：Js代码：console.log(Hello World);Log信息：Console:Hello World http:/ Android的WebKit没有实现在其他桌面浏览器中实现的所有控制台API。但您可以使用基本的文本记录功能：console.log(String)console.info(String)console.warn(String)console.error(String)在WebView中用控制台APIu在调试您的WebView的Web页面时，是支持控制台AP

13、I。在Android 1.6和更低版本下，控制台信息自动发送到Logcat，并加以“WebCore”标签。如果您是针对Android 2.1（API Level 7）或更高版本，那么你必须提供一个 WebChromeClient 实现 onConsoleMessage()回调方法，为了使控制台的信息显示到Logcat中。WebView myWebView=(WebView)findViewById(R.id.webview);myWebView.setWebChromeClient(new WebChromeClient()public void onConsoleMessage(String

14、 message,int lineNumber,String sourceID)Log.d(MyApplication,message+-From line +lineNumber+of +sourceID););WebView myWebView=(WebView)findViewById(R.id.webview);myWebView.setWebChromeClient(new WebChromeClient()public boolean onConsoleMessage(ConsoleMessage cm)Log.d(MyApplication,cm.message()+-From

15、line +cm.lineNumber()+of +cm.sourceId();return true;);ConsoleMessage还包括一个MessageLevel表示控制台传递信息类型。您可以用messageLevel()查询信息级别，以确定信息的严重程度，然后使用适当的Log方法或采取其他适当的措施。HTML5本地储存在Android中的应用HTML5 提供了两种在客户端存储数据的新方法：ulocalStorage-没有时间限制的数据存储 usessionStorage-针对一个 session 的数据存储 localStorage.lastname=Smith;document.w

16、rite(localStorage.lastname);sessionStorage.lastname=Smith;document.write(sessionStorage.lastname);Web Storage API：/清空storagelocalStorage.clear();/设置一个键值localStorage.setItem(“yarin”,“yangfegnsheng”);/获取一个键值localStorage.getItem(“yarin”);/获取指定下标的键的名称（如同Array）localStorage.key(0);/return“fresh”/删除一个键值loc

17、alStorage.removeItem(“yarin”);setDomStorageEnabled（true）HTML5本地数据库在Android中的应用uHTML5的本地数据库使用的是SQLite这款轻型数据库。我们可以使用SQL语句进行复杂的本地数据存储。/启用数据库webSettings.setDatabaseEnabled(true);String dir=this.getApplicationContext().getDir(database,Context.MODE_PRIVATE).getPath();/设设置数据置数据库库路径路径webSettings.setDatabase

18、Path(dir);/扩充数据库的容量public void onExceededDatabaseQuota(String url,String databaseIdentifier,long currentQuota,long estimatedSize,long totalUsedQuota,WebStorage.QuotaUpdater quotaUpdater)quotaUpdater.updateQuota(estimatedSize*2);SQLite数据库使用演示：HTML5地理定位在Android中的应用HTML5提供了一组API用来获取用户的地理位置，如果浏览器支持且设备具有

19、定位功能，就能够直接使用这组API来获取当前位置信息。地理定位演示：/启用地理定位webSettings.setGeolocationEnabled(true);/设设置定位的数据置定位的数据库库路径路径webSettings.setGeolocationDatabasePath(dir);/配置权限public void onGeolocationPermissionsShowPrompt(String origin,GeolocationPermissions.Callback callback)callback.invoke(origin,true,false);super.onGeol

20、ocationPermissionsShowPrompt(origin,callback);HTML5地理定位APIuW3C 中新添加了一个名为 Geolocation的 API 规范，Geoloaction API的作用就是通过浏览器获取用户的地理位置。我们可以使用navigator.geolocation来简单的获取用户的地理位置信息。常用的navigator.geolocation对象有以下三种方法：/获取当前地理位置navigator.geolocation.getCurrentPosition(success_callback_function,error_callback_func

21、tion,position_options)/持续获取地理位置navigator.geolocation.watchPosition(success_callback_function,error_callback_function,position_options)/清除持续获取地理位置事件navigator.geolocation.clearWatch(watch_position_id)其中success_callback_function为成功之后处理的函数，error_callback_function为失败之后返回的处理函数，参数position_options是配置项HTML5地

22、理定位APIposition对象所包含的数据：PropertyTypeNotescoords.latitude（纬度）doubleDecimaldegreescoords.longitude（经度）doubleDecimaldegreescoords.altitude（海拔）doubleornullMeterscoords.accuracy（精确度）doubleMeterscoords.altitudeAccuracydoubleornullMeterscoords.heading（朝向）doubleornulldegreesclockwisefromthenorthcoords.speedd

23、oubleornullMeters/secondtimestampDOMTimeStampLikeaDate()objectError代码：TIMEOUT:表示获取信息超时。PERMISSION_DENIED：表示用户选择了拒绝了位置服务。POSITION_UNAVAILABLE：表示位置不可知。Position选项：PropertyTypeDefaultNotesenableHighAccuracybooleanfalsetruemightbeslowertimeoutlong(nodefault)InmillisecondsmaximumAgelong0Inmilliseconds构建HT

24、ML5离线应用u为了能够让用户在离线状态下继续访问 Web 应用，开发者需要提供一个 cache manifest 文件。这个文件中列出了所有需要在离线状态下使用的资源，浏览器会把这些资源缓存到本地。cache manifest文件例子：CACHE MANIFEST#这是注释images/sound-icon.pngimages/background.png NETWORK:test.cgiCACHE:style/default.cssFALLBACK:/files/projects/projects HTML5离线应用的更新缓存机制应用程序可以等待浏览器自动更新缓存，也可以使用 Javasc

25、ript 接口手动触发更新。u自动更新 浏览器除了在第一次访问 Web 应用时缓存资源外，只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。u手动更新 开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update()更新缓存。if(window.applicationCache.status=window

26、.applicationCache.UPDATEREADY)window.applicationCache.update();在线状态检测HTML5 提供了两种检测是否在线的方式：navigator.online 和 online/offline事件。unavigator.onLinenavigator.onLine 属性表示当前是否在线。如果为 true,表示在线；如果为false,表示离线。当网络状态发生变化时，navigator.onLine 的值也随之变化。开发者可以通过读取它的值获取网络状态。uonline/offline事件 当开发离线应用时，通过 navigator.onLine

27、获取网络状态通常是不够的。开发者还需要在网络状态发生变化时立刻得到通知，因此 HTML5 还提供了 online/offline 事件。当在线/离线状态切换时，online/offline 事件将触发在 body 元素上，并且沿着 document.body、document 和 window 的顺序冒泡。因此，开发者可以通过监听它们的 online/offline 事件来获悉网络状态。在Android中构建HTML5离线应用/开启应用程序缓存webSettingssetAppCacheEnabled(true);String dir=this.getApplicationContext().

28、getDir(cache,Context.MODE_PRIVATE).getPath();/设置应用缓存的路径webSettings.setAppCachePath(dir);/设置缓存的模式webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);/设置应用缓存的最大尺寸webSettings.setAppCacheMaxSize(1024*1024*8);/扩充缓存的容量public void onReachedMaxAppCacheSize(long spaceNeeded,long totalUsedQuota,WebStorage.Quot

29、aUpdater quotaUpdater)quotaUpdater.updateQuota(spaceNeeded*2);使用Canvas绘制图形图像什么是什么是 Canvas？HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创创建建Canvas元素元素向HTML5页面添加canvas元素。规定元素的 id、宽度和高度：通通过过 JavaScript 来来绘绘制制canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成：/通过id获取canvas元素 var c=document.getElementById(myCanvas);/创建context对象 var cxt=c.getContext(2d);cxt.fillStyle=#FF0000;cxt.fillRect(0,0,150,75);结束谢谢！2011-07-16