타일 프레임 워크 : 본문 내용 새로 고침

Question

헤더, 메뉴, 본문 및 바닥 글이있는 타일 레이아웃 페이지가 있습니다. 이 레이아웃에서는 사용자가 메뉴 목록에서 일부 작업을 수행 할 때마다 전체 레이아웃 (머리글, 메뉴 및 바닥 글 포함)이 새로 고쳐집니다. 나는 머리말, 메뉴, 꼬리말이 정적이되고, 신체 부분 만 업데이트해야한다.

머리글, 메뉴 및 바닥 글 새로 고침을 방지하고 타일을 사용하여 구현할 수있는 메뉴 클릭시 본문 내용 만 업데이트 할 수있는 방법이 있습니까?

Answer 1

이렇게하려면 ajax 호출을 사용해야합니다. 일반적인 절차는 다음과 같습니다

1 .- 작성하고 다음과 같이 표시됩니다 머리글, 본문 및 바닥 글로 구성 기지, 될 것입니다 타일을 정의

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

는 이제 각을 살펴 보자

<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를 정의,이 JSP는 몸의 요소를 포함해야한다는 것을 기억하시기 바랍니다 : 그 div의 당신의 정의에 하나 개의 타일이 될 수 있습니다. 당신이 포함 된 기본 JSP로 타일이 다른 JSP 모두가이 시점에서

<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 .- :의 당신이 당신의 페이지에 표시 할 준비가이 개 다른 신체 내용이 있다고 가정 해 봅시다, 각각의 하나는 타일 것 본문 내용. 이제는 Ajax 요청에 따라 해당 본문을 반환하는 서비스 역할을하는 스트럿츠 액션이 필요합니다. 정상적인 동작으로 처리하고, 마지막에 mapping.findForward 메소드에서 몸체가 포함 된 jsp를 반환하십시오 (). 각 본문 내용 각 body.Second 옵션이 청소기 방법을 포함하는 단일 DispatchAction에 대한 하나 개의 동작을 만들 수 있습니다, 그리고 작업은 다음과 같이 정의된다 :

<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 .- 콘텐츠를 전환하려면 자바 스크립트 또는 jquery를 사용하여 ajax 호출을 만들고 반환 된 jsp를 몸에로드하십시오. 이 아약스 호출로 .load()를 사용하여, jQuery를에있는 콘텐츠를 전환 할 방법의 예입니다

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

는 대답은 얼마나 오래, 난 그냥려고하여 낙심하지 마십시오 깨끗하게 설명하십시오. 이것은 실제로 매우 쉽게 수행 할 수 있으며, 질문은 jquery/javascript와 관련이 있습니다. 자세한 내용은 struts 액션을 서비스로 사용하는 방법입니다. 행운을 빕니다.

Answer 2

저는 Th0rndike를 좋아했으며 매력처럼 작동했습니다. 나는 봄을 사용하고 약간 다르지만 같은 생각을 가지고 있습니다.

내 구성에서는보기 만 사용하여 해결하기 위해 타일을 사용하여 jsp 파일을 직접 사용하여 새로운 본문을 처리 할 수 ​​없었습니다 (예 : path = "/pathToJsp/content1.jsp").

layouts.xml 파일의 타일에 대한 스프링 문서의 기본 구성을 사용하면 Ajax 요청이있을 때마다 새 바디를 포함 할 새 템플릿 인 기존 템플릿을 추가 할 수 있습니다. 파일보기에서

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

:

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

은 템플릿 파일을 설정합니다.Ajax 요청이 기본 템플릿에서 할 수

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

:

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

}); 

하는 아약스 요청을 할 수 있습니다 XML은 특히 페이지의 새로운 몸을로드 각 링크에 대한 내용을 설정 bodySwitcher의 매개 변수 메서드에 지정된보기로 전달하는 컨트롤러를 사용하여 처리됩니다. "forward :"와 같은 forward 문자열을 반환하고 link1 요청을 처리하는 컨트롤러로 전달합니다.