How to include common content into multiple level template page

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:s="http://jboss.com/products/seam/taglib" xmlns:c="http://java.sun.com/jstl/core" xmlns:ub="http://jboss.com/products/seam/ub-taglib" xmlns:rich="http://richfaces.ajax4jsf.org/rich"> <head> <ui:insert name="css" /> <ui:insert name="header" /> </head> <body> <ui:insert name="body" /> </body> </html>

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://jboss.com/products/seam/taglib" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:rich="http://richfaces.ajax4jsf.org/rich" xmlns:a4j="https://ajax4jsf.dev.java.net/ajax" xmlns:c="http://java.sun.com/jstl/core" template="template.xhtml"> <ui:define name="css"> <link rel="stylesheet" type="text/css" href="/custom.css/> </ui:define> <ui:include src="common.xhtml" /> </ui:composition>

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://jboss.com/products/seam/taglib" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:rich="http://richfaces.ajax4jsf.org/rich" xmlns:a4j="https://ajax4jsf.dev.java.net/ajax" xmlns:c="http://java.sun.com/jstl/core" template="template.xhtml"> <ui:define name="header"> <h1>header</h1> </ui:define> <ui:define name="body"> <table><tr><td>Table</td></tr></table> </ui:define> </ui:composition>

This indeed won't work. The <ui:define> is supposed to be used in a template client (i.e. a page with <ui:composition template="...">), not in an include file (i.e. a page with <ui:composition> without template). You can however just "extend" from existing master templates.

Remove from custom.xhtml:

<ui:include src="common.xhtml" />

Change in common.xhtml

template="custom.xhtml"

And open common.xhtml instead of custom.xhtml in browser.

Unrelated to the concrete problem, to prevent the enduser form being able to open custom.xhtml or template.xhtml directly in browser, it's recommended to move them into the /WEB-INF folder. Further, are you aware of the <h:head> and <h:outputStylesheet> components? I suggest to make use of them. Also, having a <h1> to ultimately end up in <head> makes no sense. Perhaps you meant the <ui:insert name="header"> to be inside <body>? Further, you could easily put that <h1> in the template so that you don't need to repeat them in every template client.

/WEB-INF/templates/template.xhtml

<html ...>
    <h:head>
    </h:head>
    <h:body>
        <ui:insert name="header" />
        <ui:insert name="body" />
    </body>
</html>

/WEB-INF/templates/custom.xhtml (CSS file is placed in /resources folder)

<ui:composition ... template="/WEB-INF/templates/template.xhtml">
    <ui:define name="header">
        <h1><ui:insert name="custom-header" /></h1>
    </ui:define>
    <ui:define name="body">
        <h:outputStylesheet name="custom.css" target="head" />
        <ui:insert name="custom-body" />
    </ui:define>
</ui:composition>

/page.xhtml

<ui:composition ... template="/WEB-INF/templates/custom.xhtml">
    <ui:define name="custom-header">
        header
    </ui:define>
    <ui:define name="custom-body">
         <table><tr><td>Table</td></tr></table>
    </ui:define>
</ui:composition>

See also:

See also:

Recommended topics

Hot tags