使用 Swan 轻松创建支持 AJAX 的应用程序
4.20/5 (4投票s)
Swan 使构建丰富的 Web 应用程序变得容易。
引言
本文演示了使用 Swan 创建基于 AJAX 的富 Web 界面的简便性。有了 Swan，您无需学习复杂的 JavaScript 库即可将 AJAX 集成到您的网页中。您只需选择您希望启用 AJAX 的组件，并提供控制器类来处理丰富网页的数据和事件。在本教程中，我们将介绍 Swan 中提供的向导之一，用于快速构建支持 AJAX 的应用程序。
关于 Swan
Swan 将 AJAX 框架和软件开发最佳实践与易于使用的开发工具相结合，从而加速 Web 应用程序开发并强制执行一致性。Swan 的架构能够更自然地集成网页和服务器端组件。
上图：Swan 应用程序架构
JavaScript Swan 引擎
JavaScript Swan 引擎负责所有 AJAX 功能，将其透明地集成到您的 Web 表单组件和所有其他基于 Swan 的小部件中。Swan 还负责处理由服务器或浏览器处理的事件的分发。Swan 使用 JSON 作为跨越传输数据的手段。
服务器端 SDK
服务器端 SDK 提供了构建自定义应用程序组件的框架，这些组件将作为您网页的模型/控制器。它还提供对服务器端 UI 小部件表示形式的访问，使您可以轻松地将数据推回到前端，以及处理其他请求，例如打开对话框或显示消息。
Swan 控件绑定
Swan 使用 XML 描述符文件将 UI 与 Page Model 粘合在一起。魔术就在这里发生。您无需担心创建此文件。Swan 提供了必要的工具，使此文件的创建对您来说是透明的。
Swan 向导
Swan 的工具包包含一组向导，用于根据常用模板创建示例应用程序。这些向导很有用，特别是如果您是 Swan 的新手。在本教程中，我们将展示一个具有典型 CRUD 功能的列表 Web 应用程序的创建。现在您将了解基于 Swan 的应用程序是如何组成的。即使您不懂 AJAX，您也将看到使用 Swan 构建丰富 Web 应用程序是多么容易。
先决条件
对于本教程，您必须已设置好适用于 J2EE 开发的 Eclipse 和 Tomcat 5.5。
安装 Swan 插件
下载 Swan（一个 ZIP 文件），然后将其内容解压缩到 Eclipse 安装的插件文件夹中。启动或重新启动您的 Eclipse 环境以激活 Swan 的插件。
创建您的第一个 Swan 项目
创建 Swan 项目的步骤非常简单，就像 1-2-3 一样。
- 创建动态 Web 项目
- 向新项目添加 Swan 的 Nature
- 创建 Swan 应用程序
1 - 创建动态 Web 项目
Swan 工具包的当前版本基于 Eclipse Web Tools Platform。要创建 Swan 项目，您必须先创建一个动态 Web 项目。
选择新建 > 动态 Web 项目。
图 1 - 新动态 Web 项目
对于本教程，请创建一个名为ListingApp的项目。
图 2 - 新ListingApp项目
2 - 添加 Swan 的 Nature
在创建基于 Swan 的应用程序时，我们需要使用 Swan 使用的所有必需库来准备新项目。为此，我们只需向项目添加 Swan 的 Nature。这将自动添加必要的 JavaScript 库和 Java 库，以在您的项目中启用 Swan SDK。
选择ListingApp项目，然后右键单击以弹出菜单。现在选择添加 Swan Nature。
图 3 - 添加 Swan Nature
添加所有必需的库可能需要几秒钟。完成后，您应该会看到如图所示的更新目录结构。
图 4 -ListingApp，包含 Swan Nature 文件夹
此任务应完成以下操作
- 添加了 Swan-engine 文件夹，包括 Swan 的 JavaScript 库
- 在 WEB-INF 文件夹下的lib文件夹中添加了必需的 Java 库
- 在 WEB-INF 文件夹下添加了ui_specs文件夹，用于存储 Swan 的绑定文件
- 在web.xml文件中注册了 Swan 的 Servlet
3 - 创建 Swan 应用程序
要创建Listing应用程序，我们将使用 Swan 的向导之一。要打开向导，请选择ListingApp项目，然后选择HTML Page Wizard，如图 5 所示。
图 5 – 打开新建 HTML 页面向导
Swan 的 HTML 页面向导
图 6 - 列表应用程序向导设置
点击下一步以添加Listing应用程序的字段。
向页面添加字段
图 7 - 向列表应用程序添加字段
要添加字段，请点击添加按钮（如图 7 所示），以打开组件定义对话框。为每个字段选择所需的组件类型、标签和 ID。对于本教程，请添加以下字段
| 组件 (Component) | Label | ID |
文本字段 |
名字 | firstName |
文本字段 |
姓氏 | lastName |
日期字段 |
入职日期 | dateOfHire |
完成后，只需点击完成。向导将生成所需的 HTML 页面、绑定和 Java 控制器类，如图 8 所示。
图 8 - 列表应用程序生成的代码
生成的Listing应用程序具有在内存中添加、编辑和删除记录的功能。
真的有这么容易吗？试试看。
要测试应用程序，请先创建一个index.html文件，如图 9 所示。
图 9 - 新index.html文件
创建index.html文件后，在 body 中添加以下代码
<H1>Swan Demo Application</H1>
<a href="SwanApplication?_open=listingPage">Listing Application</a>
HTML 页面看起来应该像这样
您必须安装 Tomcat 才能继续。
选择index.html。右键单击并选择运行方式 > 在服务器上运行。
选择 Tomcat 服务器，然后点击完成。
一旦显示index.html页面，点击Listing App选项卡。浏览器应显示Listing应用程序，如图所示。
要使其成为一个功能齐全的应用程序，您需要对其进行自定义。完成本教程后，继续探索生成的代码，以便您熟悉 Swan 的 API。
摘要
Swan 使构建丰富的 Web 应用程序变得容易。在本教程中，您了解了 Swan 框架以及如何快速创建模板应用程序。通过探索代码，您还将了解将 Web 界面与服务器端控制器集成是多么容易。