How to use JSF panelGrid

Question

Im trying to create a login form using JSF. And not sure on how to use the panelGrid.

The layout of the code is as follows:

<h:panelGrid columns="4">
    <p>UserName <h:inputText ............../></p>
    <p>Password <h:inputSecret ............/></p>

    <h:panelGroup>
        COMMAND BUTTON ENTER
    </h:panelGrid>
</h:panelGrid>

What im not sure of is how do i justfy what goes in which column etc.

Thanks

Answer 1

In h:panelGrid every JSF tag lands in a new column. If you want 'UserName' and <h:inputText> to be next to each other in separate columns your XHTML should look like this:

<h:panelGrid columns="4">
    <h:outputText value="UserName" />
    <h:inputText ............../>
    <h:outputText value="Password" />
    <h:inputSecret ............/>
</h:panelGrid>

So in your case if you have 4 columns, then first row will be taken by label-input x2, what comes after that will land in a new row. If on the other hand you want each label-input pair to land in a separate row just set the columns attribute to columns="2".

You can also style each column like so:

<h:panelGrid ... columnClasses="one-col,two-col,three-col,four-col" >