Adobe AIR教程for HTML/JAVASCRIPT开发

最近想研究下Adobe Air ,发现网上的资源很少。以前在kalengo学的FLEX差不多都忘光了,这次想从HTML、JS方向来学学。网上看到这篇入门教程,便转过来放着。

第一步 — 安装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/目录。

<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>

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

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

第四步 — 创建你的应用

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

<html>
<head>
  <title>My Window Title</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</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

出处:http://www.ooso.net/archives/354 (Volcano )

aptana studio 3 添加jquery 提示功能

aptana 3 相比之前的aptana 2,在代码提示的选择上有一点改变。以前是直接到插件中心下载,然后再到editor里面打对勾的,现在应该找不到了(确切的说是换地方也换名称了) aptana studio 3使用的是PortableGit的方式进行插件扩展,如果要装插件,则需要先安装aptana 3 的PortableGit。一般安装完aptana 3 首次打开时也会提示你安装的。 如果不打算安装PortableGit,也可以直接下载。 1、先说PortableGit下安装jquery代码提示插件的方法: 依次点击 Commands > Bundle Development > Install Bundle > jQuery。 这时会开始下载jquery插件包进行安装。 然后在项目里应用jquery。 依次点击 Properties > Project Build Path > jQuery 1.6.2 然后选择 相应的Jquery库即可。 整个过程无误的话,就可以使用jquery代码提示啦。

如果无法安装,可以试试直接把安装包下载(下载地址:https://github.com/aptana/javascript-jquery.ruble),然后放到目录:C:\Users\【用户名】\Aptana Rubles\javascript-jquery.ruble\ 下试试。

 

2、另外一种安装方法是

首先下载:https://raw.github.com/aptana/javascript-jquery.ruble/master/support/jquery.1.4.2.sdocml 一定 要保证是.sdocml文件不是文本文档,此链接打开后可能是一个文本网页,将网页中的内容复制保存为jquery.1.4.2.sdocml文件。

再下载:http://code.jquery.com/jquery-1.4.1-vsdoc.js

然后把这2个文件放到项目的根目录下(其实任意目录都可以),然后重启aptana就可以了。具体可查看https://wiki.appcelerator.org/display/tis/Using+JavaScript+Libraries