html - Is it possible to use JSF to build clean CSS layouts without using tables?

Question

I want to look at using JSF but I'm put off by what appears to be the liberal use of html tables for layout by many components.

How do you go about using JSF to develop css-based layouts?

---

I seem to be labouring under a misaprehension here, but every JSF tutorial I've seen ends up producing table-based HTML layouts. I've also looked at RichFaces and IceFaces demos and there's an awful lot of tables-for-layout there as well.

Does anyone know of a JSF tutorial that develops a CSS based layout? If not, does anybody fancy making one? ;)

Answer 1

the liberal use of html tables for layout by many components

Many components? There are as far as I know only two which do that "unnecessarily": the <h:selectOneRadio> and <h:selectManyCheckbox>. If you want a table-less group of radiobuttons and checkboxes wherein you have the full control over the generated markup, just use the Tomahawk variant instead, which has an extra layout attribute value of spread. Here's an example of the <t:selectOneRadio> approach:

<t:selectOneRadio id="foo" value="#{bean.foo}" layout="spread">
    <f:selectItems value="#{bean.foos}" />
</t:selectOneRadio>
...
<t:radio for="foo" index="0" />
...
<t:radio for="foo" index="1" />
...
<t:radio for="foo" index="2" />
...

Since JSF 2.2 it's even possible to do it "out the box" with new passthrough elements/attributes feature. Since JSF 2.3 it has even become part of standard component set. See also a.o. <h:selectOneRadio> renders table element, how to avoid this?

For the remainder, you just have the control of the general HTML output fully in your own hands. Just do not use tables for layout at all. I.e. do not use HTML <table> or JSF <h:panelGrid> for layout. Just use HTML <div> elements to display content blocks. Or if you're a JSF-purist, you can use <h:panelGroup layout="block"> to let JSF generate a HTML <div> element.

As to applying CSS, it isn't that hard, every JSF HTML component has a styleClass attribute wherein you can specify CSS classes (which would end up in a HTML class attribute) and style attribute wherein you can specify inline CSS (which would end up in a HTML style attribute).

You can even define global CSS styles and use the ID selectors. Only thing which you need to take care in JSF+CSS is that the JSF-generated HTML element IDs are prepended with the IDs of all parent NamingContainer components (e.g. <h:form>, <h:dataTable>, etc) with a colon : as separator. As the colon is an illegal character in CSS identifiers, you need to escape it using . So styling the input element of for example

<h:form id="form">
    <h:inputText id="input" ... />

which generates <input type="text" id="form:input" ... /> should be done as

#form:input {
    background: gray;
}

It's however very rare to select form input elements or table elements by ID. More commonly the classname is to be used (which is more semantic and better reuseable) and this doesn't need to be escaped. The ID are usually used by main layout components only anyway (header, menu, content, footer, title, etc) and they usually don't end up in a JSF NamingContainer.

See also:

• How to use JSF generated HTML element ID with colon ":" in CSS selectors?
• By default, JSF generates unusable ids, which are incompatible with css part of web standards
• What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?
• JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used

---

I seem to be labouring under a misaprehension here, but every JSF tutorial I've seen ends up producing table-based HTML layouts. I've also looked at RichFaces and IceFaces demos and there's an awful lot of tables-for-layout there as well.

Start here: Java EE web development, where do I start and what skills do I need?