下一代的B/S開發框架--Echo 教程(2) (轉)

下一代的B/S開發框架--Echo 教程(2) (轉)[@more@]

下一代的B/S開發--Echo 教程(2)

原理

先看看Echo的效果:

比如在Echo的DEMO中, 我們點選"Disaplay Help"的核取方塊, 提示資訊不見了, 但是整個頁面卻沒有任何變化! 包括你選擇的下拉選單和輸入框中隨意敲的文字, 一切狀態都會被保留. 這種效果在桌面中很常見, 而HTML是無狀態的, 一個提交後會重新整理整個Frame. 一般的HTML實現這種效果有兩個途徑:

1. 用隱藏的frame操作, 控制部目標域的Disaply屬性. 通常要寫很多的指令碼.
2. 提交到上, 根據點選的按鈕重寫頁面. 這樣伺服器上的/T/要寫的很複雜, 需要保留上個頁面提交的所有資訊.

來看看Echo的觀念:

• 頁面是伺服器端的體現. 就象我們看到一個人, 不過是看到它身上反射的光線. 頁面上的每個元件都是相應伺服器端控制元件類的體現. 它們的狀態, 內容和畫出來的的樣式, 都儲存在控制元件中. Echo實際上是Servlet框架, 通常它要求返回一個類代表主視窗, 視窗裡面又包含其它控制元件來代表頁面上的輸入框, 按鈕, 表格等等. 這些控制元件和的寫法幾乎一樣. 我們知道Swing控制元件都會產生自己的Graph圖形畫在螢幕上. 而Echo控制元件在輸出的時候, 它們會把自己的資訊用HTML/JS寫到輸出, 構成你看到的頁面.
• 這些類存在哪裡? Session. 所以即使你關掉視窗, 你還有機會從Session裡面恢復它, 和原來一模一樣.
• 這麼多類放倒Session裡面會不會陰魂不散, 拖垮伺服器? 有可能, 但是機會不大. Echo控制元件的確會佔用不少, 但是在程式編寫的時候通常我們會把不用的控制元件dispose()掉. 而且伺服器上的Session會過期, 自然會丟掉裡面的垃圾資料.

再來看看隱藏Help的實現:

1. 編寫頁面的時候我們會註冊核取方塊控制元件的ActionListner: 被點選後, 把Help區域的顯示狀態取反.
2. 請求頁面, 伺服器端控制元件根據自己的狀態輸出HTML. 核取方塊控制元件在輸出HTML時發現自己註冊了Listener, 就自動輸出一段指令碼到HTML裡面.
3. 點選核取方塊後, 頁面上的JS會用隱含Frame提交到伺服器, 報告ECHO哪個頁面上的哪個按鈕被哪個傢伙點選了, 同時還要提交頁面上的所有輸入.
4. 伺服器首從那個傢伙的Session中找到對應的伺服器端控制元件, 其狀態, 然後會按鈕的Listener程式, 對幫助區域顯示狀態取反.
5. 處理完畢, 伺服器回到步驟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.ised()); } }