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
--
View this message in context:
http://www.nabble.com/Component+like+panelGrid+with+ul+and+li-t1668669.html#a4525075
Sent from the MyFaces - Users forum at Nabble.com.
