This tutorial is a sequence of short, live code exercises demonstrating how to create a user interface using QuickUI controls. Each tutorial page proposes a goal for you to try yourself.

Core idea: The QuickUI framework lets you can build good user interfaces quickly with reliable, reusable, and adaptable UI components called controls.

This tutorial page loads a recent version of the jQuery framework and the QuickUI runtime library, a JavaScript file called quickui.js. For instructional purposes, this page has also loaded the .js and .css file for the optional QuickUI Catalog of common controls.

The demo code on this particular page creates two instances of a QuickUI control class called BasicButton. Each call to BasicButton’s create() method returns an instance of that class: an independent, self-contained copy of all the elements the control needs to function. The string passed to create() is used to set the new control's content, i.e., its label.

The two buttons are then handed to the jQuery append() function, which adds them to a div on this page. For demo purposes, that div has already been created and made available to the JavaScript code through the identifier “$demo”. In your own code, you would obtain a similar reference with any jQuery selector.

You can see the result of the running code on the right. The buttons react to mouse events and keyboard focus, but don't do anything else yet. They show generic styling: the minimum styling necessary to use the control. Most designers will want to style the controls further to fit their application’s visual aesthetic; more on that later.

Your goal: Create a third button by adding another call to BasicButton.create() to the invocation of jQuery’s append() function. Once you’ve updated the code, press the Run button (or type Ctrl+Enter) to see the result.