下一代的B/S開發框架--Echo 教程(7) (轉)
下一代的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. 注意幾點:
- 引數RenderingContext提供了HTTP資訊和當前文件資訊. 要透過它新增全域性指令碼和CSS.
- 更多資訊請參考Echo網站上的教程.
- 如果你寫出很好的控制元件可以貢獻給EchoPoint, 具體方式參見EchoPoint主頁.
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/10752043/viewspace-992977/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Xamarin圖表開發基礎教程(7)OxyPlot框架框架
- 系統開發中的B/S架構架構
- Web經典B/S快速開發框架,強大後臺+簡潔UI一體化開發工具Web框架UI
- 下一代基於Koa的NodeJS全棧開發框架NodeJS全棧框架
- C/S框架網介紹|.NET快速開發平臺|Winform開發框架框架ORM
- Hardhat 開發框架 - Solidity開發教程連載框架Solid
- C/S和B/S
- 搭建雲端計算開發框架(轉)框架
- python轉go的web開發者的新船票——Tigo框架PythonGoWeb框架
- 下一代Spring框架將基於JDK17和JakartaEE開發Spring框架JDK
- C/S系統快速開發框架(C#+Winform+SQL)框架C#ORMSQL
- C/S,B/S的應用的區別
- AndoridSQLite資料庫開發基礎教程(7)SQLite資料庫
- MQL5教程7 交易指令碼開發MQ指令碼
- Learun.framework v7━ net快速開發框架Framework框架
- 分享 echo-framework 專案基礎框架Framework框架
- Nest.js 4.6.6 釋出,更優雅的下一代 Node.js 開發框架Node.js框架
- S2B2C社交電商系統怎麼開發?
- Xamarin圖表開發基礎教程(6)OxyPlot框架框架
- Xamarin圖表開發基礎教程(5)OxyPlot框架框架
- Xamarin圖表開發基礎教程(4)OxyPlot框架框架
- Xamarin圖表開發基礎教程(3)OxyPlot框架框架
- Xamarin圖表開發基礎教程(9)OxyPlot框架框架
- Xamarin圖表開發基礎教程(8)OxyPlot框架框架
- Go Web開發(Gin框架)簡易入門教程GoWeb框架
- 工良出品,從零設計開發 .NET 開發框架:框架原始碼和教程電子書框架原始碼
- B/S與C/S的聯絡與區別
- C/S系統快速開發架構框架(C#+Winform+SQL)架構框架C#ORMSQL
- 玩轉iOS開發:7.《Core Animation》Implicit AnimationsiOS
- 談談力軟快速開發平臺B/S專業報表工具
- Zend Studio使用教程:使用PHP 7進行開發(二)PHP
- [開發教程]第7講:Bootstrap響應式佈局boot
- [開發教程]第35講:Bootstrap旋轉木馬boot
- 元宇宙7個開源工具和框架讓開發不用從零開始元宇宙開源工具框架
- 通訊行業S2B2B電商交易系統提升洞察力,S2B2B平臺助推企業實現業務轉型行業
- 基於Feature Flag的下一代開發模式模式
- 好程式設計師Java教程分享Java開發主流框架程式設計師Java框架
- Xamarin圖表開發基礎教程(11)OxyPlot框架支援的圖表型別框架型別
- Xamarin圖表開發基礎教程(10)OxyPlot框架支援的圖表型別框架型別