云想衣裳花想容－－JSI组件模型介绍（一）
来源：互联网 发布：setlocale php 编辑：程序博客网 时间：2024/04/30 13:07
JSI组件模型是一种用来装饰简单html元素的框架，使用简单的xml标记， 标识其装饰行为，比如将一个普通的input装饰成一个日期输入控件，将一个html ul标记装饰成菜单或树，将一个textarea装饰成一个代码语法高亮显示区域，或一个wysiwyg html编辑器。
JSI启动后将自动检查decorator标记，构建层次结构，自动做相关类的寻找、导入和装饰操作；实现零脚本代码的web富客户端编程。
页面上有: 标签页装饰器（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 />
<!-- 开始Include装饰器,包含装饰器菜单 -->
<d:include url='menu.xml' xslt="menu.xsl"></d:include>
</body>
</html>
装饰结果：
JSI启动后将自动检查decorator标记，构建层次结构，自动做相关类的寻找、导入和装饰操作；实现零脚本代码的web富客户端编程。
代码示例：
- 日期选择器 (DatePicker):
<d:datepicker>
<input type="text" name="test2" />
</d:datepicker>
- 编辑器示例 (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>
- Spinner控件（Spinner 类似window时间日期管理中，年份调节的控件）:
<d:spinner start='0' end='8' step='2'> <input type="text" name="test2" value='0' /> </d:spinner>
- 客户端包含(Include):
<d:include url='menu.xml' xslt="menu.xsl"></d:include>
- 代码语法高亮显示控件(Code):
<d:code language="js"> <textarea>alert(‘Hello World’)</textarea> </d:code>
- 标签页控件(TabBox参照xul tabbox标签):
<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>
- 综合示例:
页面上有: 标签页装饰器（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 /><!-- 开始Include装饰器,包含装饰器菜单 --><d:include url='menu.xml' xslt="menu.xsl"></d:include></body></html>装饰结果：
- 云想衣裳花想容－－JSI组件模型介绍（一）
- 云想衣裳花想容－－JSI组件模型介绍（二）
- 云想衣裳花想容
- ~~跟着心的选择~~（云想衣裳 花想容）
- Openstack组件heat介绍（一）
- Activity组件介绍（一）：生命周期
- Iocomp包含组件介绍（一）
- （一）Android组件基本介绍
- 隐马尔可夫模型的介绍（一）
- 摄像机模型与标定（一）摄像机模型介绍
- SEAM学习笔记（一）-----------上下文相关组件模型
- COM 微软组件对象模型 简介（一）
- docker基础知识－组件介绍
- COM组件的多线程测试－Single模型（附录）
- Kafka组件研究<一>----组件介绍
- COM(组件对象模型)简单介绍
- COM(组件对象模型)简单介绍
- COM(组件对象模型)简单介绍
- const char * 和char * const 的区别
- 另一种sysenter hook方法(绕过绝大多数的rootkit检测工具的检测)
- 一行三个div的code
- Linux入门到精通完全篇
- 开博感言
- 云想衣裳花想容－－JSI组件模型介绍（一）
- 歌曲：完美世界 原唱：杨培安
- Named Parameters for PreparedStatement
- 云想衣裳花想容－－JSI组件模型介绍（二）
- Anti-Anti-Dump and nonintrusive tracers
- asp.net 将内容导出EXCEL文件
- 极品婆媳龙争虎斗---唇枪舌剑(3)
- Anti-Anti-Dump_and_No...(二)
- DATASTAGE——Surrogate Key Stage用法
