本文介绍如何使用CSS3和HTML5特性美化Adobe AIR应用界面，包括背景图片、圆角边框、透明度效果及动画特效，并讲解如何配置application.xml实现窗口自定义。
小胖的 Adobe AIR with Ajax 实例课堂(三)
[size=large][b]第三课 : 外观美化 和 特殊效果 [/b][/size]
======================
"喂,死胖子,AIR可是RIA时代的产物啊,可是极具艺术气息的Adobe的力作啊, 为什么你开发的那个东西如此的难看啊?"
看过前两课的示例之后 一定很多同学都在这么想吧?
好吧, 我承认前面的例子实在是太丑陋了,让人看了之后不仅仅对这本教程,甚至对AIR都失去了信心.
我知错了, 本节课我就来试着完善一下这个小工具的外观吧 让它看起来酷一些.
我在第一课的时候提到过:我们可以把"AIR当做一个特殊的Webkit浏览器", 在开发时可以尽情的使用HTML CSS JS 这三大利器.
而且我们[color=blue]可以抛掉恼人的"跨浏览器"问题[/color], 还可以[color=blue]使用一些CSS3的特性[/color],这一切让开发过程相对于传统的WEB开发惬意了许多.
(AIR 1.5对CSS3的支持还很有限,但是在2.0beta里已经增强了很多, 相信随着时间的推移,AIR对于HTML5 CSS3的支持一定会越来越好.)
这次的界面美化 我借鉴了一些IPhone 和 Andorid的设计,最后把在前两课中那个丑陋的"My Google Dict"变成了下图的样子:
[img]http://fins.iteye.com/upload/picture/pic/51880/4cdc3d36-95fc-398f-8bd1-af1527fc093e.png[/img]
[图1]
(注: "选择壁纸"的功能目前并没有实现.)
虽然现在的样子也算不上好看,但界面至少变得有些技术含量了.
[list]
[*]新的界面中增加了背景图片(壁纸),
[*]利用CSS3的"border-radius"特性绘制了一些圆角的边框,让界面变得不再死板.
[*]适当的使用了透明度(opacity/alpha通道)提升了画面效果.
[*]在界面展现中 还使用到了 淡入淡出、缩放、滑动(slide)等动画特效.
[*]在用户交互方面也做了一些小改进,例如在输入单词后 按ctrl+回车 直接翻译,无需用鼠标去点击翻译按钮.
[/list]
本来还想应用一下 阴影效果(box-shadow text-shadow) 和 CSS版的渐变色效果(-webkit-gradient), 无奈AIR1.5目前还不支持这几个CSS效果.
另外 大家可能注意到了, 我开发出来的界面上的文字效果跟 Andorid和IPhone比有一定差距,
这主要是因为AIR的[color=blue]抗锯齿功能实现的很不理想[/color],导致无法展现非常漂亮的平滑字体 平滑圆角框等.
所以如果大家追求效果的极致,目前最好的做法还是使用图片.
在这里我就先不追求极致了 呵呵.
关于界面外观的美化就先说这些吧,至于具体做法 我不打算详述,代码我也不贴出来了.
因为它们更多的关乎到CSS和JQuery的使用,与AIR关系不大, 感兴趣的直接下载 [url="http://dl.iteye.com/topics/download/a3de501b-6038-36ee-9bb9-de8f8b0df5fa"]附件lession3.zip[/url] 直接看源码吧,有问题的话欢迎跟帖交流.
注: 由于界面美化后,代码增多, 代码的结构发生了些变化.
将所有的css抽取到 app-style.css 中, js代码抽取到app-main.js中,并且引入了一个JQuery的扩展包(jquery-ui-1.7.2.custom.min.js).
同时html代码部分也做了重构,大家看代码时注意一下.
======================================
经过了第一版的美化,虽然外表好看了一些, 但是还需要对界面做一些完善.
首先 对于这样一个小工具, 应该可以让用户随意的改变窗口的大小,但是应该有一个限制, 不能让用户把它拖的过小或过大,否则影响美观和使用.
其次 没有必要让它最大化的, 窗口右上角的最大化按钮应该禁用掉.
在AIR中实现上面的两个需求其实很简单, 通过配置 无需编码即可实现.
还记得第一课里提到的那个 application.xml 文件吧, 现在是时候对它做一些修改了.
打开application.xml,找到 <initialWindow> 节点, 新增几个它子节点,变成下面的样子
下面来说一说这几个之前没有提过的子节点的作用吧.
设置了这几个属性后, 我前面提到的需求就可以满足了.
但是 我还是不满意,界面中似乎还有些地方需要改进.
之前我在主界面的最外层使用了圆角边框,但是整个窗口的外观还是一个有标题 有边框的 传统的矩形窗口,这样的窗口太没个性了 且不够美观不够酷.
要是有一个可以自定义形状的 无边框的窗口该多好了.
这个也没问题!
在 application.xml 文件的 <initialWindow> 节点下 新增下面的两个子节点就可以了:
我偷个懒,从官方文档里copy一下对这两个属性的解释:
[quote]
systemChrome （可选）如果将此属性设置为 standard，则将显示操作系统提供的标准系统镶边。如果将其设置为 none，则不
显示任何系统镶边。系统镶边设置在运行时无法更改。
transparent （可选）如果希望应用程序窗口支持 Alpha 混合，则设置为 "true"。透明窗口绘制起来可能比较慢且需要更多内
存。透明设置在运行时无法更改。
重要说明： 只有在 systemChrome 为 none 时，才能将 transparent 设置为 true。
[/quote]
我再简单概括一下:
[color=blue]systemChrome[/color]为none时,窗口就无边框无标题栏了.
[color=blue]transparent[/color]为true时, 窗口的背景就变成透明了.但是 前提是 主页面中的<body>的背景色要为"transparent",
这个可以通过设置body的css style来实现,设置代码为"background-color : transparent;",或者不设置任何的背景信息(因为默认就是transparent)
按前面说的设置后, 运行我们的程序, 变成了这个模样:
[img]http://fins.iteye.com/upload/picture/pic/51882/cba07373-c182-35ff-bc84-6fecadd91ddd.png[/img]
[图2]
对比一下和图1的区别,systemChrome和transparent的作用就不言而喻了.
现在这个小工具好看多了吧 嘿嘿.
快运行一下 [url="http://dl.iteye.com/topics/download/a3de501b-6038-36ee-9bb9-de8f8b0df5fa"]附件lession3.zip[/url] 中的程序 看一看实际效果吧.
等等!!!!很多朋友可能已经发现了, 没有了边框自然是酷, 但是现在我们要怎样才能关闭和移动窗口啊?怎样才能调整窗口大小啊?
这个问题 我们下一节课来解决吧.
======================
做一下本节课的[b][color=red]总结[/color][/b]吧
[list]
[*] AIR 支持部分CSS3的特性, 可以让我们更好的来美化界面
[*] AIR 的抗锯齿(平滑字体等)能力还有待于进一步加强, 在此之前,如果追求效果的完美,建议使用图片.
[*] 介绍了应用程序描述文件(application.xml)的<initialWindow>节点下的几个新的设置项:
<visible>,<resizable>,<minimizable>,<maximizable>,<minSize>,<maxSize>,<systemChrome>,<transparent>
[/list]
从下节课开始 我们将真正的去操作AIR的API了, 敬请期待吧.
[size=large][b]第三课 : 外观美化 和 特殊效果 [/b][/size]
======================
"喂,死胖子,AIR可是RIA时代的产物啊,可是极具艺术气息的Adobe的力作啊, 为什么你开发的那个东西如此的难看啊?"
看过前两课的示例之后 一定很多同学都在这么想吧?
好吧, 我承认前面的例子实在是太丑陋了,让人看了之后不仅仅对这本教程,甚至对AIR都失去了信心.
我知错了, 本节课我就来试着完善一下这个小工具的外观吧 让它看起来酷一些.
我在第一课的时候提到过:我们可以把"AIR当做一个特殊的Webkit浏览器", 在开发时可以尽情的使用HTML CSS JS 这三大利器.
而且我们[color=blue]可以抛掉恼人的"跨浏览器"问题[/color], 还可以[color=blue]使用一些CSS3的特性[/color],这一切让开发过程相对于传统的WEB开发惬意了许多.
(AIR 1.5对CSS3的支持还很有限,但是在2.0beta里已经增强了很多, 相信随着时间的推移,AIR对于HTML5 CSS3的支持一定会越来越好.)
这次的界面美化 我借鉴了一些IPhone 和 Andorid的设计,最后把在前两课中那个丑陋的"My Google Dict"变成了下图的样子:
[img]http://fins.iteye.com/upload/picture/pic/51880/4cdc3d36-95fc-398f-8bd1-af1527fc093e.png[/img]
[图1]
(注: "选择壁纸"的功能目前并没有实现.)
虽然现在的样子也算不上好看,但界面至少变得有些技术含量了.
[list]
[*]新的界面中增加了背景图片(壁纸),
[*]利用CSS3的"border-radius"特性绘制了一些圆角的边框,让界面变得不再死板.
[*]适当的使用了透明度(opacity/alpha通道)提升了画面效果.
[*]在界面展现中 还使用到了 淡入淡出、缩放、滑动(slide)等动画特效.
[*]在用户交互方面也做了一些小改进,例如在输入单词后 按ctrl+回车 直接翻译,无需用鼠标去点击翻译按钮.
[/list]
本来还想应用一下 阴影效果(box-shadow text-shadow) 和 CSS版的渐变色效果(-webkit-gradient), 无奈AIR1.5目前还不支持这几个CSS效果.
另外 大家可能注意到了, 我开发出来的界面上的文字效果跟 Andorid和IPhone比有一定差距,
这主要是因为AIR的[color=blue]抗锯齿功能实现的很不理想[/color],导致无法展现非常漂亮的平滑字体 平滑圆角框等.
所以如果大家追求效果的极致,目前最好的做法还是使用图片.
在这里我就先不追求极致了 呵呵.
关于界面外观的美化就先说这些吧,至于具体做法 我不打算详述,代码我也不贴出来了.
因为它们更多的关乎到CSS和JQuery的使用,与AIR关系不大, 感兴趣的直接下载 [url="http://dl.iteye.com/topics/download/a3de501b-6038-36ee-9bb9-de8f8b0df5fa"]附件lession3.zip[/url] 直接看源码吧,有问题的话欢迎跟帖交流.
注: 由于界面美化后,代码增多, 代码的结构发生了些变化.
将所有的css抽取到 app-style.css 中, js代码抽取到app-main.js中,并且引入了一个JQuery的扩展包(jquery-ui-1.7.2.custom.min.js).
同时html代码部分也做了重构,大家看代码时注意一下.
======================================
经过了第一版的美化,虽然外表好看了一些, 但是还需要对界面做一些完善.
首先 对于这样一个小工具, 应该可以让用户随意的改变窗口的大小,但是应该有一个限制, 不能让用户把它拖的过小或过大,否则影响美观和使用.
其次 没有必要让它最大化的, 窗口右上角的最大化按钮应该禁用掉.
在AIR中实现上面的两个需求其实很简单, 通过配置 无需编码即可实现.
还记得第一课里提到的那个 application.xml 文件吧, 现在是时候对它做一些修改了.
打开application.xml,找到 <initialWindow> 节点, 新增几个它子节点,变成下面的样子
<initialWindow>
<title>My Google Dict</title>
<content>./app/main.html</content>
<width>320</width>
<height>480</height>
<visible>true</visible>
<resizable>true</resizable>
<minimizable>true</minimizable>
<maximizable>false</maximizable>
<minSize>240 280</minSize>
<maxSize>400 800</maxSize>
</initialWindow>
下面来说一说这几个之前没有提过的子节点的作用吧.
<visible>true</visible> 设置窗体是否立即可见(运行后即可见)
<resizable>true</resizable> 设置窗体是否"可由用户改变大小"
<minimizable>true</minimizable> 设置窗体是否"可最小化"
<maximizable>false</maximizable> 设置窗体是否"可最大化"
<minSize>240 280</minSize> 设置用户改变窗体大小时,所允许的最小尺寸,值为"宽度 高度".
<maxSize>400 800</maxSize> 设置用户改变窗体大小时,所允许的最大尺寸,值为"宽度 高度".
设置了这几个属性后, 我前面提到的需求就可以满足了.
但是 我还是不满意,界面中似乎还有些地方需要改进.
之前我在主界面的最外层使用了圆角边框,但是整个窗口的外观还是一个有标题 有边框的 传统的矩形窗口,这样的窗口太没个性了 且不够美观不够酷.
要是有一个可以自定义形状的 无边框的窗口该多好了.
这个也没问题!
在 application.xml 文件的 <initialWindow> 节点下 新增下面的两个子节点就可以了:
<systemChrome>none</systemChrome>
<transparent>true</transparent>
我偷个懒,从官方文档里copy一下对这两个属性的解释:
[quote]
systemChrome （可选）如果将此属性设置为 standard，则将显示操作系统提供的标准系统镶边。如果将其设置为 none，则不
显示任何系统镶边。系统镶边设置在运行时无法更改。
transparent （可选）如果希望应用程序窗口支持 Alpha 混合，则设置为 "true"。透明窗口绘制起来可能比较慢且需要更多内
存。透明设置在运行时无法更改。
重要说明： 只有在 systemChrome 为 none 时，才能将 transparent 设置为 true。
[/quote]
我再简单概括一下:
[color=blue]systemChrome[/color]为none时,窗口就无边框无标题栏了.
[color=blue]transparent[/color]为true时, 窗口的背景就变成透明了.但是 前提是 主页面中的<body>的背景色要为"transparent",
这个可以通过设置body的css style来实现,设置代码为"background-color : transparent;",或者不设置任何的背景信息(因为默认就是transparent)
按前面说的设置后, 运行我们的程序, 变成了这个模样:
[img]http://fins.iteye.com/upload/picture/pic/51882/cba07373-c182-35ff-bc84-6fecadd91ddd.png[/img]
[图2]
对比一下和图1的区别,systemChrome和transparent的作用就不言而喻了.
现在这个小工具好看多了吧 嘿嘿.
快运行一下 [url="http://dl.iteye.com/topics/download/a3de501b-6038-36ee-9bb9-de8f8b0df5fa"]附件lession3.zip[/url] 中的程序 看一看实际效果吧.
等等!!!!很多朋友可能已经发现了, 没有了边框自然是酷, 但是现在我们要怎样才能关闭和移动窗口啊?怎样才能调整窗口大小啊?
这个问题 我们下一节课来解决吧.
======================
做一下本节课的[b][color=red]总结[/color][/b]吧
[list]
[*] AIR 支持部分CSS3的特性, 可以让我们更好的来美化界面
[*] AIR 的抗锯齿(平滑字体等)能力还有待于进一步加强, 在此之前,如果追求效果的完美,建议使用图片.
[*] 介绍了应用程序描述文件(application.xml)的<initialWindow>节点下的几个新的设置项:
<visible>,<resizable>,<minimizable>,<maximizable>,<minSize>,<maxSize>,<systemChrome>,<transparent>
[/list]
从下节课开始 我们将真正的去操作AIR的API了, 敬请期待吧.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
