云想衣裳花想容－－JSI组件模型介绍（一）-CSDN博客

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

代码示例：

日期选择器 (DatePicker):
1. <d:datepicker>
2. <input type="text" name="test2" />
3. </d:datepicker>
编辑器示例 (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>
Spinner控件（Spinner 类似window时间日期管理中，年份调节的控件）:
1. <d:spinner start='0' end='8' step='2'>
2. <input type="text" name="test2" value='0' />
3. </d:spinner>
客户端包含(Include):
1. <d:include url='menu.xml' xslt="menu.xsl"></d:include>
代码语法高亮显示控件(Code):
1. <d:code language="js">
2. <textarea>alert(‘Hello World’)</textarea>
3. </d:code>
标签页控件(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>
综合示例:

来一个复杂一点的完整的例子,以日期选择控件的演示页面为例
页面上有: 标签页装饰器（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>
<d:tabbox>
<d:tabs>
<d:tab>效果</d:tab>
<d:tab>代码</d:tab>
</d:tabs>
<d:tabpanels>
<d:tabpanel>
<d:datepicker type='grid'>
<input type="text" name="test1" />
</d:datepicker>
<d:datepicker>
<input type="text" name="test2" />
</d:datepicker>
</d:tabpanel>
<d:tabpanel>
<d:code language="xml">
<textarea>
<d:datepicker type='grid'>
<input type="text" name="test1" />
</d:datepicker>
<d:datepicker>
<input type="text" name="test2" />
</d:datepicker></textarea>
</d:code>
</d:tabpanel>
</d:tabpanels>
</d:tabbox>
<select style="margin-left:120px"><option>弹出的datepicker 可覆盖IE select</option></select>
<hr />
<d:include url='menu.xml' xslt="menu.xsl"></d:include>
</body>
</html>