《struts2权威指南》学习笔记之struts2 ajax标签之tabbedPanel

tabbedPanel标签在HTML页面里生成类似windows程序的tab页，通过使用TAB页面，可以在有限的空间里放置更多的内容

web.xml

 

<? xml version="1.0" encoding="GBK" ?>
< web-app  version ="2.4"  xmlns ="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance"  
    xsi:schemaLocation ="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" >



     < filter >
         < filter-name > struts2 </ filter-name >
         < filter-class > org.apache.struts2.dispatcher.FilterDispatcher </ filter-class >
     </ filter >


     < filter-mapping >
         < filter-name > struts2 </ filter-name >
         < url-pattern > /* </ url-pattern >
     </ filter-mapping >

</ web-app >

 struts.xml

 

<! DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd" >

< struts >

     < constant  name ="struts.custom.i18n.resources"  value ="messageResource" />
     < constant  name ="struts.i18n.encoding"  value ="GBK" />

     < package  name ="ajax"  extends ="struts-default" >
         < action  name ="random"  class ="lee.RandomAction" >
             < result > /AjaxResult.jsp </ result >
         </ action >
         < action  name ="AjaxTest"  class ="lee.AjaxTestAction" >
             < result > /showPerson.jsp </ result >
         </ action >
     </ package >

</ struts >

 

AjaxTestAction

 

package  lee;

import  com.opensymphony.xwork2.Action;


public   class  AjaxTestAction  implements  Action
... {
    private String name;
    private int age;

    public void setName(String name)
    ...{
        this.name = name;
    }
    public String getName()
    ...{
         return this.name;
    }

    public void setAge(int age)
    ...{
        this.age = age;
    }
    public int getAge()
    ...{
         return this.age;
    }

    public String execute()
    ...{
        return SUCCESS;
    }
}

 

RandomAction

 

package  lee;

import  com.opensymphony.xwork2.Action;

import  java.io.Serializable;


public   class  RandomAction  implements  Action
... {
    public String getRdmStr()
    ...{
        long result = Math.round(Math.random() * 2);
        return result == 2 ? "轻量级J2EE企业应用实战" : "基于J2EE的Ajax宝典";
    }

    public String execute()
    ...{
        return SUCCESS;
    }
}

 

AjaxResult.jsp

 

<% ... @ page contentType="text/html;charset=GBK" language="java"  %>
<% ... @ taglib prefix="s" uri="/struts-tags"  %>
<% ...
    request.setAttribute("decorator", "none");
    response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
    response.setHeader("Pragma","no-cache"); //HTTP 1.0
    response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>
< s:property  value ="rdmStr" />

 

showPerson.jsp

 

<% ... @ page contentType="text/html;charset=GBK" language="java"  %>
<% ... @ taglib prefix="s" uri="/struts-tags"  %>
<% ...
    request.setAttribute("decorator", "none");
    response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
    response.setHeader("Pragma","no-cache"); //HTTP 1.0
    response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>
您提交的姓名： < s:property  value ="name" />< br >
您提交的年纪： < s:property  value ="age" />< br >

 

simpletabbedpanel.jsp  测试页面1

 

<% ... @ page contentType="text/html;charset=GBK" language="java"  %>
<% ... @ taglib prefix="s" uri="/struts-tags"  %>
< html >
< head >
     < title > tabbled panel示例：简单tabbled panel </ title >
     < s:head  theme ="ajax"  debug ="true" />
     < link  rel ="stylesheet"  type ="text/css"  href ="<s:url value=" /struts/tabs.css" /> ">    
</ head >
< body >
简单Tab页面，doLayout属性设置是否使用固定高度 < br >
< s:tabbedPanel  id ="tab1"  theme ="ajax"  cssStyle ="width: 400px; height: 240px;"  doLayout ="true" >
       < s:div  id ="left"  label ="第一个Tab页"  theme ="ajax"   >
          Spring2.0宝典 < br >
          轻量级J2EE企业实战 < br >
          基于J2EE的Ajax宝典 < br >
       </ s:div  >
       < s:div   id ="middle"  label ="第二个Tab页"   theme ="ajax"   >
           < h3 > 作者简介 </ h3 >
          11111111111111111111111111111111 < br >
       </ s:div  >      
</ s:tabbedPanel >
</ body >
</ html >

 

closetabbedpanel.jsp 测试页面2

这个页面会出现一个debug信息，是因为struts2使用了dojo一个过时的api,但我们无法修改，因为struts2对dojo进行了封装，但目前还不知道怎么样把dojo的调试信息去掉，因为 djConfig的isDebug属性是被struts2自动设置的

 

<% ... @ page contentType="text/html;charset=GBK" language="java"  %>
<% ... @ taglib prefix="s" uri="/struts-tags"  %>
< html >
< head >

     < title > tabbled panel示例：带关闭按钮的tabbled panel </ title >
     < s:head  theme ="ajax"  debug ="true" />
     < link  rel ="stylesheet"  type ="text/css"  href ="<s:url value=" /struts/tabs.css" /> ">    

</ head >
< body >
设置关闭按钮(通过设置closeButton="tab") < br >
设置标签位于Tab页的下面(通过设置labelposition="bottom") < br >
< s:tabbedPanel  id ="tab1"  theme ="ajax"  cssStyle ="width: 400px; height: 240px;"
    doLayout ="true"  closeButton ="tab"  labelposition ="bottom"   >
     < s:div  id ="left"  label ="第一个Tab页"  theme ="ajax"   >
        Spring2.0宝典 < br >
        轻量级J2EE企业实战 < br >
        基于J2EE的Ajax宝典 < br >
     </ s:div  >
     < s:div   id ="middle"  label ="第二个Tab页"   theme ="ajax"   >
         < h3 > 作者简介 </ h3 >
        1111111 < br >
   </ s:div  >      
</ s:tabbedPanel >
</ body >
</ html >

 

dynatabbedpanel.jsp

 

<% ... @ page contentType="text/html;charset=GBK" language="java"  %>
<% ... @ taglib prefix="s" uri="/struts-tags"  %>
< html >
< head >
     < title > 包含动态内容的Tab页 </ title >
     < s:head  theme ="ajax" />
     < link  rel ="stylesheet"  type ="text/css"  href ="<s:url value=" /struts/tabs.css" /> " />
</ head >
< body >
     < s:url  id ="rd"  value ="/random.action" />
     < s:tabbedPanel  id ="tabbedpanel"  cssStyle ="width: 500px; height: 240px;"  doLayout ="true" >
         < s:div  id ="panel0"  label ="动态Tab页面一"  href ="%{#rd}"  theme ="ajax" />
         < s:div  id ="panel1"  label ="动态Tab页面二"  theme ="ajax" >
             < h2 > 您最喜欢的图书： </ h2 >
             < s:div  id ="panel11" href ="%{#rd}"  theme ="ajax"  updateFreq ="1000" />
         </ s:div >
         < s:div  id ="panel2"  label ="静态Tab页面"  theme ="ajax" >
         < h3 > 作者简介 </ h3 >
        1111 < br >
         </ s:div >
         < s:div  id ="panel3"  label ="远程表单的Tab页"  theme ="ajax" >
             < div  id ='show'  style ="background-color:#bbbbbb;width:240px;height:50px" > 原始静态文本 </ div >
             < s:url  id ="ajaxTest"  value ="/AjaxTest.action"   />
             < s:form  action ='AjaxTest'  method ='post'  theme ='ajax' >
                 < s:textfield  name ="name"  label ="姓名" />< br />
                 < s:textfield  name ="age"  label ="年龄" />< br />
                 < s:submit  value ="提交"  targets ="show" />
             </ s:form >
         </ s:div >
     </ s:tabbedPanel >
</ body >
</ html >