初学Adobe的AIR

听说过AIR有一段时间了,之前看过一些大概的简介,知道是用一些现有的技术比如html, javascript, flex等来实现桌面程序,但一直没去实际接触。在安装ADOBE CS3的时候,出来了一个名为“Acrobat.com”的桌面图标,开始不知道是什么,打开后才发现挺有意思的。才有心想去看一下是怎么弄的。后来公司同事小胖用了一个叫minitask的来提醒要做的事情,我也下载了看了一下,发现原来就是用这个AIR做出来的。所以今天晚上终于上网查找了一下资料,想学习一下如何来做AIR。

这里记录一个非常简单的入门例子,从这个网站叫Pete Freitag的人写的。我照模照样的学着做了一次,看到HELLO WORLD出来的感觉挺好的,呵呵,估计会花点时间来深入学习一下了。下面是我简略的写一下步骤,当然源代码都是从他的网站上搬来的,如果想看英文,可以去他网站看。

  1. 首先去Adobe下载需要的两个软件,一个是runtime环境的Adobe Installer,用来运行AIR程序的。另外一个是AIR SDK,用来创建AIR程序的。如果你想用HTML和JAVASCRIPT的网页技术来创建AIR程序,可以选择Ajax Deverlopers. 如果想用Flash,那就选Flash. 如果是Flex,就选Flex.
  2. 下载完后,安装Installer先。AIR SDK是一个压缩包,解压缩到任意地方就行了。然后需要在环境变量中加入这个文件包中的目录Bin。具体做法是:右键点击“我的电脑” – 选择“属性” – “高级” – “环境变量” – 在“系统变量”里的“PATH”中,加入已经解压过的AIR SDK的目录,比如我的是:C:\Program Files\Adobe\Adobe AIR SDK\bin。保存一下就可以了。
  3. 创建四个目录: /appname,   /appname/build,  /appname/source, /appname/source/icons。目录名称随你改变。
  4. 然后用DW或任意的文本编辑器来创建一个application.xml文件,放在/appname/source目录下,内容是 (注意,从pete的网站复制下来的代码,中间有空格,如果不修改,在生成程序阶段会碰到提示错误):
    <application xmlns="http://ns.adobe.com/air/application/1.0">
      <id>com.example.appname</id>
      <version>1.0</version>
      <filename>AppName</filename>
      <initialWindow>
        <content>index.html</content>
        <visible>true</visible>
        <width>600</width>
        <height>600</height>
      </initialWindow>
      <icon>
        <image16x16>icons/appname-16.png</image16x16>
        <image32x32>icons/appname-32.png</image32x32>
        <image48x48>icons/appname-48.png</image48x48>
        <image128x128>icons/appname-128.png</image128x128>
      </icon>
    </application>
  5. 再创建一个index.html文件,也是放在/appname/source中。如果有CSS或JAVASCRIPT文件,都放在/appname/source目录里.
    <html>
    <head>
      <title>My Window Title</title>
    </head>
    <body>
      <h1>Hello World</h1>
    </body>
    </html>
  6. 在application.xml文件中,你会看到最后几句是关于icon图标的,找到一个图标,修改成4种尺寸,然后放到/appname/source/icons目录下.
  7. 前期工作已经做完,下面开始来看效果已经生成AIR程序.
  8. 打开cmd命令行窗口,去/appname/source目录下,运行 adl application.xml,一个窗口就会打开,上面写着非常熟悉的”HELLO WORLD”。 如果出现错误,可能是上面的PATH环境变量没有设好。或者直接输入\bin\adl application.xml,”/bin”前面需要加入你保存好的目录名称,比如如果按照我的情况,那就得输入“C:\Program Files\Adobe\Adobe AIR SDK\bin\adl application.xml”
  9. 上面是为了测试,下面需要把它给打包,以便发给别人来使用.
  10. 首先需要生成一个验证文件certificate,放在/appname目录下。
    adt -certificate -cn SelfSign -ou Dev -o "Example" -c US 2048-RSA cert.pfx password

    这里它最后的一个单词”password”,就是密码,你可以把它换成你想要的密码。

  11. 然后就是开始生成AIR程序了。去/appname/source目录下,输入
    adt -package -storetype pkcs12 -keystore ../cert.pfx ../build/AirTest.air application.xml .

    注意最后面有个”.”,然后会出现”password: “,你在后面输入你的密码,回车,这样在/appname/build目录里就会出现你的第一个AIR程序了! 然后双击它,开始提示安装,在桌面生成一个图标,再双击图标,你的AIR程序就打开了! 很有意思的一个过程. 下次准备做个自己版本的minitask.