You are ready to use qooxdoo and QxTransformer for building the fist application. Traditionally it will be "Hello World!"
We suppose that you have installed required software and built a skeleton for new application.

We have following folders structure with installed SDKs and the skeleton of the future application.


Open example.Application.qxml. This is the main XML file of the application.

It looks like:

<?xml version="1.0" encoding="utf-8"?>
<qx:root
        xmlns:qx="http://www.qxtransformer.org/qooxdoo"
        xmlns:qxt="http://www.qxtransformer.org/extension"
        qooxdooVersion="0.7">

    <qx:application
        title="example application"
        namespace="example"
        authors=""
        translate="true">
       
        <!-- add your code here -->
       
    </qx:application>
   
</qx:root>

Ok, change title to "Hello World!", set the authors property and set translation property to false.

    <qx:application
        title="Hello World!"
        namespace="example"
        authors="Your Name"
        translate="false">
       
        <!-- add your code here -->
       
    </qx:application>

Now add a atom and a button to the application.

    <qx:application
        title="Hello World!"
        namespace="example"
        authors=""
        translate="false">
       
        <qx:horizontalBoxLayout spacing="10" margin="10">
            <qx:atom
                 id="helloAtom"
                 label="I'm waiting for your input..."
                 icon="icon/32/actions/system-run.png"
                 padding="5"
                 border="outset"
                 backgroundColor="#BDD2EF"/>
           
            <qx:button label="Click me!">
                <qx:eventListener type="click">
                    helloAtom.setLabel("Hello World!");
                </qx:eventListener>   
            </qx:button>   
           
        </qx:horizontalBoxLayout>
       
    </qx:application>

We added the atom with id helloAtom (name of JavaScript variable in source)  and the button with the event listener.
As you see you can use elements in event handlers and refer to them by id. And you can use elements without id if you
don't need to have access to them in code.

In order to transform this XML code to JavaScript open terminal, go to example/frontend and run
   
        make transform

Result will be following:

    *****************************************************************************
    [QxTransformer]: Transformation application xml files to javascript....
    *****************************************************************************

    -----------------------------------------------------------------------------
    PROJECT SETTINGS
    -----------------------------------------------------------------------------
      * Application class path:  ./source/class
      * Application xml path:  ./source/xml
      * Application project root dir:  /home/someuser/projects/example/frontend/source/xml

    -----------------------------------------------------------------------------
    TRANSFORMATION PROGRESS
    -----------------------------------------------------------------------------
       * INFO: Starting processing application example.Application content...
       * INFO: Done processing application content.

Look in example/frontend/source/class/example. Now you have JavaScript file Application.js with transformed code.
What next? Just run qooxdoo's

            make source
 or
          make build

and run the application (source: open frontend/source/index.html; build: open build/index.html).

The result is



and after click




That's all. You've created a small application with qooxdoo and QxTransformer.