`
jindw
  • 浏览: 501412 次
  • 性别: Icon_minigender_1
  • 来自: 初到北京
社区版块
存档分类
最新评论

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

    博客分类：
  • JSI
JSI云计算HTML5D语言fckeditor 
阅读更多
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


  • 大小: 108.9 KB
分享到：
| 海纳百川 有容乃大――采用JSI封装、集成 ...
评论
19 楼 winterwolf 2007-05-23  
hax 写道
jindw 写道
看了一下wf2，将来做表单装饰器的时候可以参照。
web application 1.0是不是html5呢？


webapp1即html5，只是webapp1可以有html形式或者xhtml形式。

关于webapp1和wf2，我提出来，是想建议楼主考虑朝标准化方向靠近。与其自己搞一套组件模型，不如实现这些发展中的标准（甚或扩展之）。例如不是自己设计自己的include标签，而是实现一下xinclude，又如不是搞一个datepiker，而是实现webapp1所做的input扩展。甚至实现整个xforms标准，那就非常棒啦！


xforms的实现有formface 不过没有文档 可能要收费吧. 我一直没有实验成功
18 楼 jindw 2007-05-22  
hax 写道
jindw 写道
看了一下wf2，将来做表单装饰器的时候可以参照。
web application 1.0是不是html5呢？


webapp1即html5，只是webapp1可以有html形式或者xhtml形式。

关于webapp1和wf2，我提出来，是想建议楼主考虑朝标准化方向靠近。与其自己搞一套组件模型，不如实现这些发展中的标准（甚或扩展之）。例如不是自己设计自己的include标签，而是实现一下xinclude，又如不是搞一个datepiker，而是实现webapp1所做的input扩展。甚至实现整个xforms标准，那就非常棒啦！


不错的建议，模仿已有的标准，可以降低学习成本。
现在的标签也都是模仿mozilla的xul的。

改改几个标签名，也是很简单的事情。
17 楼 hax 2007-05-22  
jindw 写道
看了一下wf2，将来做表单装饰器的时候可以参照。
web application 1.0是不是html5呢？


webapp1即html5，只是webapp1可以有html形式或者xhtml形式。

关于webapp1和wf2，我提出来，是想建议楼主考虑朝标准化方向靠近。与其自己搞一套组件模型，不如实现这些发展中的标准（甚或扩展之）。例如不是自己设计自己的include标签，而是实现一下xinclude，又如不是搞一个datepiker，而是实现webapp1所做的input扩展。甚至实现整个xforms标准，那就非常棒啦！
16 楼 jindw 2007-05-21  
jianfeng008cn 写道
jindw 写道
曹晓钢 写道
几百毫秒也是不小的开销了....

几百毫秒是说一个测试用的上兆的大文件，一般网页不会有这么大，自然也就不会怎么耗时。


但是引用的js控件都很不小啊，虽可采百家之长，我看敢用的人还是。。
且每个js控件都需要学习成本啊，虽对lz很敬佩，话还是得说一下哦


不得不承认，JSI还不成熟。

复杂js控件的体积，是可能成为问题，但是目前来说，也没有更好的办法，用传统模式也是一样的。
只能期待浏览器的更新了，比如hax前面说的xhtml5。
15 楼 jianfeng008cn 2007-05-21  
jindw 写道
曹晓钢 写道
几百毫秒也是不小的开销了....

几百毫秒是说一个测试用的上兆的大文件，一般网页不会有这么大，自然也就不会怎么耗时。


但是引用的js控件都很不小啊，虽可采百家之长，我看敢用的人还是。。
且每个js控件都需要学习成本啊，虽对lz很敬佩，话还是得说一下哦
14 楼 啊赶 2007-05-21  
哟，lz 还听傲的嘛，

如果是你自己写的，我只有对你敬仰之情犹如滔滔江水。。。


补充一下，文档还需要加强
13 楼 jindw 2007-05-21  
看了一下wf2，将来做表单装饰器的时候可以参照。
web application 1.0是不是html5呢？
12 楼 hax 2007-05-21  
楼主有没有看过web application 1.0和wf2？这是比较好的努力方向。w3c正在进行标准化。
11 楼 jindw 2007-05-21  
啊赶 写道
问一下，这个是你自己写的还是参考别人的？



你去写一个，我来参考参考：）
10 楼 啊赶 2007-05-21  
问一下，这个是你自己写的还是参考别人的？

9 楼 jindw 2007-04-18  
bluepower 写道
jindw 写道
xml标记随html一起被解析，唯一多出的开销就是查找页面的装饰元素，曾经试过一个数M的html文件，也就是几百毫秒，所以，这些一般不会成为瓶颈。



建议写一个 Dom Query 引擎加快查找装饰元素的速度，可以参考一下 Ext 中的 DomQuery


谢谢你的建议，以后抽空看看。
框架的性能优化是一定会做的，无赖分身无术。还是先把欠缺的东西完善起来。

刚才做了一下装饰引擎的性能测试(通过new Date方式计算脚本运行时间)。

以新版javaeye主页为例（64,160字节，也算是大文件了），查找装饰元素需要的时间为：
IE: 0     毫秒。
FF: 50-70 毫秒。
8 楼 bluepower 2007-04-18  
jindw 写道
xml标记随html一起被解析，唯一多出的开销就是查找页面的装饰元素，曾经试过一个数M的html文件，也就是几百毫秒，所以，这些一般不会成为瓶颈。



建议写一个 Dom Query 引擎加快查找装饰元素的速度，可以参考一下 Ext 中的 DomQuery
7 楼 jindw 2007-04-18  
曹晓钢 写道
几百毫秒也是不小的开销了....

几百毫秒是说一个测试用的上兆的大文件，一般网页不会有这么大，自然也就不会怎么耗时。
6 楼 曹晓钢 2007-04-18  
几百毫秒也是不小的开销了....
5 楼 HexUzHoNG 2007-04-16  
和我们公司的js前台框架有点类似，不过感觉比你的稍直观些
拿那个TabBox为例，只要在页面加入

<div tt.impl=TabBanana 还有其它一些属性></div>
就实现了你例子中TabBox效果，和jsptaglib有些类似，呵呵
4 楼 cozone_柯中 2007-04-16  
说句心里话,佩服jindw的语言表述啊, 每个标题都不一样. jsi 我最看好的就是装饰模式了
3 楼 dogo 2007-04-16  
楼主牛人啊
2 楼 jindw 2007-04-16  
xml标记随html一起被解析，唯一多出的开销就是查找页面的装饰元素，曾经试过一个数M的html文件，也就是几百毫秒，所以，这些一般不会成为瓶颈。

我采用xml标记而非脚本语言，主要是考虑标记语言代码更简单，编写文档也比较方便

此外标记语言解析比较简单，比较适合可视化工具的开发。
1 楼 dennis_zane 2007-04-16  
非常酷的想法，只是采用xml做标记，性能上如何？我认为json是否是更好的选择？不过这个点子真的很不错，楼主的JS功力令人佩服。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics