You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Matt Raible <mr...@gmail.com> on 2006/05/23 14:33:14 UTC
Component like panelGrid with ul and li
Does anyone know if there's a panelGrid available that spits out
<ul><li> instead of <table><td>?
I'm looking to convert to prettier forms that put a label on top of a
field and not using a panelGrid with JSP results in components not
knowing about each other the first time (the good ol' JSF 1.1 + JSP
problem).
Here's an example of the form I'd like to create:
http://dev.appfuse.org/appfuse/signup.html
Thanks,
Matt
Re: Component like panelGrid with ul and li
Posted by Matt Raible <mr...@gmail.com>.
On 6/2/06, Matthias Wessendorf <ma...@apache.org> wrote:
> Matt-
>
> >The only issue I've found (so far) is that I need to put two <h:outputText/>
> >elements after a <h:panelGroup> when I have columns="3" on <h:panelGrid>.
>
> is there a special reason, why you need a *grid*, that renderes "ul" and "li" ?
> The issue is *really* the columns attribute...
The following post on my blog explains my issue pretty well:
http://raibledesigns.com/page/rd?entry=component_like_panelgrid_but_uses
>
> Perhaps I got not everything, but to me it looks like a new
> *behaivor*, so a new component(and a renderer) is needed?
Yes, it's certainly possible that a new component is a better
solution, but I'm always interested in the get-it-working solution
first. ;-)
Matt
>
> Regards,
> Matthias
>
Re: Component like panelGrid with ul and li
Posted by Matthias Wessendorf <ma...@apache.org>.
Matt-
>The only issue I've found (so far) is that I need to put two <h:outputText/>
>elements after a <h:panelGroup> when I have columns="3" on <h:panelGrid>.
is there a special reason, why you need a *grid*, that renderes "ul" and "li" ?
The issue is *really* the columns attribute...
Perhaps I got not everything, but to me it looks like a new
*behaivor*, so a new component(and a renderer) is needed?
Regards,
Matthias
Re: shared - impl or tomahawk [was: Re: Component like panelGrid with ul
Posted by Matthias Wessendorf <ma...@apache.org>.
Hey dude,
check this link
http://wiki.apache.org/myfaces/Shared_-_impl_or_tomahawk
On 6/26/06, John Ruffin <jr...@achfood.com> wrote:
>
> I want to create a horizontal list and have each surrounded by a commandLink.
> I thought I could do something like this:
>
> --- Piece from java class
> public SimpleNavItems(String displayValue, String goToText){
> this.displayValue = displayValue;
> this.goToText = goToText;
> }
>
> --- piece from backing bean - SearchForm
> public List getNavItems() {
> ArrayList l = new ArrayList();
> l.add(new SimpleNavItems("Home", "toHomePage"));
> l.add(new SimpleNavItems("Create new customer", "toCreateNewCustomer"));
> l.add(new SimpleNavItems("Find existing customer", "toFindCustomer"));
> return l;
> }
>
> --- piece from .faces
> <t:dataList
> value="#{searchForm.navItems}"
> var="navItem"
> id="horzNav" layout="grid">
>
> <t:commandLink
> immediate="true"
> action="#{navItem.goToText}">
> <h:outputText value="#{navItem.displayValue}"/>
> <t:commandLink>
>
> </t:dataList>
> </t:div>
>
> The list shows like I want but the commandLink doesn't work inside a table.
> Is Matt's solution a workaround for this? Tomahawk1.1.14.
> --
> View this message in context: http://www.nabble.com/Component-like-panelGrid-with-ul-and-li-t1668669.html#a5052296
> Sent from the MyFaces - Users forum at Nabble.com.
>
>
--
Matthias Wessendorf
Aechterhoek 18
48282 Emsdetten
blog: http://jroller.com/page/mwessendorf
mail: mwessendorf-at-gmail-dot-com
Re: shared - impl or tomahawk [was: Re: Component like panelGrid
with ul
Posted by John Ruffin <jr...@achfood.com>.
I want to create a horizontal list and have each surrounded by a commandLink.
I thought I could do something like this:
--- Piece from java class
public SimpleNavItems(String displayValue, String goToText){
this.displayValue = displayValue;
this.goToText = goToText;
}
--- piece from backing bean - SearchForm
public List getNavItems() {
ArrayList l = new ArrayList();
l.add(new SimpleNavItems("Home", "toHomePage"));
l.add(new SimpleNavItems("Create new customer", "toCreateNewCustomer"));
l.add(new SimpleNavItems("Find existing customer", "toFindCustomer"));
return l;
}
--- piece from .faces
<t:dataList
value="#{searchForm.navItems}"
var="navItem"
id="horzNav" layout="grid">
<t:commandLink
immediate="true"
action="#{navItem.goToText}">
<h:outputText value="#{navItem.displayValue}"/>
<t:commandLink>
</t:dataList>
</t:div>
The list shows like I want but the commandLink doesn't work inside a table.
Is Matt's solution a workaround for this? Tomahawk1.1.14.
--
View this message in context: http://www.nabble.com/Component-like-panelGrid-with-ul-and-li-t1668669.html#a5052296
Sent from the MyFaces - Users forum at Nabble.com.
Re: shared - impl or tomahawk [was: Re: Component like panelGrid with ul and li]
Posted by Matthias Wessendorf <ma...@apache.org>.
feel free to enhance it
http://wiki.apache.org/myfaces/Shared_-_impl_or_tomahawk
On 6/2/06, Mario Ivankovits <ma...@ops.co.at> wrote:
> Hey Matthias,
>
> you should put this excellent description somewhere in our wiki.
>
> Ciao,
> Mario
> > Matt-
> >
> > you are using name space "org.apache.myfaces.shared_impl.**;"
> >
> > I strongly recommend to use "org.apache.myfaces.shared_tomahawk.**;"
> >
> > The shared classes are *integrated* in tomahawk.jar and myfaces-impl.jar.
> > If you use shared_impl your Renderer depends on myfaces as your jsf
> > runtime.
> > By using "shared_tomahawk" namespace your Renderer *only* depends on
> > Tomahawk, which *should* run w/ RI.
> >
> > There is also a myfaces-shared-core.jar, which is the base of both
> > shared_XXX namespaces.
> > This JAR includes the "org.apache.myfaces.shared.*** namespace, but
> > there is no released version for it.
> >
> > -Matthias
>
>
--
Matthias Wessendorf
Aechterhoek 18
48282 Emsdetten
blog: http://jroller.com/page/mwessendorf
mail: mwessendorf-at-gmail-dot-com
shared - impl or tomahawk [was: Re: Component like panelGrid with
ul and li]
Posted by Mario Ivankovits <ma...@ops.co.at>.
Hey Matthias,
you should put this excellent description somewhere in our wiki.
Ciao,
Mario
> Matt-
>
> you are using name space "org.apache.myfaces.shared_impl.**;"
>
> I strongly recommend to use "org.apache.myfaces.shared_tomahawk.**;"
>
> The shared classes are *integrated* in tomahawk.jar and myfaces-impl.jar.
> If you use shared_impl your Renderer depends on myfaces as your jsf
> runtime.
> By using "shared_tomahawk" namespace your Renderer *only* depends on
> Tomahawk, which *should* run w/ RI.
>
> There is also a myfaces-shared-core.jar, which is the base of both
> shared_XXX namespaces.
> This JAR includes the "org.apache.myfaces.shared.*** namespace, but
> there is no released version for it.
>
> -Matthias
Re: Component like panelGrid with ul and li
Posted by Matthias Wessendorf <ma...@apache.org>.
Matt-
you are using name space "org.apache.myfaces.shared_impl.**;"
I strongly recommend to use "org.apache.myfaces.shared_tomahawk.**;"
The shared classes are *integrated* in tomahawk.jar and myfaces-impl.jar.
If you use shared_impl your Renderer depends on myfaces as your jsf runtime.
By using "shared_tomahawk" namespace your Renderer *only* depends on
Tomahawk, which *should* run w/ RI.
There is also a myfaces-shared-core.jar, which is the base of both
shared_XXX namespaces.
This JAR includes the "org.apache.myfaces.shared.*** namespace, but
there is no released version for it.
-Matthias
On 6/2/06, mraible <ma...@raibledesigns.com> wrote:
>
>
> mraible wrote:
> >
> > I've decided to try overriding panelGrid's renderer to get this
> > functionality. I'm assuming HtmlGridRendererBase.java
> > (http://tinyurl.com/oqbxh) is the correct class to override? Once I've
> > done this, how do I override it in my faces-config.xml file? I'm
> > overriding outputLabel with the following:
> >
> > <render-kit>
> > <description>Some replacements for the standard
> > renderers</description>
> > <renderer>
> > <description>Replacement renderer for h:outputLabel</description>
> > <component-family>javax.faces.Output</component-family>
> > <renderer-type>javax.faces.Label</renderer-type>
> >
> > <renderer-class>org.appfuse.webapp.jsf.LabelRenderer</renderer-class>
> > </renderer>
> >
> > Which component-family is panelGrid in? javax.faces.panel? And it's
> > render-type is javax.faces.Panel?
> >
> > Thanks,
> >
> > Matt
> >
>
> Here's the solution to this:
>
> <renderer>
> <description>Replacement renderer for h:panelGrid that uses
> lists instead of tables</description>
> <component-family>javax.faces.Panel</component-family>
> <renderer-type>javax.faces.Grid</renderer-type>
>
> <renderer-class>org.appfuse.webapp.jsf.PanelGridRenderer</renderer-class>
> </renderer>
>
> My PanelGridRenderer - that renders ul and li's - is as follows:
>
> package org.appfuse.webapp.jsf;
>
> import org.apache.commons.logging.Log;
> import org.apache.commons.logging.LogFactory;
> import org.apache.myfaces.shared_impl.renderkit.JSFAttr;
> import org.apache.myfaces.shared_impl.renderkit.RendererUtils;
> import org.apache.myfaces.shared_impl.renderkit.html.HTML;
> import org.apache.myfaces.shared_impl.renderkit.html.HtmlRenderer;
> import org.apache.myfaces.shared_impl.renderkit.html.HtmlRendererUtils;
> import org.apache.myfaces.shared_impl.util.StringUtils;
>
> import javax.faces.component.UIComponent;
> import javax.faces.component.UIPanel;
> import javax.faces.component.html.HtmlPanelGrid;
> import javax.faces.context.FacesContext;
> import javax.faces.context.ResponseWriter;
> import java.io.IOException;
> import java.util.Iterator;
>
> /**
> * Override HtmlGridRendererBase (http://tinyurl.com/oqbxh) so <h:panelGrid>
> spits out <ul> and <li>
> * instead of <table> and <tr><td>.
> *
> * @author Matt Raible
> */
> public class PanelGridRenderer extends HtmlRenderer {
> private static final Log log =
> LogFactory.getLog(PanelGridRenderer.class);
>
> public boolean getRendersChildren() {
> return true;
> }
>
> public void encodeBegin(FacesContext facesContext, UIComponent
> component)
> throws IOException {
> // all work done in encodeEnd()
> }
>
> public void encodeChildren(FacesContext context, UIComponent component)
> throws IOException {
> // all work done in encodeEnd()
> }
>
> public void encodeEnd(FacesContext facesContext, UIComponent component)
> throws IOException {
> RendererUtils.checkParamValidity(facesContext, component,
> UIPanel.class);
>
> int columns;
> if (component instanceof HtmlPanelGrid) {
> columns = ((HtmlPanelGrid) component).getColumns();
> } else {
> Integer i = (Integer)
> component.getAttributes().get(org.apache.myfaces.shared_impl.renderkit.JSFAttr.COLUMNS_ATTR);
> columns = i != null ? i.intValue() : 0;
> }
>
> if (columns <= 0) {
> if (log.isErrorEnabled()) {
> log.error("Wrong columns attribute for PanelGrid " +
> component.getClientId(facesContext) + ": " + columns);
> }
> columns = 1;
> }
>
> ResponseWriter writer = facesContext.getResponseWriter();
> writer.startElement(HTML.UL_ELEM, component);
> HtmlRendererUtils.writeIdIfNecessary(writer, component,
> facesContext);
> HtmlRendererUtils.renderHTMLAttributes(writer, component,
> HTML.UL_PASSTHROUGH_ATTRIBUTES);
>
> writer.flush();
>
> renderChildren(facesContext, writer, component, columns);
>
> writer.endElement(HTML.UL_ELEM);
> }
>
> protected void renderChildren(FacesContext context,
> ResponseWriter writer,
> UIComponent component,
> int columns)
> throws IOException {
>
> String rowClasses;
> if (component instanceof HtmlPanelGrid) {
> rowClasses = ((HtmlPanelGrid) component).getRowClasses();
> } else {
> rowClasses = (String)
> component.getAttributes().get(JSFAttr.ROW_CLASSES_ATTR);
> }
>
> String[] rowClassesArray = (rowClasses == null)
> ?
> org.apache.myfaces.shared_impl.util.ArrayUtils.EMPTY_STRING_ARRAY
> : StringUtils.trim(StringUtils.splitShortString(rowClasses,
> ','));
> int rowClassesCount = rowClassesArray.length;
>
> int childCount = getChildCount(component);
> if (childCount > 0) {
> int columnIndex = 0;
> int rowClassIndex = 0;
> boolean rowStarted = false;
> for (Iterator it = getChildren(component).iterator();
> it.hasNext();) {
> UIComponent child = (UIComponent) it.next();
> if (child.isRendered()) {
> if (columnIndex == 0) {
> //start of new/next row
> if (rowStarted) {
> //do we have to close the last row?
> writer.endElement(HTML.LI_ELEM);
>
> HtmlRendererUtils.writePrettyLineSeparator(context);
> }
> writer.startElement(HTML.LI_ELEM, component);
> if (rowClassIndex < rowClassesCount) {
> writer.writeAttribute(HTML.CLASS_ATTR,
> rowClassesArray[rowClassIndex], null);
> }
> rowStarted = true;
> rowClassIndex++;
> if (rowClassIndex == rowClassesCount) {
> rowClassIndex = 0;
> }
> }
>
> RendererUtils.renderChild(context, child);
>
> columnIndex++;
> if (columnIndex >= columns) {
> columnIndex = 0;
> }
> }
> }
>
> if (rowStarted) {
> writer.endElement(HTML.LI_ELEM);
> HtmlRendererUtils.writePrettyLineSeparator(context);
> }
> }
> }
> }
>
> The only issue I've found (so far) is that I need to put two <h:outputText/>
> elements after a <h:panelGroup> when I have columns="3" on <h:panelGrid>.
>
> Hope this helps anyone looking for a similar solution,
>
> Matt
>
> --
> View this message in context: http://www.nabble.com/Component-like-panelGrid-with-ul-and-li-t1668669.html#a4675691
> Sent from the MyFaces - Users forum at Nabble.com.
>
>
--
Matthias Wessendorf
Aechterhoek 18
48282 Emsdetten
blog: http://jroller.com/page/mwessendorf
mail: mwessendorf-at-gmail-dot-com
Re: Component like panelGrid with ul and li
Posted by mraible <ma...@raibledesigns.com>.
mraible wrote:
>
> I've decided to try overriding panelGrid's renderer to get this
> functionality. I'm assuming HtmlGridRendererBase.java
> (http://tinyurl.com/oqbxh) is the correct class to override? Once I've
> done this, how do I override it in my faces-config.xml file? I'm
> overriding outputLabel with the following:
>
> <render-kit>
> <description>Some replacements for the standard
> renderers</description>
> <renderer>
> <description>Replacement renderer for h:outputLabel</description>
> <component-family>javax.faces.Output</component-family>
> <renderer-type>javax.faces.Label</renderer-type>
>
> <renderer-class>org.appfuse.webapp.jsf.LabelRenderer</renderer-class>
> </renderer>
>
> Which component-family is panelGrid in? javax.faces.panel? And it's
> render-type is javax.faces.Panel?
>
> Thanks,
>
> Matt
>
Here's the solution to this:
<renderer>
<description>Replacement renderer for h:panelGrid that uses
lists instead of tables</description>
<component-family>javax.faces.Panel</component-family>
<renderer-type>javax.faces.Grid</renderer-type>
<renderer-class>org.appfuse.webapp.jsf.PanelGridRenderer</renderer-class>
</renderer>
My PanelGridRenderer - that renders ul and li's - is as follows:
package org.appfuse.webapp.jsf;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.apache.myfaces.shared_impl.renderkit.JSFAttr;
import org.apache.myfaces.shared_impl.renderkit.RendererUtils;
import org.apache.myfaces.shared_impl.renderkit.html.HTML;
import org.apache.myfaces.shared_impl.renderkit.html.HtmlRenderer;
import org.apache.myfaces.shared_impl.renderkit.html.HtmlRendererUtils;
import org.apache.myfaces.shared_impl.util.StringUtils;
import javax.faces.component.UIComponent;
import javax.faces.component.UIPanel;
import javax.faces.component.html.HtmlPanelGrid;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import java.io.IOException;
import java.util.Iterator;
/**
* Override HtmlGridRendererBase (http://tinyurl.com/oqbxh) so <h:panelGrid>
spits out <ul> and <li>
* instead of <table> and <tr><td>.
*
* @author Matt Raible
*/
public class PanelGridRenderer extends HtmlRenderer {
private static final Log log =
LogFactory.getLog(PanelGridRenderer.class);
public boolean getRendersChildren() {
return true;
}
public void encodeBegin(FacesContext facesContext, UIComponent
component)
throws IOException {
// all work done in encodeEnd()
}
public void encodeChildren(FacesContext context, UIComponent component)
throws IOException {
// all work done in encodeEnd()
}
public void encodeEnd(FacesContext facesContext, UIComponent component)
throws IOException {
RendererUtils.checkParamValidity(facesContext, component,
UIPanel.class);
int columns;
if (component instanceof HtmlPanelGrid) {
columns = ((HtmlPanelGrid) component).getColumns();
} else {
Integer i = (Integer)
component.getAttributes().get(org.apache.myfaces.shared_impl.renderkit.JSFAttr.COLUMNS_ATTR);
columns = i != null ? i.intValue() : 0;
}
if (columns <= 0) {
if (log.isErrorEnabled()) {
log.error("Wrong columns attribute for PanelGrid " +
component.getClientId(facesContext) + ": " + columns);
}
columns = 1;
}
ResponseWriter writer = facesContext.getResponseWriter();
writer.startElement(HTML.UL_ELEM, component);
HtmlRendererUtils.writeIdIfNecessary(writer, component,
facesContext);
HtmlRendererUtils.renderHTMLAttributes(writer, component,
HTML.UL_PASSTHROUGH_ATTRIBUTES);
writer.flush();
renderChildren(facesContext, writer, component, columns);
writer.endElement(HTML.UL_ELEM);
}
protected void renderChildren(FacesContext context,
ResponseWriter writer,
UIComponent component,
int columns)
throws IOException {
String rowClasses;
if (component instanceof HtmlPanelGrid) {
rowClasses = ((HtmlPanelGrid) component).getRowClasses();
} else {
rowClasses = (String)
component.getAttributes().get(JSFAttr.ROW_CLASSES_ATTR);
}
String[] rowClassesArray = (rowClasses == null)
?
org.apache.myfaces.shared_impl.util.ArrayUtils.EMPTY_STRING_ARRAY
: StringUtils.trim(StringUtils.splitShortString(rowClasses,
','));
int rowClassesCount = rowClassesArray.length;
int childCount = getChildCount(component);
if (childCount > 0) {
int columnIndex = 0;
int rowClassIndex = 0;
boolean rowStarted = false;
for (Iterator it = getChildren(component).iterator();
it.hasNext();) {
UIComponent child = (UIComponent) it.next();
if (child.isRendered()) {
if (columnIndex == 0) {
//start of new/next row
if (rowStarted) {
//do we have to close the last row?
writer.endElement(HTML.LI_ELEM);
HtmlRendererUtils.writePrettyLineSeparator(context);
}
writer.startElement(HTML.LI_ELEM, component);
if (rowClassIndex < rowClassesCount) {
writer.writeAttribute(HTML.CLASS_ATTR,
rowClassesArray[rowClassIndex], null);
}
rowStarted = true;
rowClassIndex++;
if (rowClassIndex == rowClassesCount) {
rowClassIndex = 0;
}
}
RendererUtils.renderChild(context, child);
columnIndex++;
if (columnIndex >= columns) {
columnIndex = 0;
}
}
}
if (rowStarted) {
writer.endElement(HTML.LI_ELEM);
HtmlRendererUtils.writePrettyLineSeparator(context);
}
}
}
}
The only issue I've found (so far) is that I need to put two <h:outputText/>
elements after a <h:panelGroup> when I have columns="3" on <h:panelGrid>.
Hope this helps anyone looking for a similar solution,
Matt
--
View this message in context: http://www.nabble.com/Component-like-panelGrid-with-ul-and-li-t1668669.html#a4675691
Sent from the MyFaces - Users forum at Nabble.com.
Re: Component like panelGrid with ul and li
Posted by mraible <ma...@raibledesigns.com>.
I've decided to try overriding panelGrid's renderer to get this
functionality. I'm assuming HtmlGridRendererBase.java
(http://tinyurl.com/oqbxh) is the correct class to override? Once I've done
this, how do I override it in my faces-config.xml file? I'm overriding
outputLabel with the following:
<render-kit>
<description>Some replacements for the standard
renderers</description>
<renderer>
<description>Replacement renderer for h:outputLabel</description>
<component-family>javax.faces.Output</component-family>
<renderer-type>javax.faces.Label</renderer-type>
<renderer-class>org.appfuse.webapp.jsf.LabelRenderer</renderer-class>
</renderer>
Which component-family is panelGrid in? javax.faces.panel? And it's
render-type is javax.faces.Panel?
Thanks,
Matt
--
View this message in context: http://www.nabble.com/Component-like-panelGrid-with-ul-and-li-t1668669.html#a4671910
Sent from the MyFaces - Users forum at Nabble.com.
Re: Component like panelGrid with ul and li
Posted by "mraible@virtuas" <mr...@virtuas.com>.
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.
Re: Component like panelGrid with ul and li
Posted by Rafael Nami <ra...@gmail.com>.
I'm pretty sure that you can do it with <t:dataList>.
You can see it running in http://myfaces.apache.org/tomahawk/dataList.html
Cheers Matt, keep up the excellent work
Rafael Mauricio Nami
2006/5/23, Matt Raible <mr...@gmail.com>:
>
> Does anyone know if there's a panelGrid available that spits out
> <ul><li> instead of <table><td>?
>
> I'm looking to convert to prettier forms that put a label on top of a
> field and not using a panelGrid with JSP results in components not
> knowing about each other the first time (the good ol' JSF 1.1 + JSP
> problem).
>
> Here's an example of the form I'd like to create:
>
> http://dev.appfuse.org/appfuse/signup.html
>
> Thanks,
>
> Matt
>