下一代的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 .beans.*; import nextapp.echo.*; 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()方法中. 具體操作類似, 它構造了一小段HTML: text. 注意幾點:

1. 引數RenderingContext提供了HTTP資訊和當前文件資訊. 要透過它新增全域性指令碼和CSS.
2. 更多資訊請參考Echo網站上的教程.
3. 如果你寫出很好的控制元件可以貢獻給EchoPoint, 具體方式參見EchoPoint主頁.