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.
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.
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.