Geek Answers Handbook

How to include shared content on a multi-level template page

I am trying to include a shared page in a template, but all I get is a blank page without errors.

common.xhtml has content that is specified in the template.xhtml file. Template.xhtml does not seem to recognize two levels.

template.xhtml

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

custom.xhtml

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

common.xhtml

 <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>
+3
facelets jsf
source share
1 answer

It really won't work. It is assumed that <ui:define> used in the template client (i.e., the page with <ui:composition template="..."> ), and not in the include file (that is, the page with <ui:composition> without template ) However, you can simply โ€œextendโ€ existing templates.

Remove from custom.xhtml :

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

Edit common.xhtml

 template="custom.xhtml"

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

See also:

  • How to include another XHTML in XHTML using JSF 2.0 Facelets?

Unrelated to a specific problem, in order to prevent the enduser form from opening custom.xhtml or template.xhtml directly in the browser, it is recommended that you move them to the /WEB-INF folder. Also, do you know about the <h:head> and <h:outputStylesheet> ? I suggest using them. Also, having <h1> end up in <head> doesn't make sense. Did you mean that <ui:insert name="header"> is inside the <body> ? In addition, you can easily place this <h1> in the template so that you do not need to repeat them in each client of the template.

/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 (the CSS file is placed in the /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:

  • Which XHTML files do I need to enter / WEB -INF and which do not?
  • How to link to CSS / JS / image resource in Facelets template?
+2
source share

More articles:


All Articles