Welcome to the first qooxdoo tutorial. As usual, this is a basic Hello World app which features a button and a listener on the button's execution.
Let's get started by creating a simple button. Please copy the following line over to the source code editor on the top right.
var button = new qx.ui.form.Button("Hello...");
Hitting the run button now will not change anything in the application in the lower right corner because we simply created the button but did not add it to our application.
this.getRoot().add(button, {left: 30, top: 20});Pasting this line right below the first line and hitting run will now shows the first button. As you see in the code, we placed the button relative to the root's top left corner. Try to change it a bit to see how the button can be positioned.
Having a button is a good first step but we wanted to react on taps as well. For that, qooxdoo offers an event. As a proof of concept, we simple show an alert to confirm that the listener has been executed. But instead of using the click
event, we use the execute
event, which will also be fired in case the user uses the keyboard instead of the pointer.
button.addListener("execute", function() { alert("... World!"); });
Copy this code over and run it again. A tap on the button shows the alert message.
Congratulations! You have build your first Application using qooxdoo.