小胖的 Adobe AIR with Ajax 实例课堂(三)

fins

浏览: 2610875 次
性别:
来自: 小胖儿的大城

最近访客更多访客>>

快了的男孩

sagadan

fancycat

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AIR & Flex & AS

AIR Adobe Ajax CSS jQuery

小胖的 Adobe AIR with Ajax 实例课堂(三)

第三课 : 外观美化和特殊效果

======================

"喂,死胖子,AIR可是RIA时代的产物啊,可是极具艺术气息的Adobe的力作啊, 为什么你开发的那个东西如此的难看啊?"
看过前两课的示例之后一定很多同学都在这么想吧?
好吧, 我承认前面的例子实在是太丑陋了,让人看了之后不仅仅对这本教程,甚至对AIR都失去了信心.
我知错了, 本节课我就来试着完善一下这个小工具的外观吧让它看起来酷一些.

我在第一课的时候提到过:我们可以把"AIR当做一个特殊的Webkit浏览器", 在开发时可以尽情的使用HTML CSS JS 这三大利器.
而且我们可以抛掉恼人的"跨浏览器"问题, 还可以使用一些CSS3的特性,这一切让开发过程相对于传统的WEB开发惬意了许多.
(AIR 1.5对CSS3的支持还很有限,但是在2.0beta里已经增强了很多, 相信随着时间的推移,AIR对于HTML5 CSS3的支持一定会越来越好.)

这次的界面美化我借鉴了一些IPhone 和 Andorid的设计,最后把在前两课中那个丑陋的"My Google Dict"变成了下图的样子:

[图1]
(注: "选择壁纸"的功能目前并没有实现.)

虽然现在的样子也算不上好看,但界面至少变得有些技术含量了.

新的界面中增加了背景图片(壁纸),
利用CSS3的"border-radius"特性绘制了一些圆角的边框,让界面变得不再死板.
适当的使用了透明度(opacity/alpha通道)提升了画面效果.
在界面展现中还使用到了淡入淡出、缩放、滑动(slide)等动画特效.
在用户交互方面也做了一些小改进,例如在输入单词后按ctrl+回车直接翻译,无需用鼠标去点击翻译按钮.

本来还想应用一下阴影效果(box-shadow text-shadow) 和 CSS版的渐变色效果(-webkit-gradient), 无奈AIR1.5目前还不支持这几个CSS效果.
另外大家可能注意到了, 我开发出来的界面上的文字效果跟 Andorid和IPhone比有一定差距,
这主要是因为AIR的抗锯齿功能实现的很不理想,导致无法展现非常漂亮的平滑字体平滑圆角框等.
所以如果大家追求效果的极致,目前最好的做法还是使用图片.
在这里我就先不追求极致了呵呵.

关于界面外观的美化就先说这些吧,至于具体做法我不打算详述,代码我也不贴出来了.
因为它们更多的关乎到CSS和JQuery的使用,与AIR关系不大, 感兴趣的直接下载附件lession3.zip 直接看源码吧,有问题的话欢迎跟帖交流.

注: 由于界面美化后,代码增多, 代码的结构发生了些变化.
将所有的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一下对这两个属性的解释:

引用

systemChrome （可选）如果将此属性设置为 standard，则将显示操作系统提供的标准系统镶边。如果将其设置为 none，则不
显示任何系统镶边。系统镶边设置在运行时无法更改。

transparent （可选）如果希望应用程序窗口支持 Alpha 混合，则设置为 "true"。透明窗口绘制起来可能比较慢且需要更多内
存。透明设置在运行时无法更改。
重要说明：只有在 systemChrome 为 none 时，才能将 transparent 设置为 true。

我再简单概括一下:
systemChrome为none时,窗口就无边框无标题栏了.
transparent为true时, 窗口的背景就变成透明了.但是前提是主页面中的<body>的背景色要为"transparent",
这个可以通过设置body的css style来实现,设置代码为"background-color : transparent;",或者不设置任何的背景信息(因为默认就是transparent)

按前面说的设置后, 运行我们的程序, 变成了这个模样:

[图2]

对比一下和图1的区别,systemChrome和transparent的作用就不言而喻了.

现在这个小工具好看多了吧嘿嘿.

快运行一下附件lession3.zip 中的程序看一看实际效果吧.

等等!!!!很多朋友可能已经发现了, 没有了边框自然是酷, 但是现在我们要怎样才能关闭和移动窗口啊?怎样才能调整窗口大小啊?

这个问题我们下一节课来解决吧.

======================

做一下本节课的总结吧

AIR 支持部分CSS3的特性, 可以让我们更好的来美化界面
AIR 的抗锯齿(平滑字体等)能力还有待于进一步加强, 在此之前,如果追求效果的完美,建议使用图片.
介绍了应用程序描述文件(application.xml)的<initialWindow>节点下的几个新的设置项:

从下节课开始我们将真正的去操作AIR的API了, 敬请期待吧.

lession_3.zip (338.9 KB)
下载次数: 226

5
顶

2
踩

分享到：

2009-12-29 23:48
浏览 3719
评论(4)
分类:Web前端
查看更多

4 楼 115300111 2011-07-31

三节都完整的看完了。很好的教程。
期待下一节。

3 楼 yunmoxue 2010-01-26

...下一课..

2 楼 yunmoxue 2010-01-23

呵呵结尾挺煽动的.
期待一下.

1 楼 chpublish1012 2009-12-30

期待下一课！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论