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

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

[size=large][b]第一课 : 一些无聊的前言 & 搭建开发环境[/b][/size]

======================
[size=medium][b]前言[/b][/size]

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

网上关于"使用Ajax技术开发Adobe AIR应用程序"的资料能找到很多,
其中最权威最全面的就是Adobe官方提供的如下两份资料:
[url="http://help.adobe.com/zh_CN/AIR/1.5/devappshtml/"]使用 HTML 和 Ajax 开发 Adobe AIR 1.5 应用程序[/url]
[url="http://help.adobe.com/zh_CN/AIR/1.5/jslr/index.html"]针对 HTML 开发人员的 Adobe AIR 语言参考[/url]

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

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

今次 我就将站在这样一个角度, 为大家介绍(或者说演示) 如何使用Ajax技术开发一个Adobe AIR应用程序.
我最终要开发的这个应用程序是一个"[color=red]利用google翻译服务查单词的小工具[/color]",暂且叫做"My Google Dict"吧,
我希望它可以具备下面的[color=red]特性[/color]:
[list]
[*] 利用google翻译服务翻译单词,支持汉英 和 英汉.
[*] 支持"窗口总在最上面"的特性
[*] 可以最小化到系统托盘(Systray)
[*] 可以"记录我查询过哪些单词,并加入生词本"
[*] 提供一个简单的生词学习功能.就是可以把我查过的词 在屏幕上方循环的滚动播放.
[*] 提供一个"设置"页面,可以设置一些小该具的选项.
[*] 支持在线升级
[*] 有一个比较好看的外观,有相对良好的用户体验.
[/list]
注意我前面提到的"我希望它可以具备下面的特性", 为什么这么说呢? 因为 我并不是开发好了一个这样的工具, 然后向大家分享我的开发经历和过程.
而是[color=blue]我还没有动手做. 我也是边摸索 边开发 边写这份教程[/color].所以 最后 一切会不会如我希望的 还是未知.

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

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

======================
[size=medium][b]准备[/b][/size]

阅读本教程,需要您:
[list]
[*] 具备基本的Ajax开发能力, 能够利用HTML+JS+CSS 开发出一些简单的Web页面
[*] 知道 Adobe AIR 是个什么东西,有个大致的了解.
[*] 有一个文本编辑器, 记事本 Notepad++ EmEditor Editplus...都可以.
[*] 最好会使用JQuery(不会也没关系,我会在用到JQuery的地方写注释的,毕竟这个教程重点是讲解AIR,而不是JQuery.)
[*] 不要鄙视使用Windows的人.
[/list]
[color=red][b][size=medium]注:[/size][/b][/color] 本教程只涉及 在[color=blue]windows[/color]平台下的AIR(1.5.x版)应用程序开发.其他平台请大家自行"举一反三"吧,实在抱歉了.

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

======================
[size=medium][b]Adobe AIR 简介[/b][/size]

关于AIR是什么, 背景 特性 优缺点 大家可以自行去google.
在这里 我只简单说几句:
各位想开发AIR+Ajax的朋友, 你只要把AIR[color=red]当做一个特殊的Webkit浏览器[/color]就好.
它到底有多特殊,和真正的Webkit浏览器有什么不同 先暂且不去深究吧.
在整个开发过程中,其实我们要做的就是:
[list]
[*] 开发一个可以运行在AIR里的HTML页面(包含HTML+JS+CSS).
[*] 利用JS去调用AIR提供的一些API,实现我们想要的功能.
[/list]
简介结束.

====================================
[size=medium][b]搭建开发环境[/b][/size]

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

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

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

[b]配置系统环境变量:[/b]
在环境变量 [color=darkblue]CLASSPATH [/color]中追加 [color=darkblue]C:\AIRSDK\lib;[/color] 如果没有CLASSPATH 则创建.
在环境变量 [color=darkblue]PATH [/color]中追加 [color=blue]C:\AIRSDK\bin; [/color] 如果没有PATH 则创建.

如果以上工作进行的正确, 则进入命令行控制台(运行cmd进入)后, 执行[color=blue]adl[/color], 会看到类似下面的提示
[code]
application descriptor file not specified
usage:
adl ( -runtime <runtime-dir> )? ( -pubid <pubid> )? -nodebug? <app-desc> <root-dir>? ( -- ... )?
adl -help
[/code]


====================================
[size=medium][b]运行第一个实例[/b][/size]

下载本文[b]附件[url="http://dl.iteye.com/topics/download/18069cae-1d52-395a-aa6f-63713768c585"]lession_1.zip[/url][/b], 解压, 然后找到 lession_1目录, 双击运行 run.bat 文件.
如果一些正常 你可以看到下面的画面:
[img]http://fins.iteye.com/upload/picture/pic/51718/a29e86d4-22d4-3dea-b4b2-ce42fc0b738b.jpg[/img]

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


====================================
[size=medium][b]实例内容分析[/b][/size]

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

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

内容很简单:

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

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

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

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

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

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

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

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

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

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

第二课在这里哦: [url="http://fins.iteye.com/blog/556193"]小胖的 Adobe AIR with Ajax 实例课堂(二)[/url]