wood burning stoves 2.0*
The moose likes JSF and the fly likes Starting with JSF 2.0 - JavaScript 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 - JavaScript" Watch "Starting with JSF 2.0 - JavaScript" New topic
Author

Starting with JSF 2.0 - JavaScript

Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 155
Following Tim Holloway's advice, I ditched the application that uses Ajax for rollover effects, although I've saved it for later reference, and now I'm trying to use JavaScript for rollover effects.

In an older application when JSF 1.2 was used, I used raw HTML for the table of images and its components as follows:

and the rollover effects in JavaSCript work perfectly correctly.

However, in trying to do it with JSF 2.0 using proper "h" tags, it will not work. I have the following code:

Not only does the JavaScript not work, in the HTML source the onMouseover etc. are not rendered. I the put the JavaScript file in the path resources/js/ in my Eclipse project, and it is rendered correctly.

Here is the output HTML source:

I don't know why the code in the <td> tag doesn't show up in the code view when I paste it in, but it is standard <a href={link}> scr={image} height="85"/>, but with the JavaScript removed.

Some ideas on this would be most welcomed.
Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 155
In the last listing the line with <td> <!-- Next image etc. --> should of course end with the </td> closing tag. That is rendered in HTML, I just badly copied and pasted it.
Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 155
I've made a couple of small change to the project and the code. I put the images in the folder /resources/img below WEB-INF in conformity with the conventions used in JSF 2.x, and changed the code for the first image to:

and likewise for the other images.

The images are displayed correctly and the generated HTML output comes out correct. The problem I have is where to insert the JavaScript code onMouseover="mouseOn('cral')" onMouseout="mouseOff('cral')" so that it is correctly rendered in the generated HTML, and will thus be executed.

Any ideas?
Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 155
OK, I discovered that "onmouseover" and "onmouseout" must have all lower case letters, unlike in raw HTML, otherwise they are not rendered by JSF. Now they are rendered, and I put in an id in the <h:graphicImage> tag, so the rendered HTML code now looks very similar to the HTML code in the original application.

Here is the changed code:

However, the application still does not work. My JavaScript code is here:
Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 155
Well, gosh, I had forgotten to include the JavaScript file that caches the images, so no wonder it didn't work!

The two JavaScript files are as follows:

For the first image and its negative in logos.js we have:

and again rollover.js is:

The xhtml file is now:

and when I place the mouse over an image, it disappears, which is at least something, but it doesn't rollover to a negative, then restores when the mouse is moved away. So some progress has been made.

However, in the original HTML code the image attribute of name="cral" is used, which the JavaScript uses. However, the name attribute is not allowed with JSF, so instead I used id="cral", which is rendered in HTML. I also get the following warning message on the server log:

WARNING: JSF1091: No mime type could be found for file cral. To resolve this, add a mime-type mapping to the applications web.xml.

So far nothing has been added to either faces-config.xml or web.xml. Exactly what should I do?

As an alterentive I added an <f:param> tag as foolows:

but although the images are displayed correctly, no rollover effects occur, but on the other hand no errors are reported. Also the name tage is no rendered in the HTML.

So exactly what do I do? I think I'm on the right path, but there are still some problems.
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16305
    
  21

The JSF View Definition Language (also know as View Template Language, also referred to as ".xhtml") is an XML format. XML is case-sensitive, and the convention Sun took when applying it to JSF javascript attributes is that their names are all lower-case.

I think you may have better luck on your rollovers if you try something like this:


Plus:


The "showMe" function I coded is kind of bogus, because I can't remember the exact details of the find Element by ID function and, in any event, I wouldn't be using it directly myself, since I have 2 different alternative methods (RichFaces find element or jQuery) which are a bit easier to work with.


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

Joined: Dec 12, 2007
Posts: 155
OK, many thanks, this is now what I have:

which so far I've only done for the first image.

The JavaScript is in fact getElementById(), as far as I know in this case. I also noticed that the first argument in your JavaScript function doesn't match it's value inside, so I fixed that. Additionally I included a style declaration in the head and removed the link to the now redundant rollowover code in rollover.js.

However, this still doesn't work, although all the images are shown and no errors are flagged. I've only made the changes for the first image, and won't change the others until I get the first working.
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16305
    
  21

The panelGrid control is a JSF Naming Container. Since you didn't provide an ID, one will be generated for you. Since that ID is unpredictable, I made up a known ID. so the proper coding for the panelGrid element is:


Remember: JSF IDs are usually not the same as their underlying HTML IDs, and both CSS and JavaScript use the HTML IDs, not the JSF IDs. So the getElementById will fail if you don't provide the fully-qualified (HTML) ID.

I placed the graphicImage elements outside of the table display in a hidden area of the page because otherwise they tend to get caught up in the layout computations when the actual display area is changed. Since only the image data is used in my example, there's no necessity of keeping the image data objects physically near the displayed image object.
Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 155
OK, many thanks, that is most helpful advice, and I forgot that the IDs produced by JSF don't correspond to the HTML one, so you have to declare IDs.

Here is now my code:

where I have placed the hidden images outside the table. However, this still does nothing. The images are displayed correctly but nothing happens.

Of course "hideMe" can be replaced by the inline style of display:none.
Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 155
Getting back to the problem of image swapping, I decided to put together a straight HTML version before converting it to JSF, and the code here is a modification of some code I found online, which uses classes to swap images.

The HTML is very simple and just contains a table of the default images corresponding to onmouseout, with their links, and each image is tagged with the same class name, which in this case is "rollover", and also tagged by an id, which is the root of the image name, followed by "~" and three letters, which must be one of "g", "j", or "p", corresponding to the ".gif", ".jpg" and ".png" image extensions, respectively. The first letter corresponds to the default mouseout image, the second to the onmouse over image, and the third to the mousedown image, which at the moment is the same as the onmouseout image. The idea is that images don't have to be the same type to be swapped, which is the case I have.

I put in two non-displayed <span></span> tags sets. One specifies the path where the images are, and must correspond to the image path in the src attributes, or empty if the images are in the same folder as the HTML file, and the other one is the same as the class, given for all files.

Here is the HTML code:

I had to comment out the table, otherwise somehow it gets messed up here. In the real code it's not commented out.

And here is the JavaScript code:

Now the challenge is to convert all this to JSF 2.0

Any takers?
Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 155
OK, as far as I can see, this problem has now been completely solved. However, JSF objected to me using "~" and a number of other symbols in the separator used in the ids, and the only symbol I found that I can use is "-", so just have to make sure it's not used in the filenames.

The HTML code for one of the images is:

and now works properly with JSF, after I have modified the JavaScript changing "~" to "-", and otherwise have made no other changes to it.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Starting with JSF 2.0 - JavaScript