234

What is the most correct way to include another XHTML page in an XHTML page? I have been trying different ways, none of them are working.

Improve this question

2 Answers 2

Reset to default
450

<ui:include>

Most basic way is <ui:include>. The included content must be placed inside <ui:composition>.

Kickoff example of the master page /page.xhtml:

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"> <h:head> <title>Include demo</title> </h:head> <h:body> <h1>Master page</h1> <p>Master page blah blah lorem ipsum</p> <ui:include src="/WEB-INF/include.xhtml" /> </h:body> </html>

The include page /WEB-INF/include.xhtml (yes, this is the file in its entirety, any tags outside <ui:composition> are unnecessary as they are ignored by Facelets anyway):

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"> <h2>Include page</h2> <p>Include page blah blah lorem ipsum</p> </ui:composition>

This needs to be opened by /page.xhtml. Do note that you don't need to repeat <html>, <h:head> and <h:body> inside the include file as that would otherwise result in invalid HTML.

You can use a dynamic EL expression in <ui:include src>. See also How to ajax-refresh dynamic include content by navigation menu? (JSF SPA).

<ui:define>/<ui:insert>

A more advanced way of including is templating. This includes basically the other way round. The master template page should use <ui:insert> to declare places to insert defined template content. The template client page which is using the master template page should use <ui:define> to define the template content which is to be inserted.

Master template page /WEB-INF/template.xhtml (as a design hint: the header, menu and footer can in turn even be <ui:include> files):

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"> <h:head> <title><ui:insert name="title">Default title</ui:insert></title> </h:head> <h:body> <div id="header">Header</div> <div id="menu">Menu</div> <div id="content"><ui:insert name="content">Default content</ui:insert></div> <div id="footer">Footer</div> </h:body> </html>

Template client page /page.xhtml (note the template attribute; also here, this is the file in its entirety):

<ui:composition template="/WEB-INF/template.xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"> <ui:define name="title"> New page title here </ui:define> <ui:define name="content"> <h1>New content here</h1> <p>Blah blah</p> </ui:define> </ui:composition>

This needs to be opened by /page.xhtml. If there is no <ui:define>, then the default content inside <ui:insert> will be displayed instead, if any.

<ui:param>

You can pass parameters to <ui:include> or <ui:composition template> by <ui:param>.

<ui:include ...> <ui:param name="foo" value="#{bean.foo}" /> </ui:include> 
<ui:composition template="..."> <ui:param name="foo" value="#{bean.foo}" /> ... </ui:composition >

Inside the include/template file, it'll be available as #{foo}. In case you need to pass "many" parameters to <ui:include>, then you'd better consider registering the include file as a tagfile, so that you can ultimately use it like so <my:tagname foo="#{bean.foo}">. See also When to use <ui:include>, tag files, composite components and/or custom components?

You can even pass whole beans, methods and parameters via <ui:param>. See also JSF 2: how to pass an action including an argument to be invoked to a Facelets sub view (using ui:include and ui:param)?

Design hints

The files which aren't supposed to be publicly accessible by just entering/guessing its URL, need to be placed in /WEB-INF folder, like as the include file and the template file in above example. See also Which XHTML files do I need to put in /WEB-INF and which not?

There doesn't need to be any markup (HTML code) outside <ui:composition> and <ui:define>. You can put any, but they will be ignored by Facelets. Putting markup in there is only useful for web designers. See also Is there a way to run a JSF page without building the whole project?

The HTML5 doctype is the recommended doctype these days, "in spite of" that it's a XHTML file. You should see XHTML as a language which allows you to produce HTML output using a XML based tool. See also Is it possible to use JSF+Facelets with HTML 4/5? and JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used.

CSS/JS/image files can be included as dynamically relocatable/localized/versioned resources. See also How to reference CSS / JS / image resource in Facelets template?

You can put Facelets files in a reusable JAR file. See also Structure for multiple JSF projects with shared code.

For real world examples of advanced Facelets templating, check the src/main/webapp folder of Java EE Kickoff App source code and OmniFaces showcase site source code.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Hi Balus, regarding: Most basic way is <ui:include>. The included content must be placed inside <ui:composition>. I thing the included content can simply be in <p> </p> it will work.
@KorayTugay: Yes, that's correct. ui:composition is only necessary to a) use a template (see above), or b) to wrap everything in <html><body> so you can load the file with a browser or HTML editor.
Hi can you please solve this riddle for me? I have been banging my head from past 3 days. stackoverflow.com/questions/24738079/…
@Odysseus: not if it's actually a composition.
Afaik if only declaring <ui:composition ...> inside facelet you have to declare the doctype like <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> also, otherwise you get an entity referenced but not declared error when using HTML entities.
|
25

Included page:

<!-- opening and closing tags of included page --> <ui:composition ...> </ui:composition>

Including page:

<!--the inclusion line in the including page with the content--> <ui:include src="yourFile.xhtml"/>
  • You start your included xhtml file with ui:composition as shown above.
  • You include that file with ui:include in the including xhtml file as also shown above.
Improve this answer

1 Comment

Sometimes it's not enough to identify the path while you use just a file name. For those, who tried the file inclusion above and it didn't work. You can try adding a slash symbol before file name or /WEB-INF directory. So it looks like <ui:include src="/yourFile.xhtml"/> or <ui:include src="/WEB-INF/yourFile.xhtml"/>

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.