Tiles Framework:仅刷新正文内容 [英] Tiles Framework : refresh only body content

问题描述

我们有一个包含页眉、菜单、正文和页脚的 Tiles 布局页面.在此布局中，每当用户在菜单列表中执行某些操作时，整个布局(包括页眉、菜单和页脚)都会令人耳目一新.我希望页眉、菜单、页脚是静态的，并且只需要更新正文部分.

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.

有什么办法可以防止刷新页眉、菜单和页脚，只更新菜单点击上的正文内容，可以使用 Tiles 实现吗?

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?

推荐答案

为此，您需要使用 ajax 调用.一般程序是:

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

1.- 创建并定义一个磁贴，作为您的基础，由页眉、正文和页脚组成，如下所示:

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-->

让我们将这些 div 中的每一个视为您定义中的一个 tile:

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.- 创建和定义所有不同的jsp 来替换你的body 内容，请记住这个jsp 必须只包含body 元素.假设您准备好在您的页面中显示另外 2 个正文内容，每个内容都是一个磁贴:

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.- 在这一点上，您拥有基本的 jsp tile 和 2 个其他包含正文内容的 jsp.现在我们需要一个作为服务的 struts 动作，根据 ajax 请求返回相应的主体.按照正常操作执行此操作，并在最后的 mapping.findForward 方法中返回包含您的 body 的 jsp.您可以为每个正文内容创建一个操作，也可以为每个正文创建一个包含一个方法的 DispatchAction.第二个选项更简洁，操作将像这样定义:

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.- 要切换内容，请使用javascript 或jquery 进行ajax 调用并将返回的jsp 加载到您的主体中.这是在 jQuery 中切换内容的方法示例，使用 .load() 作为 ajax 调用:

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

不要因为答案有多长而气馁，我只是想清楚地解释一下.这实际上很容易做到，问题与 jquery/javascript 的相关性比其他任何事情都多，唯一的细节是如何将 struts 操作用作服务.祝你好运.

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.

这篇关于Tiles Framework:仅刷新正文内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！