`

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

AIRAdobeAjaxCSSjQuery 
阅读更多
小胖的 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>节点下的几个新的设置项:
    • <visible>,<resizable>,<minimizable>,<maximizable>,<minSize>,<maxSize>,<systemChrome>,<transparent>


从下节课开始 我们将真正的去操作AIR的API了, 敬请期待吧.
5
顶
2
踩
分享到：
| 关于"小胖的 Adobe AIR with Ajax 实例课 ...
评论
4 楼 115300111 2011-07-31  
三节都完整的看完了。很好的教程。
期待下一节。
3 楼 yunmoxue 2010-01-26  
...下一课..
2 楼 yunmoxue 2010-01-23  
呵呵  结尾挺煽动的.
期待一下.
1 楼 chpublish1012 2009-12-30  
期待下一课！
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics