16

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? ;)

2 Answers 2

23

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:


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?

9
  • I've looked at the resulting html for components from component libraries and many of them are table based. Maybe I've looked at the wrong ones.
    – blank
    Dec 8, 2009 at 15:27
  • The panelGrid and dataTable renders a table as well, but there they are for! I must however admit, I have seen too often that new-to-JSF users are unnecessarily using panelGrids instead of divs for layout. Maybe you've seen that as well.
    – BalusC
    Dec 8, 2009 at 15:29
  • In addition to this answer, you can also consider Facelets for your templating. I used Facelets, div and CSS to create the skeletons of my pages. Dec 8, 2009 at 15:45
  • 2
    I think this answer missed the question. The issue in front-end development is that many JSF components from dataTable to panelGrid and other core-components (e.g., for data rendering) force the old-school HTML table to be rendered. CSS has for over five years offered display:table and related styles to make tables behave as tables but do things like make clickable rows, to name a few important features. Feb 12, 2013 at 15:57
  • 2
    @Darrell: Your argument is invalid. HTML <table> is not old school. It's intented for displaying tabluar data. It's previously only so often abused for positioning which indeed needs to be done by CSS instead.
    – BalusC
    Feb 12, 2013 at 15:59
0

It is definitely possible to produce a website built on JSF that does not use tables for layout. I'm not sure why you think JSF relies upon tables? JSF provides the framework for you to develop whatever type of page you want.

Here is another link that may prove useful: http://www.ibm.com/developerworks/java/library/j-jsf1/index.html

1
  • I'll add some more to the question, but it's generally because every tutorial I've seen ends up producing html tables, and having looked at components from richfaces, icefaces etc. they all seem to use a lot of tables for layout
    – blank
    Dec 8, 2009 at 15:55

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.