小胖的 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了, 敬请期待吧.
分享到:
相关推荐
在"小胖的 Adobe AIR with Ajax 实例课堂(一)"中,我们可以期待学习如何利用Adobe AIR结合Ajax技术来构建桌面应用程序。 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新...
在"小胖的 Adobe AIR with Ajax 实例课堂(二)"这个主题中,我们将深入探讨如何结合Adobe AIR和Ajax技术来开发富客户端应用。 首先,Adobe AIR为开发者提供了一个独特的环境,它可以将Web应用程序的功能扩展到桌面,...
在IT领域,Ajax(异步JavaScript和XML)是一种在不刷新整个页面的情况下更新部分网页内容的技术,而jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和AJAX交互。ZTree是一款基于jQuery的树形插件,...
微信小程序bilibili项目实战小胖商城(源码).zip微信小程序bilibili项目实战小胖商城(源码).zip微信小程序bilibili项目实战小胖商城(源码).zip微信小程序bilibili项目实战小胖商城(源码).zip微信小程序...
小胖无限网络使用参数详细表 里面含精确的详细表说明
小胖阅读器恰到好处的简单。简单,在于外观,更在于体验。所以你一定会喜欢全新的小胖阅读器,它会给你简洁畅快的使用感受,而不需要过多的思考压力。 功能介绍 恰到好处的简单 简单,在于外观,更在于体验。所以你...
xiaopan 教程 wifi破 wpa破解pin码破解教程
内容概要:目前主要包含叫号功能,可以设置范围、选择数量、重复选择、自动选择、振动反馈、声音反馈等功能。比如用于班级抽查作业,公平有趣,学生可嗨了。 采用android多线程、异步刷新界面技术,集成了腾讯互动...
微信小程序demo:小胖看车团(源代码+截图)微信小程序demo:小胖看车团(源代码+截图)微信小程序demo:小胖看车团(源代码+截图)微信小程序demo:小胖看车团(源代码+截图)微信小程序demo:小胖看车团(源代码+截图)微信...
“路小胖”作为国内首款第三方路由器测评软件,其评测的客观性、全面性为消费者在选择路由器时提供了有力的依据。在“路小胖”的评测中,不仅仅关注路由器的硬件规格,更重要的是通过专业的测试手段,对其性能进行...
【小胖减肥记】这篇作文以幽默轻松的方式讲述了一个名叫小胖的孩子的减肥经历,从中我们可以提炼出几个与健康和生活习惯相关的知识点。 1. **肥胖与健康风险**:文章指出,过重或肥胖可能导致心血管疾病,增加身体...
针对幼儿园小班儿童设计的数学教育活动——“小胖猪开糖果店”,不仅激发了孩子们对数学的兴趣,而且通过游戏的方式让孩子们在轻松愉快的环境中感知和掌握5以内的数量,同时锻炼了他们的分类能力。 活动的设计充分...
Web版基于Adobe Acrobat PDF转图片及图片合并工具,需要安装Adobe Acrobat XI软件,Web版部署IIS的基于Adobe Acrobat也已经实现,需要的可以联系我,Web实现原理,客户端(浏览器)上传PDF到服务器中,服务器端处理...
这个“DirectX小胖娃走动源码”显然是一个使用DirectX实现的示例项目,它展示了如何通过编程使一个虚拟角色——小胖娃能够移动。我们将深入探讨DirectX中的DirectDraw和DirectSound两个组件,以及它们在游戏开发中的...
最新三年级数学上册 第六单元《计算小胖家的面积》教案 沪教版五四制.doc
基于Adobe Acrobat WinFromPDF转图片及图片合并工具,需要安装Adobe Acrobat XI软件,Web版部署IIS的基于Adobe Acrobat也已经实现,需要的可以联系我,Web实现原理,客户端(浏览器)上传PDF到服务器中,服务器端处理...
2. **数据交互**:ECharts支持从后台获取数据并动态展示,这涉及到Ajax请求或者Promise来获取JSON格式的数据,然后通过`setOption`方法更新图表内容。 3. **图表类型与配置**:ECharts支持多种图表,如折线图(line)...
标题中的“小胖、小瘦锻炼记.rar”很可能是一个关于健康锻炼或减肥塑形的电子资源,以RAR格式压缩,通常包含多个文档或图像文件。RAR是一种常见的压缩格式,用于集合多个文件并减小它们的大小以便于存储和传输。 在...
温暖的午后,小胖刚刚献完血,小胖的女朋友小红很疼爱他,决定晚上去去菜场买点蔬菜给吴小胖补补。 小红进入菜场发现她只带了n元,菜场有m种菜,但她希望买最贵的菜给小胖补补。输入格式:第一行输入一个nm(nm<=...