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

代碼示例：

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 類似window時間日期管理中，年份調(diào)節(jié)的控件）:
   
    <d:spinner start='0' end='8' step='2'>  
     <input type="text" name="test2" value='0' />  
   </d:spinner>   
   
   
4. 客戶端包含(Include):
   
    <d:include url='menu.xml' xslt="menu.xsl"></d:include>    
   
   
5. 代碼語法高亮顯示控件(Code):
   
    <d:code language="js">  
    <textarea>alert(‘Hello World’)</textarea>  
   </d:code>   
   
   
6. 標(biāo)簽頁控件(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. 綜合示例:

來一個復(fù)雜一點的完整的例子,以日期選擇控件的演示頁面為例
頁面上有: 標(biāo)簽頁裝飾器（TabBox….）、源代碼高亮顯示裝飾器（Code）、日期選擇裝飾器（DatePicker）、包含裝飾器（Include）

裝飾結(jié)果：

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