ITPub博客

首页 > 应用开发 > IT综合 > 下一代的B/S开发框架--Echo 教程(7) (转)

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

原创 IT综合 作者:worldblog 时间:2007-12-13 16:16:43 0 删除 编辑
下一代的B/S开发框架--Echo 教程(7) (转)[@more@]

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

编写自己的控件

羡慕EchoPoint的控件吗? 别担心, 你一样可以做.

写控件可以分两种方法: 搭积木和造积木.

A: 搭积木

在教程(5)中, 我们实现了可编辑的下拉菜单. 其实不过是一些已有控件的组合, 就象搭积木一样. 注意: 在OO编程中, 这些搭出来的积木是可重用的, 就象在Echo Demo中可以隐藏的帮助区域.

在制作网站的过程中, 我们通常会把页面划分成几个大区域, 每个大区域又可以划分成几个小的区域. 在不同页面这些区域大部分都是重复的, 或者稍有变化. 比如Banner/导航条/购物车. 我们可以把它们包装成独立的控件, 并且实现动态效果.

在HTML中, 我们经常会用到CSS来改变网站的风格. 在Echo中, 可以自行扩展每个Echo控件. 然后用这些扩展的控件来构造你的网站. 这样似乎有些Crazy, 但是想想看: 调整这些控件, 网站的整体风格会一起改变. 甚至你对控件增加功能, 让每个输入框在"向下"键时都自动Tab到下一个. 这些工作在传统网站制作中浪费了很多时间.

B: 造积木

Echo不会让JS高手失业. 它只会让你告别枯燥无味的重复劳动, 专注于开发高难度的控件. 这里给出一个在页面上构造Link的例子. 它的Component很简单:

package org.steeven.component; import nextapp.echo.Component; public class Link extends Component { private String text; private String url; public Link(String text,String url) { this.text = text; this.url = url; } public Link(String url) { this(url,url); } public String getText() { return text; } public String getUrl() { return url; } public void setText(String newValue) { String oldValue = text; text = newValue; firePropertyChange("text", oldValue, newValue); } public void setUrl(String newValue) { String oldValue = url; url = newValue; firePropertyChange("url", oldValue, newValue); } }


下面是负责输出为HTML的Peer类:

package org.steeven.component; import Java.beans.*; import nextapp.echoservlet.*; import nextapp.echoservlet.html.*; public class LinkUI extends ComponentPeer implements PropertyChangeListener { public static void register() { //配置文件名为:PeerBindings.properties, 在相同目录下 EchoServer.loadPeerBindings("org.steeven.component.PeerBindings"); } public void propertyChange(PropertyChangeEvent e) { redraw(); } public void registered() { getComponent().addPropertyChangeListener(this); } public void unregistered() { getComponent().removePropertyChangeListener(this); } public void render(RenderingContext rc, Element parent) { Link link = (Link) getComponent(); Element element = new Element("a", false); element.addAttribute("target","_blank"); element.addAttribute("href", link.getUrl()); element.addText(link.getText()); parent.addElement(element); } }


关键部分就在render()方法中. 具体操作类似XML, 它构造了一小段HTML: text. 注意几点:

  1. 参数RenderingContext提供了HTTP信息和当前文档信息. 要通过它添加全局脚本和CSS.
  2. 更多信息请参考Echo网站上的教程.
  3. 如果你写出很好的控件可以贡献给EchoPoint, 具体方式参见EchoPoint主页.

 


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/10752043/viewspace-992977/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
  • 博文量
    6241
  • 访问量
    2448350