JSF template, include a piece of HTML in each page

Asked 29/6, 2011 at 22:1 Answered 30/6, 2011 at 5:0

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!

Guria answered 29/6, 2011 at 22:1 Comment(0)

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>

Ambidextrous answered 30/6, 2011 at 5:0 Comment(2)

ok, now I'm beginning to understand how this composition works. I see these disadvantages: 1) the "regular" structure of the html page is completely lost, since the client have to define "pieces" that are "glued togheter" by the template 2) if I want to insert an head, i have to provide a placeholder for it too – Guria 30/6, 2011 at 5:22

Then just do it the other way round, with <ui:include>. See also my answer on your previous question (and the "See also" link therein). Each way has its own (dis)advantages. I understand the "HTML being completely lost" disadvantage. But you should also understand the advantage that you don't need to repeat the same HTML "wireframe" for every page this way. If you make a change in the master layout, you'd otherwise have to do it in every single page. – Ambidextrous 30/6, 2011 at 5:50

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>

Zoogloea answered 30/6, 2011 at 1:45 Comment(0)

Recommended topics

Hot tags