由浅入深Echo2 框架

2008 年 2 月 21 日 本系列教程将由浅入深的介绍 Echo2 框架 这是一个开源的完全基于 Ajax 技术的 开发框架 我们首先会介绍基本知识 让您能够使用 Echo2 来开发应用 然后在 后续部分中介绍如何结合使用 Spring 与 Hibernate 开发自己的 Echo2 组件 以及 在实际应用中的进行改进 开始之前 厌倦了那些令人痛恨而又琐碎的 HTML 和 JavaScript 编码了吗 想做一个纯粹的基 于 Ajax 的 Web 单页面应用吗 别急 您会有满意答案的 Echo2 允许您使用类似于编写 Swing 代码的方法直接输出 HTML 即开发灵活的 Web 应用程序而不必再写 HTML 和 JavaScript 代码 如果您经常开发 B S 应用 一 定厌烦了这些烦琐的东西 Echo2 可以让我们忘掉这些 不需要做那些不断重复的 烦琐工作 并且 Echo2 做出来的应用是个单页面系统 纯粹基于 Ajax 技术 所有 的界面都是通过不停的更新 DOM 节点来实现 怎么样 是不是很酷 那么我们现在开始吧 关于本教程 本教程是系列教程的第一部分 我们将结合具体开发例子来向您介绍 Echo2 的基 础知识和基本组件的使用方法 并且介绍 Echo2 的 Debug 模式 以及其它相关的 学习和开发资源 目标 通 过本系列教程的学习 您不仅可以掌握 Echo2 的基础知识 而且可以完全具备 Echo2 和 Spring Hibernate 等框架结合起来进行开发的能力 通过后续的提高学习 您还将具备自己开发 Echo2 组件的能力 并且为您在实际开发中遇到的常见问题 提供参考的解决方案 回页首回页首 先决条件 要学习本教程 您需要熟悉 Java 编程并且具备 Web 开发的经验 后续的几个部分 则还需要您熟悉 Spring 和 Hibernate 等框架 以及熟悉 HTML 和 CSS 代码示例和安装要求 本文所有示例均在 Windows XP SP2 系统中测试完成 您需要一台能流畅运行 Windows XP 系统的机器 除此之外您还需要一些工具才能试用本教程中的代码 所有这些工具都可以免费下载 参见 参考资源 Java SDK 1 4 2 或更高版本 Eclipse 开发环境 Tomcat 应用服务器 Echo2 Version 2 0 0 Echo2 简介 Echo2 Ajax 技术的开发框架 用它做 出的系统是一个单页面系统 所有的界面更新都是通过不停的更新 DOM 来实现 而且系统只有一个 URL 所以用户很难通过 URL 来非法进入系统内部 它通过一个强大的基于 Ajax 的展现 rendering 引擎 将您用 Java 编写的代码转 换成浏览器需要的 HTML 这个强大引擎包括两个部分 服务器端和客户端 服务器端引擎主要功能如下 1 接收并处理客户端数据 2 将服务器端组件和数据转换成 XML 客户端引擎主要功能如下 回页首回页首 回页首回页首 1 向服务器端发送相关数据 2 解析服务器端返回的 XML 3 根据解析结果更新页面 DOM 节点 Echo2 包括其扩展组件库 EchoPointNG 和 Echo2 Extras 提供了非常丰富和非常绚 丽的基本组件和扩展组件 使开发者基本不需要开发自己的组件就能非常出色的构 建酷炫的客户端效果 另外 Echo2 还提供了 Server Push 的一种模式 可以模拟 C S 系统中的 Server Push 效果 为了让开发者方便的看到服务器和客户端的通信情况 以及客户端 DOM 节点的状 态 Echo2 还提供了一个 Debug 模式 这对我们开发 B S 系统非常方便 下面我们通过几个截图来增加对 Echo2 的直观印象 图图 1 Echo2 及其扩展组件库提供了非常丰富的组件及其扩展组件库提供了非常丰富的组件 图图 2 Echo2 提供的提供的 Debug 窗口窗口 有了上面的介绍和直观的印象后 立即开始我们的 Echo2 学习之旅吧 Hello Echo2 第一个 Echo2 应用 我们从一个简单的基本系统开始 安装配置开发环境 Echo2 目前的稳定版本是 2 0 0 最新版本是 2 1 0 rc2 本文以 2 0 0 的稳定版本为 例来讲述 Echo2 的开发环境设置和其他框架比如 Struts Spring Hibernate 等相 比并无特殊之处 过程如下 1 下载并安装 JDK 本文使用 IBM JDK1 5 2 下载并安装 Tomcat 本文使用 Tomcat5 5 20 3 下载并解压 Eclipse 本文使用版本为 eclipse jee europa fall2 win32 zip 4 下 载并解压 Echo2 2 0 0 本文使用 Echo2 0 0 解压 Echo2 后 会在 BinaryLibraries 文件夹下面得到三个我们需要的 Jar 文件 它们分别是 Echo2 App jar Echo2 WebContainer jar 和 Echo2 WebRender jar 如果我们已经具备了 JDK 和 Eclipse Tomcat 等开发环境 则只要下载并解压 Echo2 得到三个我们需要的 Jar 文件就可以了 安装配置好之后 下面我们就可以 开始学习如何用 Eclipse 来开发 Echo2 应用了 用 Eclipse 开发 HelloEcho2 和使用其他框架开发 Web 应用完全一样 如 图 3 我们首先建立一个 Dynamic Web Project 取名为 HelloEcho2 其他步骤全部按照默认值即可 回页首回页首 图图 3 用用 Eclipse 建立一个动态建立一个动态 Web 项目项目 项 目建立好之后 和使用其他开源框架一样 我们将 Echo2 App jar Echo2 WebContainer jar 和 Echo2 WebRender jar 三个 Jar 文件复制 到 WebContent Web INF lib 文件夹下 为了清晰起见 我们建立三个包来放置源 码 此时项目的目录结构如 图 4 所示 图图 4 HelloEcho2 项目的目录结构项目的目录结构 对 于一个 Web 应用来说 最重要的文件莫过于 web xml 文件了 它是所有配置文 件中最根本和最核心的一个文件 所以接下来先从 web xml 开始 我们为 HelloEcho2 项目配置一个 servlet 注意 绝大多数情况下 Echo2 的项目只要配置一 个 servlet 就足够了 配置后的 web xml 文件内容如清单 1 所示 清单清单 1 web xml 文件内容文件内容 HelloEcho2 Test test servlet TestServlet Test test 对于这样的配置 如果 Tomcat 收到例如 http localhost 8080 HelloEcho2 test 这样 的请求之后 则会根据 web xml 中 中的配置 去交给名叫 Test 的 servlet 去处理 而根据 web xml 中 的配置 Test 的类实际就是 test servlet TestServlet 于是接下来我们似乎要先来完成 test servlet 包里 面的 TestServlet java 这个 servlet 但是这里要注意 在完成这个 servlet 之前 还 要先实现一个 ApplicationInstance 的子类 ApplicationInstance 表示了一个用 户的状态 每个访问 Echo2 应用程序的用户都有它自己的唯一实例 而 Servlet 的 作用就是返回这个用户的唯一实例 我们将 servlet 放置在 test servlet 包内 将 ApplicationInstance 放置在 test app 包内 清单 2 和清单 3 分别给出了 TestServlet java 和 Application java 的 源码 清单清单 2 TestServlet java 源码源码 package test servlet import test app Application import nextapp echo2 app ApplicationInstance import nextapp echo2 Webcontainer WebContainerServlet public class TestServlet extends WebContainerServlet public ApplicationInstance newApplicationInstance return new Application 清单清单 3 Application java 源码源码 package test app import test pane IndexPane import nextapp echo2 app ApplicationInstance import nextapp echo2 app ContentPane import nextapp echo2 app Window public class Application extends ApplicationInstance private Window mainWindow public Window init 一个 ApplicationInstance 只有一个 Window 所有界面元素都必须加入到 Window 中 window 不可被加入到其他界面组件中 Window window new Window 将我们自己定义的界面元素容器 IndexPane 加入到 Window 中 IndexPane indexPane new IndexPane window setContent indexPane return window 返回当前活动的 ApplicationInstance public static Application getApp return Application ApplicationInstance getActive public ContentPane getContent return mainWindow getContent public void setContent ContentPane pane mainWindow removeAll mainWindow setContent pane 从清单 2 和清单 3 的代码和注释中我们可以看出 servlet 的作用就是简单的返回一 个客户自己的 ApplicationInstance 一个 ApplicationInstance 将持有一个 Window 将其他界面元素都放置在 Window 中 window 将不能再被加入到其他界面 元素中 在清单 4 中我们将看到 Echo2 的一些重要的界面组件的使用方法 清单清单 4 IndexPane java 源码源码 package test pane import test app Application import nextapp echo2 app Button import nextapp echo2 app Color import nextapp echo2 app Column import nextapp echo2 app ContentPane import nextapp echo2 app Extent import nextapp echo2 app Label import nextapp echo2 app Row import nextapp echo2 app TextField public class IndexPane extends ContentPane 定义一个列 所有界面元素放在这个列内 private Column mainColumn private TextField tf private Label label public IndexPane super initWindow protected void initWindow 初始化列 mainColumn new Column 加入一个显示标签和一个输入框到列内 label new Label Hello Please input your name mainColumn add label tf new TextField Application getApp setFocusedComponent tf mainColumn add tf 定义一个行 在行内加入两个按钮 并将这个行加入到列内 Row buttonRow new Row buttonRow setCellSpacing new Extent 20 Button okButton new Button Ok okButton setBackground Color GREEN buttonRow add okButton Button resetButton new Button Reset resetButton setBackground Color PINK buttonRow add resetButton mainColumn add buttonRow 将列加入到这个 IndexPane 本身 this add mainColumn 在清单 4 中 我们可以看出 我们使用了 Column Row Label Button TextField Extent 等构件界面最常用的基本组件 学习了这么多 还是让我们尽快将我们的应用部署到 Tomcat 中去来先睹为快吧 部署我们的应用 新 版本的 EclipseEuropa 不需要使用 Ant 就能自动将我们的应用打包成 WAR 文件 部署到 Tomcat 上去 想想以前辛苦写 build xml 的日子 感觉还是挺庆幸的 在本 例中 我选择将源码一起打包到 WAR 文件中 大家可以在本文的 下载部分 下载 WAR 文件以及打包在其中的源码 图图 5 用用 EclipseEuropa 将应用打包成将应用打包成 WAR 文件文件 本 例将应用打包成 HelloEcho2 war 放置在 Tomcat 的 Webapps 文件夹下面 启动 Tomcat 在浏览器里面输入访问地址 http localhost 8080 HelloEcho2 test 就能看 到我们的应用界面如图 6 所示 回页首回页首 图图 6 应用程序界面应用程序界面 在浏览器中输入下列 http localhost 8080 HelloEcho2 test debug 地址 看看是不是 出现了我们刚才提到的 Debug 窗口 在我们的例子中 我们仅仅学习到了最常用的一些页面组件 对于其他各种 Echo2 的组件和扩展组件 比如 EchoPoingNG 和 Echo2 Extras 等 大家可以参考本文的 参考资料 部分相关文章 小结 经过了简单介绍 以及实际的编码和部署应用后 我们可以稍作停顿来整理一下思 路 我们可以将刚才的内容总结为 浏览器客户端发起 HttpRequest 请求 Web 服务器根据 web xml 里面的配置找到相应的 Sevlet 我们的 Sevlet 给每个用户返回一个 ApplicationInstance 的实例 每个 ApplicationInstance 的实例包含一个 Window 其它的页面组件被加入到了 Window 中 回页首回页首 图图 7 Echo2 系统运行示意图系统运行示意图 到现在 我们的应用已经具备了一个基本的界面并且允许用户在输入框输入 下面 我们来看看如何给我们的 Echo2 应用增加事件响应和处理逻辑 完善我们的应用 增加事件响应 不能对用户事件做出响应的应用是毫无意义的 所以接下来我们给这个应用增加事 件响应的能力 首先 IndexPane 要实现 ActionListener 接口之后才能具备监听 用户事件的能力 其次 要给我们的两个按钮设定命令代码 并且设定按钮的事件 监听者 清单 5 给出了改进后的 IndexPane 的代码 清单清单 5 改进后的改进后的 IndexPane java package test pane import test app Application import nextapp echo2 app Button import nextapp echo2 app Color import nextapp echo2 app Column import nextapp echo2 app ContentPane import nextapp echo2 app Extent import nextapp echo2 app Label import nextapp echo2 app Row import nextapp echo2 app TextField import nextapp echo2 app event ActionEvent import nextapp echo2 app event ActionListener public class IndexPane extends ContentPane implements ActionListener 定义一个列 所有界面元素放在这个列内 private Column mainColumn private TextField tf private Label label public IndexPane super initWindow protected void initWindow 初始化列 mainColumn new Column 加入一个显示标签和一个输入框到列内 label new Label Hello Please input your name mainColumn add label tf new TextField Application getApp setFocusedComponent tf mainColumn add tf 定义一个行 在行内加入两个按钮 并将这个行加入到列内 Row buttonRow new Row buttonRow setCellSpacing new Extent 20 Button okButton new Button Ok okButton setBackground Color GREEN 给 OK 按钮设定命令代码 okButton setActionCommand ok 给 OK 按钮设定事件监听者 okButton addActionListener this buttonRow add okButton Button resetButton new Button Reset resetButton setBackground Color PINK resetButton setActionCommand reset resetButton addActionListener this buttonRow add resetButton mainColumn add buttonRow 将列加入到这个 IndexPane 本身 this add mainColumn public void actionPerformed ActionEvent e if e getActionCommand equals ok 如果按了 OK 按钮 输出欢迎信息 并将输入框清空 tf getText 方法将能得到用户在输入框中的输入 label setText Welcome tf getText tf setText return if e getActionCommand equals reset 如果按了取消按钮 将输入框清空 tf setText return 按照我们