The interesting files in the skeleton are in the “source/class” directory. Here are the JavaScript source files of the application. This is where most of the coding takes place. At the beginning you will probably have no need to write or modify any HTML or CSS files. (The directory structure)

qooxdoo organizes all JavaScript classes in namespaces just like Java does. Each class has a namespace which corresponds to its path name relative to the “source/class” directory and a class name which corresponds to its file name. In the qooxdoo SDK for example the button class is “qx.ui.form.Button” which means that it is in the directory “qx/ui/form” and has the filename “Button.js”. This is how the files are organized in the skeleton as well. (Understanding namespaces)

Right now our application consists only of the JavaScript class “custom.Application”. (The file “Application.js” in the “custom” directory). This means we are using the namespace “custom”. Since “custom” is not a good namespace for a “Hello World” application we will rename the namespace to “hello”.

Rename the “custom” directory to “hello”.

Since the namespace is part of the class name and thus part of the class definition we have to change the constructor of the “Application.js” class:

change

/**
 * Sample 1
 */
qx.OO.defineClass("custom.Application", qx.component.AbstractApplication,
function () {
  qx.component.AbstractApplication.call(this);
});

to

/**
 * Hello World Application
 */
qx.OO.defineClass("hello.Application", qx.component.AbstractApplication,
function () {
  qx.component.AbstractApplication.call(this);
});

As the file is already open we change the comment as well. (Defining own classes)

Since we have changed the name of the application class we have to modify the HTML file which starts up the application as well. (The basic HTML file)

Open “helloworld/source/index.html” and change

qx.core.Init.getInstance().setApplication(custom.Application);

to

qx.core.Init.getInstance().setApplication(hello.Application);

Rebuild the application because a classname has changed: Enter

make source

in the QX/helloworld directory.

Test if everything works by reloading the application in the browser. Check if no error message comes up and whether the application is working.