Tiles Framework : refresh only body content

问题:

we have a Tiles layout page having Header, Menu, Body and Footer. In this layout whenever user does some action in the Menu lists, the whole Layout (Incl Header, menu and footer) is refreshing. I want header,menu, footer to be static, and only body part should get updated.

Is there any way to prevent the refresh of the Header, menu and Footer and update only Body content on the menu click which can be implemented using Tiles?

回答1:

To do this you need to use ajax calls. The general procedure would be:

1.- Create and define a tile which will be your base, composed with your header, body and footer, which will look like this:

<div id='headerTile'>whatever goes here...</div> <!--this is baseHeader.jsp-->
<div id='bodyTile'>whatever goes here....</div>  <!--this is baseBody.jsp-->
<div id='footerTile'>whatever goes here...</div>  <!--this is baseFooter.jsp-->

let's consider each of those divs to be one tile in your definition:

<definition name="layoutBase" path="/whateverPathItIs/layoutBase.jsp">
    <put name="header" value="/whateverPathItIs/baseHeader.jsp"/>
<put name="body" value="/whateverPathItIs/baseBody.jsp" />
<put name="footer" value="/whateverPathItIs/baseFooter.jsp" />         
</definition>

2.- Create and define all the different jsp which will replace your body content, please remember that this jsp must contain only the body elements. Let's say you have 2 other body contents ready to be shown in your page, each one will be a tile:

<div id='bodyContent1'>whatever goes here again...</div> <!--this is content1.jsp-->

<div id='bodyContent2'>whatever goes here again 2</div> <!--this is content2.jsp-->

3.- At this point you have both the base jsp tile and 2 other jsp which contain the body content. Now we need a struts action which will act as a service, returning the corresponding body depending on the ajax request. Do this as a normal action, and at the mapping.findForward method in the end, return the jsp which contains your body. You can either create one action for each body content or a single DispatchAction which contains a method for each body.Second option is cleaner, and the action would be defined like this:

<action path="/bodySwitcher" 
        type="BodySwitcherAction"
        parameter="method"
        scope="request"
        >
    <forward name="content1" path="/pathToJsp/content1.jsp"/>
    <forward name="content2" path="/pathToJsp/content2.jsp"/>
</action>

4.- To switch content, use javascript or jquery to make an ajax call and load the returned jsp into your body. This is an example of the method which would switch the content in jQuery, using .load() as an ajax call:

function switchContent(whichContent){
     $('#bodyTile').children().remove();
     $('#bodyTile').load("/pathToYourApp/bodySwitcher.do?method="+whichContent);
}

Don't get discouraged by how long the answer is, I'm just trying to explain cleanly. This is actually pretty easy to do, and question is more jquery/javascript related than anything else, the only detail is how to use a struts action as a service. Good luck.

回答2:

I did like the Th0rndike and work like a charm. I am using the spring and was a little different, but with the same idea.

In my configuration, using tiles to solve using only the views, I could not do the forward of the new body using the jsp file directly, for example, using path = "/pathToJsp/content1.jsp".

Using the default configuration of the spring documentation for your tiles in file layouts.xml add beyond the existing template, the new template which will be responsible for containing the new body each time the Ajax request is made​​.

<definition name="bodySwitcher" template="/WEB-INF/layouts/bodySwitcher.jspx">
<put-attribute name="bodyContent" value="" />
</ Definition>

Set the template file as:

<div xmlns: jsp = "http://java.sun.com/JSP/Page"
xmlns: c = "http://java.sun.com/jsp/jstl/core"
xmlns: tiles = "http://tiles.apache.org/tags-tiles"
xmlns: spring = "http://www.springframework.org/tags"
xmlns: util = "urn: jsptagdir :/ WEB-INF/tags/util" id = "bodySwitcher"
version = "2.0">

<tiles:insertAttribute name="bodyContent" />

</div>

In file views.xml set the content for each link that load the new body of your page in particular:

<definition name="link1" extends="bodySwitcher">
<put-attribute name="bodyContent" value="/WEB-INF/views/link1.jspx" />
</ Definition>

<definition name="aboutus" extends="bodySwitcher">
<put-attribute name="bodyContent" value="/WEB-INF/views/aboutus.jspx" />
</ Definition>

The Ajax request can be made ​​in the main template:

$ (Document). ready (function () {

$ ('. PageAction'). click (function (e) {
LoadPage (e)
});

function LoadPage (e) {
e.preventDefault ();
console.log (e)
console.log (e.currentTarget.pathname);
$ ('# BodySwitcher'). children (). remove ();
$ ('# BodySwitcher'.) Load ("bodySwitcher? Method =" + e.currentTarget.pathname);
}

});

The ajax request can be handled using the controller that forward to view specified in the parameter method of bodySwitcher. Return the forward string like "forward:" + link1 to forward to controller that handle link1 requests;