This may seem a bit basic for some of the Java Studio Creator developers out there, however I come to the IDE with much more knowledge of the client-side scripting then I do with a core Java background. I wanted to be able to take advantage of the “JavaScript” propertysheet in the IDE to make my pages a little more smooth with mouseovers and such. However, once I started looking at how to do this, I ran into all kinds of problems. It took me quite some time to find all of the answers, but I eventually did, so I thought I would put them down in writing so others may be able to take advantage of my trials.

The Project

This is a simple pull-down list that, when changed, automatically changes the image above it to reflect what was selected.

To get started, I dragged a dropdown object and an image object onto the page and placed them as shown above. I place a few small images into the /resources folder of my project so that I had something to work with when the dropdown list was changed.

Once you have the components entered onto the page, and some images placed in the resource folder, right-click on the dropdown object and select “Configure Default Options”. This will allow you to setup the dropdown list with name/value pairs for all of the images that you have set in the resources folder. Of course you could populate this pulldown list dynamically as well, but I'm just trying to get thing setup quickly so we can get to the client-side code a little faster.

Notice that I used the Project Name followed by the resources folder and then the actual filename for the value on each image.

I've also set the default “URL” property for the image component to be the same as the first entry on my pulldown list. That way when the page is first loaded, they match.

The Client-Side coding

Ok, we should have all of the basic project setup and ready for us to start working on the event code. We are going to use the “ OnChange” event found in the Javascript section of the Properties Window.

It should be pretty straight forward to set the values of the different objects in the Document Object Model(DOM) once the page is rendered. However, Java Studio Creator adds a few twists at the client side to make it more interesting. Let's take a look.

Both of our objects in the project page have the basic naming format of <objecttype><itemnumber>. So our image object is named “ image1” and our dropdown is named “dropDown1”. Simple enough? Not quite! When the page is actually deployed, Java Studio Creator prepends “ <form name>: “ to all of the objects placed in that form. Take a look at the resulting HTML source view below.

So instead of working with the ID of “image1” as we would expect, we are really going to have to look for the ID of “ form1:image1” in our DOM tree. This will also be true for our dropdown object. However, the dropdown object goes a bit further in it's modification. Since the IDE dropdown object has both a list and label section, the resulting HTML tags are “ form1:dropDown1_lable” and “form1:dropDown1_list”. The only way that I really found to get the resulting HTML tag ID name is to go ahead and deploy the application, and then do a view source on the resulting HTML page to see what they are being set at.

Figuring out the DOM ID's for all of the elements was really the trickiest part. From here we can use normal Javascript to complete our desired effect. While the dropdown object is selected in our project page, go to the properties windows and click on the ellipsis (...) button to the right of the “OnChange” Javascript property. This will bring up an editor window where you can more easily see what you are typing in.

Enter the following line of Javascript code...

document.getElementById('form1:image1').src=document.getElementById('form1:dropDown1_list').value;

click OK, then save and run the project.