云想衣裳花想容--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 textstrong>. You are using <a  
    3.     href="http://www.fckeditor.net/">FCKeditora>.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>tab1d:tab>  
    4.     <d:tab>tab2d:tab>  
    5.     <d:tab>tab3d:tab>  
    6.   d:tabs>  
    7.   <d:tabpanels>  
    8.     <d:tabpanel>content1d:tabpanel>  
    9.     <d:tabpanel>content2d:tabpanel>  
    10.     <d:tabpanel>content3d:tabpanel>  
    11.   d:tabpanels>  
    12. d:tabbox>  


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

  1. xml version="1.0" encoding="utf-8"?>  
  2. >  
  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.       <!-- 开始日期装饰器(内嵌式) -->  
  34.       <d:datepicker type='grid'>  
  35.         <input type="text" name="test1" />  
  36.       </d:datepicker>  
  37.       <!-- 开始日期装饰器(弹出式) -->  
  38.       <d:datepicker>  
  39.         <input type="text" name="test2" />  
  40.       </d:datepicker>textarea>  
  41.       d:code>  
  42.     d:tabpanel>  
  43.   d:tabpanels>  
  44. d:tabbox>  
  45. <select style="margin-left:120px"><option>弹出的datepicker 可覆盖IE selectoption>select>  
  46. <hr />  
  47.   
  48. <d:include url='menu.xml' xslt="menu.xsl">d:include>  
  49. body>  
  50. html>  


装饰结果:






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


  • 云想衣裳花想容--JSI组件模型介绍(一)_第1张图片
  • 大小: 108.9 KB
  • 查看图片附件

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