How to properly use <ui:repeat>

I am having an issue using <ui:repeat> in a JSF page. I have an arrayList that I am passing to it, however, it never iterates through to display the contents.

I know that there is content because when I do the exact same thing using a <h:datatable>, it displays the contents. So if someone could explain to me why this does not work using <ui:repeat> but does using <h:datatable>, that would be great.

Here is the <h:datatable> code:

<h:dataTable value="#{proposalAction.proposal.proposalCountries}" var="pc" rendered="#{proposalAction.proposal.proposalCountries !=null and proposalAction.proposal.proposalCountries.size() > 0}">
    <h:column>
        <img src="/resources/images/flags/#{utils.getValidCountryFlagDisplayCode(pc.country)}.png" title="#{pc.country.getDisplayName(localeSelector.locale)}" alt="#{pc.country.getDisplayName(localeSelector.locale)}" width="20" />      
        &#160;
        <h:outputText value="#{pc.country.getDisplayName(localeSelector.locale)}" />
    </h:column>
</h:dataTable>

And here is the code using the <ui:repeat> code:

<ul>
    <ui:repeat items="#{proposalAction.proposal.proposalCountries}" var="pc" rendered="#{proposalAction.proposal.proposalCountries !=null and proposalAction.proposal.proposalCountries.size() > 0}">
        <li>
            <img src="/resources/images/flags/#{utils.getValidCountryFlagDisplayCode(pc.country)}.png" title="#{pc.country.getDisplayName(localeSelector.locale)}" alt="#{pc.country.getDisplayName(localeSelector.locale)}" width="20" />      
            &#160;<h:outputText value="#{pc.country.getDisplayName(localeSelector.locale)}" />
        </li>
    </ui:repeat>
</ul>

As you can see, they are identical. The datatable displays the countries, and yet the repeater doesn't display anything within the <ul> ... I am at a loss... please help!

Solution

If you have proper getters and setters then try using #{pc.country.displayName} as a value to your h:outputText tag. ui:repeat does not have items attribute, so use value instead. I am assuming displayName is a property of Country of your main list. And you can write your specific Locale logic inside getter.

This should work:

<ul>
    <ui:repeat value="#{proposalAction.proposal.proposalCountries}" var="pc" rendered="#{proposalAction.proposal.proposalCountries !=null and proposalAction.proposal.proposalCountries.size() > 0}">
        <li>
            <h:outputText value="#{pc.country.displayName}" />
        </li>
    </ui:repeat>
</ul>

Make such adjustments to your img tag too. You should also put the logic for rendered in backend bean and use single boolean here on UI. such as redered="#{displayCountries}.