Skip to content

Simple AJAX for WebObjects – without Project Wonder

Probably the simplest Ajax effect that I can think of that is desirable to add to web applications is to cause login boxes to “shake”, just like real computer login panels do, on a failed login. This is one of the few situations where a simple animation effect (too simple to qualify for Ajax, really) has a significant value. I’ve been doing this in projects for quite a while now.

The first stage is to find and install some suitable javascripts to implement Ajax. A popular set is the Scriptaculous and Prototype libraries. First find and install them from: Take a look at the “effects engine” demo page to see what we are getting into.

Assuming that you have a reasonably standard page set up, the process for adding this shake effect is simple. What is going to happen is that a script will execute when your page is loaded after the failed login attempt. For this, just drop a script onto the page with the content that will invoke the effect; it will execute on load.

To make this happen, you need to make some minor changes to your java component for the page. Add the following few lines:

protected String onload;

public void awake() {
onload = "";

Then you need to set this string appropriately when your login fails:

onload = "new Effect.Shake(loginbox)";

Time to update the component wo to activate the effect:

Add to the wod file:

Onload: WOString {
value = onload;

And in the html file, you will want to add your Ajax libraries. In <head> insert:

<script src="/javascripts/prototype.js" type="text/javascript"></script> <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>

The hardest part is going to be to isolate the part of the page that you want to shake. Luckily, most old login panels consist of a table in the middle of the page; add an extra attribute to the table: id =”loginbox”. If you don’t have a table for this, you can add a div with the id set, but not all html elements will shake.

Finally, add in anywhere in the body:

<script type="text/javascript"><!-- <webobjects name="Onload"></webobjects> // --></script>

I normally add this at the end.

Post a Comment

Your email is never published nor shared. Required fields are marked *