JSP to Facelets equivalent for database provided URL linking in loop - jsf-2

Question

I'm porting the servlet/jsp Netbeans' Affableben tutorial to JSF Framework, and want to use Facelets for the view.
I already have the JPA entities, the session beans and the managed beans. I'm starting with the View. However, I have not found the equivalent in Facelets to work around this line:
<a href="<c:url value='category?${category.id}'/>">
This is the full loop, both in jsp and facelets:
JSP code:
<c:forEach var="category" items="${categories}">
<div class="categoryBox">
<a href="<c:url value='category?${category.id}'/>">
<span class="categoryLabel"></span>
<span class="categoryLabelText"><fmt:message key='${category.name}'/></span>
<img src="${initParam.categoryImagePath}${category.name}.jpg"
alt="<fmt:message key='${category.name}'/>" class="categoryImage">
</a>
</div>
</c:forEach>
Equivalent Facelets code:
<ui:repeat var="category" value="${categoryController.items}">
<div class="categoryBox">
<h:link outcome="${category.id}"/>
<span class="categoryLabel"></span>
<span class="categoryLabelText">${category.name}</span>
<img src="./resources/img/categories/${category.name}.jpg"
alt="${category.name}" class="categoryImage"/>
</div>
</ui:repeat>
This line is not working in Facelets as expected:
<h:link outcome="${category.id}"/>
What would be a working equivalent in Facelets?
EDIT 1
public String getName() throws UnsupportedEncodingException {
return URLEncoder.encode(name, "UTF-8");
}
Warning message: Unable to find resource img/categories/fruit+%26+veg.jpg

Answer 1

The <h:link> utilizes JSF implicit navigation and requires a real (implicit) navigation outcome value. You need to specify the view ID in the outcome. You need to specify request parameters by <f:param>. You also need to nest the spans and the image in the link as you did in your initial example. Assuming that you have a category.xhtml file in the root, this should do:
<h:link outcome="category">
<f:param name="id" value="#{category.id}" />
<span class="categoryLabel"></span>
<span class="categoryLabelText">#{category.name}</span>
<img src="./resources/img/categories/#{category.name}.jpg"
alt="#{category.name}" class="categoryImage"/>
</h:link>
Unrelated to the concrete question, you should be using <h:graphicImage> instead of <img> as well. This way JSF will ensure that the src is properly set. In your particular case that would be
<h:graphicImage name="img/categories/#{category.name}.jpg"
alt="#{category.name}" class="categoryImage"/>
(note that I replaced ${} by #{}, just to adhere the standard and for the consistency)

Answer 2

You can change from this line:
<a href="<c:url value='category?${category.id}'/>">
to this:
<h:link outcome="category.xhtml?id=#{category.id}" />
<h:link outcome="category">
<f:param name="id" value="#{category.id}" />
</h:link>
<h:outputLink value="category.xhtml?id=#{category.id}" ></h:outputLink>