2012-04-07 62 views
7

我仍然不確定如何正確使用JSF模板複合組件。我需要創建一個企業Web應用程序,這將有很多頁面。每個頁面都有相同的標題,菜單,頁腳和當然不同的內容(= JSF模板)。每個頁面上的內容將由可重複使用的「框」(= JSF複合組件)組成。箱子由一些文件夾,按鈕等組成。我的解決方案是否合適?或者我應該使用其他技術,如自定義組件,裝飾...?正確使用Facelet模板和複合組件

layout.xhtml

<h:body> 
    <ui:insert name="main_menu"> 
     <ui:include src="/xhtml/template/main_menu.xhtml"/> 
    </ui:insert> 
    <ui:insert name="header"> 
     <ui:include src="/xhtml/template/header.xhtml"/> 
    </ui:insert> 
    <ui:insert name="content"/> 
    <ui:insert name="footer"> 
     <ui:include src="/xhtml/template/footer.xhtml"/> 
    </ui:insert> 
</h:body> 

customer_overview.xhtml:

<html xmlns:cc="http://java.sun.com/jsf/composite/composite_component"> 
<h:body> 
    <!-- Facelet template --> 
    <ui:composition template="/xhtml/template/layout.xhtml"> 
     <ui:define name="content"> 
      <!-- Composite Components --> 
      <cc:component_case_history 
       caseList="#{customerOverviewController.cases}" 
      /> 
      <cc:component_customer 
       .... 
      /> 
      ... 
     </ui:define> 
    </ui:composition> 
</h:body> 

component_case_history.xhtml

<html xmlns:composite="http://java.sun.com/jsf/composite"> 
<composite:interface> 
    <composite:attribute name="cases" type="java.util.List"/> 
</composite:interface> 

<composite:implementation> 
    <!-- using of "cases" --> 
    ... 
</composite:implementation> 

CustomerOverviewController.java

@ManagedBean 
@ViewScoped 
public class CustomerOverviewController { 
    public List<Case> getCases() { 
     ... 
    } 
} 

編輯基於2012-04-27

When to use <ui:include>, tag files, composite components and/or custom components?

我認爲我應該使用,而一個facelet模板+ Facelet標記文件,而不是一個facelet模板+複合材料部件。

+1

你可以讓你的問題更具體嗎?基本思想是模板將有多個客戶端,允許重複使用。所有客戶共享相同的外觀和感覺,並相互導航。 xhtml非常簡單,在我的(有限)體驗中,JSF 2.1導航並不那麼重要。當然,您可以擁有代碼片段,頭文件和不包含的內容,以便您的HTML遵循DRY。你在問什麼?順便說一句,'@ManagedBean'與'@Named'非常不同,僅供參考。 – Thufir 2012-04-08 06:14:38

+0

@Thufir:我問我是否應該使用我的Web應用程序JSF模板(基於您的評論,答案是YES),如果我應該使用必須是可重用JSF複合組件的「盒子」不同(裝飾,自定義組件)..不確定。我不知道你的意思是「HTML遵循DRY」,不知道你爲什麼提到'@ManagedBean'與'@Named'非常不同。 – Ziletka 2012-04-08 09:34:17

+0

DRY ==「不要重複你自己」,參見維基百科。哦,我提到了'@Named',因爲我在戰鬥 - 與你的問題無關,對不起。 – Thufir 2012-04-08 18:27:48

回答

6

佈局,模板

layout.xhtml:

每一頁都會有相同的標題,菜單,頁腳...

在這種情況下,你可以省略用戶界面:爲標題,菜單,頁腳插入標籤。

<h:body> 
    <ui:include src="/xhtml/template/main_menu.xhtml"/> 
    <ui:include src="/xhtml/template/header.xhtml"/> 
    <ui:insert name="content"/> 
    <ui:include src="/xhtml/template/footer.xhtml"/> 
</h:body> 

你也可以擁有一個UI:插入沒有名字,所以,如果你想進一步簡化:

<h:body> 
    <ui:include src="/xhtml/template/main_menu.xhtml"/> 
    <ui:include src="/xhtml/template/header.xhtml"/> 
    <ui:insert/> 
    <ui:include src="/xhtml/template/footer.xhtml"/> 
</h:body> 

customer_overview.xhtml:

如果你有用戶界面:在插入沒有名字layout.xhtml,你不需要ui:在這裏定義:

<ui:composition template="/xhtml/template/layout.xhtml"> 
     <!-- Composite Components --> 
     <cc:component_customer/> 
     <cc:component_case_history 
      caseList="#{customerOverviewController.cases}" 
     /> 
     ... 
</ui:composition> 

你也應該把你的模板放在folde r用戶無法直接訪問(WEB-INF)。

可重複使用的「盒子」

你的一個合成成分是這樣的:

<cc:component_customer/> 

的組件沒有任何屬性是非常可疑的。

  • 它是做什麼的?
  • 顯示用戶名?
  • 如果您沒有傳遞任何屬性,它如何獲得用戶名?

組件應該是自包含的,對於其他可重用部件使用ui:insert來代替。

+0

感謝您的回覆。知道這些事情以進一步簡化是很好的。關於 ...這只是一個簡短的例子,這個組件也有屬性。 – Ziletka 2012-04-08 20:48:57

+0

我已修復標記以避免誤解。 – Ziletka 2012-04-10 07:38:02