JSF 2: How build components correctly?

Question

I'm new to JSF and I'm trying to learn it because I saw the benefits of it. I have one website build in HTML and now I would like to create templates of some parts, like a <head> section, sidebar, top menus, footer, etc. I learned that in JSF these would be called 'components'.

It would be something like this, for example:

<html>
    <h:head>
        <title>Example</title>
        <ui:include src="/resources/component/head.xhtml"></ui:include>
    </h:head>
    <h:body>
    //....
    <ui:include src="/resources/component/footer.xhtml"></ui:include>    
    </h:body>
</html>

I already tried to do something like the above but my style from .css doesn't apply correctly to my divs. The same holds for javascript files.

I want to pass everything to JSF. I wonder if it's worth it to do this. What do you guys think?

What is the best way to create templates and components in JSF, and why doesn't my style and javascript work properly when I try to import these files?

Is what I'm trying to do the best approach?

Best regards, Valter Henrique.

A similar question has been asked yesterday: http://stackoverflow.com/questions/6822000/difference-between-new-composite-components-of-jsf2-and-uiinclude — BalusC, Jul 27 '11 at 17:21
@BalusC: That one has a good explanation and helpful link to the composite component wiki indeed (nice example component :P). Another very similar question is the following: http://stackoverflow.com/questions/5281623/what-is-the-difference-between-faceletss-uiinclude-and-custom-tag — Arjan Tijms, Jul 27 '11 at 17:45
@Arjan: Haha, indeed I couldn't think of a better school example ;) It was a perfect use case. — BalusC, Jul 27 '11 at 17:50

Arjan Tijms · Accepted Answer · 2011-07-27T17:38:59.720

In JSF, there are both templates and components. Component is not another word for a template.

The example you show is not a very likely candidate for a component, but is really done by a (Facelets) template:

<html xmlns="http://www.w3.org/1999/xhtml"    
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Example</title>
        <ui:include src="/resources/component/head.xhtml"/>
    </h:head>
    <h:body>
        <ui:insert name="content"/>    
        <ui:include src="/resources/component/footer.xhtml"/>
    </h:body>
</html>

Now individual pages can make use of this template, and are then called template clients:

<?xml version="1.0" encoding="UTF-8"?> 

<ui:composition
    xmlns:ui="http://java.sun.com/jsf/facelets"     
    template="/templates/master.xhtml">

    <ui:define name="content">
        Some content for this page.
    </ui:define>
</ui:composition>

Take note of the definition of a section called content in the template, for which the template client provides actual content.

Components can be created via Java or via special Facelets pages called composite-components. Composite components basically combine a number of existing components and markup to form new components that can be easily re-used. E.g. a very simple composite component without any parameters:

<?xml version="1.0" encoding="UTF-8"?> 

<ui:composition
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:cc="http://java.sun.com/jsf/composite"
>
    <cc:interface/>

    <cc:implementation>    
        <p>
            <h:outputText value="&amp;nbsp;" escape="false"/>
        </p>        
    </cc:implementation>

</ui:composition>

If you put this in [web content]/resources/foo/emptyLine.xhtml, you can use it on your templates as <foo:emptyLine/>. E.g.

<?xml version="1.0" encoding="UTF-8"?> 

<ui:composition
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:m4n="http://java.sun.com/jsf/composite/foo"
    template="/templates/master.xhtml">

    <ui:define name="content">
        Some content for this page.
        <foo:emptyLine/>
    </ui:define>
</ui:composition>

At times includes and composite components and a third variant facelets tags can feel a bit similar to each other. In general you would use includes for things that are basically very specific for an individual page and components for things that you re-use at many locations. The difference between composite components and facelets tags is more subtle, but for many cases composite components can be considered to be the more modern variant of the two.

Hint: to trigger XML syntax highlighting so that it reads prettier, add `` to top of your code. See also http://meta.stackexchange.com/q/81970 and http://meta.stackexchange.com/q/72082. Questions tagged with `[jsf]` do that by default, but the more major `[java]` tag has overridden it. — BalusC, Jul 27 '11 at 17:23
@Arjan Tijms,@BalusC, i update my post could you please take a look ? — Valter Silva, Jul 27 '11 at 17:49
@Valter: Maybe you should open a new question for that, as it's a related but still rather different question. — Arjan Tijms, Jul 27 '11 at 17:57

JSF 2: How build components correctly?

1 Answers1