Initially I thought there were two approaches: using JSTL choose/when tags and using JSF rendered attribute.
However, I found that the first approach didn't work.
I wrote the following code and found that the 'otherwise' branch was always evaluated.
<c:choose>
<c:when test="${status == 1}">
<p:graphicImage value="green.png" />
</c:when>
<c:when test="${status == 2}">
<p:graphicImage value="red.png" />
</c:when>
<c:otherwise>
<p:graphicImage value="blue.png" />
</c:otherwise>
</c:choose>
Later I discovered explain to this issue at:
http://stackoverflow.com/questions/7437882/jstl-cchoose-cwhen-not-working-in-a-jsf-page, and
http://stackoverflow.com/questions/4870462/conditionally-displaying-jsf-components.
Simply speaking, JSTL tages are evaluated prior to JSF components processing.
So the second approach became the only choice.
<p:graphicImage value="green.png" rendered="#{status == 1}/>
<p:graphicImage value="red.png" rendered="#{status == 2}/>
<p:graphicImage value="blue.png" rendered="#{status != 1 and status != 2}/>
The above is the second approach.
However, this approach also has an issue.
I have a background appliation which sends status update at a certain interval. Upon receiving an update, the frontend application should update the web page.
So first I tried to add an ID to the graphicImage components in order to update one of them based on their id.
<p:graphicImage id="statusImage" value="green.png" rendered="#{status == 1}/>
<p:graphicImage id="statusImage" value="red.png" rendered="#{status == 2}/>
<p:graphicImage id="statusImage" value="blue.png" rendered="#{status != 1 and status != 2}/>
But JSF complained about duplicated IDs.
Finally I found a solution which was to use JQuery selector:
function updateStatusImage(status)
{
var image;
if (status == 1) image = 'green.png';
else if (status == 2) image = 'red.png';
else image = 'blue.png';
$('#form img').attr('src', image);
}
Check more details
here.
