介绍一个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):

  var table = new Active.XML.Table;
  table.setURL("simple.xml");
  table.request();

  var obj = new Active.Controls.Grid;
  obj.setProperty("column/count", 5);
  obj.setModel("data", table);

  document.write(obj);
  

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

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

先是大家比较熟悉的后台代码:
一个domain 对象:
[code:1] public class User { private String name; private String phone; private String email; private Integer age; public User(String name, String phone, String email, Integer age) { this.name = name; this.phone = phone; this.email = email; this.age = age; } //getters and setters } [/code:1] 一个简单的service实现: [code:1] public class UserServiceImpl implements UserService { private List users = new ArrayList(); public UserServiceImpl (){ for(int i = 0; i < 30; i++){ users.add(new User("tester" + i, i + ":119", i + "@readonly.com", new Integer(i))); } } public User[] loadAllUsers() { return (User[]) users.toArray(new User[users.size()]); } } [/code:1] 一个简单的利用xstream生成xml数据的servlet: [code:1] public class XmlDataSourceServlet extends HttpServlet { private static UserService userService = new UserServiceImpl(); private static GroupService groupService = new GroupServiceImpl(); private static XStream xstream = new XStream(); public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { if("UserService".equals(request.getParameter("serviceName"))){ response.getWriter().write(xstream.toXML(userService.loadAllUsers())); }else{ response.getWriter().write(xstream.toXML(groupService.loadAllGroups())); } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException { doGet(request, response); } } [/code:1] 好了, 开始来写前台的javascript代码:

      var table = new Active.XML.TableWithColumnName;
      var grid = new Active.Controls.Grid;
      grid.setModel("data", table);
                                          
      table.setURL("/activewidgets/xmlDataSource.xml?serviceName=UserService");
      table.callback = function(){
          grid.setProperty("column/count", table.getColumnNames().length);
          grid.setColumnProperty("text", function(i){return table.getColumnNames[i]});
      };
      
      table.request();
      
      document.write(grid);

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 就可以了.

但是只有grid这一个控件是free的，而且按照GPL不能用于商业软件。其它的控件像Tree、Menu什么的都没的下载，比Bindows还小气！

不过确实很强！

[code:1]
response.getWriter().write(xstream.toXML(userService.loadAllUsers()));
[/code:1]

[code:1]
table.setURL("/activewidgets/xmlDataSource.xml?serviceName=UserService");
[/code:1]

xmlDataSource.xml文件是从哪里拿来的？为什么会是xmlDataSource这个文件名，整个程序都看过了，不解。请教！谢谢

Servlet Mapping, check the web.xml

谢谢Readonly了。

但是使用中发现几个问题：
1。column name 不能显示。显示成undefined了。用的是这里下的程序。

2。在ie5.5跑不起来，包括出这个js的组织的主页，都跑不起来。ie6可以。我想这就极大的限制了这个free component的使用了。

:x , 是偶的错，dirty and quick fix:
把example/grid.html里面的
grid.setColumnProperty("text", function(i){return table.getColumnNames[i]});

换成
var columnNames = table.getColumnNames();
grid.setColumnProperty("text", function(i){return columnNames[i]});

应该就行了。


你可以修改当中不兼容5.5的script, 偶是没有这个需求了，只要在IE6和Firefox0.9中可以用就行了。