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

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
}

一个简单的service实现:

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();]);;
    }
}

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

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);;
    }
}

好了, 开始来写前台的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还小气！

不过确实很强！

response.getWriter();.write(xstream.toXML(userService.loadAllUsers();););; 

table.setURL("/activewidgets/xmlDataSource.xml?serviceName=UserService");; 

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中可以用就行了。