介绍一个Open Source的Javascript UI Lib

Java视线论坛首页  -> 软件应用讨论区 ->  用户界面设计深入探讨

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  public class User {

...}

 3      private String name;
 4      private String phone;
 5      private String email;
 6      private Integer age;
 7     
8      public User(String name, String phone, String email, Integer age) {

...}

 9          this.name = name;
 10         this.phone = phone;
 11         this.email = email;
 12         this.age = age;
 13     }

 14     //getters and setters
 15 }

 16 

一个简单的service实现:

java代码: 

 1  
2  public class UserServiceImpl implements UserService {

...}

 3      private List users = new ArrayList();
 4     
5      public UserServiceImpl (){

...}

6          for(int i = 0; i < 30; i++){

...}

 7              users.add(new User("tester" + i, i + ":119", i + "@readonly.com", new Integer(i)));
 8          }

 9      }

 10    
11     public User[] loadAllUsers() {

...}

 12         return (User[]) users.toArray(new User[users.size()]);
 13     }

 14 }

 15 

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

java代码: 

 1  
2  public class XmlDataSourceServlet extends HttpServlet {

...}

 3      private static UserService userService = new UserServiceImpl();
 4      private static GroupService groupService = new GroupServiceImpl();
 5      private static XStream xstream = new XStream();
 6         
7      public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {

...}

8          if("UserService".equals(request.getParameter("serviceName"))){

...}

 9              response.getWriter().write(xstream.toXML(userService.loadAllUsers()));
 10         }else{
 11             response.getWriter().write(xstream.toXML(groupService.loadAllGroups()));
 12         }

 13        
 14     }

 15    
16     public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {

...}

 17         doGet(request, response);
 18     }

 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 次

---