介绍一个Open Source的Javascript UI Lib

2022-12-23

ActiveWidgets ( http://www.activewidgets.com/ )是偶所知道的几个优秀open source javascript lib之一, 今天看到大家讨论UI这么热烈, 偶也来插一脚, 来介绍一下.

看主页上你可能仅仅以为它只是一个grid lib, 其实它的grid是架构在其基础的javascript lib之上, 它的基础lib做得很不错, 可扩展性较强.

偶们来看一下用它实现一个grid的代码 (http://www.activewidgets.com/documentation/tutorial/grid/data-xmlsimple.htm):

javascript代码:

1   
2   
3    var table = new Active.XML.Table; 
4    table.setURL("simple.xml"); 
5    table.request(); 
6   
7    var obj = new Active.Controls.Grid; 
8    obj.setProperty("column/count", 5); 
9    obj.setModel("data", table); 
10  
11   document.write(obj); 
12   
13 
    

这里先是用到了Active.XML.Table这个对象:
它继承(如果你不知道javascript也能继承, 那么先看看dlee的介绍javascript OOP的入门教程吧)了Active.HTTP.Request(一个封装了不同浏览器下xmlhttp特性的对象), 能够把一个xml文档转换成为一个2维的table对象, 然后Active.Controls.Grid可以利用它来渲染一个grid.

好了, 接下去偶开始今天的介绍课程了, 目的是来扩展它一下, 来实现一个比较通用(粗陋, hehe)的, 可以从后台获取数据的grid.

先是大家比较熟悉的后台代码:
一个domain 对象:

java代码:

1 
2 publicclass User {...}
{ 
            ...}
}
            
14//getters and setters
15}
16

一个简单的service实现:

java代码:

1 
2 publicclass UserServiceImpl implements UserService {...}
{ 
            ...}
6 for(int i = 0; i < 30; i++){...}
}
                
9 }
10
11public User[] loadAllUsers(){...}
}
            
14}
15

一个简单的利用xstream生成xml数据的servlet:

java代码:

1 
2 publicclass XmlDataSourceServlet extends HttpServlet {...}
{ 
            ...}
8 if("UserService".equals(request.getParameter("serviceName"))){...}
}
                
13
14}
15
16publicvoid doPost(HttpServletRequest request, HttpServletResponse response)throwsIOException{...}
}
            
19}
20

好了, 开始来写前台的javascript代码:

javascript代码:

1   
2        var table = new Active.XML.TableWithColumnName; 
3        var grid = new Active.Controls.Grid; 
4        grid.setModel("data", table); 
5                                            
6        table.setURL("/activewidgets/xmlDataSource.xml?serviceName=UserService"); 
7        table.callback = function(){ 
8            grid.setProperty("column/count", table.getColumnNames().length); 
9            grid.setColumnProperty("text", function(i){return table.getColumnNames[i]}); 
10       }; 
11       
12       table.request(); 
13       
14       document.write(grid); 
15 
    

Active.XML.TableWithColumnName是偶扩展了Active.XML.Table, 增加了getColumnNames方法, 获取xml tag作为grid的header, 以及增加了callback方法用于通知grid做更新.

就这样, 一个通用的grid就做完了, 是不是很方便? ActiveWidgets的基础lib非常的优雅, 如果femto, dlee准备做自己的open source项目的话, 先考虑一下是否能够做得比它好, 嘿嘿.

想看看实际的效果么? 偶打包了所有的代码, 你可以下载附件, 运行ant war, 把生成的dist\activewidgets.war, 发布到任意的servlet container上, 访问 http://localhost:8080/activewidgets/example/grid.html 就可以了.

activewidgets.rar

描述:

下载

文件名:

activewidgets.rar

文件大小:

246.95 KB

下载过的:

文件被下载或查看 25 次