2012-01-03 3 views
2

각 페이지가 전체 페이지 렌더링없이 내용 영역을 렌더링하는 맨 위에 메뉴 (탭보기)가있는 웹 응용 프로그램을 구현해야합니다. 모듈 방식으로 어떻게 할 수 있습니까? 각 컨텐츠 영역을 플로우로 원합니다.페이지 단편 만 렌더링

<h:form id="topMenu"> 
    <f:ajax render="content"> 
     <h:commandLink actionListener="#{mrBean.openPage('About.xhtml')}" value="About Us" /> 
     <h:commandLink actionListener="#{mrBean.openPage('Contact.xhtml')}" value="Contact Us" /> 
    </f:ajax> 
</h:form> 

<h:panelGroup id="content"> 
    <ui:include src="#{mrBean.page}" /> 
</h:panelGroup> 

을 그리고 이것은 당신의 ManagedBean은 다음과 같습니다 :

+0

을 의미합니까? 백엔드에서 검색해야하는 정보가 있습니까? 아니면 이미 존재하는 다른 컨텐츠를 원하십니까? – Dejell

+0

나는 백엔드에 대해 신경 쓰지 않는다. – Muky

+0

각 옵션이 아래 영역을 렌더링하는 헤더 (메뉴 또는 탭 또는 버튼 등)가있는 페이지를 생각해보십시오. 그것을하는 한 가지 방법은 모든 xhtml 페이지에 글을 쓰는 것인데, 이는 좋은 접근법이 아닙니다. 각 옵션을 사용하여 헤더 아래의 영역을 렌더링하는 다른 하위 흐름으로 리디렉션 할 수 있습니다. – Muky

답변

0

이 시도 할 수

@ManagedBean 
@RequestScoped 
public class MrBean { 
    private String page; 

    public void openPage(String page) { 
     this.page = page; 
    } 
} 
+0

이것은 내가 찾고있는 것이 아니지만 충분히 좋습니다. Spring 웹 플로우에 의해 플로우가 관리되기를 원했습니다. – Muky

0

당신이 왜 일반 자바 스크립트를 사용하여, 백엔드에 대해 괜찮다면?

4 개 가지 ID를 가진 4 개 된 div를 만들고 노는 :

onclick="document.getElementById('div1').style.display = "none"; 
onclick="document.getElementById('div2').style.display = "inline"; 

당신이 그 일을 할 수 있습니다!

편집을 할

div의 서로 다른 파일에있는이 같이 사용할 수있는 경우 : 당신이 렌더링 무엇을

<div id="div1"> 
    <ui:include src="#{myBean.myPage}" /> 
</div> 
+0

이 작업을 수행하는 데는 많은 방법이 있지만, JSF 위에 스프링 웹 플로우 메커니즘을 사용하여 프로젝트를 쉽게 확장 가능하고 모듈 식으로 유지하는 데 도움이됩니다. 귀하의 제안은 한 페이지에 모든 UI를 유지하는 것이고 앞으로 유지하기가 어려울 것입니다. – Muky

+0

다른 페이지에서 div 콘텐츠를 사용할 수 있으며 을 사용할 수 있습니다. – Dejell