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

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

第一课 : 一些无聊的前言 & 搭建开发环境

======================
前言

本教程将通过一个实例,向大家逐步介绍如何"使用Ajax技术开发Adobe AIR应用程序".

网上关于"使用Ajax技术开发Adobe AIR应用程序"的资料能找到很多,
其中最权威最全面的就是Adobe官方提供的如下两份资料:
使用 HTML 和 Ajax 开发 Adobe AIR 1.5 应用程序
针对 HTML 开发人员的 Adobe AIR 语言参考

这两份资料是学习AIR+Ajax必不可少的, 但是这类官方文档通常过于严谨 系统,讲的东西繁杂 死板,让很多和我一样急性子的新手头大,看不下去(至少我当初就是这样).

我个人更喜欢 单刀直入 的学习方式.
希望可以通过一些实例 先对整个技术有个感性的认识, 能够在自己的机器里快速搭建起开发环境,并能快速的开发出一个HelloWorld.
再以这个HelloWorld为基础, 慢慢深入学习, 从感性到理性, 学习的过程,就是一个开发复杂实例的过程.

今次 我就将站在这样一个角度, 为大家介绍(或者说演示) 如何使用Ajax技术开发一个Adobe AIR应用程序.
我最终要开发的这个应用程序是一个"利用google翻译服务查单词的小工具",暂且叫做"My Google Dict"吧,
我希望它可以具备下面的特性:

• 利用google翻译服务翻译单词,支持汉英 和 英汉.
• 支持"窗口总在最上面"的特性
• 可以最小化到系统托盘(Systray)
• 可以"记录我查询过哪些单词,并加入生词本"
• 提供一个简单的生词学习功能.就是可以把我查过的词 在屏幕上方循环的滚动播放.
• 提供一个"设置"页面,可以设置一些小该具的选项.
• 支持在线升级
• 有一个比较好看的外观,有相对良好的用户体验.

注意我前面提到的"我希望它可以具备下面的特性", 为什么这么说呢? 因为 我并不是开发好了一个这样的工具, 然后向大家分享我的开发经历和过程.
而是我还没有动手做. 我也是边摸索 边开发 边写这份教程.所以 最后 一切会不会如我希望的 还是未知.

总之, 我希望可以帮助对AIR+Ajax感兴趣的开发人员从另一个角度, 快速的走进AIR+Ajax的世界.

是的, "快速"和"直接"是我这系列文章最在乎的, 如果你需要"系统"和"深入",那么建议你在看过本教程之后,
再回过头去把Adobe官方提供的那两份资料好好的看上一遍, 并从网上找一些复杂的相关开源产品仔细的研究研究吧.

======================
准备

阅读本教程,需要您:

• 具备基本的Ajax开发能力, 能够利用HTML+JS+CSS 开发出一些简单的Web页面
• 知道 Adobe AIR 是个什么东西,有个大致的了解.
• 有一个文本编辑器, 记事本 Notepad++ EmEditor Editplus...都可以.
• 最好会使用JQuery(不会也没关系,我会在用到JQuery的地方写注释的,毕竟这个教程重点是讲解AIR,而不是JQuery.)
• 不要鄙视使用Windows的人.

注: 本教程只涉及 在windows平台下的AIR(1.5.x版)应用程序开发.其他平台请大家自行"举一反三"吧,实在抱歉了.

好了 废话不再多说 开始吧.

======================
Adobe AIR 简介

关于AIR是什么, 背景 特性 优缺点 大家可以自行去google.
在这里 我只简单说几句: 
各位想开发AIR+Ajax的朋友, 你只要把AIR当做一个特殊的Webkit浏览器就好.
它到底有多特殊,和真正的Webkit浏览器有什么不同 先暂且不去深究吧.
在整个开发过程中,其实我们要做的就是:

• 开发一个可以运行在AIR里的HTML页面(包含HTML+JS+CSS).
• 利用JS去调用AIR提供的一些API,实现我们想要的功能.

简介结束.

====================================
搭建开发环境

下载 AdobeAIRInstaller.exe, 并安装. (for windows 版本.地址:  http://get.adobe.com/air/  )
下载 AdobeAIRSDK.zip, 并解压.  (for windows 版本.地址:  http://www.adobe.com/cn/products/air/tools/sdk/ )

AIRSDK需要JDK才能正常使用,AIR(AdobeAIRInstaller)不需要.

本文全部以将AdobeAIRSDK解压到 C:\AIRSDK 目录为例.
如果解压正确,adl.exe文件的路径应该是 C:\AIRSDK\bin\adl.exe.

配置系统环境变量:
在环境变量 CLASSPATH 中追加  C:\AIRSDK\lib;   如果没有CLASSPATH 则创建.
在环境变量 PATH 中追加  C:\AIRSDK\bin;    如果没有PATH 则创建.

如果以上工作进行的正确, 则进入命令行控制台(运行cmd进入)后, 执行adl, 会看到类似下面的提示

application descriptor file not specified
usage:
  adl ( -runtime <runtime-dir> )? ( -pubid <pubid> )? -nodebug? <app-desc> <root-dir>? ( -- ... )?
  adl -help

====================================
运行第一个实例

下载本文附件lession_1.zip, 解压, 然后找到 lession_1目录, 双击运行 run.bat 文件.
如果一些正常 你可以看到下面的画面:


这个实在是太丑了, 是的,暂时就是这么丑.
别着急,会好起来的,还是先跟google问个好吧,
因为我将要开发出来的东西就是一个依托于 google翻译服务的小工具,不讨好一下google怎么行.
(希望 google不要在这个教程撰写期间被拦在墙外,那可就真的杯杯了).


====================================
实例内容分析

下面回过头来看一看这个lession_1目录里究竟有什么东西:

<app>
  |-- main.html
<common>
  |-- <css>
  |-- <images>
  |-- jquery-1.3.2.js
application.xml
run.bat

内容很简单:

app 里放着这个应用的主体文件,一个HTML(注意,是UTF-8编码的). 
打开 main.html , 大家可以看到 就是一个普普通通的HTML页面, body里写着那句 "Hello Google!" .

common 里面放着的是一些js和资源文件, 供  main.html 使用.
在这里用到了JQuery, 对JQuery不了解的同学可选择性无视.

application.xml , 应用的描述文件.是AIR应用中一个很重要的核心文件.
打开application.xml ,可以看到 <content>./app/main.html</content>  ,这就定义了 应用的主体文件.
还有 <width>640</width> <height>480</height> , 这个大家一看就知道, 是用来定义应用窗口的大小的.

总之application.xml里定义了很多这个应用的重要信息.例如 应用的主体文件是什么等等.
在这里 我就不详细叙述 application.xml 文件的格式 内容 每一个标签和属性的意义了,感兴趣的可以去看Adobe的官方文档.
不过我建议你现在先不要去看,虽然这个文件很重要 但是现在我们还没必要去深入研究它,暂时也不需要去动它.
为了避免让自己头大,为了避免被过多的东西分散我们的注意力,先忘了它吧.

run.bat 我写的一个开发期运行AIR应用的批处理文件.
打开看一下, 大家就会明白, 其实application.xml这个文件的名字是可以随意自定义的,只要运行时的参数改一下就好.

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

至此 这个 lession_1 简单的分析完了.
lession_1目录里的内容就构成了一个最基础的开发环境,
注意 是开发环境,而不是一个运行时,这个应用发布的时候是要打包成.air文件 并安装的, 这些都是后话,暂且不表.

在接下来的教程里, 我们所要做的就是不断的编辑修改完善争强main.html,

让它成为那个传说中的"My Google Dict".

好了 第一课 就到这里了, 下次再见

第二课在这里哦: 小胖的 Adobe AIR with Ajax 实例课堂(二)

评论

7 楼 viMory 2009-12-29  

  GOOD JOB!

6 楼 chpublish1012 2009-12-29  

顶  顺便同情下小胖

5 楼 fins 2009-12-29  

outclouds 写道

学习下哈 暗恋小胖中...

看到你的回复 我很兴奋!!!
点到你的blog里,发现你是男的... 于是我黑线了...

4 楼 outclouds 2009-12-29  

学习下哈 暗恋小胖中...

3 楼 fish119 2009-12-26  

Good！不错的教程！支持小胖！

2 楼 menuhin 2009-12-25  

哈哈，小胖哥你很棒啊！
我之前也只用过AIR+FLEX
谢谢啊，学习了！！

1 楼 elementstorm 2009-12-25  

支持小胖!!!
曾经用air+flex做过一个rss阅读器...
还没用过air+ajax呢