下一代的B/S开发框架--Echo 教程(2)
原理
先看看Echo的效果:
比如在Echo的DEMO中, 我们点击"Disaplay Help"的复选框, 提示信息不见了, 但是整个页面却没有任何变化! 包括你选择的下拉列表和输入框中随意敲的文字, 一切状态都会被保留. 这种效果在桌面编程中很常见, 而HTML是无状态的, 一个提交后会刷新整个Frame. 一般的HTML实现这种效果有两个途径:
用隐藏的frame操作, 控制部目标域的Disaply属性. 通常要写很多的脚本.
提交到服务器上, 根据点击的按钮重写页面. 这样服务器上的JSP/XSLT/Servlet要写的很复杂, 需要保留上个页面提交的所有信息.
来看看Echo的观念:
页面是服务器端控件的体现. 就象我们看到一个人, 不过是看到它身上反射的光线. 页面上的每个元件都是相应服务器端控件类的体现. 它们的状态, 内容和画出来的的样式, 都保存在控件中. Echo实际上是Servlet框架, 通常它要求程序返回一个类代表主窗口, 窗口里面又包含其它控件来代表页面上的输入框, 按钮, 表格等等. 这些控件和SWING的写法几乎一样. 我们知道Swing控件都会产生自己的Graph图形画在屏幕上. 而Echo控件在输出的时候, 它们会把自己的信息用HTML/JS写到输出, 构成你看到的页面.
这些类存在哪里? Session. 所以即使你关掉窗口, 你还有机会从Session里面恢复它, 和原来一模一样.
这么多类放倒Session里面会不会阴魂不散, 拖垮服务器? 有可能, 但是机会不大. Echo控件的确会占用不少内存, 但是在程序编写的时候通常我们会把不用的控件dispose()掉. 而且服务器上的Session会过期, 自然会丢掉里面的垃圾数据.
再来看看隐藏Help的实现:
编写页面的时候我们会注册复选框控件的ActionListner: 被点击后, 把Help区域的显示状态取反.
用户请求页面, 服务器端控件根据自己的状态输出HTML. 复选框控件在输出HTML时发现自己注册了Listener, 就自动输出一段脚本到HTML里面.
点击复选框后, 页面上的JS会用隐含Frame提交到服务器, 报告ECHO哪个页面上的哪个按钮被哪个家伙点击了, 同时还要提交页面上的所有输入.
服务器首从那个家伙的Session中找到对应的服务器端控件, 更新其状态, 然后会调用按钮的Listener程序, 对帮助区域显示状态取反.
处理完毕, 服务器回到步骤2, 客户端看到更新后的页面.
上面的步骤看起来也不简单. 别担心, 大多数工作是ECHO框架自动在处理, 而我们只是构造第一步中的页面和事件程序. 代码示例如下:
//可重用的帮助面板控件.
public class HelpPanel extends Container implements ActionListener {
//复选框
private CheckBox visibilityCheckBox;
private Grid.Cell descriptionCell;
public HelpPanel(String title, String description) {
super();
Grid grid = new Grid();
grid.setBorderColor(new Color(0xafbfef));
...
...
visibilityCheckBox = new CheckBox("Display Help", true);
//注册监听事件
visibilityCheckBox.addActionListener(this);
...
...
}
//实现事件监听方法
public void actionPerformed(ActionEvent e) {
//对帮助信息状态取反
descriptionCell.setVisible(visibilityCheckBox.isSelected());
}
}
