Need a rollover effect when UIComponent is disabled and vice versa

[Jakim Rachev]

Hello Friends,

I have the following situation, I need to change the background image (or src url of a <img> that is enclosed within s:link)of a s:link, when its property "Disabled" is true and vice versa. Is there a way to do it elegantly with JSF 1.2, without using a script language such as Java Script:
Here is a little snippet of my code:

  
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:s="http://jboss.com/products/seam/taglib"
      xmlns:ui="http://java.sun.com/jsf/facelets">
	<table>
	<tr>
		<td align="center">
			<s:link action="${bean.goToFirstPage}" disabled="${bean.getPage()==0}">
				<img src="img/FirstPage.gif" />
			</s:link>
            <s:link action="${bean.goToPreviousPage}"  disabled="${bean.getPage()==0}">
            	<img src="img/PreviousPage.gif" />
            </s:link>
            <s:link action="${bean.goToNextPage}" 
            		disabled="${!bean.isNextPageAvailable()}"
            		on>
            	<img src="img/NextPage.gif" />
            </s:link>
            <s:link action="${bean.goToLastPage}" disabled="${!bean.isNextPageAvailable()}">
            	<img src="img/LastPage.gif" />
            </s:link>
         </td>
     </tr>
</table>
</ui:composition>  

So I want to change the images when switching between s:link disabled states.

Thank you in advanced.

[Tim Holloway]

Your expressions aren't the normal EL for JavaScript. I don't know if that's because you're using some other expression process or if you just don't understand JSF's use of the Unified Expression Language.

Here's an example of a link whose background image can be made to vary (using standard EL):

             <s:link action="#{bean.goToFirstPage}" disabled="#{bean.pageNumber==0}">  
                 <h:graphicImage id="image"   alt="Go to First Page"   url="#{bean.firstPageImage}"/>
             </s:link> 

You can also use a variable styleClass on the link itself. The Image URL property can be set to something like "/images/FirstPageEnabled.jpg and /images/FirstPageDisabled.jpg or whatever you're using.

Incidentally, when doing paging, I normally define discrete methods for the boundaries - isFirstPage(), isLastPage() and so forth. It allows me to keep the amount of logic on the JSF view itself to a minimum.

Of course, since most of the extended JSF tagsets already have a paging control available out of the box, I haven't written any lately. It's easier to use one that's pre-debugged and ready.

[Jakim Rachev]

Hi Tim,

Thanks for the replay. I'm pretty new with JSF. I for the Java script EL that is what I'm trying to avoid. I don't want to use java script in my project. And for the styleClass property method i got stuck because there is not such event that rices whenever a link is disabled ( no onDisabled). But Actually I solve the problem very easy:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:s="http://jboss.com/products/seam/taglib"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
	<table>
	<tr>
		<td align="center">
			<s:link action="${bean.goToFirstPage}" disabled="${bean.getPage()==0}">
            	<h:graphicImage value="img/FirstPage.gif" rendered="${bean.getPage()!=0}" />
            	<h:graphicImage value="img/FirstPage_Disabled.gif" rendered="${bean.getPage()==0}" />
			</s:link>
            <s:link action="${bean.goToPreviousPage}"  disabled="${bean.getPage()==0}">
            	<h:graphicImage value="img/PreviousPage.gif" rendered="${bean.getPage()!=0}" />
            	<h:graphicImage value="img/PreviousPage_Disabled.gif" rendered="${bean.getPage()==0}" />
            </s:link>
            <s:link action="${bean.goToNextPage}" disabled="${!bean.isNextPageAvailable()}">
            	<h:graphicImage value="img/NextPage.gif" rendered="${bean.isNextPageAvailable()}" />
            	<h:graphicImage value="img/NextPage_Disabled.gif" rendered="${!bean.isNextPageAvailable()}" />
            </s:link>
            <s:link action="${bean.goToLastPage}" disabled="${!bean.isNextPageAvailable()}">
            	<h:graphicImage value="img/LastPage.gif" rendered="${bean.isNextPageAvailable()}" />
            	<h:graphicImage value="img/LastPage_Disabled.gif" rendered="${!bean.isNextPageAvailable()}" />
            </s:link>
         </td>
     </tr>
</table>
</ui:composition>

I don't know if this way is the right way, but for now it works.

[Tim Holloway]

JavaScript is not EL. EL runs on the server. JavaScript runs on the client. They are 2 different languages, with only superficial syntactical similarities. There is zero benefit - or more accurately, negative benefit - to avoiding EL in JSF. It's an integral part of JSF, and in modern-day J2EE servers the support is built into the appserver itself, even for minimalist servers like Tomcat.

Also, there's a BIG difference between the "$" EL dereferencing operator and the "#" EL dereferencing operator. "$" is rarely used in JSF because of that.

[Jakim Rachev]

Yes I know that Java Script is client side script language, and i know its concepts. How ever it seems that I need to read some more info about JSF EL. Thanks Tim.