云想衣裳花想容--JSI组件模型介绍(一)

JSI组件模型是一种用来装饰简单html元素的框架,使用简单的xml标记,标识其装饰行为,比如将一个普通的input装饰成一个日期输入控件,将一 个html ul标记装饰成菜单或树,将一个textarea装饰成一个代码语法高亮显示区域,或一个wysiwyg html编辑器。
JSI启动后将自动检查decorator标记,构建层次结构,自动做相关类的寻找、导入和装饰操作;实现零脚本代码的web富客户端编程。

代码示例:

  1. 日期选择器 (DatePicker):

    1. <d:datepicker>  
    2.   <input type="text" name="test2" />  
    3. </d:datepicker>  

  2. 编辑器示例 (Editor):

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

  3. Spinner控件(Spinner 类似window时间日期管理中,年份调节的控件):

    1. <d:spinner start='0' end='8' step='2'>  
    2.   <input type="text" name="test2" value='0' />  
    3. </d:spinner>  

  4. 客户端包含(Include):

    1. <d:include url='menu.xml' xslt="menu.xsl"></d:include>  

  5. 代码语法高亮显示控件(Code):

    1. <d:code language="js">  
    2.  <textarea>alert(‘Hello World’)</textarea>  
    3. </d:code>  

  6. 标签页控件(TabBox参照xul tabbox标签):

    1. <d:tabbox>  
    2.   <d:tabs>  
    3.     <d:tab>tab1</d:tab>  
    4.     <d:tab>tab2</d:tab>  
    5.     <d:tab>tab3</d:tab>  
    6.   </d:tabs>  
    7.   <d:tabpanels>  
    8.     <d:tabpanel>content1</d:tabpanel>  
    9.     <d:tabpanel>content2</d:tabpanel>  
    10.     <d:tabpanel>content3</d:tabpanel>  
    11.   </d:tabpanels>  
    12. </d:tabbox>  


  7. 综合示例:
来一个复杂一点的完整的例子,以日期选择控件的演示页面为例
页面上有: 标签页装饰器(TabBox….)、源代码高亮显示装饰器(Code)、日期选择装饰器(DatePicker)、包含装饰器(Include):

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml"  
  4.   xmlns:d="http://www.xidea.org/taglib/decorator" xml:lang="zh_CN"  
  5.   lang="zh_CN">  
  6. <head>  
  7. <script src="../scripts/boot.js"></script>  
  8. <title>DatePicker 示例</title>  
  9. </head>  
  10. <body>  
  11. <h2>DatePicker 示例</h2>  
  12. <!-- 开始标签页装饰器 -->  
  13. <d:tabbox>  
  14.   <d:tabs>  
  15.     <d:tab>效果</d:tab>  
  16.     <d:tab>代码</d:tab>  
  17.   </d:tabs>  
  18.   <d:tabpanels>  
  19.     <d:tabpanel>  
  20.       <!-- 开始日期装饰器(内嵌式) -->  
  21.       <d:datepicker type='grid'>  
  22.         <input type="text" name="test1" />  
  23.       </d:datepicker>  
  24.       <!-- 开始日期装饰器(弹出式) -->  
  25.       <d:datepicker>  
  26.         <input type="text" name="test2" />  
  27.       </d:datepicker>  
  28.     </d:tabpanel>  
  29.     <d:tabpanel>  
  30.       <!-- 开始代码高亮显示 -->  
  31.       <d:code language="xml">  
  32.         <textarea>  
  33.       &lt;!-- 开始日期装饰器(内嵌式) --&gt;  
  34.       &lt;d:datepicker type='grid'&gt;  
  35.         &lt;input type="text" name="test1" /&gt;  
  36.       &lt;/d:datepicker&gt;  
  37.       &lt;!-- 开始日期装饰器(弹出式) --&gt;  
  38.       &lt;d:datepicker&gt;  
  39.         &lt;input type="text" name="test2" /&gt;  
  40.       &lt;/d:datepicker&gt;</textarea>  
  41.       </d:code>  
  42.     </d:tabpanel>  
  43.   </d:tabpanels>  
  44. </d:tabbox>  
  45. <select style="margin-left:120px"><option>弹出的datepicker 可覆盖IE select</option></select>  
  46. <hr />  
  47. <!-- 开始Include装饰器,包含装饰器菜单 -->  
  48. <d:include url='menu.xml' xslt="menu.xsl"></d:include>  
  49. </body>  
  50. </html>  


装饰结果:






云想衣裳花想容--JSI组件模型介绍(二)已经发布,那里有装饰过程及其原理的介绍:
http://www.iteye.com/topic/71425


你可能感兴趣的:(html5,fckeditor,云计算,D语言,JSI)