日期:2014-05-16  浏览次数:20457 次

Struts2+JSON+YUI构建Rich Client应用(一)

Struts2的出现在Web2.0纷争的年代,以Ajax为代表的富客户端(Rich Client)应用正唱着Web2.0的主角。虽然Struts2本身对Ajax的应用也提供了自己的Ajax标签,但是这种比较牵强的支持也是赶鸭子上架,不是Struts本身的特长。

?

这里,就Struts对JSON支持的技术特点,来构建一个Rich Client应用,UI层使用的是YUI工具包,详情参考Yahoo的YUI网站。http://developer.yahoo.com/yui/。

?

本文中所涉及的Web应用的大致结构图如下:

?

先一睹为快,该应用的实际运行界面如下:

?

?

页面功能大致是,用户加入一个New Test User和New Message,然后点击按钮Add Now,页面无刷新添加新加入的消息。

?

首先,建立一个Struts的Action类StrutsTestAction,代码如下:

package com.tail.test.actions;   
  
import java.util.ArrayList;   
import java.util.List;   
  
//import org.apache.log4j.Logger;   
  
import com.opensymphony.xwork2.ActionSupport;   
import com.tail.test.objects.Message;   
  
public class StrutsTestAction extends BaseAction {   
    // Our logger.   
//    private static Logger logger = Logger.getLogger(StrutsTestAction.class);   
       
    private String newUser;   
       
    private String newMessage;   
       
    private List<Message> messageList;   
  
    public List<Message> getMessageList() {   
        return messageList;   
    }   
  
    public void setMessageList(List<Message> messageList) {   
        this.messageList = messageList;   
    }   
  
    public String getNewMessage() {   
        return newMessage;   
    }   
  
    public void setNewMessage(String newMessage) {   
        this.newMessage = newMessage;   
    }   
  
    public String getNewUser() {   
        return newUser;   
    }   
  
    public void setNewUser(String newUser) {   
        this.newUser = newUser;   
    }   
  
    @Override  
    public String execute() throws Exception {         
        return super.execute();   
    }   
       
    public String loadMessages() {   
        messageList = new ArrayList<Message>();   
        messageList.add(new Message("tail", "This is an piece of initial message."));   
        return result(SUCCESS);   
    }   
       
    public String addMessageToUser() {   
        messageList.add(new Message(newUser, newMessage));   
        //logger.debug("Add user='" + newUser + "', message='" + newMessage + "'");   
        return result(SUCCESS);   
    }   
}?

?

其中,newUser和newMessage分别对应界面上的New Test User和New Message这两个输入框中的value。messageList则是下方显示的消息内容,注意messageList本身内含多个Message对象的List,Message类的定义如下:

package com.tail.test.objects;   
  
public class Message {   
    private String userName;   
  
    private String content;   
  
    public String getContent() {   
        return content;   
    }   
  
    public void setContent(String content) {   
        this.content = content;   
    }   
  
    public String getUserName() {   
        return userName;   
    }   
  
    public void setUserName(String userName) {   
        this.userName = userName;   
    }   
  
    public Message() {   
  
    }   
  
    public Message(String userName, String content) {   
        this.userName = userName;   
        this.content = content;   
    }   
} ?

?

loadMessages()方法负责初始化装载数据,比如说我们从数据库或第三方资源中取出数据来初始化现有的List,它在页面上的实现,实际上也是结合Ajax来进行的。

?

addMessageToUser()方法对应了界面上Add Now按钮的动作内容,他们中间的交互过程也是通过Ajax来完成的,这也是这个应用的核心所在。

?

注意,这里的Struts Action Bean本身的默认的excute方法也被override过来了,而方法体本身是空的,这里这样做的目的就是,可以让界面操作用户一进入此页面,界面能马上构造出来,而不用等待服务器端的数据装载和返回,在初始装