学习笔记---使用prototype.js扩展struts标签实现xmlhttprequest

要点

1 prototypes.js很好的封装了javascript的oo和客户端的ui效果

2 struts还很常用,能混口饭吃 

3 rails对web2.0的标签有

     1 link_to_remote          2   form_remote_tag    3  observe_field  4 periodiccally_call_remote

  都是对prototypes.js的服务端封装,和jsp中taglib一样

4 prototypes.js中的Ajax.Updateter把xmlhttprequest的整个回掉流程封装得很好了

5 改写一个struts的form标签,让他具有ajax功能

 5.1 taglib处理类

package com.xxxx.web.taglib;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts.taglib.TagUtils;
import org.apache.struts.taglib.html.FormTag;

/** */ /**
 * <p>xhr请求表单<br>
 * <p>
 * @author  powerbear
 * @since Dec 14, 2006 6:07:06 PM
 */
public   class  FormRemoteTag  extends  FormTag    // 继承struts的form标签
... {
    private String update; //需要更新的页面元素id

    private String url;//请求的url

    private String loading;//请求过程中需要执行的js事件

    private String complete;//完成请求后执行的js事件

    /** *//**
     * Renders Ajax url attribute  获取action的url
     */
    protected String renderUrl()
    ...{

        HttpServletResponse response = (HttpServletResponse) this.pageContext
                .getResponse();
        return response.encodeURL(TagUtils.getInstance().getActionMappingURL(
                this.action, this.pageContext));

    }

    /** *//**
     * 
     * Randers prototype Ajax.Updater 渲染出客户端的Ajax.Updater事件
     * @return
     */
    protected String renderAjaxElement()
    ...{
        if (url == null || url.length() == 0)
        ...{
            this.url = this.renderUrl();
        }

        StringBuffer results = new StringBuffer("new Ajax.Updater(");
        results.append("'" + this.update + "',");
        results.append("'" + this.url + "',");
        results.append("{asynchronous:true, evalScripts:true,");
        results.append("onComplete:function(request){" + this.complete + "},");
        results.append("onLoading:function(request){" + this.loading + "}, ");
        results.append("parameters:Form.serialize(this)});");
        results.append("return false;"");

        return results.toString();
    }

    /** *//**
     * Return the onSubmit event script. 重写FormTag的onSubmit属性的getter,把protorypes事件加进去
     */
    public String getOnsubmit()
    ...{

        return (renderAjaxElement());

    }

//属性的getter和setter对

}

  5.2 taglib配置

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE taglib
  PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"
  " http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">

<taglib xmlns=" http://java.sun.com/JSP/TagLibraryDescriptor">
 <tlib-version>1.1</tlib-version>
 <jsp-version>1.2</jsp-version>
 <short-name>XXXX Tag Library</short-name>
 <uri>http://XXXX.com/tags/</uri>
 <description>XXXX Tag Library</description>

  

   < tag >
         < name > form_remote_tag </ name >
         < tag-class >
            com.xxxx.web.taglib.FormRemoteTag
         </ tag-class >
         < description > xml_httm_request form </ description >

         < attribute >
             < name > action </ name >
             < required > true </ required >
             < rtexprvalue > true </ rtexprvalue >
         </ attribute >
         < attribute >
             < name > acceptCharset </ name >
             < required > false </ required >
             < rtexprvalue > true </ rtexprvalue >
         </ attribute >
         < attribute >
             < name > disabled </ name >
             < required > false </ required >
             < rtexprvalue > true </ rtexprvalue >
         </ attribute >
         < attribute >
             < name > enctype </ name >
             < required > false </ required >
             < rtexprvalue > true </ rtexprvalue >
         </ attribute >
         < attribute >
             < name > focus </ name >
             < required > false </ required >
             < rtexprvalue > true </ rtexprvalue >
         </ attribute >
         < attribute >
             < name > focusIndex </ name >
             < required > false </ required >
             < rtexprvalue > true </ rtexprvalue >
         </ attribute >
         < attribute >
             < name > method </ name >
             < required > false </ required >
             < rtexprvalue > true </ rtexprvalue >
         </ attribute >
         < attribute >
             < name > onreset </ name >
             < required > false </ required >
             < rtexprvalue > true </ rtexprvalue >
         </ attribute >
         < attribute >
             < name > onsubmit </ name >
             < required > false </ required >
             < rtexprvalue > true </ rtexprvalue >
         </ attribute >
         < attribute >
             < name > readonly </ name >
             < required > false </ required >
             < rtexprvalue > true </ rtexprvalue >
         </ attribute >
         < attribute >
             < name > scriptLanguage </ name >
             < required > false </ required >
             < rtexprvalue > true </ rtexprvalue >
         </ attribute >
         < attribute >
             < name > style </ name >
             < required > false </ required >
             < rtexprvalue > true </ rtexprvalue >
         </ attribute >
         < attribute >
             < name > styleClass </ name >
             < required > false </ required >
             < rtexprvalue > true </ rtexprvalue >
         </ attribute >
         < attribute >
             < name > styleId </ name >
             < required > false </ required >
             < rtexprvalue > true </ rtexprvalue >
         </ attribute >
         < attribute >
             < name > target </ name >
             < required > false </ required >
             < rtexprvalue > true </ rtexprvalue >
         </ attribute >
         < attribute >
             < name > update </ name >
             < required > true </ required >
             < rtexprvalue > true </ rtexprvalue >
             < description > update XHR回调更新页面元素id </ description >
         </ attribute >

         < attribute >
             < name > url </ name >
             < required > false </ required >
             < rtexprvalue > true </ rtexprvalue >
             < description > url XHR请求URL </ description >
         </ attribute >

         < attribute >
             < name > loading </ name >
             < required > true </ required >
             < rtexprvalue > true </ rtexprvalue >
             < description > loading XHR加载中执行事件 </ description >
         </ attribute >

         < attribute >
             < name > complete </ name >
             < required > true </ required >
             < rtexprvalue > true </ rtexprvalue >
             < description > complete XHR响应结束执行事件 </ description >
         </ attribute >
     </ tag >

</taglib>

 

5.3 前端页面使用,不是在一个完整页面来使用这个东西,action返回的应该是一个代码片断

 

<% ... @ taglib uri=http://xxxx.com/tags/ prefix="xhr" %>

< xhr:form_remote_tag
     loading ="Element.show('indicator');"
    update ="result"
    complete ="Element.hide('indicator');;"
    action ="/abAction" >
<!--  xmlhttprequtes请求过程中显示indicator
                             更新result元素
                             请求结束隐藏indicator
                            调用abAction处理请求的表单,设置了一个handler参数作为DispatchAction中Controller的选择器
'  -->

                                          < input  type ="text"  name ="a"  value ="" >
             < input  type ="test"  name ="b"  value ="" >
             < input  type ="hidden"  value ="add"  name ="handler" >
             < input  name ="commit"  type ="submit"  value ="登陆"   />
<!--  漂亮的indicator -->
< div  id ='lindicator'  style ="display:none" >
     < img  src ="images/indicator.gif"   />
</ div >
            
</ xhr:form_remote_tag >

<!--  调用输出结果 -->
< div  id =result" ></ div >

 

6  配置struts文件,配置formbean

        在struts1.2.7以后可以使用

               1 DynaValidatorForm 内嵌一个pojo

               2 BeanValidatorForm 直接使用pojo

               3 LazyValidatorForm

 7 编写action,配置action的ActionForward

               ActionForward跳转到的不是一个页面而是一个html代码段

8  使用tails组织页面,就象rails中组织view的结构一样,可以配置layout做为页面的母版,在dotnet2.0里叫master

 

9 待续............