咖啡 生活 美女蛇 scriptfans，focus on python、ruby、groovy and ajax…… http://scriptfans.javaeye.com UTF-8 Copyright 2003-2008, JavaEye.com http://blogs.law.harvard.edu/tech/rss JavaEye - 做最棒的软件开发交流社区 《Everyday Scripting with Ruby》书评 笨笨狗 作者: 笨笨狗  链接：http://scriptfans.javaeye.com/blog/194227  发表时间: 2008年05月19日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

随着web新兴框架Rails的崛起，国内同行也逐渐意识到了更新自己知识的必要性，对于同是web程序员的我来说，也是如此。于是利用工作之余，我翻阅了很多相关书籍，来补充Ruby/Rails方面的知识，例如《Programming Ruby》、《Agile Web Development with Rails》，以及这本篇幅苗条但却不失内涵的小册子——《Everyday Scripting with Ruby》。

上面所说的三本书都出自国外著名的敏捷型出版社Pragmatic Bookshelf，他们提倡用快速、有效的方式处理每一件事，不管是书籍的选题，还是出版流程，都无出其外：所选的都是前沿的，还未有别的出版社尝试过的主题，Ruby系列就是个很好的例子；对于出版流程，和Manning一样，提供β版以供读者提前阅读，并听取大家的意见以帮助他们在书籍创作过程中改善质量。所以一直以来都非常喜欢他们的书，也很关注其动态，看看他们都在出哪些方面的书，从Ruby、Rails到Erlang，事实证明这是一个非常有效的掌握国外技术动态的好方法：）

Ruby和Rails很难说是谁成就了谁，但有一点是肯定的，没有Ruby就不会有如今的Rails，就我个人的学习过程来看，要想灵活运用Rails，就必须对Ruby了如指掌。庆幸的是，如今国内书籍市场上已经有了好几本相关的中文书籍，这对国人学习提供了很大的帮助，对于初学者，个人推荐先看《Programming Ruby中文第二版》，在掌握了语言基础后，再来看《web开发敏捷之道：应用rails进行敏捷web开发（第二版）》就会感觉轻松许多。不过如果你像我一样，对“大部头”技术书籍心存畏惧，那么Prag社的这本《Everyday Scripting with Ruby》就是再合适不过的了，三百页不到的篇幅，在同类书籍中来说应该称得上苗条（oreilly的《Learning Ruby》要比这本更薄一点，不过其涉及的知识面相对而言也要小得多），在电子版发布的时候仅仅花了一周时间就把它看完了。非常高兴的是，从博文的官方blog上看到，此书的中文版也将于近期面市，这对习惯了阅读母语的国内Ruby爱好者来说，无疑又是一道美味的大餐。作者Marick文笔优美，行文风格简洁诙谐，正如其书名所示，这是一本实践性质的教材，和别的技术书籍大相径庭——章节的组织方式很像我们小时候课堂上所用的课本，对每个知识点都言简意赅的介绍，还留有练习题，最难得的是在书的末尾还给出了这些问题的详细答案。这应该算是Prag社的一大特点吧，之前看完的那本《Prototype & Script.aculo.us》也是如此，非常适合读者下来思考和巩固前面学到的东西，加深记忆，不过这种组织方式导致了读者必须按部就班的进行学习，不能跳跃式阅读。其中作者用四个实际项目来贯穿组织全书，这些例子都是作者从日常工作提炼出来的实际问题，摆脱了技术书籍偏重于理论的约束，让读者在实践的过程中潜移默化，逐步掌握Ruby的语言特性、习惯用法及其最佳实践，给我印象最深的是穿插于全书的那些Ruby Facts（ruby语言细节），难得作者把它们整理归纳在一起，一次性灌输给读者。读完这本书之后，让我对ruby的正则表达式应用、IO操作和文本处理等方面有了更多的认识，花更少的时间做更多的事，这种感觉真是惬意。

正如本书译者所说，这是一本实例驱动的教程，阅读它就像是在Ruby的奇趣世界里做了一次轻松的旅行，非常适合那些习惯通过动手实践来学习Ruby的读者。相信在中文版面市以后，应该能让广大Ruby爱好者大呼过瘾。虽然我没有看过中文版，但就廖志刚老师负责组织翻译的另一本《Rails cookbook》的质量，以及博文视点一贯作风来看，很是令人放心，希望出版社能再接再厉，为国内同仁带来更多更好的技术书籍（期待Programming Ruby第三版和Agile Rails第三版，还有Ruby之父那本The Ruby Programming Language能尽快面市）。
本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Mon, 19 May 2008 09:11:13 +0800 http://scriptfans.javaeye.com/blog/194227 http://scriptfans.javaeye.com/blog/194227 原创：基于Prototype，利用Canvas绘图实现的web流程图设计器（原型） 笨笨狗 作者: 笨笨狗  链接：http://scriptfans.javaeye.com/blog/183163  发表时间: 2008年04月16日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

刚才在首页看到这么个帖子 图形间连线算法 ，说来也巧，最近自己也在做这么个玩意儿，就是在web上拖放图标，然后连线，这段时间也算有点收获，实现了这么个玩意儿，发上来给大家看看，顺便征求点意见。附件是效果图和源码示例。

特点：
1、基于Prototype、Script.aculo.us，利用HTML5的标签Canvas实现，因为ie目前不支持这个，所以引入了google的excanvas库适配到VML，但是对于开发人员来说，api都是同一的一套，比较爽；

2、节点可动态生成、可拖放，并显示了拖放行为，比如不会拖出画板，也不会重叠在一起（这样对以后连线开了方便之门）；

3、绘制连线的时候，可根据鼠标移动，实时反映线段状态，拖动节点也能试试反映连线状态；

4、节点、连线都可响应鼠标点击选中事件，并可响应键盘delete键删除选中的元素（线段或节点）；

5、源码结构实现了OO封装以及经典的MVC模式，大大降低各部分耦合度。

绘图步骤：
1、您可以在右侧拖放一个项目到左侧的画板生成一个新方块（这个以后可以用漂亮的图标代替），在初始化的时候我已经加入了三个；

2、点击画板上方的“单向连线”按钮之后，即可点击起始节点，然后移动鼠标至结束节点再点击一下，即可在这两个节点间绘制有向线段。每次只能画一条线，画完了需要再次点击按钮重复绘制；

3、节点可拖动，但是不会被拖出画板，如果两个节点重叠了，那么不会允许放置在最终位置，而是弹回原始位置；

4、点击节点可选中当前节点，要选择线段的话必须点击中部的箭头处，被选中的元素以红色区分，此时可通过敲击键盘delete键删除此元素，而且，如果删除的是有连线的节点，此节点相关的连线都将被删除。

结语：这只是个原型，还有待完善，最大的问题还是对于OP9，连线中点的箭头显示还有问题，慢慢来吧，先放出来给大家看看，欢迎交流。如果大家有非直线连接图形的好算法，希望能提供出来，非常感谢！

顺便广告一下，昨天在je也发布了一个基于Canvas的仿Google动画导航条实现，可惜关注的人不多，我觉得canvas是个好玩的东西，希望大家能关注下，有兴趣的可以移驾这里看看：

基于Prototype和Canvas实现的仿Google导航条
本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Wed, 16 Apr 2008 10:18:58 +0800 http://scriptfans.javaeye.com/blog/183163 http://scriptfans.javaeye.com/blog/183163 发布一个基于Prototype和Canvas实现的仿Google导航条 笨笨狗 作者: 笨笨狗  链接：http://scriptfans.javaeye.com/blog/182840  发表时间: 2008年04月15日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

前几天在一个叫做友财网的地方发现这个好玩的导航，比较喜欢，看了看原始的html代码结构，发现比较臃肿，而且不符合web标准，用了表格来布局，最要命的是在a标签下嵌套了div，大家都知道，inline元素下面是不能包含block元素的：（

对于我这个极端主义分子，还有什么好说的呢，既然喜欢俺就自己做一个得了！因为讨厌无意义的标记，所以考虑用canvas来实现提示框的绘制，因此页面上需要引入google的excanvas库，增大了下载量，比较遗憾，如果你觉得无法忍受，那么可以暂时等等，或许接下来我会改成css圆角实现的，等不及的话自己改改源码得了 ，不是很难^_^

原理主要是按某个时间间隔动态修改元素背景图的backgroundPosition值，产生动画错觉，至于提示信息的边框圆角和箭头，都可以用canvas画，减少了图片。

如果大家感兴趣，接下来可以写一篇教程，详细介绍其实现过程和关键点技术。

附件是效果图以及源码。欢迎交流：）


使用方法：

首先，依次引入prototype.js,effects.js,excanvas.js(这个需要用到IE的条件注释),navigation.js，以及navigation.css样式表，然后在需要生成导航的位置放上以下HTML结构： 

    
<div id='example' class='navigation'>
    <ul>
        <li>
            <a href='#' title='这里的内容将被放到提示框'>文字</a>
        </li>
        ……重复上述<li>元素即可构造多个连接
    </ul>
</div>

然后，在页面载入完毕之后，初始化导航对象，参数为一对象字面量构造"{wrap:'上述HTML代码里面最外层div的id，这里为"example"',duration:'每帧间隔时间(秒)'}"，如下： 


new Navigation({wrap:'example',duration:0.1});


这样一来就生成了你自己漂亮的导航条了，呵呵。综合说来，这个实现HTML标签结构简洁清晰，而且圆角不需要任何额外的图片，灵活度高。
本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Tue, 15 Apr 2008 11:42:44 +0800 http://scriptfans.javaeye.com/blog/182840 http://scriptfans.javaeye.com/blog/182840 Prototype1.6以下Element.setStyle()的bug 笨笨狗 作者: 笨笨狗  链接：http://scriptfans.javaeye.com/blog/145264  发表时间: 2007年12月01日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

问题：如果在frame、iframe页面中使用了setStyle()方法后（貌似还不止这个方法有问题），或者使用了script.aculo.us的特效的话，会导致self.name混乱（也就是框架本身的名字），这样的话用链接元素的target指定到这个框架就没效果了，浏览器将按默认行为在新窗口中打开！

解决办法：

1、升级Prototype和Script.aculo.us到最新版本（1.6、1.8），经测试已无bug。

2、自己打补丁，很容易，但比较麻烦，总的思想就是，在做了可能引起bug的操作后，自行恢复iframe的self.name。

    首先，不使用setStyle()方法改变元素样式，转而用传统的element.style.xx;

    然后，在用到script.aculo.us特效的地方，设置其结束的回调函数，比如afterFinish，在其中做恢复self.name操作。当然，这 个方法不是无懈可击的，因为在特效运行的过程中，还是存在问题，所以说升级版本才是王道，1.6版做了很大的改进，可以说将会改变之前写 javascript代码习惯，我个人是非常期待的。
 

附上一个简单的恢复窗体名称的办法：

js 代码
 
  1. //先保存一下当前窗体名称  
  2. var frame_name = self.name;     
  3.   
  4. //如果发现变化了，就恢复回去  
  5. function fixTarget(){  
  6.     if(self.name != frame_name) { self.name = frame_name; }  
  7. }  

 

页面一加载就执行这段代码，以后便可通过fixTarget函数来恢复了。有个找抽的办法，你可以起一个定时器，定时执行这个函数，如果间隔短点的话，效果应该也还不错，当然，你付出的代价就是客户的内存......
本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Sat, 01 Dec 2007 11:40:45 +0800 http://scriptfans.javaeye.com/blog/145264 http://scriptfans.javaeye.com/blog/145264 转载：调羹还是手提钻？ 笨笨狗 作者: 笨笨狗  链接：http://scriptfans.javaeye.com/blog/101532  发表时间: 2007年07月16日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

在译言上看到一篇好文，实在喜欢，转载过来（ 原作者: Jason    译者: 小狼诺夫）。

        很多人问我们：“你们这么小的一个团队是怎么完成这么多项目的？五个产品、一本书、Rails（译者注：ruby的web框架），还有一个颇受欢迎的博客。我们比你们拥有多得多的钞票、人力、硬件资源和技术，但是我们好像什么事也完不成？秘密是什么？”

        有两个犯人。每人住在自己的单间里，没有室友。

        他们两个都想越狱。一个人拥有一把手提钻，另一个人只有一把调羹。

        无疑，对于越过混凝土、障碍物、砖墙而言，手提钻是更好的工具。但是它太招摇了、巨大，需要能源输入，它很昂贵，难以隐藏。携带一把手提钻你很难不 被注意。因为手提钻，小错误变成了大错误。使用手提钻的话你要不成功要不失败。在打穿混凝土马路时它很方便，但是穿越一座混凝土监狱则另当别论。

        调羹是用来喝汤的。但是它不被注意、安静的、实用的、操作灵活、人力助动的、易于隐藏、更易于修复或替换。它可能需要你花费更长的时间，但是你的成功几率会更大。

        暴力（手提钻）可以完成事情，但是整体上可以做错了 - 吵闹。不被注意（调羹）给你更多工作的空间，更多机会来说不、来减缓开发速度、沿途做出更优的决策，以及改变方向。

        投入大量的钞票、资源和人力，就像在使用一把手提钻越狱。找一些聪明人来解决问题、欣然接受约束、不要试图解决错误问题、关注精度、不要在可以使用四个单词的地方使用七个单词，慢慢完成它，就像正在使用一把调羹越狱。

        我们就是使用调羹的。


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Mon, 16 Jul 2007 11:45:42 +0800 http://scriptfans.javaeye.com/blog/101532 http://scriptfans.javaeye.com/blog/101532 用python解一道奥数题（小学三年级） 笨笨狗 作者: 笨笨狗  链接：http://scriptfans.javaeye.com/blog/100114  发表时间: 2007年07月11日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

今天在谢老师的blog上看到她小孩的一道奥数作业（难倒了N个硕士和博士的三年级奥数题），题目如下：

一个六位数，分别用2，3，4，5，6乘它，得到的五个新数仍是由原数中的六个数字组成，只是位置不同，则此六位数是多少？

顺手用python写了个解法：
python 代码
 
  1. def makeSet(num):  
  2.     tmp = set()  
  3.     for i in xrange(1,7):  
  4.         item = list(set(str(num*i)))  
  5.         item.sort()  
  6.         item = "".join(item)  
  7.         tmp.add(item)  
  8.     return tmp  
  9.   
  10. for i in xrange(100000,1000000):  
  11.     if len(makeSet(i))==1:  
  12.         print i  
  13.         break  
  14.   
  15. 输出结果为142857。  

本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Wed, 11 Jul 2007 14:01:32 +0800 http://scriptfans.javaeye.com/blog/100114 http://scriptfans.javaeye.com/blog/100114 最值得期待的好书：《Pro CSS and HTML Design Patterns》 笨笨狗 作者: 笨笨狗  链接：http://scriptfans.javaeye.com/blog/83937  发表时间: 2007年05月28日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

        没事上Apress的网站闲逛，偶然发现这本新书《Pro CSS and HTML Design Patterns》，出于好奇，下载了其源代码来看看，毕竟书名很有来头。不看不知道，一看吓一跳，作者真是太有创意了，从示例代码来看，版式设计精美，非常漂亮，涉及的知识点也很广，深度也不亚于《css mastery》！特别是第十二章的最后一个例子，原来css用得初审入化了也能这样，哈哈：

点击查看在线示例

这个数学公式，没有用任何图片，纯css实现，太牛了……

看完这些示例，我已经找到自己最为期待的书了，没错就是他——《Pro CSS and HTML Design Patterns》！期待0day电子版的到来。顺便告诉大家一个好消息，此书中文版将由人民邮电出版社图灵公司引进发行中译本，希望他们能高效高质量地及时出版：）
本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Mon, 28 May 2007 17:24:37 +0800 http://scriptfans.javaeye.com/blog/83937 http://scriptfans.javaeye.com/blog/83937 AJAX表格分页模板(续):服务器端实现 笨笨狗 作者: 笨笨狗  链接：http://scriptfans.javaeye.com/blog/82250  发表时间: 2007年05月23日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（上）
AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（中）
AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（下）
        在前面的三篇文章中，我们循序渐进的完成了三种数据获取方式的表格分页模板，接下来让我们看一下服务器端代码设计。这里出于快速演示的目的，实用 groovy脚本简单实现，日后完全可以替换为别的实现，groovy的快速开发能力，非常适合用来快速展示脑海里的实现，呵呵。
        首先，在mysql中建立一个名为“template”的数据库，再库中创建一个数据表trs，结构图如下（注意如果你设置了不同的用户名和密码，记得在下面的groovy代码里面做相应修改）。在这里我输入了19行测试数据：
id
 int(10)
title1
 VARCHAR(45)
title2 VARCHAR(45)
title3 VARCHAR(45)
title4 VARCHAR(45)
title5 VARCHAR(45)
title6
 VARCHAR(45)

        接下来，针对静态分页模板，也就是一次获取所有分页数据的模板，我们编写一个StaticTemplate.groovy脚本文件，这里使用了groovy servlet：
xml 代码
 
  1. import groovy.sql.Sql  
  2. response.setContentType 'text/html'  
  3. response.setCharacterEncoding 'utf-8'  
  4. db = Sql.newInstance(  
  5.     'jdbc:mysql://localhost/template',  
  6.     'root',  
  7.     'admin',  
  8.     'com.mysql.jdbc.Driver'  
  9. )  
  10. def trs = []  
  11. db.eachRow("select * from trs"){tr->  
  12.     def writer = new StringWriter()  
  13.     def builder = new groovy.xml.MarkupBuilder(writer)  
  14.     builder.tr{  
  15.         td tr.title1  
  16.         td tr.title2  
  17.         td tr.title3  
  18.         td tr.title4  
  19.         td tr.title5  
  20.         td tr.title6  
  21.     }  
  22.     trs += writer.toString()  
  23. }  
  24. db?.close();  
  25. mode = request.getParameter("mode")  
  26. items = Integer.parseInt(request.getParameter("items"))  
  27. out.println "<table id='pages'>"  
  28. out.println """  
  29.     <caption>静态分页模板</caption>  
  30.     <thead>  
  31.         <tr>  
  32.             <th>标题一</th>  
  33.             <th>标题二</th>  
  34.             <th>标题三</th>  
  35.             <th>标题四</th>  
  36.             <th>标题五</th>  
  37.             <th>标题六</th>  
  38.         </tr>  
  39.     </thead>  
  40. """  
  41. for(String tr in trs){  
  42.     def index = trs.indexOf(tr)  
  43.     if(index%items==0){  
  44.         out.println "<tbody class='hidden'>"  
  45.     }  
  46.     out.println tr  
  47.     if(index%items==items-1||index==trs.size()-1){  
  48.         out.println "</tbody>"  
  49.     }  
  50. }  
  51. out.println "</table>"  


        另外，针对动态获取每页数据的分页模板，对应为AsyncTemplate.groovy脚本：
xml 代码
 
  1. import groovy.sql.Sql  
  2. response.setCharacterEncoding 'utf-8'  
  3. mode = request.getParameter("mode")  
  4. items = Integer.parseInt(request.getParameter("items"))  
  5. def db = Sql.newInstance(  
  6.     'jdbc:mysql://localhost/template',  
  7.     'root',  
  8.     'admin',  
  9.     'com.mysql.jdbc.Driver'  
  10. )  
  11. def start = 1  
  12. if(mode=="page"){  
  13.     page = Integer.parseInt(request.getParameter("page"))  
  14.     if(page > 1){  
  15.         start = (page-1)*items + 1  
  16.     }  
  17. }  
  18. def end = start + items - 1  
  19. def pageContent = []  
  20. db.eachRow("select * from trs where id between ${start} and ${end}"){tr->  
  21.     def writer = new StringWriter()  
  22.     def builder = new groovy.xml.MarkupBuilder(writer)  
  23.     builder.tr{  
  24.         td tr.title1  
  25.         td tr.title2  
  26.         td tr.title3  
  27.         td tr.title4  
  28.         td tr.title5  
  29.         td tr.title6  
  30.     }  
  31.     pageContent += writer.toString()  
  32. }  
  33. if(mode=="async"){  
  34.     def trTotal = db.firstRow("select count(*) as total from trs").total  
  35.     if(trTotal<items){  
  36.         items = trTotal  
  37.     }  
  38.     pageTotal = trTotal%items!=0?trTotal.intdiv(items)+1:trTotal.intdiv(items)  
  39.     response.setContentType 'text/html'  
  40.     out.println "<table id='pages'>"  
  41.     out.println """  
  42.         <caption>异步分页模板</caption>  
  43.         <thead>  
  44.             <tr>  
  45.                 <th>标题一</th>  
  46.                 <th>标题二</th>  
  47.                 <th>标题三</th>  
  48.                 <th>标题四</th>  
  49.                 <th>标题五</th>  
  50.                 <th>标题六</th>  
  51.             </tr>  
  52.         </thead>  
  53.     """  
  54.     out.println "<tbody id='default'>"  
  55.     out.println pageContent.join("")  
  56.     out.println """  
  57.         </tbody>  
  58.         <tbody id="swap" class="hidden">      
  59.         </tbody>          
  60.         </table>  
  61.         <script type="text/javascript">  
  62.             template.pageTotal = $pageTotal;  
  63.         </script>  
  64.     """   
  65. }  
  66. else{  
  67.     response.setContentType 'text/xml'  
  68.     int page = Integer.parseInt(request.getParameter("page"))  
  69.     out.println """<tbody>"""  
  70.     out.println pageContent.join("")  
  71.     out.println """</tbody>"""  
  72. }  
  73. db?.close();  


一些解释和技巧：
        由于groovy语法简洁易懂，这里就不全盘解释了，就一些技巧说明一下，如果有兴趣，可以到groovy的官方网站查看相应的教程：http://groovy.codehaus.org/
        1、groovy servlet相比servlet，简化了不少，你可以直接使用绑定对象，比如request、response等，而且，分号和变量声明前的“def”关键字是可选的；
        2、引入groovy.sql.Sql类后，可以用Sql.newInstance静态方法返回数据库连接对象（可以指定相应的配置参数，如地址、用户名密码等），之后可以利用groovy提供的一系列方便实用的数据获取方法以及闭包，进行日常数据库操作：
java 代码
  1. import groovy.sql.Sql  
  2.   
  3. def db = Sql.newInstance(  
  4.     'jdbc:mysql://localhost/template',  
  5.     'root',  
  6.     'admin',  
  7.     'com.mysql.jdbc.Driver'  
  8. )  
另外，有个技巧可以让我们免于用if语句判断调用方法的对象是否为空，即使db为空，也不会抛出异常，呵呵：
java 代码
  1. db?.close()  

        3、三引号内部的字符串，会按原始格式输出，不需要对特殊字符做转义。而且，和双引号字符串一样，可以使用Gstring变量来动态占位，输出的时候将会把这些占位符替换为实际的变量值，与表达式语言类似：
java 代码
  1. "select * from trs where id between ${start} and ${end}"    // ${变量名}即为占位替换符号  

        4、利用groovy提供的MarkupBuilder，可以很方便的动态构建xml树结构。下面的代码迭代查询结果集的每一行，构建了一个分页数据内容（即tbody元素的tr子节点集）：
java 代码
  1. db.eachRow("select * from trs where id between ${start} and ${end}"){tr->  
  2.     def writer = new StringWriter()  
  3.     def builder = new groovy.xml.MarkupBuilder(writer)  
  4.     builder.tr{  
  5.         td tr.title1  
  6.         td tr.title2  
  7.         td tr.title3  
  8.         td tr.title4  
  9.         td tr.title5  
  10.         td tr.title6  
  11.     }  
  12.     pageContent += writer.toString()  
  13. }  

        最后，说一下前面我们设计的js对象的调用方式。在页面中，要显示一个分页表格，只需要指定一个容器div就可以了，比如，页面上有一个id为“TMPwrap”的div，我们可以这样来实例化分页模板对象，并显示它：
js 代码
  1. var template = new Tbi.StaticTemplate("TMPwrap",4,"StaticTemplate.groovy");  
  2. template.show();  
这样就生成并显示了一个静态分页模板实例，这里的template变量起这个名字，是由于动态分页模板的服务器返回javascript片段中用了这个名字，耦合得比较严重。可以这么改进，将服务器返回的片段代码改为一个函数，客户端eval之后，返回总页数即可：
js 代码
 
  1. function getTotal(){  
  2.         var total = $pageTotal;  
  3.         return total;  
  4. }  

        ok，到这里，ajax表格分页模板示例就告一段落了，最后附上源码供大家参考，见附件。我的环境是：jdk5，tomcat5.5，mysql5.0。 将附件中的Template.war放入tomcat安装目录下的webapps文件夹里，即可通过http: //127.0.0.1/Template/template.htm访问到。

        忘记说一个ie的bug：在生成提示信息的时候，我们通过动态生成一个跨列的单元格来实现，这里有个地方要注意，对于firefox，设置td.colspan = 100就可以了（一般不会有超过100列的表格，所以这个数目足够了），但是对于IE，貌似是区分大小写的，非得这样写才能达到相同的效果，奇怪：td.colSpan = 100。

        预告一下，接下来，会有一篇文章讲解一种用很取巧但不是非常实用的方法，来达到静态的分页效果，特别之处在于，它不需要任何的javascript代码，呵呵，算是奇巧淫技了（ps：不要误会这个词语，不信你可以去翻翻辞典，呵呵）。

本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Wed, 23 May 2007 17:08:30 +0800 http://scriptfans.javaeye.com/blog/82250 http://scriptfans.javaeye.com/blog/82250 AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（下） 笨笨狗 作者: 笨笨狗  链接：http://scriptfans.javaeye.com/blog/80861  发表时间: 2007年05月18日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（上）

AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（中）

        在前面两篇文章中，我们实现了静态表格分页模板，下面让我们继续讨论，如何实现另外两种数据获取方式的模板。要缓解服务器的压力，我们可以这样做：

        1、显示初始页面也就是第一页的时候，我们构造好表头、标题和第一页的数据，并按照服务器返回的总页数生成导航链接，之后将不再更新这部分重复的内容；
        2、对于每一页新内容，我们在点击页码链接的时候再动态向服务器获取数据，服务器根据所请求的页码返回特定页的内容，替换掉当前显示的页面数据，这样可以减少网络带宽的使用，毕竟每次只返回一页的内容；
        3、对于数据更新频繁的分页系统，就按照上面的办法每次获取新数据；而对于不是很频繁的数据，我们提供一种客户端缓存机制来加快响应速度和减轻服务器压 力：通过一个全局的cache数组来存放服务器端之前返回的数据，在切换页面的时候，先查询缓存，如果没有命中，再向服务器发起异步请求，当响应到达的时 候，也会将此次数据存入缓存以供使用。

        按照上面的分析，可以发现这两种数据获取方式的模板有很多相似的地方，不同的只是缓存与否，我们可以将他们抽象成同一个类来实现，下面是javascript代码，我将在后面就一些需要注意的地方做详细讲解：

js 代码
 
  1. /* 
  2.  * 异步模板，每次请求一个页面，并缓存浏览过的页面(可选) 
  3.  */  
  4. var mixin = new Tbi.StaticTemplate();   //用于mixin（混入）对象方法addNavigation  
  5. Tbi.AsyncTemplate = Class.create();  
  6. Tbi.AsyncTemplate.prototype = Object.extend(new Tbi.Template(),  
  7.     {  
  8.         initialize: function(wrap,items,catchUrl,option){  
  9.             this._init(wrap,items,catchUrl);  
  10.             this.mode = "async";  
  11.             //option为可选参数，设置初始显示页面以及是否缓存页面  
  12.             this.option = Object.extend({isCache:true},option);  
  13.             if(this.option.isCache){  
  14.                 this.cache = new Array();   //缓存数组;  
  15.             }  
  16.         },  
  17.           
  18.         // 实现父类抽象方法，向页面添加默认分页  
  19.         addPage: function(xmlhttp){  
  20.             var original = xmlhttp.responseText;  
  21.             var html = original.stripScripts();  
  22.             this.wrap.innerHTML = html;  
  23.             original.evalScripts();  
  24.         },  
  25.           
  26.         // mixin(混入)StaticTemplate类的同名方法，向页面添加分页导航  
  27.         addNavigation: mixin.addNavigation, // 方法劫持，重用addNavigation添加分页导航  
  28.           
  29.         // 导航链接点击事件处理函数，切换页面内容，同时改变导航链接样式（突出显示当前页）  
  30.         _changePage: function(event,link){  
  31.             var activeLink = $$('#TMPwrap div a[class="active"]')[0];  
  32.             if(activeLink != link){  
  33.                 link.className = "active";  
  34.                 activeLink.className = "";  
  35.                 this._displayPage(link);      
  36.             }  
  37.             Event.stop(event);  
  38.         },  
  39.           
  40.         // 根据缓存标志切换页面内容  
  41.         _displayPage: function(link){  
  42.             var page = link.firstChild.nodeValue;  
  43.             // 如果是第一页，且进行缓存的话，直接切换页面元素的可见性  
  44.             if(page==1 && this.cache){  
  45.                 $("default").className = "";  
  46.                 $("swap").className = "hidden";  
  47.             }  
  48.             // 否则，根据缓存标志，切换显示其他页（包括非缓存的默认页）  
  49.             else{  
  50.                 $("default").className = "hidden";  
  51.                 var oldPage = $("swap");  
  52.                 swapPage = this._prompt("正在获取数据……");  
  53.                 $("pages").replaceChild(swapPage,oldPage);  
  54.                 this._showPage(page);                 
  55.             }  
  56.         },  
  57.           
  58.         // 显示提示信息  
  59.         _prompt: function(text){  
  60.             var swapPage = document.createElement("tbody");  
  61.             swapPage.id = "swap";  
  62.             var messageTr = document.createElement("tr");  
  63.             var messageTd = document.createElement("td");  
  64.             messageTd.colSpan = 100;  
  65.             messageTd.appendChild(document.createTextNode(text));  
  66.             messageTr.appendChild(messageTd);  
  67.             swapPage.appendChild(messageTr);  
  68.             return  swapPage;     
  69.         },  
  70.           
  71.         // 根据缓存标志显示页面  
  72.         _showPage: function(page){  
  73.             if(this.cache&&this.cache["page"+page]){  
  74.                 this._addPageContent(page);     //巧妙重用此方法达到添加页面的效果  
  75.             }  
  76.             else{  
  77.                 this._catchPage(page);  
  78.             }  
  79.         },  
  80.           
  81.         // 异步获取页面内容  
  82.         _catchPage: function(page){  
  83.             if(this.ajax){  
  84.                 this.ajax.transport.abort();  
  85.             }  
  86.             this.ajax = new Ajax.Request(  
  87.                 this.catchUrl,  
  88.                 {  
  89.                     method: "get",  
  90.                     parameters: {"mode":"page","items":this.items,"page":page},  
  91.                     onComplete: this._addPageContent.bind(this,page)  
  92.                 }  
  93.             );  
  94.         },  
  95.           
  96.         // 添加各分页，并根据缓存标志进行页面缓存  
  97.         _addPageContent: function(page,xmlhttp){  
  98.             var xml = xmlhttp?xmlhttp.responseXML:this.cache["page"+page];  
  99.             if(this.cache&&!this.cache["page"+page]){  
  100.                 this.cache["page"+page] = xml;  
  101.             }  
  102.             var oldPage = $("swap");  
  103.             var newPage = this._createPage(xml);  
  104.             $("pages").replaceChild(newPage,oldPage);  
  105.         },  
  106.           
  107.         // 由异步返回的xml，或者缓存数组中的xml信息生成页面内容  
  108.         _createPage: function(xml){  
  109.             var newPage = document.createElement("tbody");  
  110.             newPage.id = "swap";  
  111.             var trs = $A(xml.getElementsByTagName("tr"));  
  112.             var context = this;  
  113.             trs.each(  
  114.                 function(item,index){  
  115.                     var tr = document.createElement("tr");  
  116.                     var tds = $A(item.getElementsByTagName("td"));  
  117.                     tds.each(  
  118.                         function(item){  
  119.                             var value = item.firstChild?item.firstChild.nodeValue:"";  
  120.                             var td = document.createElement("td");  
  121.                             td.appendChild(document.createTextNode(value));  
  122.                             tr.appendChild(td);  
  123.                         }  
  124.                     );  
  125.                 newPage.appendChild(tr);              
  126.                 }  
  127.             );  
  128.             return newPage;   
  129.         }  
  130.     }  
  131. );  

一些技巧和说明：

       1、AsyncTemplate由前面文章中的Template抽象父类派生而来，因此具有了父类的能力（与静态模板类StaticTemplate共用 _catchContent方法获取初始数据；具有可扩展的显示前、显示后事件入口），达到了代码复用的效果；
        2、initialize构造函数中，参数和父类是一样的，只是多了一个可选参数option，用于设置缓存标志（默认为true，即开启缓存），如果开启缓存，则初始化一个缓存数组cache 。这里注意一下默认参数的设置方式，这在Prototype风格的代码中很常见：
js 代码
  1. this.option = Object.extend({isCache:true},option);  


        3、接下来addPage实现父类的抽象方法，作为继承而来的_catchContent方法的回调函数，将处理服务器端返回的数据并显示模板初始页面， 也就是第一页。这里服务器端返回的数据格式如下，注意我们利用了Prototype的扩展evalScripts和stripScripts方法抽取执行 以及删除javascript脚本片段，以达到向客户端返回总页数的效果（后面将利用addNavigation方法和这个总数构建分页导航）：

xml 代码
 
  1. <table id='pages'>       
  2.     <caption>动态分页模板</caption>       
  3.     <thead>       
  4.         <tr>       
  5.             <th>标题一</th>       
  6.             <th>标题二</th>       
  7.             <th>标题三</th>       
  8.             <th>标题四</th>      
  9.             <th>标题五</th>      
  10.             <th>标题六</th>       
  11.         </tr>       
  12.     </thead>       
  13.     <tbody id='default'>       
  14.         <tr>       
  15.             <td>1</td>       
  16.             <td>1</td>       
  17.             <td>1</td>       
  18.             <td>1</td>       
  19.             <td>1</td>       
  20.             <td>1</td>       
  21.         </tr>    
  22.         <tr>       
  23.             <td>2</td>       
  24.             <td>2</td>       
  25.             <td>2</td>       
  26.             <td>2</td>       
  27.             <td>2</td>       
  28.             <td>2</td>       
  29.         </tr>    
  30.         <tr>       
  31.             <td>3</td>       
  32.             <td>3</td>       
  33.             <td>3</td>       
  34.             <td>3</td>       
  35.             <td>3</td>       
  36.             <td>3</td>       
  37.         </tr>    
  38.         <tr>       
  39.             <td>4</td>       
  40.             <td>4</td>       
  41.             <td>4</td>       
  42.             <td>4</td>       
  43.             <td>4</td>       
  44.             <td>4</td>       
  45.         </tr>       
  46.     </tbody>       
  47.     <tbody id="swap" class="hidden">       
  48.         <!--新页面交换区-->  
  49.     </tbody>               
  50. </table>       
  51. <script type="text/javascript">       
  52.     template.pageTotal = 5;       
  53. </script>   

这里的tempate是页面上实例化的动态模板对象名称，我们为其添加了一个pageTotal属性，以达到和静态模板类相似的效果，共用

js 代码
  1. // mixin(混入)StaticTemplate类的同名方法，向页面添加分页导航  
  2. addNavigation: mixin.addNavigation, // 方法劫持，重用addNavigation添加分页导航  

mixin是我们前面实例化的一个addNavigation方法添加导航。（如果觉得耦合太紧，可以修改一下将其赋值给window，两个类都用window对象的同名属性来调用addNavigation生成导航，我觉得没有什么必要）
        4、addNavigation方法，我们演示了如何混入（mixin）三方对象的实例方法来达到多继承的目的（这个方法完全可以抽象到父类Template中），其原理就是javascript的函数上下文是动态切换的：
StaticTemplate对象：
js 代码
 
  1. var mixin = new Tbi.StaticTemplate();   //用于mixin（混入）对象方法addNavigation  

用这种方式，我们可以给当前类混入任何三方对象的方法，javascript的灵活性在这里展现得淋漓尽致：）
          5、其他的代码就不详细介绍了，大家自己看。值得一提的是_catchPage方法中：
js 代码
  1. onComplete: this._addPageContent.bind(this,page)  

我们又一次用到了bind方法，这里传入的page参数，在函数调用的时候将放到自动传入的xmlhttp参数之前：
js 代码
  1. _addPageContent: function(page,xmlhttp){  
  2.     var xml = xmlhttp?xmlhttp.responseXML:this.cache["page"+page];  
  3.     if(this.cache&&!this.cache["page"+page]){  
  4.         this.cache["page"+page] = xml;  
  5.     }  
  6.     var oldPage = $("swap");  
  7.     var newPage = this._createPage(xml);  
  8.     $("pages").replaceChild(newPage,oldPage);  
  9. }  

另外我们在_showPage中重用_了addPageContent方法，实现了_addPageContent的双重身份：作为回调函数添加新页面内容，或者读取缓存显示页面内容，javascript的代码重用又得以体现：）

        6、服务器端返回的新页面数据，由于在IE中不能用inner系列属性直接设定（ie中出了td元素，对于其他的元素，inner系列属性都是只读的，汗一个），因此数据传输不能以内容为中心返回html，而只能返回xml格式：
xml 代码
 
  1. <tbody>       
  2.     <tr>       
  3.         <td>5</td>       
  4.         <td>5</td>       
  5.         <td>5</td>       
  6.         <td>5</td>       
  7.         <td>5</td>       
  8.         <td>5</td>       
  9.     </tr>       
  10.     <tr>       
  11.         <td>6</td>       
  12.         <td>6</td>       
  13.         <td>6</td>       
  14.         <td>6</td>       
  15.         <td>6</td>       
  16.         <td>6</td>       
  17.     </tr>       
  18.     <tr>       
  19.         <td>7</td>       
  20.         <td>7</td>       
  21.         <td>7</td>       
  22.         <td>7</td>       
  23.         <td>7</td>       
  24.         <td>7</td>       
  25.     </tr>       
  26.     <tr>       
  27.         <td>8</td>       
  28.         <td>8</td>       
  29.         <td>8</td>       
  30.         <td>8</td>       
  31.         <td>8</td>    
  32.         <td>8</td>    
  33.     </tr>    
  34. </tbody>    


        7、接收到服务器传回的上述xml数据后，不能直接用document.getElementsByTagName("tbody")[0]来获得 tbody后直接append到页面，貌似浏览器并不认为这是一个合法的HTML DOM，即使的确是个tbody，汗！只能迭代读取每一行数据来生成，郁闷。这里又遭遇了一个IE的bug：替换页面上的tbody元素，如果先 remove掉已有的，再append新的，如此重复操作，将导致IE发生非法操作，但firefox却一切正常。解决办法是用dom提供的 replaceChild方法来替换，就没有问题了，奇怪。

        至此，我们的动态模板也实现了，接下来将讲解服务器端的groovy简单实现，以及示例数据库，请参看：

AJAX表格分页模板(续):服务器端实现


最后我要发一发牢骚：javaeye的代码编辑器真的是bug多多，太郁闷了，我只是想编辑这篇文章，添加下一页的导航，居然搞得数据丢失了。另外，在编 辑已有文章的时候，如果有xml代码，则代码格式必定混乱！每个标签都会缺失关闭符号（左尖括号和斜杠）。而且，不认识Groovy代码，我只能选择 xml来显示，唉，又一个让我失望的blog系统……
本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Fri, 18 May 2007 13:10:14 +0800 http://scriptfans.javaeye.com/blog/80861 http://scriptfans.javaeye.com/blog/80861 为aptana增加firefox预览tab 笨笨狗 作者: 笨笨狗  链接：http://scriptfans.javaeye.com/blog/80584  发表时间: 2007年05月17日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

        一直以来，aptana都是我首选的AJAX前台开发IDE，其强大的代