隨筆-57  評(píng)論-129  文章-0  trackbacks-0
          JSI組件模型是一種用來(lái)裝飾簡(jiǎn)單html元素的框架,使用簡(jiǎn)單的xml標(biāo)記,標(biāo)識(shí)其裝飾行為,比如將一個(gè)普通的input裝飾成一個(gè)日期輸入控件,將一 個(gè)html ul標(biāo)記裝飾成菜單或樹(shù),將一個(gè)textarea裝飾成一個(gè)代碼語(yǔ)法高亮顯示區(qū)域,或一個(gè)wysiwyg html編輯器。
          JSI啟動(dòng)后將自動(dòng)檢查decorator標(biāo)記,構(gòu)建層次結(jié)構(gòu),自動(dòng)做相關(guān)類(lèi)的尋找、導(dǎo)入和裝飾操作;實(shí)現(xiàn)零腳本代碼的web富客戶(hù)端編程。

          代碼示例:

          1. 日期選擇器 (DatePicker):

             <d:datepicker>  
              
            <input type="text" name="test2" />  
            </d:datepicker>   

          2. 編輯器示例 (Editor):

             <d:editor>  
              
            <textarea name='editorText'>This is some <strong>sample text</strong>. You are using <a  
                
            href="http://www.fckeditor.net/">FCKeditor</a>.</textarea>  
            </d:editor>   

          3. Spinner控件(Spinner 類(lèi)似window時(shí)間日期管理中,年份調(diào)節(jié)的控件):
             <d:spinner start='0' end='8' step='2'>  
              
            <input type="text" name="test2" value='0' />  
            </d:spinner>   

          4. 客戶(hù)端包含(Include):
             <d:include url='menu.xml' xslt="menu.xsl"></d:include>    

          5. 代碼語(yǔ)法高亮顯示控件(Code):
             <d:code language="js">  
             
            <textarea>alert(‘Hello World’)</textarea>  
            </d:code>   

          6. 標(biāo)簽頁(yè)控件(TabBox參照xul tabbox標(biāo)簽):

             <d:tabbox>  
              
            <d:tabs>  
                
            <d:tab>tab1</d:tab>  
                
            <d:tab>tab2</d:tab>  
                
            <d:tab>tab3</d:tab>  
              
            </d:tabs>  
              
            <d:tabpanels>  
                
            <d:tabpanel>content1</d:tabpanel>  
                
            <d:tabpanel>content2</d:tabpanel>  
                
            <d:tabpanel>content3</d:tabpanel>  
              
            </d:tabpanels>  
            </d:tabbox>   


          7. 綜合示例:
          來(lái)一個(gè)復(fù)雜一點(diǎn)的完整的例子,以日期選擇控件的演示頁(yè)面為例
          頁(yè)面上有: 標(biāo)簽頁(yè)裝飾器(TabBox….)、源代碼高亮顯示裝飾器(Code)、日期選擇裝飾器(DatePicker)、包含裝飾器(Include)
          <?xml version="1.0" encoding="utf-8"?>  
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
          <html xmlns="http://www.w3.org/1999/xhtml"  
            xmlns:d
          ="http://www.xidea.org/taglib/decorator" xml:lang="zh_CN"  
            lang
          ="zh_CN">  
          <head>  
          <script src="../scripts/boot.js"></script>  
          <title>DatePicker 示例</title>  
          </head>  
          <body>  
          <h2>DatePicker 示例</h2>  
          <!-- 開(kāi)始標(biāo)簽頁(yè)裝飾器 -->  
          <d:tabbox>  
            
          <d:tabs>  
              
          <d:tab>效果</d:tab>  
              
          <d:tab>代碼</d:tab>  
            
          </d:tabs>  
            
          <d:tabpanels>  
              
          <d:tabpanel>  
                
          <!-- 開(kāi)始日期裝飾器(內(nèi)嵌式) -->  
                
          <d:datepicker type='grid'>  
                  
          <input type="text" name="test1" />  
                
          </d:datepicker>  
                
          <!-- 開(kāi)始日期裝飾器(彈出式) -->  
                
          <d:datepicker>  
                  
          <input type="text" name="test2" />  
                
          </d:datepicker>  
              
          </d:tabpanel>  
              
          <d:tabpanel>  
                
          <!-- 開(kāi)始代碼高亮顯示 -->  
                
          <d:code language="xml">  
                  
          <textarea>  
                
          &lt;!-- 開(kāi)始日期裝飾器(內(nèi)嵌式) --&gt;  
                
          &lt;d:datepicker type='grid'&gt;  
                  
          &lt;input type="text" name="test1" /&gt;  
                
          &lt;/d:datepicker&gt;  
                
          &lt;!-- 開(kāi)始日期裝飾器(彈出式) --&gt;  
                
          &lt;d:datepicker&gt;  
                  
          &lt;input type="text" name="test2" /&gt;  
                
          &lt;/d:datepicker&gt;</textarea>  
                
          </d:code>  
              
          </d:tabpanel>  
            
          </d:tabpanels>  
          </d:tabbox>  
          <select style="margin-left:120px"><option>彈出的datepicker 可覆蓋IE select</option></select>  
          <hr />  
          <!-- 開(kāi)始Include裝飾器,包含裝飾器菜單 -->  
          <d:include url='menu.xml' xslt="menu.xsl"></d:include>  
          </body>  
          </html> 



          裝飾結(jié)果:






          云想衣裳花想容--JSI組件模型介紹(二)已經(jīng)發(fā)布,那里有裝飾過(guò)程及其原理的介紹:
          http://www.javaeye.com/topic/71425


          posted on 2007-06-27 10:24 金大為 閱讀(820) 評(píng)論(0)  編輯  收藏 所屬分類(lèi): JSI 、JavaScript
          主站蜘蛛池模板: 方正县| 额济纳旗| 历史| 鹤峰县| 中牟县| 淮滨县| 阿拉善左旗| 曲周县| 安福县| 远安县| 泾川县| 化德县| 呼和浩特市| 郑州市| 方城县| 东山县| 进贤县| 乐业县| 綦江县| 千阳县| 祁阳县| 凌源市| 印江| 仁寿县| 象山县| 伊金霍洛旗| 卢湾区| 武功县| 鹤壁市| 尚义县| 临沭县| 灵武市| 普宁市| 康平县| 郁南县| 扶绥县| 通江县| 红桥区| 集贤县| 锡林郭勒盟| 兖州市|