Learning Qooxdoo - 1

qooxdoo is a comprehensive and innovative Ajax application framework. Leveraging object-oriented JavaScript allows developers to build impressive cross-browser applications. No HTML, CSS nor DOM knowledge is needed.

I follow the “Hello World” tutorial and setup my first qooxdoo application.

It’s amazing that through a single Python command, we can generate four different type of solution for an application. They are “Source version with debug support”, “Build version”, “API reference”, “Unit Testing”.

In qooxdoo, all things are exist inside JavaScript Class. Developers do not even contact with HTML page. See the generated default class:

qx.Class.define("helloworld.Application", { extend: qx.application.Standalone, members: { 

 	main: function() { 

 		this.base(arguments); 

 		if (qx.core.Variant.isSet("qx.debug", "on")) { 

 			qx.log.appender.Native; 

 			qx.log.appender.Console; 

 		} 

 		var button1 = new qx.ui.form.Button("My First Button", "helloworld/test.png");  

 		var doc = this.getRoot(); 

 		doc.add(button1, { 

 			left: 200, 

 			top: 50 

 		}); 

 		button1.addListener("execute", 

 		function(e) { 

 			alert("Hello World!"); 

 		}); 

 	} 

 } 

});

When i generated the release version, this code was compressed and merged with the framework code into a single file:

 

(function() { 

 var d = "helloworld.Application", 

 c = "First Button", 

 b = "helloworld/test.png", 

 a = "execute"; 

 qx.Class.define(d, { 

 	extend: qx.application.Standalone, 

 	members: { 

 		main: function() { 

 			arguments.callee.base.call(this); {}; 

 			var f = new qx.ui.form.Button(c, b); 

 			var e = this.getRoot(); 

 			e.add(f, { 

 				left: 100, 

 				top: 50 

 			}); 

 			f.addListener(a, 

 			function(e) { 

 				alert("Hello World!"); 

 			}); 

 		} 

 	} 

 }); 

})();