• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Starting with JSF 2.0 - Image rollovers

 
Ranch Hand
Posts: 159
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Ranch Hand
Posts: 514
1
Eclipse IDE Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.

 
Christopher Sharp
Ranch Hand
Posts: 159
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Bin Smith
Ranch Hand
Posts: 514
1
Eclipse IDE Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 159
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I just tried that, both with session-scoped and request-scoped bean, but it still doen't work.
 
Bin Smith
Ranch Hand
Posts: 514
1
Eclipse IDE Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 159
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Nope - that doesn't work either, and I'm using a session-scopes bean.
 
Christopher Sharp
Ranch Hand
Posts: 159
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 159
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Saloon Keeper
Posts: 27763
196
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Christopher Sharp
Ranch Hand
Posts: 159
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
reply
    Bookmark Topic Watch Topic
  • New Topic