aspose file tools*
The moose likes JSF and the fly likes Starting with JSF 2.0 - Image rollovers Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Java » JSF
Bookmark "Starting with JSF 2.0 - Image rollovers" Watch "Starting with JSF 2.0 - Image rollovers" New topic
Author

Starting with JSF 2.0 - Image rollovers

Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 154
Well, now, here is a new question. I've done quite a lot with image rollovers before with JavaScript, which is pretty standard, but now I want to do the same with JSF 2.0 and Ajax without using JavaScript.

Basically I have a row of 7 images that I want to rollover, i.e. to go negative when the mouse is passed over each of them, and turn back to positive when the mouse is not on an image, and the images contain external links you can go to when you click on them. All this works in JavaScript, but I'm having trouble doing the same in Ajax. I've triede this with the first image and it doesn't work, the image just continues to be displayed normally when I pass the mouse over it, but I can see that the actions are fired by writing temporary output to the server in the methods called.

Here is a sample of my html code:

And here is the Java class:

So far I have only tried to do this with the first image, with the other images not linked to any Ajax actions.

This must be a simple problem to solve, and if can be solved, perhaps there is a way to do the same with all 7 images without having to write a getter for each one.

Does anyone have an idea how to fix this problem?

Many thanks for any advice.
Volodymyr Levytskyi
Ranch Hand

Joined: Mar 29, 2012
Posts: 505
    
    1

Hello!

I don't know a lot concerning your question, but...
Tim Holloway wrote me this about request-scoped beans:
At a guess, a fourth one is that you're probably using a request-scope backing bean (I didn't check this, but people often do). Request scope in JSF is almost completely useless. Because JSF does postbacks and request-scope objects are created and destroyed on each postback operation, critical data gets destroyed as well.


True person is moral, false is right!
Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 154
In fact I just changed request-scope to session-scope and it makes no difference. I have temporary print statements in the mouseOver(0 and moueOff() actions, and they fire correctly. As confirmation I also put a print statement in the getter to print out the boolean value of mouseOn1. That also works, the getter is called with the correct value of mouseOn1, but for some reason the page is not updated. If I replace "return mouseOn1;" in getMouseOn1() by "return true;" then the image is always displayed as a negative, so that is correct.

For some reason the value returned by the getter is not rendered to the page, and a negative version of the image is not displayed.
Volodymyr Levytskyi
Ranch Hand

Joined: Mar 29, 2012
Posts: 505
    
    1

Hello!

Change this

to this:
<f:ajax event="mouseover" render="image1_neg image1" listener="#{image.mouseOver}"/>
<f:ajax event="mouseout" render="image1 image1_neg" listener="#{image.mouseOff}"/>
Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 154
I just tried that, both with session-scoped and request-scoped bean, but it still doen't work.
Volodymyr Levytskyi
Ranch Hand

Joined: Mar 29, 2012
Posts: 505
    
    1

It is told NEVER use request-scoped bean, because it is destroyed when server renders response(postback) at the same request

I don't know why it doesn't work maybe you should try this. Looking up component by id without id of form is very diffcult
<f:ajax event="mouseover" render="images:image1_neg images:image1" listener="#{image.mouseOver}"/>
<f:ajax event="mouseout" render="images:image1 images:image1_neg" listener="#{image.mouseOff}"/>
This is my last hope, probably.
Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 154
Nope - that doesn't work either, and I'm using a session-scopes bean.
Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 154
OK, another day and another try, this time with partial success.

Based on earlier advice I got on using styles, this is now what I have in the xhtml file:

And my bean has this:

This partially works, but the action keeps firing when my mouse is on the image, so this has to be fixed, as well as a convenient way of handling all images without having to have separate actions for each one.

Anyway, some progess has been made and further advice would be much appreciated.
Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 154
OK, I think I have solved this now, and am posting the code for the interst of all. Any comments are most welcomed.

The code in the logorow.xhtml is as follows:

Of course you can have any number of images, I just have 7 here.

The bean is as follows:

The problem I had was that the mouseOver() action kept firing whilst the mouse was hovering over an image, so getMouseOn() returns true when the mouse is first moved over an image, which disables further mouseon actions using <f:ajax event="mouseout" render="image0" listener="#{image.mouseOff}"/>, and likewise for the other images, until the mouse is moved off an image, then that action is re-enabled.

As the bean does not need to be preserved when moving to other pages, I set it as ViewScoped. If the user clicks on an image he goes to an external URL and the bean is also lost.
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16070
    
  21

I'm afraid that I cannot do that much code justice by doing a casual read off the screen, but I did feel obliged to mention that common practice for rollovers is to upload both images to the client and let javascript show/hide the images.

Using AJAX is good if the images aren't constant, but the extra delays it takes for the client to go back to the server for a new image can be annoying to the user, especially since vatying network loads can cause the process to be jerky.


Customer surveys are for companies who didn't pay proper attention to begin with.
Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 154
Thanks for your tip, and your point is taken, but I wanted to see if this could be done with Ajax, which it can. As this is running on localhost, network delays will not show up.

I have just started looking at PrimeFaces, and do not yet know if it generates client side JavaScript, or how it interacts with JavaScript.
 
Consider Paul's rocket mass heater.
 
subject: Starting with JSF 2.0 - Image rollovers