介绍一个Open Source的Javascript UI Lib
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 ![]() 3 private String name; 16
4 private String phone; 5 private String email; 6 private Integer age; 7 ![]() 9 this.name = name; 14 //getters and setters 10 this.phone = phone; 11 this.email = email; 12 this.age = age; 13 } 15 } |
一个简单的service实现:
java代码: ![]() |
1 ![]() 3 private List users = new ArrayList(); 15
4 ![]() ![]() 7 users.add(new User("tester" + i, i + ":119", i + "@readonly.com", new Integer(i))); 9 }
8 } ![]() 12 return (User[]) users.toArray(new User[users.size()]); 14 }
13 } |
一个简单的利用xstream生成xml数据的servlet:
java代码: ![]() |
1 ![]() 3 private static UserService userService = new UserServiceImpl(); 20
4 private static GroupService groupService = new GroupServiceImpl(); 5 private static XStream xstream = new XStream(); 6 ![]() ![]() 9 response.getWriter().write(xstream.toXML(userService.loadAllUsers())); 13 10 }else{ 11 response.getWriter().write(xstream.toXML(groupService.loadAllGroups())); 12 } 14 } ![]() 17 doGet(request, response); 19 }
18 } |
好了, 开始来写前台的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 次 |