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

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

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