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

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
blank
  • 17,852
  • 20
  • 105
  • 159

2 Answers2

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?

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • 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 08 '09 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 `panelGrid`s instead of `div`s for layout. Maybe you've seen that as well. – BalusC Dec 08 '09 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. – Romain Linsolas Dec 08 '09 at 15:45
  • I admit that Facelets is a much better view technology than JSP, but since JSF 1.2 which already came out early 2006 you can use inline HTML without the need to wrap with nasty `f:verbatim` as in JSF 1.1 or older. – BalusC Dec 08 '09 at 16:01
  • 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. – Darrell Teague Feb 12 '13 at 15:57
  • 2
    @Darrell: Your argument is invalid. HTML `` 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 '13 at 15:59
  • I would have down-voted this answer as I think this answer missed question entirely... CSS UIComponent renderers by default **do not** support CSS table layout design as they explicitly render the `table` element for `dataTable`, `panelGrid` and all other related components. None of the core-library renderers considered CSS table-layout and the use of div/span with `display:table` styles, etc. See [this related post](http://stackoverflow.com/questions/8422122/how-to-make-a-clickable-row-in-a-richdatatable). See the [W3C definition](http://www.w3.org/TR/CSS21/tables.html#table-display). – Darrell Teague Feb 12 '13 at 16:05
  • Balus is well-respected and correct that has its place for tabular data but ... it is not the only implementation of the same effect possible with CSS tables; albeit without the side-effects that make `table` and especially table `row` so difficult to style and use (e.g., for links).
     – Darrell Teague Feb 12 '13 at 16:08
  • Regarding the first approach, using – Koray Tugay Jul 24 '16 at 19:04
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

  • 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 08 '09 at 15:55