使用 Ext、Aptana 和 AIR 构建桌面应用程序 -

baiweiyll

浏览: 28482 次
性别:
来自: 成都

最近访客更多访客>>

yhyaohu

firkeuuuu

努力拼搏

anshengman

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

使用 Ext、Aptana 和 AIR 构建桌面应用程序

博客分类：

AIR Aptana EXT 应用服务器 OpenSource

快期末了，还是写一篇最近感兴趣的，Web 应用程序桌面体验！
声明转载于developerworks中国的https://www6.software.ibm.com/developerworks/cn/education/opensource/os-ext-air/index.html
尽管 Rich Internet Applications 和 Web 2.0 一直都很流行，但是目前新兴的技术不仅关注为 Web 应用程序提供类似桌面的体验，实际上还把它们带入到了桌面中。在 Adobe Integrated Runtime（AIR）的引领下，Web 应用程序开发人员可以利用现有的 HTML、CSS、JavaScript、Flash 和 Flex 知识构建功能强大的桌面应用程序。在本教程中，您将使用开源的 Aptana Studio IDE、Aptana 的 Adobe AIR 插件和开源的 JavaScript 框架 Ext。
系统需求

您需要以下工具完成本教程的学习。

Aptana Studio V1.1 Community Edition
从 Aptana.com 下载适合您的操作系统的 Aptana Studio 版本。
Adobe AIR Plug-in for Aptana
下载 Aptana Studio Start Page（在本教程后面介绍）。
Adobe AIR Runtime
在 Aptana Studio 内部安装（Help > Install Adobe AIR Runtime）或从 Adobe Systems 安装（参见参考资料获得 AIR 的生产版本和测试版本的链接）。

什么是 AIR？

AIR 是由 Adobe Inc. 开发的运行时环境，它使用专门用来开发 Web 应用程序的技术（到目前为止）部署桌面应用程序。在撰写本教程之际，AIR 可以用于 Microsoft® Windows® 和 Mac OS X，并且有一个可用于 Linux® 的 alpha 版本。

AIR 可以使用各种不同的 Web 应用程序开发技术，例如 Adobe Flash、Flex、HTML、CSS、JavaScript 和 Ajax。这一特性使经验丰富的 Web 应用程序开发人员可以开发功能完善的桌面应用程序，而不需要学习新的编程语言。支持 JavaScript 意味着可以将功能强大的 JavaScript 框架用于桌面应用程序，比如 Ext、Prototype 和 jQuery。

除了支持 Web 开发技术外，AIR 还提供对本地文件系统的访问，允许应用程序将数据存储到用户的计算机中，而不是存储到中央数据库服务器。AIR 还可以通过 Web 服务将数据存储到远程服务器中。这种本地和远程存储支持允许 AIR 开发人员创建可以脱机工作的应用程序，将数据保存到本地文件系统，并在 Internet 连接恢复使用后同步本地文件系统并将数据上传到中央服务器。

AIR 的本地存储选项包括加密的本地存储和 SQLite 数据库，两者都与 AIR 捆绑在一起。数据也可以存储到本地 XML 文件中。

与基于浏览器的传统 Web 应用程序相比，AIR 的其他优点包括：能够在后台运行应用程序、能够访问系统剪贴板，以及拖拽事件。AIR 应用程序甚至可以最小化到系统托盘。

AIR 应用程序的特性（使用 Web 技术构建桌面应用程序）使它很容易受到安全攻击，比如 SQL 注入和跨站点脚本攻击。要减少危险应用程序的安全威胁，所有 AIR 应用程序都必须签署一个数字证书。这些证书可以是不受信任的自签名证书，也可以是从证书机构购买的受信任证书，例如 Verisign 或 Thawte。要保护应用程序不受伪更新的攻击，所有更新必须使用先前版本的应用程序所用的证书，否则更新将失败。

至于EXT,Aptana是什么就不废话了，自己谷歌一下就Ok了。。
环境设置
自己安装Aptana和 AIR plug-in for Aptana

创建第一个您的 AIR 项目

在开始开发样例应用程序之前，需要熟悉 Aptana 开发环境，并了解创建项目以及运行和调试 AIR 应用程序的过程。在本节中，我们将创建第一个 AIR 项目，它可以在一个 AIR 桌面应用程序窗口中输出 “Hello World”。在这个过程中，我们将研究 AIR 应用程序的配置选项，包括更改应用程序的标题栏图标，以及为开发选择合适的沙盒。

在 Aptana Studio 中创建一个 AIR 项目

首先在 Aptana Studio 中创建 AIR 项目。在 Aptana 主窗口中，导航到 File > New > Project，这将打开 New Project 向导，如下所示。

图 12. Aptana New Project 向导

在这个屏幕中，从 Aptana Projects 文件夹选择 Adobe AIR Project（参见上面的图 12）并单击 Next 继续。现在需要提供一个项目名，在默认情况下，项目名将决定保存项目的位置。
图 13. 项目名屏幕

在项目名字段中输入 Hello World。这将自动设置位置。要更改默认的保存位置，可取消 “Use default location” 框并单击 Browse 查找用来保存项目的文件夹。本示例采用默认的位置。Main HTML 文件应用程序选项也是 HelloWorld.html 的默认配置，可以直接使用。该屏幕的中的其他选项不用考虑；接受默认选项即可。下一个屏幕（如下所示）将为您的 AIR 应用程序配置 application.xml 文件。
图 14. 应用程序 XML 属性

该屏幕允许您定义版本、描述、版权信息和应用程序图标等字段。当然，还可以在 application.xml 文件中手动定义这些内容，但是 Aptana 为这类任务提供了一个简单的图形前端，简化了工作。如有必要，可以为示例应用程序输入一段简单的描述并按 Next 继续。下一屏幕将继续 application.xml 配置。
图 15. 更多应用程序 XML 属性

由此可见，您可以选择使用标准的系统窗口风格（取决于操作系统）或定制的窗口风格。还可以控制用户是否可以对窗口执行最小化、最大化和重新调整大小等操作。我们选择阻止用户最大化窗口。最后，可以设置项目的尺寸。我们将窗口设置为 400x400，最大宽度为 800x800。可以随意配置这些设置。我们决定导入一个第三方 JavaScript 库，例如 Ext、jQuery 或 Prototype。

图 16. 导入 JavaScript 库屏幕

出于演示 Hello World 应用程序的目的，我们不需要用到这些库提供的复杂功能，因此在这里不会选择任何一个库。完成配置后，按 Finish，Aptana 将创建 AIR 项目。

如图 17 所示，Aptana 在创建项目后将打开主项目文件（在本例中将打开 HelloWorld.html）。如果在屏幕左侧的 Project 选项卡中展开 Hello World 项目文件夹图标，将看到一些 Aptana 自动创建的文件。注意它如何为我们自动创建 application.xml 文件。如果打开该文件（双击），将看到一些 XML 标记（如果 Aptana 没有提供图形前端的话，必须手动编写这些标记）。

图 17. Hello World 项目环境

关闭 application.xml 文件后会看到 HelloWorld.html 的代码。我们现在将对这些代码进行一些小的修改。在第三行，将 <title> 标记的内容更改为 Hello World。如果跳到第 52 行，请插入一行（在 <body> 标记后）并输入 <h1>Hello World</h1>。在开始运行第一个 AIR 项目之前，需要保存对 HelloWorld.html 文件的修改。导航到 File > Save（快捷键为 Ctrl+S），保存文件。现在可以开始运行应用程序了。

运行应用程序

从 Aptana 中运行应用程序非常简单。只需单击 Aptana 主工具栏中的 Run Hello World 按钮 — 类似于一个播放按钮（参见图 18）。这将在一个新的桌面窗口中打开应用程序。

您将看到类似图 19 所示的窗口。您可能已经注意到，窗口标题栏中出现的文本来自我们在 HelloWorld.html 文件中对 <title> 标记的修改。您还将看到我们插入的一级标题。

图 19. Hello World 应用程序

窗口中还有一个部分为 Application Sandbox Content。这是 Aptana 添加到我们的应用程序的样例代码。在第一个列表条目中，将看到一个 Read a local file using AIR APIs 按钮。单击该按钮将弹出一个警告窗口，显示文本文件 LocalFile.txt 的内容。可以随意修改这个文件并观察再次单击按钮时发生的变化。这演示了 AIR 如何处理本地文件系统。

如果向下滚动应用程序窗口，将看到一个 doRequest("http://www.adobe.com"); 按钮。如果单击该按钮，AIR 应用程序将弹出另一个警告框，这一次显示的是来自 Adobe.com 的 HTTP 响应。这演示了 XMLHttpRequest 对象如何处理远程 Web 站点。

您将注意到最大化按钮被禁用。如果试图改变窗口的大小，那么它不会小于 400x400，也不会大于 800x800。

构建样例应用程序

在本节中，我们将构建一个示例应用程序，它是一个简单的联系人管理实用程序。它将展示如何结合使用 Ext 和 AIR 创建一个诱人的应用程序。

最终结果

如图 21 所示，应用程序在一个 Ext 网格控件中给出了一个联系人列表。

图 21. Contact Manager —— 最终结果

电子邮件地址被自动转换为超链接，通过单击列标题就可对网格中的数据排序。File 菜单有一个 “New Contact” 选项，我们可以在它弹出的窗口中向网格插入一个新的联系人。这里将验证电子邮件地址字段，并且通过 Ext 的强大的 DateField 控件大大增强了出生日期字段。

通过选择 Edit 菜单中的 “Delete Contact” 选项，可以删除网格中当前选中的联系人，另一种方法是按键盘中的 Delete 键。这个操作需要用户的确认。

图 22. 删除确认对话框

当用户使用任何方法关闭应用程序主窗口时，也需要确认是否退出应用程序。应用程序将最小化到系统托盘，在系统托盘中有一个上下文菜单，允许您打开应用程序主窗口或退出应用程序。
程序在附件里，大家有兴趣的下了看看吧。。
结束语

在本教程中，我们讨论了 Adobe Integrated Runtime (AIR)，通过这种强大的方法，我们可以使用 Web 应用程序开发技术创建桌面应用程序。我们研究了具有丰富特性的 Web 开发 IDE Aptana Studio。Aptana 是开源的，而 AIR 则不是。我们还查看了 Ext JavaScript 库，它类似于桌面的 UI 控件对使用通常更适合于 Web 的框架创建桌面应用程序非常有帮助。

我们还探讨了如何在 Aptana 中创建 AIR 项目，并且结合 Ext 和 AIR 创建了一个样例应用程序。您现在应该基本了解如何创建 AIR 应用程序，并且为掌握这个主题的知识打下了坚实的基础。