基于Adobe* Air*的MID应用程序开发

提交新文章

2009年11月12日 23:00



摘要

本文将简要介绍在Moblin V1.0下开发Adobe AIR的应用程序。它包括如何安装和使用Adobe AIR 开发环境。另外，使用一个实例说明开发Adobe AIR应用程序的基本步骤，特别是针对MID平台的应用开发。

 

1. Adobe AIR简介

Adobe* AIR* 是一个可以把Web应用程序本地化的平台，可以使我们随时使用自己喜欢的Web应用程序。通过Adobe AIR 编译的Web应用程序可以脱离浏览器运行在桌面计算机中，并且可以使Web应用程序像桌面应用程序一样的简单易用。
Adobe* AIR* 是一个跨系统应用软件平台，他允许开发人员使用HTML、AJAX、Adobe Flash* 或者Adobe Flex* 技术在桌面环境实现“丰富互联网应用程序”的开发。AIR允许开发者使用他们熟悉的开发工具，比如Adobe Dreamweaver* CS3、Flex Builder™ 3、Flash CS3 Professional或者任何文本编辑器来创建他们的应用程序，并可以轻易的使开发好的应用程序实现跨平台的安装和使用。

Adobe AIR的应用程序开发包括两个重要的工具：

1) Adobe AIR runtime: 它是编译“丰富互联网应用程序”的跨平台运行时环境，使用Adobe Flash、Adobe Flex、HTML或Ajax的Web应用程序可以被编译成桌面应用程序。

2) Adobe AIR SDK: Adobe AIR应用程序的开发环境，它包含开发、测试需要的基本的库文件和API，同时还包含两个重要的工具“adl”开发调试工具和“adt”加密编译工具。

 

2. AJAX简介

AJAX (Asynchronous JavaScript and XML)，是用来开发交互式Web应用程序和丰富互联网应用程序的一组技术。使用Ajax，Web应用程序可以与服务器在后台进行异步通讯而不影响应用程序的运行和现有页面的显示。Ajax的应用已经引发交互式动态网页的使用率增长迅速。这个技术可以使Web应用程序更加人性化，可用性与移植性因此而增强，使Web应用程序更加接近于桌面应用程序一样美观易用。

3. 安装和运行“Adobe AIR Application runtime”

Adobe* AIR™ runtime 让开发者使用已有的Web开发技术脱离浏览器创建可以应用于多种操作系统的“丰富互联网应用程序”。

3.1 下载“Adobe AIR Application runtime”

从下面网址下载“Adobe AIR Application Installer”的Linux版本：
http://get.adobe.com/air/otherversions/.

3.2 安装“Adobe AIR Application runtime”
在shell中运行下载的二进制文件，安装后文件系统中会增加 “/opt/Adobe AIR Application Installer” 这个路径来存储“Adobe AIR Application runtime”

3.3 运行“Adobe AIR Application runtime”
安装以后，在“/opt/”下会出现一个“Adobe AIR Application Installer”文件夹，可以在桌面创建一个链接到“Adobe AIR Application Installer”，或者在shell中运行“Adobe AIR Application Installer”程序文件。

 

4. 安装和运行Adobe AIR应用程序

 

4.1 AIR包
下载以“air”为扩展名的AIR包文件，下载时需注意发行版本是否适用于当前系统中安装的“Adobe AIR Application Installer”版本。
安装AIR应用程序
1) 运行Adobe AIR Application Installer并且选择已下载的“AIR”包。

 

air-01.png
图 1. 选择“AIR”安装包。


2) 点击“安装”按钮开始安装“AIR”包。

air-02.png
图 2. 安装包信息。


3) 选择安装的路径和设置相关信息，然后点击“继续”按钮。

air-03.png
图 3. 选择路径和设置


安装以后，通常会在桌面建立一个Adobe AIR应用程序的快捷方式，双击可以启动这个应用程序，如果没有在桌面上建立快捷方式，也可以通过shell和安装时设置的路径找到这个程序的可执行文件，在shell中直接运行。

 

5. 使用AIR SDK创建一个基于HTML的AIR应用程序

 

下面通过一个基于HTML的实例，编写一个“Hello Word”应用程序，说明Adobe* AIR™是如何工作的。
开始，我们必须先安装runtime并且设置AIR SDK。这里将使用到两个重要工具“AIR Debug Launcher (ADL)”和“AIR Developer Tool (ADT)”。ADL和ADT是在shell下的应用程序，可以在AIR SDK的“bin”目录下找到。
5.1 设置Adobe AIR 程序开发环境

    1. 安装和配置Moblin开发环境。
    2. 从http://labs.adobe.com/downloads/air_linux.html 下载AIR SDK。
    3. 在任意位置解压缩下载到的“tbz2”压缩包，如：“/opt/AIRSDK”。
    4. 设置“PATH”：
    5. 在“/etc/profile”文件最后添加如下信息：
      PATH=“$PATH:/opt/AIRSDK/bin”
      export PATH
    6. 重启生效。

5.2 创建项目所需的文件
每个基于HTML的AIR项目必须包含一个文件程序描述文件——使用XML格式描述程序的元数据和主页。此外，还需要一个JavaScript文件“AIRAliases.js”——用来定义“AIR API”的类、变量和函数。
创建其他的文件：

    1. 创建文件夹并命名为HelloWorld，用来包含整个项目。
    2. 创建程序描述文件并命名为HelloWorld-app.xml。
    3. 创建首页文件命名为HelloWorld.html。
    4. 从AIR SDK中复制AIRAliases.js到项目文件夹中。

5.3 创建AIR程序描述文件
首先用下面的结构创建一个基于XML的程序描述文件：

 

 

 

 

 

<application> 

<id>…</id>


<version>…</version>


<filename>…</filename>


<initialWindow>


<content>…</content>


<visible>…</visible>


<width>…</width>


<height>…</height>


</initialWindow>


</application>







    

    1. 

    1. 打开并编辑HelloWorld-app.xml。 
      2. 

    2. 添加根元素<application>，包含AIR的程序命名空间：
      <application xmlns="http://ns.adobe.com/air/application/1.5">命名空间最后的“1.5表示适用于这个应用程序的AIR runtime的版本。 
      3. 

    3. 添加元素<id>：
      <id>examples.html.HelloWorld</id> 这个发布id将唯一的标志这个应用程序。官方推荐使用以小数点分隔的反向域名格式，例如："com.company.AppName"。这个id同时应用于安装和程序私用的数据文件夹。 
      4. 

    4. 添加元素<version>：
      <version>0.1</version> 帮助用户确定程序的发布和安装版本。 
      5. 

    5. 添加元素<filename>：
      <filename>HelloWorld</filename> 这个名称将被应用于生成可执行程序，安装目录，和其他的程序属性。 
      6. 

    6. 添加元素<initialWindow>并包含以下子元素，这部分用来描述生成应用程序窗口的属性： 
      <content>HelloWorld.html</content> 确定程序启动时第一个装载的页面。
      <visible>true</visible> 设置程序窗口是否立即可见。
      <width>400</width> 设置窗口的宽度。
      <height>200</height> 设置窗口的高度。 
      7. 

    7. 编辑后，程序描述文件应该如下所示： 
      8. 

    2. 





<?xml version="1.0" encoding="UTF-8"?>


<application xmlns="http://ns.adobe.com/air/application/1.5">


<id>examples.html.HelloWorld</id>


<version>0.1</version>


<filename>HelloWorld</filename>


<initialWindow>


<content>HelloWorld.html</content>


<visible>true</visible>


<width>400</width>


<height>200</height>


</initialWindow>


</application>







这个例子中仅仅展示了少数的程序属性，如果需要了解全部的程序属性，比如：窗口大小、位置、透明度，默认安装路径，关联的文件类型，图标等信息，可以参看官方网站的相关帮助。


5.4 创建程序主页 
创建一个简单的HTML页面，这个页面将被当作这个AIR应用程序的主页。


(1) 打开并编辑HelloWorld.html。添加如下代码：






<html>


<head>


<title>Hello World</title>


</head>


<body onLoad="appLoad()">


<h1>Hello World</h1>


</body>


</html>










(2) 在HTML文件的<head>部分载入AIRAliases.js文件：




<script src="AIRAliases.js" type="text/javascript"></script>







(3) 在AIRAliases script下添加标签，这个标签用来标记onLoad事件中需要执行的JavaScript代码：




<script type="text/javascript">


function appLoad(){


air.trace("Hello World");


}


</script>







appLoad()函数将调用air.trace()。这个信息将会在运行程序时显示在shell中，这是一个用于debug很有用的语句。


(4) 保存文件。


HelloWorld.html内容如下：




<html>


<head>


<title>Hello World</title>


<script type="text/javascript" src="AIRAliases.js"></script>


<script type="text/javascript">


function appLoad(){


air.trace("Hello World");


}


</script>


</head>


<body onLoad="appLoad()">


<h1>Hello World</h1>


</body>


</html>







5.5 测试程序 
在shell中运行并测试程序，这里需要使用到AIR Debug Launcher (ADL)。ADL可执行程序存放在AIR SDK.的bin文件夹下。 
首先打开shell并切换到工程目录下，然后运行下面的语句：




adl HelloWorld-app.xml







执行后会运行一个AIR窗口，这个窗口中将会显示刚刚编辑的页面，同时shell中会显示出air.trace()中的信息。


5.6 创建AIR安装包 
这个程序被成功运行以后，可以使用ADT程序打包这个应用程序，这个程序将被打包成以air为扩展名的AIR包程序。每个AIR安装程序都是一个包含项目文件的压缩文件。这样的AIR包文件只能通过前面所讲的Adobe AIR runtime安装。 
为了确保程序的安全性，AIR的安装包必须使用数字签名。为了开发需要，可以使用ADT或者其他的加密工具生成一个简单的、私有的密钥文件。也可以购买一个商业密钥，如VeriSign、Thawte。如果用户使用了私钥作为AIR的加密文件，安装过程中版权位置会显示“unknown”的发布者。因为私钥仅仅能保证AIR程序文件在安装和使用过程中不被修改。并不能保证其他的应用程序冒充这个私钥而安装到用户的计算机中。在发布的AIR文件中，强烈推荐使用商业性的密钥。 


5.6.1 生成密钥 
应用下面的语句生成密钥：




adt –certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword







ADT可以生成一个存储密钥的文件，并命名为sampleCert.pfx。 
这个例子中的斜体字可以替换成用户需要的任意值，密钥的类型必须是1024-RSA或 2048-RSA。


5.6.2 生成AIR安装文件 
使用下面的语句生成HelloWorld.air安装程序（在同一行中输入）：




adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air


HelloWorld-app.xml HelloWorld.html AIRAliases.js







此操作会提示输入密钥文件需要的密码。 
HelloWorld.air是ADT程序最终生成的安装文件。HelloWorld-app.xml是程序描述文件。程序描述文件后面的是这个应用程序所需要的其他文件，这个例子中只有两个文件，如果有多个文件，可以使用文件夹包括所需要的全部文件。 
执行这个语句之后，会生成AIR包文件，双击可以测试这个包的可执行性和有效性。 
（作者声明：本章内容，部分摘自http://help.adobe.com/en_US/AIR/1.5/devappshtml/）


6. Adobe AIR应用开发实例


6.1 实例介绍 
这个演示程序将会展示更多的AIR功能，并且可以表现Ajax和AIR SDK在AIR编程中的应用。 
实例包含4个主要功能：


    

  1. 展示Ajax设计的UI
    制作一个类似于Web应用程序的、可以在本地显示的UI。 
    2. 

  2. 显示网页
    在标签页中显示网站。 
    3. 

  3. 获取RSS信息
    获取RSS的地址信息，获取feeds并存储在AIR的数据库中。并且可以在标签页或者浏览器中打开一个RSS链接。 
    4. 

  4. 使用AIR数据库。
    使用AIR数据库来存储链接信息和对应用程序的设置信息。 
    5. 



6.2 设计和应用的技术 
6.2.1 Ajax的应用 
UI：使用开源的EXTJS来设计更友好、跟美观的UI。 
网络连接：使用JS中的http-request来获取feeds和Web的信息。 
6.2.2 Adobe AIR的应用 
使用AIR数据库：AIR提供了一个简单的数据库系统，可以支持一些简单的API，并可以被AIR程序快速有效的存取和使用。 
6.3 实例中的文件 
6.3.1 创建AIR程序描述文件 
AIR的程序描述文件是一个像“gcc”中“makefile”文件一样重要的文件，它包括了Adobe AIR编译和运行过程中的全部信息。 
如下创建程序描述文件：




<?xml version="1.0" encoding="utf-8" ?>


<application xmlns="http://ns.adobe.com/air/application/1.0">


<id>com.adobe.apollo.samples.fresh</id>


<version>2.1</version>


<filename>Fresh</filename>


<name>Fresh</name>


<description>RSS Reader sample JavaScript application</description>


<copyright>Copyright 2007-2008. Adobe Systems Incorporated. All rights reserved</copyright>


<initialWindow>


<title>Fresh - RSS Reader</title>


<visible>false</visible>


<content>fresh.html</content>


<height>480</height>


<width>800</width>


</initialWindow>


<installFolder>AIR Examples</installFolder>


<programMenuFolder>AIR Examples</programMenuFolder>


<icon>


<image16x16>fresh/icons/Fresh_16.png</image16x16>


<image32x32>fresh/icons/Fresh_32.png</image32x32>


<image128x128>fresh/icons/Fresh_128.png</image128x128>


</icon>


</application>







6.3.2 演示实例中的文件夹


    

    1. 

    1. data: 存储“opml”文件，这个文件中存放了一些默认的RSS信息，这个实例也将演示如果按照格式读取文件。 
      2. 

    2. extjs: 存放EXTJS开源代码的文件夹。 
      3. 

    3. extjs/css: 层叠式样式表，这个是UI的框架结构。 
      4. 

    4. extjs/images: UI中用到的图片文件。 
      5. 

    5. extjs/js: 存储EXTJS的核心代码。 
      6. 

    6. fresh/css: 存放演示程序的UI框架文件。 
      7. 

    7. fresh/icons: 存放演示程序的图标文件。 
      8. 

    8. fresh/images: 存放演示程序用到的图片文件。 
      9. 

    9. fresh/js: 存放演示程序的核心代码。 
      10. 

    2. 



6.3.3 代码文件说明


    

    1. 

    1. extjs/js/ext-base.js: 它包含设计UI的核心函数，Ajax的基本UI库。 
      2. 

    2. extjs/js/ext-all-debug.js: 存放调试和错误信息。 
      3. 

    3. fresh/js/AboutWindow.js: 控制演示程序中的“关于”对话框的显示和隐藏。 
      4. 

    4. fresh/js/AddWindow.js: 控制显示添加Web对话框。 
      5. 

    5. fresh/js/AIRAliases.js: AIR的基本API库，存放如：trace、date、time等等可以被使用的API。 
      6. 

    6. fresh/js/FeedDatabase.js: 数据库基本操作函数，如创建、插入、修改、删除等。 
      7. 

    7. fresh/js/FeedGrid.js: 为feeds绘制列表，并关联相关的操作，如鼠标点击、键盘响应等。 
      8. 

    8. fresh/js/FeedPanel.js: 应用程序的左边栏，包括显示“树”型结构、添加链接、添加文件夹、删除等信息。并且关联右侧的主界面，当点击这部分的链接或者RSS时，主界面中可以显示相应的信息。 
      9. 

    9. fresh/js/FeedProxy.js: 从RSS链接中分析并获取feeds的信息 
      10. 

    10. fresh/js/FeedReader.js: 分析feeds的信息。 
      11. 

    11. fresh/js/FeedWindow.js: 生成Add Feeds窗口。 
      12. 

    12. fresh/js/File.js: 包含对文件的I/O操作，比如打开、读写、删除等 
      13. 

    13. fresh/js/Fresh.js: 演示程序的主程序，包含整个UI的框架。 
      14. 

    14. fresh/js/MainPanel.js: 右侧的主窗口，可以显示网页、feeds等信息。 
      15. 

    15. fresh/js/OpmlFile.js, OpmlHandler.js: 包含对格式文件的操作函数。 
      16. 

    16. fresh/js/Preferences.js, PreferencesWindow.js: 控制程序主窗体的显示、移动等信息，并将这些信息存储在数据库中，每次启动程序时会从数据库中读取这些信息，并重新定位窗口。 
      17. 

    17. fresh/js/RefreshThread.js: 控制读取feeds的网络线程。 
      18. 

    18. fresh/js/TabCloseMenu.js: 主窗口中的tabbar和tab页面的显示。 
      19. 

    19. fresh/js/TreeFolderEditor.js: 包含控制左侧树形结构的函数。 
      20. 

    20. fresh/js/Utils.js: 辅助函数，如字符串操作等。 
      21. 

    2. 





6.4 使用实例 
6.4.1 运行/调试 
在shell中运行下面的语句：


$ adl application.xml





air-04.png
图 4. 实例的主界面。


6.4.2 浏览网页 
在左侧单击“Webs”下的任意项目可以在右侧打开一个新的标签页，并打开所选网站。 


air-05.png
图 5. 浏览网页。


6.4.3 浏览RSS 
点击左侧“Lists”中的任意项目，可以在右侧主页面中打开这个RSS并展示它所包含的feeds信息，左下方可以预览一个被选中的feed。 


air-06.png
图 6. 浏览RSS。


6.4.4 添加网址 
点击左侧Webs，然后点击“Add Favor”按钮，输入名称和网址，点击“Add”可以添加一个网址。 


air-07.png

图 7. 添加网址。


6.4.5 添加RSS 
点击左侧的“Lists”，然后点击“Add Faver”按钮，输入一个RSS地址，点击“Add Feed”。 


air-08.png
图 8. 添加RSS。


演示实例的基本使用方法如上所示。这个应用实例可以给我们展示通过AIR和Ajax编程出的应用程序，可以简单的使用已有的网站代码，即已有的Web应用程序的源代码，不需要做过多的修改，而且可以通过Ajax的一些成熟的开源代码方便的开发出更为优秀的丰富互联网应用程序。


 




 


总结


本文介绍了如何安装Adobe Air的开发和调试环境，并且描述了如何编写和调试运行Adobe Air的“Hello World”程序。另外，还应用一个演示实例展示了在Linux/Moblin下基于HTML的Adobe AIR应用程序的开发过程，以及AIR的基本功能——将Web应用程序本地化。可以看出，利用Adobe Air的跨平台优势，可以很容易地为MID开发出丰富的互联网应用。如果想获取更多的关于Adobe AIR的开发信息可以访问： 
http://www.adobe.com/products/air/.


参考文献




http://www.adobe.com/products/air/


http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7ecc.html


http://labs.adobe.com/technologies/air/samples/


 





相关代码下载
Demo_AdobeAirApp_Fresh.zip

关于作者


谢周意：于2005年加入英特尔公司。作为一名应用工程师，他的主要工作内容是MID软件开发支持和使用模式研究，特别是针对Web2.0和新媒体应用的研究。


刘国徽：是英特尔中国MID应用支持部门的实习生，于2008年进入英特尔实习，目前在北京大学攻读软件工程硕士学位。