Adobe AIR教程for HTML/JAVASCRIPT开发者

最近不是太有空,加上泡网络时间太长,对新鲜事物的敏感度有所下降。因此当Adobe出了个AIR,我还是兴趣缺缺,没功夫去试用。

但是兴趣这玩意可能也有些生理周期,前几天突然来了神把这个AIR好好端详一番,却发觉网上暂时没有适合我这种初级新手看的AIR教程,鼓捣了几天,仍然是毫无进展,我甚至连个hello world之类的简单air package都打不出来。也许小时候特意去踩过狗屎,因此现在我又走上狗屎运,在即将放弃的前一刻找到了一篇比较细致的AIR教程,记录下来,好记性不如烂键盘。

俺目前的情况是,没有安装Dreamweaver,Flash之类的软件,只用一些免费软件,所以我只打算写html/javascript之类的代码,flash方面的暂时不涉及,另外adobe提供的dreamweaver air sdk也是用不上,可谓一穷二白。

第一步 -- 安装Adobe AIR和Adobe AIR SDK

如果你还没装,可以去网站上下载Adobe AIR Runtime和Adobe AIR SDK.

装完Adobe AIR SDK以后,为了方便,你还需要把它的bin目录添加到系统的path变量下,这样你可以直接运行它的打包和debug工具。

第二步 -- 创建一些目录

接下来创建一些目录来放置代码,比如:

/appname/
/appname/source/
/appname/source/icons/
/appname/build/

第三步 -- 创建一个Application Descriptor

AIR需要一个Application Descriptor来描述它的内容和属性,这是一个XML格式的文件。

它的文件名是application.xml,放置在/appname/source/目录。

XML:
  1. <application xmlns="http://ns.adobe.com/air/application/1.0">
  2.   <id>com.example.appname </id>
  3.   <version>1.0 </version>
  4.   <filename>AppName </filename>
  5.   <initialWindow>
  6.     <content>index.html </content>
  7.     <visible>true </visible>
  8.     <width>600</width>
  9.     <height>600</height>
  10.   </initialWindow>
  11.   <icon>
  12.     <image16x16>icons/appname-16.png</image16x16>
  13.     <image32x32>icons/appname-32.png</image32x32>
  14.     <image48x48>icons/appname-48.png</image48x48>
  15.     <image128x128>icons/appname-128.png</image128x128>
  16.   </icon>
  17. </application>

这个xml文件很有些复杂,也很有一些历史,最可恶的是AIR beta1到后来的beta2乃至最后的1.0,从来就没统一过,变了又变,所以我在网上找到的一些教程都失效了,只能针对早期的beta版使用。

关于它的详细内容,可以参考模板,在adobe sdk安装目录下的templates/descriptor-template.xml.

第四步 -- 创建你的应用

下一步,创建一个index.html.

HTML:
  1. <html>
  2. <head>
  3.   <title>My Window Title</title>
  4. </head>
  5. <body>
  6.   <h1>Hello World</h1>
  7. </body>
  8. </html>

如果需要添加css,javascript以及图片,可以在/appname/source/下创建子目录放进去,就像平常写web应用那样。

第五步 -- 测试你的应用

如果你已经配置好了path环境变量(见第一步,需要重启电脑),下面很简单,首先打开一个命令行窗口,进入/appname/source/目录,然后运行:

adl application.xml

一切顺利的话,你的应用应该已经跑起来了,一个弹出的AIR应用窗口好不容易的展示它的第一次。

第六步 -- 打包你的AIR应用

在很多磕磕碰碰,反复调试之后,你可能已经完成了应用,现在你准备向朋友或者网上的菜鸟炫耀一下你的处女作。那么我们开始打包,这一步其实比我想象的要简单。

首先需要生成一个签名Certificate,并放置在应用的根目录/appname/

adt -certificate -cn SelfSign -ou Dev -o "Example" -c US 2048-RSA cert.pfx 换成你的密码

然后就是进入source目录打包:

adt -package -storetype pkcs12 -keystore ../cert.pfx ../build/AirTest.air application.xml .

不出意外的话,会当场生成一个AppName.air文件,你可以安装一下感受亲手做的第一个Air应用。

原文:Adobe AIR Tutorial for HTML / JavaScript Developers

作者: Volcano 发表于March 24, 2008 at 8:52 am

版权信息: 可以任意转载, 转载时请务必以超链接形式标明文章原始出处作者信息及此声明

Tags: ,,,,

17 条评论 »

  1. kulala 于 2008-03-24 @ 11:11:55 留言

    adt -certificate -cn SelfSign -ou Dev -o “Example” -c US 2048-RSA cert.pfx 换成你的密码??
    能将个参数说明一下吗??这里默认的密码是什么?而这个“签名Certificate”又是如何生成并放置在“/appname/”下的哦???

  2. volcano 于 2008-03-24 @ 11:58:32 留言

    • 这个密码是你自己定义的密码,随便写,比如password
    • 上面的命令行运行之后,会生成一个证书文件“cert.pfx”,手工复制过去就好
    • 参数说明太长了,建议看看air开发手册的这一部分“ADT command line signing options” on page30”或者 Creating a self-signed certificate with ADT
  3. paravoice 于 2008-03-24 @ 12:55:13 留言

    Application Descriptor Reference:
    http://livedocs.adobe.com/labs/air/1/devappsflex/help.html?content=CommandLineTools_5.html#1035876

    Flex3 Document:
    http://livedocs.adobe.com/flex/3/flex3_documentation.zip

  4. kulala 于 2008-03-24 @ 20:02:40 留言

    问题是我这边执行了adt -certificate -cn SelfSign -ou Dev -o “Example” -c US 2048-RSA cert.pfx 这句话后就没有生成“cert.pfx ”,而密码不分也不知道在哪个参数位置上填写,猜测可能是在”Example”这里写上自己的密码,问题是压根都不生成“cert.pfx ”文件。

  5. volcano 于 2008-03-24 @ 20:48:58 留言

    以密码为password为例,你需要执行下面这段命令行

    adt -certificate -cn SelfSign -ou Dev -o “Example” -c US 2048-RSA cert.pfx password

  6. tomphp 于 2008-04-23 @ 17:06:12 留言

    运行成功 谢谢 希望楼主多谢点关于AIR的文章哦

  7. Jay 于 2008-05-15 @ 15:09:50 留言

    E:\Air\appname\source>adt -certificate -cn SelfSign -ou Dev -o “Example” -c US 2048-RSA cert.pfx 123

    unexpected failure: PKCS 12 storing not implemented
    java.io.IOException: PKCS 12 storing not implemented
    at com.sun.net.ssl.internal.ssl.PKCS12KeyStore.engineStore(Unknown Source)
    at java.security.KeyStore.store(Unknown Source)
    at com.adobe.air.CertificateCreator.create(CertificateCreator.java:157)
    at com.adobe.air.ADT.run(ADT.java:100)
    at com.adobe.air.ADT.main(ADT.java:29)

  8. Jay 于 2008-05-15 @ 15:11:40 留言

    不知道错在什么地方,签名创建不成功。
    楼主帮我指点一下究竟是哪里不对好吗?

  9. volcano 于 2008-05-15 @ 20:28:32 留言

    你的java sdk是什么版本

  10. Jay 于 2008-05-19 @ 09:50:27 留言

    我的java sdk是1.4版本

  11. volcano 于 2008-05-19 @ 11:41:42 留言

    我的java sdk版本是这个:

    d:\>java -version
    java version “1.5.0″
    Java(TM) 2 Runtime Environment, Standard Edition (build 1.5.0-b64)
    Java HotSpot(TM) Client VM (build 1.5.0-b64, mixed mode, sharing)

  12. Jay 于 2008-05-30 @ 16:50:37 留言

    不好意思,最近忙,所以一直没上来。
    想问个问题,这个是不是一定要Java啊?如果没有Java虚拟机的话,就不能用AIR了吗?

  13. volcano 于 2008-05-30 @ 17:02:32 留言

    我想air runtime应该是不需要java的,但是air sdk的adt.bat是这样的内容:
    @java -jar "%~dp0\..\lib\adt.jar" %*

    所以air sdk是肯定需要java的

  14. fenix 于 2008-06-02 @ 15:43:25 留言

    “然后就是进入source目录打包:

    adt -package -storetype pkcs12 -keystore ../cert.pfx ../build/AirTest.air application.xml .

    不出意外的话,会当场生成一个AppName.air文件,你可以安装一下感受亲手做的第一个Air应用。”

    這裏出了意外,我輸入adt -package -storetype pkcs12 -keystore ../cert.pfx ../build/AirTest.air application.xml .後出現:

    at least one file is required

    是少了東西嗎?

  15. volcano 于 2008-06-02 @ 16:26:53 留言

    这段命令的最后有一个点.,表示将当前目录打包,你看看是不是少了什么

  16. 张仁伟 于 2008-07-25 @ 16:44:52 留言

    ../build/AirTest.air 这个是一个文件吧,怎么来的
    后来at least one file is required

  17. Volcano 于 2008-07-25 @ 23:12:45 留言

    AirTest.air是通过之前的adl命令生成的
    adl application.xml

    你得在source目录下执行这一行命令

RSS 为此帖反馈评论 · 反向跟踪 网站

留条评论