打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
ADOBE AIR 3对HTML5的支持
备注:此文最初是为AIR 2发布所写。现在已经加入了AIR 2.5和AIR 3的新特性及新功能!

Adobe AIR3(在Adobe Labs上有RC版可用)新加了许多API也做不少新的改进。其中值得一提的是AIR3升级了HTML引擎,它将适用于那些基于HTML的AIR应用或需要呈现HTML内容的AS应用。
AIR 3加入了适用于Safari 5.0.3上的WebKit分支的快照,并打了最新的安全补丁。你可以在webkit.org上查看其源码也可以在Adobe Open Source上查看AIR中使用的WebKit源码。因此,大多数情况下,作为一个参考实现你都可以使用Safari5.0.3来体验这些新的变化。
本文对新特性做了一个概述,重点介绍Adobe AIR 3的和其对应的WebKit修订版在对HTML支持方面有什么不同之处。许多新版本的浏览器也支持新一代的极速JS引擎(如Google的V8,WebKit开发团队的SquirrelFish,和Mozilla的TraceMonkey)和HTML5.如果你对AIR的JavaScript和HTML功能不了解或者你想知道你喜爱的WebKit特性能不能在同样适用于AIR,那么这篇文章正对你胃口。
Safari新特性
这段重点罗列了Safari以下新特性
.更快的Nitro JS引擎:
新版的WebKit加入了一个改进版的Nitro JS引擎。在不做代码修改或封装的前提下这能让基于JS开发的应用提升20%的性能.表1是AIR 2.6和AIR 3.0性能测试对比的结果,测试基于Google的V8引擎和WebKit的Sunspider引擎。


         
HTML5之区段元素:HTML5标准推出一些新的HTML标签来增强其语义。这些新标签让网页组织的更为合理,让基于模板的系统发布内容更加容易。此外,在不影响HTML文档表述的前提下,语义丰富的内容还能对辅助系统提供额外的信息。

一个网页的经典划分在HTML5区段元素中都能一一对应,比如页眉和页脚,导航区,文章和摘录,时间戳记(举个例子,博客发布时会带上时间).这些新标签是<section><nav>,<article>,<aside>,<hgroup>,<header>,<footer>,<time>,<mark>。你能在这页找到这些新标签的概述。AIR 3支持HTML5全部区段元素。
HTML5之表单新输入类型以及表单验证:随着这些新标签的到来,HTML5标准也让<input>标签支持类型属性了,这能更有效的定义输入类型(比如,number,range,email,URL,date等等)。目前,只有少数几个浏览器实现了在用户界面必要的地方用新的输入类型,这和UI控件的表现形式有很大的差异。然而,尽管几乎所有主流浏览器都支持可添加属性和方法的输入控件,但呈现的实际元素是用户输入的普通文本(这种方式能自动反映输入的值合不合法).

AIR 3支持新输入类型,但同样呈现的只有输入文本。然而,新方法和新属性(如stepUp(),stepDown(),min,max,step,valueAsNumber等等)也可当做是样式选项一样来用。例如配合JS库,它可以画出用户想要的交互性更好的UI界面。需要注意的是,像Safari一样,由于AIR 3禁止了表单验证的功能,所以它不能判断UI元素的值是否是无效的,也不能防止不符合标准的表单提交(filled-in是必选字段,输入值要合法)

HTML5之postMessage():HTML5标准定义了一个新方法能实现安全跨域通信。那就是window.postMessage()。通过该方法以及相应的onmessage事件,windows能广播文本信息也能订阅此类信息。随着通信的安全性越来越重要,消息只能由那些订阅了相关主题的订阅者收到。AIR 2.6及后续版本都支持了该特性。

HTML5之AJAX 历史:HTML5标准给JS历史API新增了一个功能,在HTML5中,WEB应用开发者能通过调用history.pushState()方法和history.replaceState方法以及通过侦听对应的onpopstate事件,可以修改历史堆栈信息,这样不需要重载页面浏览器地址栏就可以显示新的URL地址。
AIR 3也支持新的历史API,让WEB应用正确无缝的运行在当前所有的浏览器上。

CSS媒体查询:CSS媒体查询增强了CSS的import标签的媒体声明。让开发人员能够基于设备的属性加载不同的css文件,从而渲染其内容。可用的属性包括视图的长宽、甚至可以是颜色深度,设备的解析度。从AIR 2开始,AIR中HTML也开始支持CSS媒体查询。

先前的HTML、CSS和JAVASCRIPT特性
AIR 3能向下兼容AIR 2.7以及更老的版本。所以,它也进一步支持了JavaScript、CSS3和HTML5的如下特性。

增强CSS3支持
WebKit加入了许多新的CSS属性。有些是从CSS3备案中来,有些则来自WebKit特定扩展。
2D变换、动画以及过渡:HTML元素实现2D变换可以通过-webkit-transform*和-webkit-perspective*属性及相应的变换函数来完成。
-webkit-transition*属性能让CSS属性之间的过渡变得平缓,这些属性包括(但不限于)颜色、位置和维度。这些CSS属性配合变换属性和相应函数就能创建出简单的动画。
动画进一步深化了转换和过渡的概念,它允许开发人员通过一种声明性方式,使用关键帧修改整个播放期间的动画行为。使用的CSS属性包括-webkit-animation*和新的@keyframes规则。
滚动条样式:WebKit引入了一组新的专用CSS属性,允许对滚动条设置皮肤和进行自定义配置。这些属性可通过::-webkit-scrollbar*属性访问,也就是-webkit-scrollbar、-webkit-scrollbar-button、-webkit-scrollbar-track、-webkit-scrollbar-track-piece、-webkit-scrollbar-thumb、-webkit-scrollbar-corner和-webkit-resizer。关于此特性的更详细说明可以在WebKit博客*上找到。
使用这些属性为典型的Web应用程序设置皮肤可能存在问题,因为一些浏览器不支持它们(无论是不基于WebKit的浏览器还是基于旧WebKit版本的浏览器)。但是,在AIR应用程序中,这些属性比使用通过JavaScript模拟的滚动条更好。
缩放:从AIR 2.5开始还支持新的CSS3 zoom属性,该属性可用于指定一个元素的放大率。对zoom属性的更改可以制作成动画。
Web字体:Web字体使用CSS @font-face声明实现,允许将一个字体文件放在一个具有其他Web资产的服务器上,并用于渲染Web页面内容。请注意,AIR 3仅支持TTF和OTF 两种Web字体。
增强画布
AIR 3支持<canvas>标签,加入了ImageData API(getImageData(),createImageData(),和putImageData()),在CSS中可以使用画布对象来当背景图。

data:URLs

AIR 2添加了对data:URL的支持。由于存在潜在的安全风险,功能有些限制。data:URL可在以下情况使用:

仅在它指向一个具有受运行时支持的图像类型的资源(JPEG、PNG、BMP、XBM、ICO)时。唯一支持的编码为Base64。任何其他类型的内容(包括脚本和Flash Player内容)都不能通过data: URL存储。
仅在需要使用图像的地方。这包括图像标签(例如,<img src=”data:image/png;base64,…”/>)、图像类型的输入标签(例如,<input type=”image” src=”data:image/png;base64,…”/>)和允许图像URL的CSS规则(例如background: url('data:image/png;base64,...');)。
若在CSS样式表中想用某种嵌入字体,只需在@font-face中声明,例如:
@font-face {
font-family: "MyDataFont";
src: url("data:font/opentype;base64,...");
})
WebKit版本控制行为
新版HTML引擎的加入改变了AIR 2.5的一些行为。为了确保你现有的AIR 1.5应用不会崩溃,这些行为已根据应用描述符中使用的命名空间进行了版本控制,这些版本变化包括:
如果某个HTML文档没有<HEAD>元素,那么引擎会隐式地创建一个。而在AIR 1.5时代,如果文档中没有<HEAD>元素,则不会创建该元素了。
如果对不存在的资源进行XMLHttpRequest(XHR)请求会以DONE状态终止并返回一个无效HTTP状态码,(0)表明失败。在AIR 1.5中则不会报错。
包含POST方法但没有内容(content.length == 0)的XHR请求不会自动转换为包含GET方法的XHR。在AIR中,长度为0的POST请求将转换为相应的GET请求。
禁用的WEBKIT特性
尽管AIR 3加入了Safari 5的WebKit分支,但由于出于安全原因或性能原因以及框架兼容性问题的考虑,一些HTML,CSS和JavaScript特性目前在Safari和AIR中被禁用掉了。接下来重点列出这些已禁用的功能以及可能的解决方案:

HTML5音频/视频标签:<aduio>和<video>标签旨在为HTML页面提供一个标准的媒体播放方式。然而,解码器的支持仍然取决于浏览器厂商的决定以及大量的JS类库,可以当做一个媒体发布的备用解决方案,应用仅仅只使用这些标签来作为媒体发布的机制还不是很常见。由于这个原因,AIR不支持<aduio>和<video>标签。不过,AIR发布时会同时放出一个能支持video和audio的Flash Player的副本。

被禁的CSS特性:AIR 3.0支持CSS绝大多数的属性,样式选项也由WebKit/Safari很好的实现,除了以下几个属性:
-webkit-background-clip:test 和-webkit-mask-clip:test 由于AIR中渲染引擎用到了Cairo类库,而这个类库不支持用文本来做蒙板,所以这两个属性目前也就失去了支持。
控件样式设置用纯CSS来代替JavaScript.这个限制会影响到以下控件:
<select>(下拉变量):下拉列表的背景色切换不起作用,切换下拉状态下每项数据的字体颜色和字体样式也将失效。
<input type=”checkbox”/>和<input type=”radio”/>:CSS的大多数属性不会改变这两个控件的外观。但是在Safari中这两者是一致的。
.SVG:不支持SVG的主要原因是考虑到运行时大小问题 (支持的话运行时大小会增大15%~20%),还有就是AIR对SVG图形的兴趣也不足。

Web套接字

WebSockets协议允许Web应用程序以直观的方式处理与服务器端进程之间的双向通信。然而,目前AIR 2.5中内置的网络API在使用场景方面比WebSockets更灵活。新的网络API包含对UDP套接字和安全的TCP链接的支持,像HTTP,HTTPS,RTMP,和RTMFP(其他协议除外),在AIR 3中禁用了WebSockets功能。

Web工作线程
Web工作线程允许一个页面生成大量后台线程来进行数据处理。这些线程使用一种消息传递机制与父页面通信,无法访问DOM或父页面。此特性目前在Adobe AIR中是禁用的,因为Adobe正在考虑一种将适用于AIR API的更加集成的方法。

客户端数据库
从第一个版本开始,AIR就包含了对创建和使用SQLite数据库来存储客户端数据的支持。AIR 1.5添加了对事务的支持,而AIR 2使用事务保存点对它进行了改进。

HTML5通过一种轻量关系数据库引入了对客户端数据库的支持,它公开一个类似SQL的API用于数据访问。但是,目前的实现具有一些限制,一些用户代理限制了可在客户端数据库中存储的数据量,从而限制或防止拒绝服务攻击。

目前,HTML5客户端数据库API已禁用,因为AIR中的本地数据库支持提供了一系列特性,包含并超越了HTML5标准指定的客户端数据库。

离线缓存
HTML5中另一个与在客户端存储数据相关的特性就是所谓的应用程序缓存。使用应用程序缓存,应用程序可以指定哪些资源应该在客户端上缓存,哪些应该始终从网络访问,以便用户甚至能够在未联网时与Web应用程序和文档交互。

默认情况下,AIR应用程序的所有文件和资源位于用户的本地磁盘上。但是,需要联网的应用程序可以使用networkChange事件和ServiceMonitor类来确定某些网络服务的可用性。当应用程序离线时,应用程序可以通过flash.data.*类使用文件系统上或数据库内本地缓存的资源。
WebGL:由于目前Safari只在装有雪豹系统的在Mac平台上支持WebGL,AIR 3暂时停止了对WebGL的支持。
HTML5 iframe沙箱:为了HTML5应用能呈现那些不可信的(和潜在危险)的内容,标准给<iframe>标签加一个沙箱属性,它能为应用提供一个额外的安全层。使用这个属性,开发者能保证或能限制一个iframe加载内容的权限。由于在AIR中已存在不同的安全和沙箱模型,这个特性已被禁用。

HTML打印:
在传统上,HTML中的打印是通过调用document.print()函数来实现的。但是,在调用此函数之后,Web应用程序的开发人员几乎无法控制实际的打印方式(这包括但不限于彩色打印是否可用、可用的纸张规格、副本数量等)。对整体样式的一定控制可以通过CSS媒体类型来实现,但所有控制仍然需要结合在浏览器中实现的逻辑和用户设置来实现
AIR 3 HTML特性一览
表2和表3是AIR对比Safari 5.0.3后的特性总结




表3:AIR3支持的HTML5特性

未来步骤
本文对概述了AIR为JavaScript开发人员提供新的HTML5特性。由于AIR中使用的HTML引擎基于Safari 5.0.3中使用的WebKit版本,所以它们具有许多相同的特性,无论是在HTML/JavaScript还是CSS渲染方面。关于对AIR领域有意义并且WebKit/Safari中包含但AIR中未包含的特性,常常可以找到至少提供了匹配功能的替代特性。在某些情况下,AIR提供了更广泛和更灵活的API,比如在本地存储、网络和桌面集成方面。想查看更多的关于在AIR中做JavaScript开发的信息,请参考HTML Developerr's Guide for Adobe AIR.
AIR 3新特性完整列表可以参考Christian Cantrell的这篇文章What's new in Adobe AIR 3.

原文链接:http://www.adobe.com/devnet/air/ajax/articles/air_and_webkit.html
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
现在如何在你的站点上使用HTML5
webkit webApp 开发技术要点总结
CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2012五大主流浏览器 HTML5 和 CSS3 兼容性大比拼
CSS3中支持IE9, Firefox, Safari, Chrome的圆角
浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服