The Morfik Watch

In a recent article Dion Hinchcliffe wrote about Which One [Ajax framework] Is Right For You?, today Musings from Mars puts another great post analyzing some Ajax libraries/frameworks. Both articles are great and detailed but there is one problem with them. They are comparing two different things: Ajax RAD IDE tools with JavaScript libraries. I have nothing against those Java Script libraries - script.aculo.us, prototype, dojo, etc. Some are great, some are not, that’s not the point. The point is there should be at least 2 categories: one about RAD tools such as GI from Tibco, Atlas from MS and JST from Morfik, and second about libraries and frameworks! Because the two things are just not in the same category to be compared.

If you see my previous post, about WebOS AppsBuilder working together with script.aculo.us, you will see what I am talking about. There I’ve used effects.js from script.aculo.us to put some cool effects on WebOS AppsBuilder visual controls. You can see it in action here (via Morfik Labs)

So how you can compare two things that interact? The one is great java script library, the other is RAD AJAX IDE plus JST plus database access and a LOT more? Small libraries and frameworks (and not just small) can be used in those IDE’s in conjunction to build great web applications. They are not competitors!

And please, Musings from Mars, since you have included Atlas and Tibco’s GI in the list, it will be fair to put Morfik in the list too.

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)