Struts2+JSON+YUI构建Rich Client应用（二）

tailsherry

浏览: 136413 次
性别:
来自: 珠海

最近访客更多访客>>

AllyZhang

jiaoronggui

amwiqpl

sdmq

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Java Framework

YUI json Ajax UI Yahoo

在UI部分，页面文件很简单，userMessage.jsp的内容如下：

<%@ page contentType="text/html; charset=UTF-8"%>   
<html>   
    <head>   
        <title>Struts + JSONtitle>   
        <link rel="stylesheet" type="text/css" href="css/main.css" />   
        <script type="text/javascript" src="js/utilities.js">script>   
        <script type="text/javascript" src="js/main.js">script>   
        <script type="text/javascript" src="js/message.js">script>   
        <script>   
            YAHOO.util.Event.addListener(window, "load", function() {    
                YAHOO.TAIL.TestHome.init();    
            });
        </script>   
    </head>   
    <body>   
        <div id="container">   
        </div>   
    <body>   
<html>

从页面head部分可以看出，UI主要工作的有三个js文件：main.js，message.js和utilities.js。

其中，utilities.js是YUI的核心工具包；main.js主要是我自己对YUI Ajax功能的进一步封装；message.js则是页面使用的核心js文件，用来构造页面元件，和server端进行Ajax交互。其代码如下：

YAHOO.namespace("TAIL");    
   
if (!YAHOO.TAIL.TestHome)    
{    
    YAHOO.TAIL.TestHome = function ()     
    {    
        var Dom = YAHOO.util.Dom;    
        var Event = YAHOO.util.Event;    
            
        var messageList;    
            
        function loadData()    
        {    
            // create user editors    
            var container = document.getElementById('container');    
            var userDiv = document.createElement('div');    
            container.appendChild(userDiv);    
            var userLabel = document.createElement('label');    
            userLabel.innerHTML = 'New Test User:';    
            userDiv.appendChild(userLabel);    
            var userEdit = document.createElement('input');    
            userEdit.type = 'text';    
            userEdit.id = 'user';    
            userDiv.appendChild(userEdit);    
            // create msg editors    
            var msgDiv = document.createElement('div');    
            container.appendChild(msgDiv);    
            var msgLabel = document.createElement('label');    
            msgLabel.innerHTML = 'New Message: ';    
            msgDiv.appendChild(msgLabel);    
            var msgEdit = document.createElement('input');    
            msgEdit.type = 'text';    
            msgEdit.id = 'message';    
            msgDiv.appendChild(msgEdit);    
            // create button    
            var button = document.createElement('input');    
            button.type = 'button';    
            button.value = 'Add Now!';    
            msgDiv.appendChild(button);    
            Event.addListener(button, 'click', addNewMessage);    
            // create message div    
            var msgListDiv = document.createElement('div');    
            msgListDiv.id = 'messagelist';    
            msgListDiv.style.color = 'blue';    
            container.appendChild(msgListDiv);    
                
            JSONRequest.sendRequest(    
                'POST',    
                'home/loadMessages.action',    
                null,    
            {    
                success: function(result)    
                {       
                    messageList = result.messageList;    
                    reloadMessageList();    
                },    
                error: function(result)     
                {    
                    alertJSONErrors(result);    
                },    
                failure: function(o)    
                {    
                    var errMsg = "Error loading message list!";    
                    alertFailure(o, null, errMsg);    
                }    
            });    
        }    
            
        function reloadMessageList() {    
            var msgListDiv = document.getElementById('messagelist');    
            if (msgListDiv) {    
                var messages = msgListDiv.childNodes;    
                // remove first    
                for (var i = messages.length - 1; i >= 0; i--)     
                {    
                    msgListDiv.removeChild(messages[i]);    
                }    
                // new add    
                for (var inx in messageList) {    
                    var div = document.createElement('div');    
                    div.innerHTML = '
' + messageList[inx].userName + ': ' + messageList[inx].content;    
                    msgListDiv.appendChild(div);    
                }               
            }    
        }    
            
        function addNewMessage() {    
            var userEdit = document.getElementById('user');    
            var msgEdit = document.getElementById('message');    
            var newUser = userEdit.value;    
            var newMsg = msgEdit.value;    
            if (newUser && newMsg && newUser != '') {    
                // format post data    
                var postData = 'newUser=' + newUser + '&newMessage=' + newMsg;    
                for (var i=0; i 
                    postData += '&messageList[' + i  +'].userName=' + messageList[i].userName;    
                    postData += '&messageList[' + i  +'].content=' + messageList[i].content;    
                }    
                // send add message request    
                JSONRequest.sendRequest(    
                    'POST',    
                    'home/addMessageToUser.action',    
                    postData,    
                {    
                    success: function(result)    
                    {       
                        messageList = result.messageList;    
                        reloadMessageList();    
                        userEdit.value = '';    
                        msgEdit.value = '';    
                    },    
                    error: function(result)    
                    {    
                        alertJSONErrors(result);    
                    },    
                    failure: function(o)    
                    {    
                        var errMsg = "Error adding to message list!";    
                        alertFailure(o, null, errMsg);    
                    }    
                });    
            }    
        }    
            
        return {    
            init: function() {    
                loadData();    
            }    
        };    
    }();    
}

ps: 大家看这种js代码比较费劲，但是这种类oop的js编码风格，大家应该努力去模仿，毕竟这是一种好的习惯。大家可以翻开象YUI这些js原始文件出来看看，学习一下人家的js撰写风格。

通过userMessage.jsp中的script代码部分，大家可以看出，YAHOO.TAIL.TestHome.init()是UI的入口。进入页面，UI运行顺序为：与Struts Action交互 -> 调用init方法 -> 通过loadData()构造输入框，按钮，以及事件绑定 -> 通过JSONRequest.sendRequest的Ajax的调用来取得server端的初始messageList -> 调用成功之后，在UI初始构造messageList内容。

页面装载完毕之后，大家可以添加user和message然后点击Add Now按钮，这是触发addNewMessage()方法，这里单独把这部分代码重新罗列一下：

function addNewMessage() {   
    var userEdit = document.getElementById("user");   
    var msgEdit = document.getElementById("message");   
    var newUser = userEdit.value;   
    var newMsg = msgEdit.value;   
    if (newUser && newMsg && newUser != "") {   
        // format post data   
        var postData = "newUser=" + newUser + "&newMessage=" + newMsg;   
        for (var i = 0; i < messageList.length; i++) {   
            postData += "&messageList[" + i + "].userName=" + messageList[i].userName;   
            postData += "&messageList[" + i + "].content=" + messageList[i].content;   
        }   
        // send add message request   
        JSONRequest.sendRequest("POST", "home/addMessageToUser.action", postData, {success:function (result) {   
            messageList = result.messageList;   
            reloadMessageList();   
            userEdit.value = "";   
            msgEdit.value = "";   
        }, error:function (result) {   
            alertJSONErrors(result);   
        }, failure:function (o) {   
            var errMsg = "Error adding to message list!";   
            alertFailure(o, null, errMsg);   
        }});   
    }   
}

该function的工作过程是：获取输入的newUser和newMsg -> 构造需要提交到server端的postData串 -> 提交Ajax请求 -> 调用成功后，重新在UI构造messageList内容。

这里提交Ajax的请求不同于loadData()中的的Ajax运用，这里多了一个postData参数，而且postData中除了构造newUser和newMsg，还将messageList的内容重新一起传回到了server端。为什么？因为StrutsTestAction默认是request级别的，不会保留上一次request的状态的。

这里构造postData中messageList部分的时候，是用类似数组的方式将List中Message对象传输到server端的。如果传递的是Map性质的对象，只需要将这里的i换成Map的key string即可，当然针对Map类型的conversion的定义也会不一样，大家可以参考Struts Type Conversion。

>>扩展建议：

这里UI部分使用的是简单的jsp文件，大家可以扩展这个应用UI部分的设计，可以结合使用Freemarker，Velocity类似的UI模板来完成构建。

例如，如果要将Struts和Velocity联合使用，同样可以通过type="velocity"的方式来定义使用vm模板，这个是Struts2默认支持的result type。

分享到：

灵活处理select/option对象中的特殊字符 | Struts2+JSON+YUI构建Rich Client应用（一 ...

2007-12-21 11:12
浏览 2644
评论(1)
论坛回复 / 浏览 (1 / 3433)
分类:企业架构
查看更多

1 楼 xxrrss 2008-10-14

谢谢！对我很有帮助！现在正在做客户要求Ajax+Struts2项目：却对Ajax和Javasript知之甚少！烦死了！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论