1

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.

Improve this question
3
  • A similar question has been asked yesterday: stackoverflow.com/questions/6822000/… Commented Jul 27, 2011 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: stackoverflow.com/questions/5281623/… Commented Jul 27, 2011 at 17:45
  • @Arjan: Haha, indeed I couldn't think of a better school example ;) It was a perfect use case. Commented Jul 27, 2011 at 17:50

1 Answer 1

Reset to default
4

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.

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

3 Comments

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.