Android教程之用HTML5构建Web应用程序(一)

千锋3G嵌入式移动互联网技术研发中心基于HTML5已经涌现出了很多新的特性和标准。一旦您发现了当今浏览器中的一些可用的特性，就可以在您的应用程序中充分利用这些特性。在本文中，通过开发一些示例应用程序来了解如何探寻和使用最新的Web技术。本文的绝大多数代码都是HTML、JavaScript和CSS—Web开发人员的核心技术。千锋3G嵌入式移动互联网技术研发中心为了能跟随我们的示例进行学习，最重要的一件事情是要有多个浏览器供测试使用。建议使用MozillaFirefox、AppleSafari和GoogleChrome最新版本。本文中我们使用的是MozillaFirefox3.6、AppleSafari4.04和GoogleChrome5.0.322。您可能还希望在移动浏览器上进行测试。例如，最新的Android和iPhoneSDK被用于在模拟机上测试它们的浏览器。这些示例包括非常小的用Java™写的后端组件。本文使用的是JDK1.6.0_17和ApacheTomcat6.0.14。千锋3G嵌入式移动互联网技术研发中心有一个关于Web开发人员的笑谈，Web开发人员用他们20%的时间写代码，然后用剩下的80%的时间让这些代码能够在所有浏览器中运转起来并获得相同的效果。要说Web开发人员已习惯于处理不同浏览器间的差别多少有点不切实际。随着浏览器新一轮创新浪潮的出现，这种低效的方法仍然没有改善。最新、最好的浏览器所支持的特性在不断变化。不过，也有好的一面，这些新特性均集中在Web标准，这就让您能够现在就开始使用这些新特性。您可以采用渐进增强的老技巧、提供一些基线特性、查找高级特性，然后用出现的额外特性增强您的应用程序。要做到这一点，我们需要学习如何探测新功能。清单1显示了一个简单的探测脚本。千锋3G嵌入式移动互联网技术研发中心functiondetectBrowserCapabilities(){$(userAgent).innerHTML=navigator.userAgent;varhasWebWorkers=!!window.Worker;$(workersFlag).innerHTML=+hasWebWorkers;varhasGeolocation=!!navigator.geolocation;$(geoFlag).innerHTML=+hasGeolocation;if(hasGeolocation){document.styleSheets[0].cssRules[1].style.display=block;navigator.geolocation.getCurrentPosition(function(location){$(geoLat).innerHTML=location.coords.latitude;$(geoLong).innerHTML=location.coords.longitude;});}千锋3G嵌入式移动互联网技术研发中心varhasDb=!!window.openDatabase;$(dbFlag).innerHTML=+hasDb;varvideoElement=document.createElement(video);varhasVideo=!!videoElement[canPlayType];varogg=false;varh264=false;if(hasVideo){ogg=videoElement.canPlayType('video/ogg;codecs=theora,vorbis')||no;h264=videoElement.canPlayType('video/mp4;codecs=avc1.42E01E,mp4a.40.2')||no;}千锋3G嵌入式移动互联网技术研发中心$(videoFlag).innerHTML=+hasVideo;if(hasVideo){varvStyle=document.styleSheets[0].cssRules[0].style;vStyle.display=block;}$(h264Flag).innerHTML=+h264;$(oggFlag).innerHTML=+ogg;}千锋3G嵌入式移动互联网技术研发中心目前已经出现了大量新特性和标准，成为了HTML5标准的一部分。本文重点将放在几个最有用的特性上。清单1中的脚本探测到了四个新特性：Webworker（多线程）地理定位数据库存储本地视频回放这个脚本的开头显示了用户浏览器的用户代理。它通常是一个惟一标识此浏览器的字符串，但它很容易被篡改。对于这个应用程序它已经足够好了。下一步是开始检测特性。首先要通过在全局范围（视窗）中查找Worker函数来检测Webworker。这里用到了一些符合语言习惯的JavaScript：双重否定。如果Worker函数不存在，那么window.Worker的求值结果为未定义，这是JavaScript中的一个“伪”值。如果在它前面放上一个单否定，就会被求值为真，因此放上一个双否定将被求值为假。检测完该值后，脚本会通过修改清单2中显示的DOM结构来将这个评估结果显示在屏幕上。千锋3G嵌入式移动互联网技术研发中心inputtype=buttonvalue=Begindetectiononclick=detectBrowserCapabilities()/divYourbrowser'suser-agent:spanid=userAgent/span/divdivWebWorkers?spanid=workersFlag/span/divdivDatabase?spanid=dbFlag/span/divdivVideo?spanid=videoFlag/span/divdivclass=videoTypesCanplayH.264?spanid=h264Flag/span/divdivclass=videoTypesCanplayOGG?spanid=oggFlag/span/divdivGeolocation?spanid=geoFlag/span/divdivclass=locationdivLatitude:spanid=geoLat/span/divdivLongitude:spanid=geoLong/span/div/div千锋3G嵌入式移动互联网技术研发中心清单2是一个简单的HTML结构，用来显示由检测脚本收集到的诊断信息。如清单1中所示，下面要检测的是地理定位。这里再次使用了双重否定，但这次您要检测一个名为geolocation的对象，它应该是navigator对象的一个属性。如果找到该对象，那么就用geolocation对象的getCurrentPosition函数来获取当前的位置。获取位置可能是一个很慢的过程，因为通常会涉及到扫描Wi-Fi网络。在移动设备上，可能还会涉及到扫描无线发射塔和pingGPS卫星。由于花费时间很长，因此getCurrentPosition是异步的，并会将callback函数作为一个参数。在本例中，我们为callback使用一个闭包，它显示位置字段（通过启用其CSS），然后将经度和纬度写到此DOM。下一步是检测数据库存储。检测是否有全局函数openDatabase，这个函数用于创建和访问客户端数据库。千锋3G嵌入式移动互联网技术研发中心最后，检测本地视频回放。用DOMAPI创建一个视频元素。今天的任何浏览器都能创建这样一个元素。在较老的浏览器中，这会是一个有效的DOM元素，但它没有任何的特别含义。这就如同是创建一个名为foo的元素。在一个较现代的浏览器中，它将是一个专用元素，就像是创建一个div或canPlayType元素。它将具有一个名为canPlayType的函数，所以只检测它的存在就可以了。即使一个浏览器已经有了本地视频回放的功能，但它所支持的视频类型或它能回放的编解码并不是标准化了的。最容易想到的是要检测这个浏览器所支持的编解码。目前没有编解码的标准列表，但是有两个最常见的是H.264和OggVorbis。为了检测对特定的一个编解码的支持，可以向canPlayType函数传递一个识别字符串。如果浏览器能支持这个编解码，该函数将返回probably（说真的—不是开玩笑的）。如果不支持，该函数将返回null。在这个检测代码中，只针对这些值进行了检测并将结果显示在此DOM中。在一些常用浏览器中测试过此代码后，就会出现清单3中所示的综合结果。千锋3G嵌入式移动互联网技术研发中心#Firefox3.6Yourbrowser'suser-agent:Mozilla/5.0(Macintosh;U;IntelMacOSX10.6;en-US;rv:1.9.2)Gecko/20100115Firefox/3.6WebWorkers?trueDatabase?falseVideo?trueCanplayH.264?noCanplayOGG?probablyGeolocation?trueLatitude:37.2502812Longitude:-121.9059866千锋3G嵌入式移动互联网技术研发中心#Safari4.0.4Yourbrowser'suser-agent:Mozilla/5.0(Macintosh;U;IntelMacOSX10_6_2;en-us)AppleWebKit/531.21.8(KHTML,likeGecko)Version/4.0.4Safari/531.21.10WebWorkers?trueDatabase?trueVideo?trueCanplayH.264?probablyCanplayOGG?noGeolocation?false千锋3G嵌入式移动互联网技术研发中心#Chrome5.0.322Yourbrowser'suser-agent:Mozilla/5.0(Macintosh;U;IntelMacOSX10_6_2;en-US)AppleWebKit/533.1(KHTML,likeGecko)Chrome/5.0.322.2Safari/533.1WebWorkers?trueDatabas