The Morfik Watch

Ever since Peter from piBlog wrote an article about how to integrate JavaScript into the client code, I was thinking about the use of it. Recently, I came with the idea of using Script.aculo.us effect library to apply some cool effects to Morfik’s Visual Controls. In fact I first used moo.fx, which is smaller (and perhaps easier to understand), but it has fewer effects. So I moved to Script.aculo.us and here it is the guide in same easy steps. (If you don’t want to get into details, and just want to see this in action, scroll to bottom for a download link).

First you will need to place some controls on a form. I’ve used: TextLabel, TextEdit, Button, Option Button, CheckBox, ComboBox, DateTimeEdit, Container, TabControl and a Image.

Then you need to define a external function, which will manipulate the control, by passing one parameter to it: a TDOMHTMLControl. If you need to apply the effect to a TextLabel1, you need to pass TextLabel1.DOMHandle to it. The external function is defined as follows (right after the implementation keyword):

function scriptAUEffectToggle(h:TDOMHTMLControl); External ’scriptAU’;

Now you just need to call that function somewhere in your code with a parameter like this:

scriptAUEffectToggle(TextLabel1.DOMHandle);

That’s it? Where is the implementation? Ok, the implementation of that function is in the scriptAU.js. Let’s see what happens there:

// ————————TOGGLE——————-
function scriptAUEffectToggle(h){
new Effect.toggle(h);
}

Yes, this is it, one line of actual code in the .js and a couple of others in the Morfik’s source and you are ready … almost. You have to include references to effects.js file (part of Script.aculo.us). But then Script.aculo.us uses prototype.js. For some weird reason, I could not import them dynamically into the scriptAU.js, so I decided to just put everything in one file: my code, effects.js and prototype.js. It does not seem like a good solution for a production code, but for a demonstration it works just fine.

To understand what all available effects are and how to use them, I went to Script.aculo.us site. There are some cool demos of the effects in action so you can have a pretty good idea what can be done. But the information in the Wiki system was a little odd to me, so when I googled about Script.aculo.us, I’ve found this great cheet sheet Scriptaculous Combination Effects Cheat Sheet (pdf) which I used to organize my demonstration.
I extended the demo functions by adding one more parameter to them: duration(how fast the effect will happen). Almost all of the effects have other options, but I did not use them in this.

And finally, every effect could be done using the language of your choise (c#, pascal, vb or java). Probably. But why? (Given there is already developed library?) There will be more on why’s in my next article: “The WebOS AppsBuilder meets Script.aculo.us (The RAD IDE part)”
To download the application (source included) click here.
If you want to compile the source, you will need WebOS AppsBuilder.

Update (18.06.2006) :

You can see the application in action here (via Morfik Labs)