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)