Horizontal placement of components in JSF.

Question

Hi,

Should be simple but I couldn't find the answer, I would like to place components horizontally instead of vertically.

What I'm trying to achieve is a rich:toolbar with 2 or more rows. I've been trying to do that with a toolbar that has a panelgrid and two panelgroups like this:

<rich:toolbar...>
  <f:panelgrid columns="1"...>
    <f:panelgroup id="row1" .../>  <-- Should be horizontal placement
    <f:panelgroup id="row2" .../>  <-- Should be horizontal placement
  <f:panelgrid/>
<rich:toolbar/>

So how do I make the panelgroup layout horizontal (Or should I use something else?)

Thanks!

Answer 1

You probably already know that JSF in webserver ends up as HTML in webbrowser. In HTML, there are several ways to place elements horizontally (eventually with help of CSS):

1. Group them in inline elements (like <span> or any element with display: inline;).
2. Group them in block elements (like <div> or any element with display: block;) and give them all a float: left;.

The JSF <h:panelGrid> renders a HTML <table> element wherein each child component is taken as a <td>. The columns attribute represents the max amount of <td> elements in a single <tr> (so that the <h:panelGrid> knows when to put a </tr><tr> in). The JSF <h:panelGroup> renders a <span> element.

To achieve way 1 with JSF, you just need to group them in separate <h:panelGroup> components.

<rich:toolbar ...>
    <h:panelgroup id="row1" ... />
    <h:panelgroup id="row2" ... />
</rich:toolbar>

Way 2 can be done the same way, but then with <h:panelGroup layout="block"> instead and a float: left; in their CSS.