Friday, May 11, 2007

Poor man's JavaFX Script is, er... Javascript

Sun has release its own RIA framework called Java FX. It provide JavaFX Script, which is a language based on Java whose goal is to develop quickly graphical applications with the power of Java. Is it touted as competition to Flex that I have mentioned before. It is safe to say that it hasn't been received with a great deal of enthusiasm. The fact is, I don't want to learn another language again to do my Web 2.0 application. And I do believe that Fielding has a point when he reflects that applets break visibility and raise the barrier of entry for web developers. Also, I'm usually all in favor of static typing and compilation, but for GUIs I'm not too sure. When you want to tweak your borders or your layouts you probably happy enough with a quick cycle of change code/refresh page. So why don't we use Javascript and Java Applets together instead of inventing yet another technology?
Ok, it's time you get over your irrational distrust of Javascript. A multi paradigm (object, functional) language available for free in every browser!! And no, I don't suggest we go on using the HTML DOM or things like that. That's why we need applets.
Applets? I must be mad! Applets have not worked on the web. But what I suggest is not to develop one applet for each RIA application, but only develop one Applet that everybody could use, much like a plugin, that would bridge the gap between the JavaScript world and the Java/Swing world. If it has been done, please let me know. As for me, I've put together a prototype in an hour that works fine:
  1. The JavaScript code constructs an object tree that represents the GUI.
  2. The object tree is serialized to JSON and passed on to the applet
  3. The applet deserializes the JSON and constructs a Swing GUI by translating the object tree
  4. The object tree can contain handlers that are the names of Javascript functions
  5. The applet calls the javascript functions on Swing events
  6. The JavaScript event handlers update the GUI tree and notify the applet with the changes.
A very simple example:


<html>
<head><title>JSApplet</title>

<script language="Javascript">

var helloButton={type:"button","id":"helloButton","text":"hello","action":onClickHello}
var frame={"contents":
[
helloButton
]
};


function onClickHello(){
helloButton.text=helloButton.text.toUpperCase();
updateJS([helloButton])
}

function startJS(){
var msg=document.getElementById("JSApplet").setContent(toJSON(frame));
if (msg){
alert(msg);
}
}

function updateJS(objs){
var msg=document.getElementById("JSApplet").updateContent(toJSON(objs));
if (msg){
alert(msg);
}
}


toJSON=function(arg) {

switch (typeof arg) {
case 'object':
if (arg) {
if (arg.constructor == Array) {
var o = '';
for (var i = 0; i < arg.length; ++i) {
var v = toJSON(arg[i]);
if (o) {
o += ',';
}
if (v != null) {
o += v;
} else {
o += 'null,';
}
}
return '[' + o + ']';
} else if (typeof arg.toString != 'undefined') {
var o = '';
for (var i in arg) {
var v = toJSON(arg[i]);
if (v != null) {
if (o) {
o += ',';
}
o += toJSON(i) + ':' + v;
}
}
return '{' + o + '}';
} else {
return;
}
}
return 'null';
case 'unknown':
case 'undefined':
case 'function':
return arg.name;
case 'string':
return '"' + arg.replace(/(["\\])/g, '\\$1') + '"';
default:
return String(arg);
}
}

</script>
</head>
<body onload="startJS();">
<applet id="JSApplet" alt="JSApplet" code="fr/moresmau/jp/jsapplet/JSApplet.class" codebase="bin" mayscript="mayscript" height="100" width="100"></applet>



</body>
</html>


This web page creates a simple "Hello" button that when clicked changed its text to upperCase(). It demonstrate the two ways communication between the Javascript code and the applet (note how the function is serialized in JSON just with its name, that's the only thing we need). So the Javascript can deal with a model that is a slightly abstracted Swing model (no more hair pulling between different browsers). I stress again, the applet is a generic applet that deals with the link between the JSON objects and the Swing layer. Of course the applet could offer other services: simple API to call back the server (AJAX from the applet), etc...
Then the applet could be packaged with a cut down version of the JRE (only the classes really needed) as a plugin to do rich Swing application from JavaScript...
And voilĂ ! A scriptable RIA platform!

No comments: