下一代的B/S开发框架--Echo 教程(2)

steeven

下一代的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()); } }