How to make a clickable image which invokes an action with parameters

Question

I want to have a clickable image which sends two parameters to my action on click. I tried the following with <h:graphicImage>.

<h:graphicImage url="/pic/down.png" alt="download">
    <h:outputLink action="#{file.download}">
        <f:param name="id" value="#{file.id}"></f:param>
        <f:param name="name" value="#{file.name}"></f:param>
    </h:outputLink>
</h:graphicImage> 

However, it didn't work. How do I properly achieve this?

Answer 1

It's easier if you know basic HTML. A clickable picture in plain HTML look like this:

<a href="..."><img src="..." /></a>

However, what your JSF code is generating is this (rightclick, View Source in browser to see it):

<img src="..."><a href=" ..." /></img>

This is invalid HTML. You need to swap them.

Further, I'm not sure if this is result of carelessly fiddling/shooting-in-the-dark, but the action attribute is not supported in <h:outputLink>. You perhaps intented to use <h:commandLink>.

So, all with all, this should do:

<h:commandLink action="#{file.download}"> 
    <h:graphicImage value="/pic/down.png" alt="download" />
    <f:param name="id" value="#{file.id}" />
    <f:param name="name" value="#{file.name}" />
</h:commandLink>

(make sure that this is placed in <h:form>)

I'm however unsure how it makes sense to pass properties of #{file} back to apparently the very same #{file} instance as where you're invoking the action. You may as well just omit those <f:param> things and access the properties directly in the action method.

<h:commandLink action="#{file.download}"> 
    <h:graphicImage value="/pic/down.png" alt="download" />
</h:commandLink>