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: http://script.aculo.us/. 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