CODEWITHSUNDEEP
templatesjsffacelets
AgostinoX
AgostinoX

Reputation: 7683

JSF template, include a piece of HTML in each page

I can't figure out how to include a piece of HTML (say a little table) in each of the pages of my web app.

Say this is the table I want to include, so I made a template:

<?xml version ... ?>
<!DOCTYPE ...">
<html xmlns="... all the required namespaces ...">
    <head>
    </head>
    <body>
        <table>
            <tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
        </table>
    </body>
</html>

then I have the code that uses it:

<?xml version ...?>
<!DOCTYPE ...">
<html xmlns="... all required namespaces ...">

    <body>
        <h3>Will this be displayed?</h3>
        <ui:composition template="tableTemplate.xhtml">
            <h4>Will this?</h4>
        </ui:composition>
    </body>

</html>

the page that I get on the browser is:

<html xmlns ...>
    <head>
    </head>
    <body>
         <table>
             <tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
         </table>
    </body>
</html>

so there is the table but all the rest is missing!

Upvotes: 1

Views: 5964

Answers (2)

BalusC
BalusC

Reputation: 1108537

In the master template, you need to use <ui:insert> to declare the place where the template definitions will be inserted.

template.xhtml 

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title><ui:insert name="title">Default title</ui:insert></title>
    </h:head>
    <h:body>
        <ui:insert name="body">Default body</ui:insert>
        <table>
            <tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
        </table>
    </h:body>
</html>

In the template client, you need to use <ui:define> to define the template definitions which are to be inserted in the places declared in the template.

page.xhtml

<ui:composition template="template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">

    <ui:define name="title">
        Define your page title here
    </ui:define>

    <ui:define name="body">
        <h3>Define your body content here</h3>
        <p>Blah blah</p>
    </ui:define>
</ui:composition>

No HTML around <ui:composition> is necessary. They will be ignored anyway. Just don't put any HTML there, that's only waste of space and confusing for yourself.

When you open page.xhtml in the browser, the following will end up in the rendered output:

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Define your page title here</title>
    </head>
    <body>
        <h3>Define your body content here</h3>
        <p>Blah blah</p>
        <table>
            <tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
        </table>
    </body>
</html>

Upvotes: 4

Kerem Baydoğan
Kerem Baydoğan

Reputation: 10722

TRY

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

and in your tableTemplate.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets">

    put your template here

</ui:composition>

Upvotes: 3

Related Questions