Re: Component like panelGrid with ul and li

This component looks like it takes in a list of items.  I'm just looking to wrap form elements like <h:panelGrid> allows - so JSF slurps it up and processes it, instead of processing each component as it loads in a JSP.  I'd like to go from this:

<h:form id="signupForm" onsubmit="return validateSignupForm(this)">
<ul>
    <li class="info">
        <fmt:message key="signup.message"/>
    </li>
    <li>
        <h:outputLabel for="username" value="#{text['user.username']}" styleClass="desc"/>
        <t:message for="username" styleClass="fieldError"/>
        <h:inputText value="#{signupForm.user.username}" id="username" required="true" styleClass="text large">
            <v:commonsValidator type="required" arg="#{text['user.username']}"/>
        </h:inputText>
    </li>
    <li>
        <div>
            <div class="left">
                <h:outputLabel for="password" value="#{text['user.password']}" styleClass="desc"/>
                <t:message for="password" styleClass="fieldError"/>
                <h:inputSecret value="#{signupForm.user.password}" id="password"
                    redisplay="true" required="true" styleClass="text medium">
                    <v:commonsValidator type="required" arg="#{text['user.password']}"/>
                </h:inputSecret>
            </div>
            <div>
                <h:outputLabel for="confirmPassword" value="#{text['user.confirmPassword']}" styleClass="desc"/>
                <t:message for="confirmPassword" styleClass="fieldError"/>
                <h:inputSecret value="#{signupForm.user.confirmPassword}" id="confirmPassword"
                    redisplay="true" required="true" styleClass="text medium">
                    <v:commonsValidator type="required" arg="#{text['user.confirmPassword']}"/>
                    <t:validateEqual for="password"/>
                </h:inputSecret>
            </div>
        </div>
    </li>

To this:

<h:form id="signupForm" onsubmit="return validateSignupForm(this)">
<ul>
    <li class="info">
        <fmt:message key="signup.message"/>
    </li>
    <li>
        <h:outputLabel for="username" value="#{text['user.username']}" styleClass="desc"/>
        <t:message for="username" styleClass="fieldError"/>
        <h:inputText value="#{signupForm.user.username}" id="username" required="true" styleClass="text large">
            <v:commonsValidator type="required" arg="#{text['user.username']}"/>
        </h:inputText>
    </li>
    <li>
        <div>
            <div class="left">
                <h:outputLabel for="password" value="#{text['user.password']}" styleClass="desc"/>
                <t:message for="password" styleClass="fieldError"/>
                <h:inputSecret value="#{signupForm.user.password}" id="password"
                    redisplay="true" required="true" styleClass="text medium">
                    <v:commonsValidator type="required" arg="#{text['user.password']}"/>
                </h:inputSecret>
            </div>
            <div>
                <h:outputLabel for="confirmPassword" value="#{text['user.confirmPassword']}" styleClass="desc"/>
                <t:message for="confirmPassword" styleClass="fieldError"/>
                <h:inputSecret value="#{signupForm.user.confirmPassword}" id="confirmPassword"
                    redisplay="true" required="true" styleClass="text medium">
                    <v:commonsValidator type="required" arg="#{text['user.confirmPassword']}"/>
                    <t:validateEqual for="password"/>
                </h:inputSecret>
            </div>
        </div>
    </li>

To something like this:

<h:form id="signupForm" onsubmit="return validateSignupForm(this)">
<h:panelGrid columns="1">
    <h:panelGroup styleClass="info"> <!-- Hopefully this will add "info" to the <li> -->
        <fmt:message key="signup.message"/>
    </h:panelGroup>
   
    <!-- By default, group 3 elements in a single <li> -->
    <h:outputLabel for="username" value="#{text['user.username']}" styleClass="desc"/>
    <t:message for="username" styleClass="fieldError"/>
    <h:inputText value="#{signupForm.user.username}" id="username" required="true" styleClass="text large">
        <v:commonsValidator type="required" arg="#{text['user.username']}"/>
    </h:inputText>

    <h:panelGroup> <!-- Single <li> with 2 columns -->
        <div>
            <div class="left">
                <h:outputLabel for="password" value="#{text['user.password']}" styleClass="desc"/>
                <t:message for="password" styleClass="fieldError"/>
                <h:inputSecret value="#{signupForm.user.password}" id="password"
                    redisplay="true" required="true" styleClass="text medium">
                    <v:commonsValidator type="required" arg="#{text['user.password']}"/>
                </h:inputSecret>
            </div>
            <div>
                <h:outputLabel for="confirmPassword" value="#{text['user.confirmPassword']}" styleClass="desc"/>
                <t:message for="confirmPassword" styleClass="fieldError"/>
                <h:inputSecret value="#{signupForm.user.confirmPassword}" id="confirmPassword"
                    redisplay="true" required="true" styleClass="text medium">
                    <v:commonsValidator type="required" arg="#{text['user.confirmPassword']}"/>
                    <t:validateEqual for="password"/>
                </h:inputSecret>
            </div>
        </div>
    </h:panelGroup>

Of course, if it's possible to simply group the label, error and input in some sort of group w/in the <li>, I'm fine with that.  It's unfortunate that JSF 1.1 with JSP is so broken. ;-)

Thanks,

Matt