Refactoring links and images

Question

I need to write a link with an image inside. Instead of explaining, here is the code that I have now:

<c:if test="${userSession.loggedUser eq null and company.image != null}"> <a onclick="${rich:component('loginPanel')}.show()"> <img src="/download.do?hash=#{company.image.hash}" /> </a> </c:if> <c:if test="${userSession.loggedUser eq null and company.image == null}"> <a onclick="${rich:component('loginPanel')}.show()"> <img src="${request.contextPath}/img/icons/logo_default.jpg" /> </a> </c:if> <c:if test="${userSession.loggedUser ne null and company.image != null}"> <a href="company.xhtml?${company.name}"> <img src="/download.do?hash=#{company.image.hash}" /> </a> </c:if> <c:if test="#{userSession.loggedUser ne null and company.image == null}"> <a href="company.xhtml?${company.name}"> <img src="${request.contextPath}/img/icons/logo_default.jpg" /> </a> </c:if> 

This code looks awful - there are two exact links with two exact images, but are combined in all possible combinations. Is there a better way? Is there a way to avoid c: if - did he create the tables?

Update : Bojo suggests: You can replace <c:if and <a with <h:outputLink rendered="#{..}" . In addition, I do not see any other optimization.

But that will not work. This does not display correctly:

 <a href=> <h:outputLink rendered="#{..} <h:outputLink rendered="#{..} </a> 

(image is out of bounds)

It does a fine:

 <h:outputLink value=> <h:outputLink rendered="#{..} <h:outputLink rendered="#{..} </a> 

but it always adds href, and in two cases I don't want href when rendering.

Update2 : I also combined them 2 to 2:

 <c:if> <a href...> <c:if><img...></c:if> <c:if><img...></c:if> </a> </c:if> <c:if> <a onclick...> <c:if><img...></c:if> <c:if><img...></c:if> </a> </c:if> 

It also doesn't display correctly - <a does not surround images for some crazy reason.

Answer 1

How about this?

 <c:set var="isLoggedIn" value="#{userSession.loggedUser != null}" /> <c:set var="showPage" value="company.xhtml?#{company.name}" /> <c:set var="showLogin" value="javascript:${rich:component('loginPanel')}.show()" /> <c:set var="hasImage" value="#{company.image != null}" /> <c:set var="companyImage" value="/download.do?hash=#{company.image.hash}" /> <c:set var="defaultImage" value="#{request.contextPath}/img/icons/logo_default.jpg" /> <a href="#{isLoggedIn ? showPage : showLogin}"> <img src="#{hasImage ? companyImage : defaultImage}" /> </a> 

This can be shortened as follows (it will be a little more unpleasant to read / interpret quickly):

 <c:set var="showPage" value="company.xhtml?#{company.name}" /> <c:set var="companyImage" value="/download.do?hash=#{company.image.hash}" /> <c:set var="defaultImage" value="#{request.contextPath}/img/icons/logo_default.jpg" /> <a href="#{userSession.loggedUser != null ? showPage : 'javascript:${rich:component(\'loginPanel\')}.show()'}"> <img src="#{company.image != null ? companyImage : defaultImage}" /> </a> 

Answer 2

You can replace <c:if and <a with <h:outputLink rendered="#{..}" .
Or <c:if with <h:panelGroup rendered="#{..}"> (for the sake of more jsf-ish)

To reduce duplication, you can create a separate page:

 <h:panelGroup rendered="#{condition}"> <a onclick="${rich:component('loginPanel')}.show()"> <img src="#{imgSrc}" /> </a> </h:panelGroup> 

and then <ui:include> with the correct <ui:param> . the switch between onclick / href can be performed by another parameter and conditionally display one of the <a tags.

Answer 3

You want to create a link, depends on 3 parameters: test, href and src. You can create your own tag.

edited: Or the following solution: you may notice that it will always generate only one link, so I would change if I switch and do something like this:

 <c:set var="loggedUser" value="${userSession.loggedUser eq null}" /> <c:set var="isCompanyImage" value="${company.image != null}" /> <c:choose> <c:when test="${loggedUser && isCompanyImage}"> <c:set var="aPart">onclick="${rich:component('loginPanel')}.show()"</c:set> <c:set var="imgPart">/download.do?hash=#{company.image.hash}</c:set> </c:when> ... </c:choose> <a ${aPart}><img src="${imgPart}" /></a> 

Answer 4

I have done this:

 <c:set var="companyImage" value="/download.do..." /> <c:set var="defaultImage" value="logo_default.jpg" /> <c:if test="${userSession.loggedUser == null}"> <a onclick="${rich:component('loginPanel')}.show()"> <img src="#{company.image != null ? companyImage : defaultImage}" alt="logo" width="84" height="42" class="th_user" /> </a> </c:if> <c:if test="${userSession.loggedUser != null}"> <a href="companyUrl.jsf"> <img src="#{company.image != null ? companyImage : defaultImage}" alt="logo" width="84" height="42" class="th_user" /> </a> </c:if> 

This is ugly because the image is still present twice with all its attributes, but I spent too much time on it. If anyone thinks of something better, please share.

Answer 5

You have already tried:

 <h:link value="#{}" onclick="..." rendered="#{not empty sessionScope.loggedUser and not empty company.image}"> <h:graphicImage value="#{requestScope.contextPath}/img/icons/logo_default.jpg" /> <f:param name="company" value="#{company.name}" /> </h:link> 

What I'm trying to show you is tags and tags. Just play with it :) It should be good to solve your problem.