66

Facelets relies on XML namespaces to work with XHTML. How are HTML 4, and as far as I know, HTML 5 do not support namespaces. Also HTML 5 has some new elements that are not available in XHTML. Even HTML 4 and XHTML have some differences regarding elements and attributes they support.

The question is: Is it possible to render HTML 4/5 documents using Facelets? If so, how?

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Behrang
  • 46,888
  • 25
  • 118
  • 160

5 Answers5

100

Since Facelets is a XML based view technology which eats and emits in essence XML markup, you cannot use it with a HTML4 doctype. The HTML4 doctype describes several elements which cannot be self-closing, like <link>, <meta>, <br> and <hr>. However, with XML you're forced to close them like <link/>, <meta/>, etc. So using a HTML4 doctype is absolutely not an option for Facelets (that is, when you respect the standards and/or fear the w3 validator, it will however work perfectly on the most if not all webbrowsers).

HTML5, on the other hand, allows XML markup. This is specified in chapter 3.2.2 - Elements:

Example:

<link type="text/css" href="style.css"/>

Authors may optionally choose to use this same syntax for void elements in the HTML syntax as well. Some authors also choose to include whitespace before the slash, however this is not necessary. (Using whitespace in that fashion is a convention inherited from the compatibility guidelines in XHTML 1.0, Appendix C.)

I myself use <!DOCTYPE html> all the way, also with JSF/Facelets, even without a <?xml?> declaration in top of the page. It works perfectly in all browsers. With a XHTML doctype you should as per the specification be using a Content-Type of application/xhtml+xml which would only make MSIE to choke (it doesn't understand it). And since that's still one of the most widely used browsers... Replacing the XHTML content type by text/html is considered harmful, you also don't want to do this.

As per your arguments:

HTML 5 do not support namespaces.

This doesn't matter. The namespaces are only of interest for the XML based server side view technology (like as Facelets) which in turn can generate pure HTML with those tags. The following example is legitimately valid for Facelets:

<!DOCTYPE html>
<html lang="en"
    xmlns:f="http://xmlns.jcp.org/jsf/core" 
    xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Title</title>
    </h:head>
    <h:body>
        <h:outputText value="#{bean.text}" />
    </h:body>
</html>

This renders legitimately valid HTML5 (for the client side):

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
    </head>
    <body>
        Some text
    </body>
</html>

You see, Facelets already removes the XHTML declarations since they have no meaning in the client side.

And,

Also HTML 5 has some new elements that are not available in XHTML

this make also no sense. It's all about the generated output. Which can be HTML5 as good. Your only problem may be the browser support and the availability of 3rd party JSF components which renders HTML5 specific elements. Since JSF 2.2, it's possible to use the new passthrough elements feature to turn custom elements into a JSF component. Simply give the HTML5 element a jsf:id attribute. It'll transparently internally be interpreted as a UIPanel instance in the JSF component tree (like <h:panelGroup>).

<!DOCTYPE html>
<html lang="en"
    xmlns:jsf="http://xmlns.jcp.org/jsf"
    xmlns:f="http://xmlns.jcp.org/jsf/core" 
    xmlns:h="http://xmlns.jcp.org/jsf/html"
>
    <h:head>
        <title>Title</title>
    </h:head>
    <h:body>
        <header jsf:id="header">Header</header>
        <nav jsf:id="nav">Nav</nav>
        <main jsf:id="main">Main</main>
        <footer jsf:id="footer">Footer</footer>
    </h:body>
</html>

You can even reference it from ajax as in <f:ajax render="main">.

Actually, XHTML is overhyped. Its sole intent is to ease HTML development using XML based tools which can manipulate/transform/generate HTML pages on the server side (like as Facelets). But some starters also use it without using any XML tool and output it plain as-is, because it's "so cool" -for some unclear reason.

Don't get me wrong. XHTML is great as server side view technology. But simply not as client side markup technology. It has utterly no value at the client side.

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • XHTML is designed to be compatible with HTML4. It isn't? – Thorbjørn Ravn Andersen Oct 07 '10 at 07:36
  • @Thor: [XHTML1 is a "reformulation" of HTML4 as a XML 1.0 application](http://www.w3.org/TR/xhtml1/). As to compatibility, the w3 validator will only issue warnings (not errors) when you close non-self-closing elements while validating against HTML4. It will work without problems on most if not all browsers. – BalusC Oct 07 '10 at 10:45
  • In the past couple of days Stackoverflow was unstable and it seems that my previous comment to your answer has been lost as such. Anyway, thanks for the answer. – Behrang Oct 10 '10 at 13:49
  • 1
    The problem is this won't "work". Using the html5 doctype makes HTML entities like "©" unavailable. javax.faces.view.facelets.FaceletException: Error Parsing /WEB-INF/templates/basic.xhtml: Error Traced[line: 82] The entity "copy" was referenced, but not declared. – Hendy Irawan Mar 26 '12 at 07:57
  • XHTML has tons of value on the client side. How about extremely easy validation instead of all sorts of strange rules about termination of certain tags? – Jonathan S. Fisher Jun 25 '12 at 19:53
  • @exabrial: that's more an advantage to the developer, not exactly for the website enduser. – BalusC Jun 25 '12 at 19:59
  • I'm very intrigued as converting my xhtml files to html5 would be wonderful, but your example does not work for me. I can't get any JSF components to show up unless on a .xhtml page. I simply replaced the `` and (insert long a** doctype here) to ` ` and changed .xhtml to .html, is there something else I need to set up? My faces servlet is configured for /faces/* – Jake Long Aug 23 '12 at 15:07
  • @Jake: You shouldn't need to change the file extension. Just the doctype. If you really need to change the file extension as well, set the `javax.faces.DEFAULT_SUFFIX` context param to `.html` (it defaults to `.xhtml`). – BalusC Aug 23 '12 at 15:12
  • ah, just got that as you posted it. thanks! could you explain why I need that? – Jake Long Aug 23 '12 at 15:12
  • @Jake: It's just the default Facelets template file extension. The Facelets template file extension has totally no influence on the behavior of the doctype and contenttype. You can even use `.xyz` or something. You'll possibly only need to change the tooling (IDE, etc) to recognize that extension as well so that you can continue using highlighting/autocomplete facilities and so on. – BalusC Aug 23 '12 at 15:14
  • @Jake: :) Just keep asking questions here on SO. I love to share the information therein. – BalusC Aug 23 '12 at 15:25
  • @BalusC What about the extension of the file '.xhtml'? Should that be changed to 'html'? Also browser gets MIME type text/html of a '.xhtml' JSF page with and no 'xml' initial tag. – jacktrades Feb 10 '13 at 16:13
  • @HendyIrawan Hello, is there any solution to &copy problem you mentioned here? – Koray Tugay Mar 22 '13 at 17:05
  • Roughly 2 years ago, I basically wrote a library that contains JSF `UIComponent`'s and `Renderer` to strictly follow the HTML5 elements and its attributes. That was before JSF introduced passthrough attributes. I still maintain it to this very day and I can safely say I still use it to this day. :-) – Buhake Sindi Dec 20 '14 at 14:24
  • I have a similar problem: http://stackoverflow.com/questions/27574351/load-html5-page-inside-uiinsert-jsf-2-2-facelets Could someone help me, please? – Aleff Dec 22 '14 at 05:28
9

On a related note, check out this IBM developerWorks article: JSF 2 fu: HTML5 composite components, Part 1

Vetle
  • 3,287
  • 2
  • 27
  • 28
4

MyFaces has an extension for html5. Try this http://myfaces.apache.org/html5/

ogok
  • 219
  • 1
  • 4
  • 14
3

I've read, that this should be possible, but I did not do it myself, yet. Maybe you should just use HTML 5 inside the xHTML wrapper code. I will see, if I can find the source of information I've again.

[EDIT] Seems like, there has been some work at MyFaces to support HTML5 rendering during Google's summer of code. I don't know if it should be used in a productive way, yet.

Please give us a feedback, if you get it to work. [/EDIT]

Vasil Lukach
  • 3,658
  • 3
  • 31
  • 40
PageFault
  • 289
  • 1
  • 4
  • 15
2

http://wiki.whatwg.org/wiki/HTML_vs._XHTML has some useful information on how namespaces can be used in HTML5 to assist migration from XHTML. Perhaps you can try applying the namespace as it suggests and see what occurs?

Martijn Verburg
  • 3,287
  • 21
  • 26