JSF: conditionally render a list item (<li>)

Question

I just inherited a project implemented in JSF. I have the following code which looks fine in Chrome, but Firefox renders the borders on the "empty" list items:

<ul>
    <li><a href="/home">Home</li>
    <li>
        <s:link view="/signup.xhtml" rendered="#{someCondition}">Sign Up</s:link>
    </li>
    <!-- etc... -->
</ul>

Which ends up looking like:

Is there a JSF tag to conditionally render the <li> ?

Answer 1

If you do it as in @CoolBeans example, you will get a <span> around your <li>. In some cases it might disrupt your layout, besides you don't really want an extra tag under <ul>. To get rid of it, use <ui:fragment rendered="#{condition}" /> around your item instead of <h:panelGroup>.

Also you can use style attribute to hide an item:

<li style="display: #{condition ? 'list-item' : 'none'};" />

Answer 2

No li is vanilla html, not a jsf component.

You can hack it by putting a <h:panelGroup /> around the li element and setting the rendered property on it.

ie.

 <h:panelGroup rendered="#{someCondition}">
   <li>
      <s:link view="/signup.xhtml">Sign Up</s:link>
   </li>
 </h:panelGroup>

Another option is to use <f:verbatim rendered="#{someCondition}" >, but keep in mind that it has been deprecated in JSF 2.0.

Answer 3

You could also use the core JSTL library:

<c:if test="#{someCondition}">
    <li>
        <s:link view="/signup.xhtml">Sign Up</s:link>
    </li>
</c:if>

I think using this core tag makes the code easier to understand than using the panelGroup tag.