JSF/Facelets: why is it not a good idea to mix JSF/Facelets with HTML tags?

Question

I've read this several times now: some developers aren't advocates of interleaving JSF/Facelets tags with HTML tags in their XHTML files. Obviously the HTML tags won't be part of the UI component tree, but what's the disadvantage of that?

I often find code examples where the authors do that kind of mixing:

http://www.ibm.com/developerworks/java/library/j-facelets/

http://www.packtpub.com/article/facelets-components-in-jsf-1.2

http://oreilly.com/catalog/9780596529246

"Seam in Action" also interleaves JSF/Facelets and HTML tags.

I'm confused about what to actually use. I started out mixing tags, but I'm beginning to believe it was probably not the right choice. However, I fail to see why the puristic approach is preferrable.

I know for certain that I have a table where the JSF datatable doesn't give me enough flexibility to display what I need to, so doing it puristically isn't possible.

Furthermore I'm wondering why none of the examples above use f:view etc. instead of the hardcoded html, head, body etc. tags.

Can anyone please clear this up for me?

Simplicidentate

See this question regarding JSF/HTML tags – Presently

OK this helps. At least regarding div and span, but how do I manage p, br, and especially headings? – Simplicidentate

From my answer in the referenced question: "In practice I found it hard to follow this recommendation and ended up mixing html and jsf, e.g. for headings or line breaks I use html." – Presently

Hmmm disappointing. Shouldn't there be a JSF way? – Simplicidentate

I don't see why this isn't a good idea and that this is disappointing. Maybe you're victim of the myth that mixing JSF+HTML=bad which was caused during JSF 1.0/1.1 ages? For more history, see stackoverflow.com/questions/3273595/… – Crosswind

Answer 1

During the JSF 1.0/1.1 ages this was indeed "not a good idea", because all the HTML was not automatically taken in the JSF component tree when using JSP as view technology. All plain HTML was eagerly by JSP rendered before the JSF component tree. E.g.

<p>Lorem ipsum <h:outputText value="#{bean.value1}"> dolor sit amet<p>
<p>Consectetur adipiscing <h:inputText value="#{bean.value2}" /> elit</p>

got rendered as

<p>Lorem ipsum dolor sit amet<p>
<p>Consectetur adipiscing elit</p>

value1
<input type="text" value="value2" />

To fix this you would need to bring <f:verbatim> in.

<f:verbatim><p>Lorem ipsum </f:verbatim><h:outputText value="#{bean.value1}"><f:verbatim> dolor sit amet<p></f:verbatim>
<f:verbatim><p>Consectetur adipiscing </f:verbatim><h:inputText value="#{bean.value2}" /><f:verbatim> elit</p></f:verbatim>

This was a real maintenance pain. This was one of the major reasons why JSF 1.0/1.1 was so hated.

Since JSF 1.2, with the new view handler, the <f:verbatim> was not necessary anymore. Developers can now breathe relieved. Moreover, the new view handler allowed JSF to use a different view technology than JSP and this way Facelets was born.

See also:

• What are the main disadvantages of Java Server Faces 2.0?
• Why Facelets is preferred over JSP as the view definition language from JSF2.0 onwards?
• Is it possible to use JSF+Facelets with HTML 4/5?
• JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used

Crosswind

+1 for concise explanation and perfect example. I knew this before hand but really well put. – Vanettavang

Note that there may be a minor performance advantage in using plain html instead of components that give the same result (div vs t:div) , as that reduces parsing time. Know however that html tags are not contained as components in the view root (afaik) – Hoo

@Steven: It has no influence on view build time. It's parsed and inspected anyway (and converted to specialized UIInstructions components). Only view render time may be significantly faster if you've relatively a lot of them as they're rendered as "template text" without any state and attributes (but still with EL evaluation support). – Crosswind

Answer 2

As a general rule, I use a mix betweek HTML and Facelets tags in the layout/template pages. But for the actual content pages I try to only use the JSF tags available with my JSF library of choice (JSF + RichFaces).

That way I can have more control of which elements to show and hide, as well as the contents within each element, but I can still hard-code my main page layout in the facelets template file.

Wiseman