Making Tables Harder Than They Need To Be
Wednesday, May 13, 2009 |I know you’re not supposed to do this, but sometimes it’s just easier. Sometimes I use `table`s to layout out my forms. Especially for big forms, it’s just easier to put things in a table than deal with `label`s, CSS, etc. Right or wrong, I do it from time to time, but, thanks to David Geary, I just learned that I make it harder on myself than it needs to be. The sad thing is that I’ve known about this solution for years now, but never put two and two together.
Typically, my form may look something like this:
1
2
3
4
5
6
7
8
9
10
11
<table>
<tr>
<td>#{msg.label1}</td>
<td><h:inputText value="#{myBean.field1}"/></td>
</tr>
<tr>
<td>#{msg.label2}</td>
<td><h:inputText value="#{myBean.field2}"/></td>
</tr>
// ad naseum
</table>
JSF, though, has a nicer approach, which David used in his article: h:panelGrid. This component will take each child component and put it in a table. The number of columns in the table is controlled by the columns attribute (of course, there is more to this component than just this option). My table, then would look like this:
1
2
3
4
<h:panelGrid columns="2">
#{msg.label1} <h:inputText value="#{myBean.field1}"/>
#{msg.label2} <h:inputText value="#{myBean.field2}"/>
</h:panelGrid>
The component then handles the creation of the table, rows, and cells automagically for me. Following David’s example, I put the label and input field on the same row, as that helps me visualize the resulting table better, but it’s not necessary. If you need more than one component in a cell, you simply wrap those in a h:panelGroup:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h:panelGrid columns="2">
#{msg.label1}
<h:panelGroup>
<h:inputText value="#{myBean.field1}"/>
<br/>
#{msg.helpText1}
</h:panelGroup>
#{msg.label2}
<h:panelGroup>
<h:inputText value="#{myBean.field2}"/>
<br/>
#{msg.helpText2}
</h:panelGroup>
</h:panelGrid>
Fancy! Now I need to give some thought to a component that will help layout forms The Right Way!
My name is Jason Lee. I am a software developer living in the middle of Oklahoma. I’ve been a professional developer since 1997,
using a variety of languages, including Java, Javascript, PHP, Python, Delphi, and even a bit of C#. I currently work for Red Hat
on the WildFly/EAP team, where, among other things, I maintain integrations for some MicroProfile specs, OpenTelemetry, Micrometer,
Jakarta Faces, and Bean Validation. (Full resume 