Proper using of Facelet templates & Composite Comp

2019-04-07 05:01发布

问题:

I'm still not sure about proper using of JSF Templates & Composite Components. I need create an enterprise web applications, which will have a lot of pages. Every page will have the same header, menu, footer and of course different content (= JSF template). The content on every pages will consist of reusable "boxes" (= JSF composite components). The boxes consist of some fileds, buttons etc. Is my solution proper? Or should I use other technology like , Custom Components, decorate ...?

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() {
        ...
    }
}

EDIT 2012-04-27

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

I think that I should use rather Facelet templates + Facelet tag files instead of Facelet templates + Composite components.

回答1:

Layout, templating

layout.xhtml:

Every page will have the same header, menu, footer ...

In this case you can omit the ui:insert tags for header, menu, footer.

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

You may also have a ui:insert without name, so if you want to further simplify:

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

If you have ui:insert without name in layout.xhtml, you don't need ui:define here:

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

Also you should place your templates in a folder that users cannot access directly (WEB-INF).

reusable "boxes"

One of your composite component looks like this:

<cc:component_customer/>

A component without any attributes is very suspicious.

  • What does it do?
  • displays a username?
  • how does it get the username if you don't pass any attributes?

A component should be self-contained, for other reusable parts use ui:insert instead.