Getting Started with Qookery

This guide will help you create your first Qookery project. It is assumed that you are familiar with the basics of Qooxdoo, version 6+, and that you have it installed via the Node.js package manager.

Starting from scratch with a skeleton application

First of all, start with a new Qooxdoo application using the skeleton application creation tool qx create

> qx create tutorial -I
> cd tutorial

Qookery is a Qooxdoo contribution that can be easily added to any application via a single command-line invocation

tutorial> qx contrib install ergobyte/qookery

Build your application for the first time

tutorial> qx compile

You will need a minimal web server to load file resources via XHR, which is needed by Qookery. Fortunately, Qooxdoo contains a small HTTP server that serve application files. Open a new terminal window, run below commands and leave the server running

> cd tutorial
tutorial> qx serve

To check that everything works, open your web browser and visit

http://localhost:8080/

Replacing sample UI with an application root form

Create a folder named forms in the resource directory of your project.

tutorial> mkdir -p source/resource/tutorial/forms

Inside it, create a file named application.xml with the following contents:

<?xml version="1.0" encoding="UTF-8" ?>
<form xmlns="http://www.qookery.org/ns/Form" layout="basic">
	<button label="Click me" icon="tutorial/test.png" left="100" top="50">
		<script event="execute">
			alert("Hello, World!");
		</script>
	</button>
</form>

This form recreates the sample user interface found in Application.js. A minimal loader of Qookery forms is needed; edit source/class/tutorial/Application.js and replace everything after "Below is your actual application code..." with below lines:

qookery.contexts.Qookery.loadResource("tutorial/forms/application.xml", this, function(xmlSource) {
	var xmlDocument = qx.xml.Document.fromString(xmlSource);
	var parser = qookery.Qookery.createFormParser();
	try {
		var formComponent = parser.parseXmlDocument(xmlDocument);
		this.getRoot().add(formComponent.getMainWidget());
	}
	catch(e) {
		this.error("Error parsing application root form", e);
	}
	finally {
		parser.dispose();
	}
});

qx serve should be able to pick up the changes and regenerate the application; if all goes well, you will get the exact same UI as before, but with Qookery.

Creating a button that opens another form in a window

Inside source/resource/tutorial/forms, create a file named window.xml with the following contents

<?xml version="1.0" encoding="UTF-8" ?>
<form xmlns="http://www.qookery.org/ns/Form" column-count="2">
	<image source="tutorial/test.png" align-y="middle" />
	<label rich="true" wrap="true" label="Discover Qookery and experiment with its features" />
</form>

Now create a second button that opens a window from application.xml by adding below code under the first <button> element

<button label="Open Window" icon="tutorial/test.png" left="100" top="100">
	<script event="execute">
		qookery.contexts.Qookery.openWindow("tutorial/forms/window.xml");
	</script>
</button>

Build and run again the application – you will be able to open your first window.

At this point you can quickly experiment with Qookery by editing window.xml, hiting save in your favorite text editor/IDE and pressing the Second Button again. Since XML forms are parsed and evaluated at runtime, there is no need to regenerate the application or refresh the browser window.

Next steps

Hopefully this short introduction wetted your appetite for more. Until documentation is improved, here are some tips as to how to proceed from here: