小胖的 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应用程序的功能扩展到桌面,...
Tripple Farm:Match 3 Combination Game Complete Project 合成小镇三消Unity合成消除游戏项目游戏插件模版C# 支持Unity2020.3.4或更高 您知道像三合镇这样的著名益智游戏,并且您想制作一个自己的游戏。就是这样。这个包正好适合您。 这是一个完整的项目,您可以在零分钟内将其上传到 appstore 或 googleplay 商店。 基本规则: 3个或以上相同的道具可以匹配升级为新的道具。动物如果被困住,也可以合并。 羽毛: -移动(android/ios)就绪。 - 包含所有源代码。 -超过 12 座建筑/军团需要升级。 -三种特殊物品可以提供帮助。 - 三个不同的主题(场景和动物) -unity iap 支持 -Unity UI -广告位已准备好 -包含详细文档
内容概要:本文档是一份针对Java初学者的基础测试题,分为不定项选择题、简答题和编程题三大部分。选择题涵盖标识符、数组初始化、面向对象概念、运算符优先级、循环结构、对象行为、变量命名规则、基本
内容概要:本文详细介绍了如何利用MATLAB进行机器人运动学、动力学以及轨迹规划的建模与仿真。首先,通过具体的代码实例展示了正运动学和逆运动学的实现方法,包括使用DH参数建立机械臂模型、计算末端位姿以及求解关节角度。接着,讨论了雅克比矩阵的应用及其在速度控制中的重要性,并解释了如何检测和处理奇异位形。然后,深入探讨了动力学建模的方法,如使用拉格朗日方程和符号工具箱自动生成动力学方程。此外,还介绍了多种轨迹规划技术,包括抛物线插值和五次多项式插值,确保路径平滑性和可控性。最后,提供了常见仿真问题的解决方案,强调了在实际工程项目中需要注意的关键点。 适合人群:对机器人控制感兴趣的初学者、希望深入了解机器人运动学和动力学的学生及研究人员、从事机器人开发的技术人员。 使用场景及目标:① 学习如何使用MATLAB进行机器人运动学、动力学建模;② 掌握不同类型的轨迹规划方法及其应用场景;③ 解决仿真过程中遇到的各种问题,提高仿真的稳定性和准确性。 其他说明:文中提供的代码片段可以直接用于实验和教学,帮助读者更好地理解和掌握相关概念和技术。同时,针对实际应用中的挑战提出了实用的建议,有助于提升项目的成功率。
包括:源程序工程文件、Proteus仿真工程文件、配套技术手册等 1、采用51/52单片机作为主控芯片; 2、发送机:18B20测温、开关模拟灯光,发送数据; 3、接收机:接受数据、12864液晶显示;
内容概要:本文探讨了在微电网优化中如何处理风光能源的不确定性,特别是通过引入机会约束和概率序列的方法。首先介绍了风光能源的随机性和波动性带来的挑战,然后详细解释了机会约束的概念,即在一定概率水平下放松约束条件,从而提高模型灵活性。接着讨论了概率序列的应用,它通过对历史数据分析生成多个可能的风光发电场景及其概率,以此为基础构建优化模型的目标函数和约束条件。文中提供了具体的Matlab代码示例,演示了如何利用CPLEX求解器解决此类优化问题,并强调了参数选择、模型构建、约束添加以及求解过程中应注意的技术细节。此外,还提到了一些实用技巧,如通过调整MIP gap提升求解效率,使用K-means聚类减少场景数量以降低计算复杂度等。 适合人群:从事电力系统研究、微电网设计与运营的专业人士,尤其是那些对风光不确定性建模感兴趣的研究者和技术人员。 使用场景及目标:适用于需要评估和优化含有大量间歇性可再生能源接入的微电网系统,旨在提高系统的经济性和稳定性,确保在面对风光出力波动时仍能维持正常运作。 其他说明:文中提到的方法不仅有助于学术研究,也可应用于实际工程项目中,帮助工程师们制定更为稳健的微电网调度计划。同时,文中提供的代码片段可供读者参考并应用于类似的问题情境中。
linux之用户管理教程.md
内容概要:本文详细介绍了如何利用组态王和西门子S7-200 PLC构建六层或八层电梯控制系统。首先进行合理的IO地址分配,明确输入输出信号的功能及其对应的物理地址。接着深入解析了PLC源代码的关键部分,涵盖初始化、呼叫处理、电梯运行逻辑和平层处理等方面。此外,提供了组态王源代码用于实现动画仿真,展示了电梯轿厢的画面创建及动画连接方法。最后附上了详细的电气原理图和布局图,帮助理解和实施整个系统架构。 适合人群:从事工业自动化控制领域的工程师和技术人员,尤其是对PLC编程和人机界面开发感兴趣的从业者。 使用场景及目标:适用于教学培训、工程项目实践以及研究开发等场合。旨在为相关人员提供一个完整的电梯控制系统设计方案,便于他们掌握PLC编程技巧、熟悉组态软件的应用,并能够独立完成类似项目的开发。 其他说明:文中不仅包含了理论知识讲解,还分享了许多实际操作经验,如解决编码器丢脉冲的问题、优化平层停车精度的方法等。同时强调了安全性和可靠性方面的考虑,例如设置了多重保护机制以确保系统稳定运行。
在工业生产和设备运行过程中,滚动轴承故障、变压器油气故障等领域的数据分类与故障诊断至关重要。准确的数据分类与故障诊断能够及时发现设备潜在问题,避免故障恶化导致的生产事故与经济损失。LSTM能够捕获时序信息,马尔可夫场(MTF)能够一维信号转换为二维特征图,并结合CNN学习空间特征,MTF-1D-2D-CNN-LSTM-Attention模型通过将一维时序信号和二维图像融合,融合不同模态优势,并引入多头自注意力机制提高泛化能力,为数据分类与故障诊断提供了新的思路。实验结果表明,该模型在分类准确率、鲁棒性和泛化能力方面具有显著优势。多模态融合算法凭借其创新点和实验验证的有效性,在滚动轴承故障、变压器油气故障等领域展现出广阔的应用前景,有望推动相关领域故障诊断技术的进一步发展。 关键词:多模态融合;故障诊断;马尔可夫场;卷积神经网络;长短期记忆神经网络 适用平台:Matlab2023版本及以上。实验硬件设备配置如下:选用高性能计算机,搭载i7处理器,以确保数据处理和模型训练的高效性;配备16GB的内存,满足大规模数据加载和模型运算过程中的内存需求;使用高性能显卡,提供强大的并行计算能力,加速深度学习模型的训练过程。实验参数的选择依据多方面因素确定。
内容概要:本文档提供了一个面试模拟的指导框架,旨在为用户提供一个真实的面试体验。文档中的面试官名为Elian,被设定为性格温和冷静且思路清晰的形象,其主要职责是根据用户提供的简历信息和应聘岗位要求,进行一对一的模拟面试。面试官将逐一提出问题,确保每次只提一个问题,并等待候选人的回答结束后再继续下一个问题。面试官需要深入了解应聘岗位的具体要求,包括但不限于业务理解、行业知识、具体技能、专业背景以及项目经历等方面,从而全面评估候选人是否符合岗位需求。此外,文档强调了面试官应在用户主动发起提问后才开始回答,若用户未提供简历,面试官应首先邀请用户提供简历或描述应聘岗位; 适用人群:即将参加面试的求职者,特别是希望提前熟悉面试流程、提升面试技巧的人士; 使用场景及目标:①帮助求职者熟悉面试流程,提高应对实际面试的信心;②通过模拟面试,让求职者能够更好地展示自己的优势,发现自身不足之处并加以改进; 其他说明:此文档为文本格式,用户可以根据文档内容与面试官Elian进行互动,以达到最佳的模拟效果。在整个模拟过程中,用户应尽量真实地回答每一个问题,以便获得最贴近实际情况的反馈。
招聘技巧HR必看如何进行网络招聘和电话邀约.ppt
内容概要:本文详细介绍了利用三菱PLC(特别是FX系列)和组态王软件构建3x3书架式堆垛式立体库的方法。首先阐述了IO分配的原则,明确了输入输出信号的功能,如仓位检测、堆垛机运动控制等。接着深入解析了梯形图编程的具体实现,包括基本的左右移动控制、复杂的自动寻址逻辑,以及确保安全性的限位保护措施。还展示了接线图和原理图的作用,强调了正确的电气连接方式。最后讲解了组态王的画面设计技巧,通过图形化界面实现对立体库的操作和监控。 适用人群:从事自动化仓储系统设计、安装、调试的技术人员,尤其是熟悉三菱PLC和组态王的工程师。 使用场景及目标:适用于需要提高仓库空间利用率的小型仓储环境,旨在帮助技术人员掌握从硬件选型、电路设计到软件编程的全流程技能,最终实现高效稳定的自动化仓储管理。 其他说明:文中提供了多个实用的编程技巧和注意事项,如避免常见错误、优化性能参数等,有助于减少实际应用中的故障率并提升系统的可靠性。
内容概要:本文详细探讨了利用COMSOL进行电弧放电现象的模拟,重点在于采用磁流体方程(MHD)来耦合电磁、热流体和电路等多个物理场。文中介绍了关键的数学模型如磁流体动力学方程、热传导方程以及电路方程,并讨论了求解过程中遇到的技术难题,包括参数敏感性、求解器选择、网格划分等问题。此外,作者分享了许多实践经验,比如如何处理不同物理场之间的相互作用,怎样避免数值不稳定性和提高计算效率。 适用人群:适用于从事电弧放电研究的专业人士,尤其是那些希望通过数值模拟深入了解电弧行为并应用于实际工程项目的人群。 使用场景及目标:①帮助研究人员更好地理解和预测电弧放电过程中的各种物理现象;②为工程师提供优化电气设备设计的方法论支持;③指导使用者正确配置COMSOL软件的相关参数以确保高效稳定的仿真结果。 其他说明:尽管存在较高的计算复杂度和技术挑战,成功的电弧放电仿真能够显著提升对这一重要物理过程的认识水平,并促进相关领域的技术创新和发展。
内容概要:本文详细介绍了如何利用粒子群优化算法(PSO)改进极限学习机(KELM),以提升其在多维输入单维输出数据处理任务中的性能。首先简述了KELM的工作原理及其快速训练的特点,接着深入探讨了PSO算法的机制,包括粒子的速度和位置更新规则。然后展示了如何将PSO应用于优化KELM的关键参数,如输入权值和隐含层偏置,并提供了具体的Python代码实现。通过对模拟数据和实际数据集的实验对比,证明了PSO优化后的KELM在预测精度上有显著提升,尤其是在处理复杂数据时表现出色。 适合人群:对机器学习尤其是深度学习有一定了解的研究人员和技术爱好者,以及从事数据分析工作的专业人士。 使用场景及目标:适用于需要高效处理多维输入单维输出数据的任务,如时间序列预测、回归分析等。主要目标是通过优化模型参数,提高预测准确性并减少人工调参的时间成本。 其他说明:文中不仅给出了详细的理论解释,还附上了完整的代码示例,便于读者理解和实践。此外,还讨论了一些实用技巧,如参数选择、数据预处理等,有助于解决实际应用中的常见问题。
内容概要:本文介绍了利用粒子群算法(PSO)解决微网优化调度问题的方法。主要内容涵盖微网系统的组成(风力、光伏、储能、燃气轮机、柴油机)、需求响应机制、储能SOC约束处理及粒子群算法的具体实现。文中详细描述了目标函数的设计,包括发电成本、启停成本、需求响应惩罚项和SOC连续性惩罚项的计算方法。同时,阐述了粒子群算法的核心迭代逻辑及其参数调整策略,如惯性权重的线性递减策略。此外,还讨论了代码调试过程中遇到的问题及解决方案,并展示了仿真结果,证明了模型的有效性和优越性。 适合人群:从事电力系统优化、智能算法应用的研究人员和技术人员,特别是对微网调度感兴趣的读者。 使用场景及目标:适用于研究和开发微网优化调度系统,旨在提高供电稳定性的同时降低成本。具体应用场景包括但不限于分布式能源管理、工业园区能源调度等。目标是通过合理的调度策略,使微网系统在满足需求响应的前提下,实现经济效益最大化。 其他说明:本文提供的Matlab程序具有良好的模块化设计,便于扩展和维护。建议读者在理解和掌握基本原理的基础上,结合实际情况进行改进和创新。
KUKA机器人相关资料
基于多智能体的高层建筑分阶段火灾疏散仿 真及策略研究.pdf
Iterative Time Series Imputation by Maintaining Dependency Consistency (ACM TKDD 2024)