Getting started with Qooxdoo

Qooxdoo is an excellent Javascript based GUI framework. It has a rich set of widgets and inbuilt AJAX support.

To get started, download the precompiled Qooxdoo from http://qooxdoo.org/download. The framework javascript file and the related widget image files are found under qooxdoo-0.6.1-build/frontend/framework

Now let us develop a traditional Hello World program in Qooxdoo.

Create a new directory for your application

gg[~]$ mkdir qtest

gg[~]$ cd qtest

Copy the contents of the framework directory to your application folder

gg[qtest]$ cp -rf ../dump/qooxdoo/qooxdoo-0.6.1-build/frontend/framework/* .

gg[qtest]$ ls

resource  script

Now create your main html file with the following content.

1 <html>
2   <head>
3     <title>
4       Qooxdoo Test
5     </title>
6     <script type="text/javascript" src="script/qx.js"></script>
7   </head>
8   <body>
9     <script type="text/javascript">
10       qx.core.Init.getInstance().defineMain(function main()
11       {
12         var doc = qx.ui.core.ClientDocument.getInstance();
13         var button1 = new qx.ui.form.Button("Click Me");
14         with(button1)
15         {
16           setTop(20);
17           setLeft(20);
18           addEventListener("execute", buttonExecute);
19         }
20         doc.add(button1);
21
22         function buttonExecute()
23         {
24           alert("Hello World");
25         }
26       });
27
28     </script>
29   </body>
30 </html>

- In line no 6 the main javascript file qx.js is included.
- In line no 10, an anonymous function is created and is assigned as the main qooxdoo function.
- An ClientDocument object is created in line no 12. ClientDocument is the basic widget of all qooxdoo application. It acts as the parent of all the widgets in your application.
- A new button object is created in line no 13, it’s top and left attribute are set. We then add an event listener in line no 18. So basically the function buttonExecute will be called whenever any button event occur.

About this entry

You’re currently reading “Getting started with Qooxdoo,” an entry on Thoughts Unlimited

Published:
October 20, 2006 / 4:11 pm
Category:
Javascript
Tags: