Echo2入门文档
简介
Echo2（http://nextapp.com/）是一个开源的完全基于 Ajax 技术的开发框架，用它做出的系统是一个单页面系统，所有的界面更新都是通过不停的更新 DOM 来实现；而且系统只有一个 URL，所以用户很难通过 URL 来非法进入系统内部。
它通过一个强大的基于 Ajax 的展现（rendering）引擎，将您用 Java 编写的代码转换成浏览器需要的 HTML。这个强大引擎包括两个部分：服务器端和客户端。
服务器端引擎主要功能如下：
- 接收并处理客户端数据；
- 将服务器端组件和数据转换成 XML；
客户端引擎主要功能如下：
- 向服务器端发送相关数据；
- 解析服务器端返回的 XML；
- 根据解析结果更新页面 DOM 节点；
Echo2 包括其扩展组件库 EchoPointNG 和 Echo2 Extras， 提供了非常丰富和非常绚丽的基本组件和扩展组件，使开发者基本不需要开发自己的组件就能非常出色的构建酷炫的客户端效果。另外，Echo2 还提供了 Server Push 的一种模式，可以模拟 C/S 系统中的 Server Push 效果。
为了让开发者方便的看到服务器和客户端的通信情况，以及客户端 DOM 节点的状态，Echo2 还提供了一个 Debug 模式。这对我们开发 B/S 系统非常方便。
下面我们通过几个截图来增加对 Echo2 的直观印象。
图 1. Echo2 及其扩展组件库提供了非常丰富的组件
图 2. Echo2 提供的 Debug 窗口
安装配置
Echo2 目前的稳定版本是
过程如下：
- 下载并安装 JDK（本文使用 IBM JDK1.5）；
- 下载并安装 Tomcat（本文使用 Tomcat
5.5.20 ）； - 下载并解压 Eclipse and wtp；
- 下 载并解压 Echo2（http://download.nextapp.com/downloads/echo2/
2.1.0 .rc3/NextApp_Echo2.zip）；解压 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 文件内容
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
<display-name>
HelloEcho2
</display-name>
<!-- 定义一个 Servlet -->
<servlet>
<servlet-name>Test</servlet-name>
<servlet-class>test.servlet.TestServlet</servlet-class>
</servlet>
<!-- 定义一个 Servlet Mapping -->
<servlet-mapping>
<servlet-name>Test</servlet-name>
<url-pattern>/test</url-pattern>
</servlet-mapping>
</web-app>
对于这样的配置，如果 Tomcat 收到例如 http://localhost:8080/HelloEcho2/test 这样的请求之后，则会根据 web.xml 中 <servlet-mapping> 中的配置，去交给名叫 Test 的 servlet 去处理。而根据 web.xml 中 <servlet> 的配置，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 窗口？
小结
经过了简单介绍，以及实际的编码和部署应用后，我们可以稍作停顿来整理一下思路。我们可以将刚才的内容总结为：
* 浏览器客户端发起 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;
}
}
}
按照我们刚才的部署方法，将应用重新部署到 Tomcat 上去，我们可以看到 图 8 所示页面。
图 8. 完善后的应用界面
从 图 8 中我们可以看出浏览器的后退按钮始终是灰色的，也就是说在 Echo2 所有的页面更新都是在同一个页面内完成，这个系统是一个单页面系统。通过 Debug 模式，我们可以看到服务器端发回的 XML 数据，Echo2 的 Client Engine 则负责解析 XML 并更新页面。
开发工具
Echo Studio For Eclipse
可视化开发工具，收费项目。
下载地址：http://download.nextapp.com/downloads/echostudio2/v2_1_0_rc1/EchoStudio.zip
破解文件地址：
http://www.bcstudy.cn/software/EchoStudio2.1%C6%C6%BD%E2%CE%C4%BC%FE.rar
解压缩EchoStudio.zip到eclipse的插件目录。
解压破解文件，将得到的JAR文件替换ECLIPSE插件目录里面的nextapp.es.
参考资料
与GWT相比
|
|
Echo2 |
GWT |
|
|
开发商 |
|