QuickUI Tutorial: Controls are defined by JavaScript classes

HTML

<script src="http://quickui.org/lib/quickui.js"></script>
<link rel="stylesheet" href="http://quickui.org/release/quickui.catalog.css">
<script src="http://quickui.org/release/quickui.catalog.js"></script>
<!--

Controls are defined by JavaScript classes.

As a JavaScript developer, you already use JavaScript’s native class support to define reusable behavior. In QuickUI, when you’re creating a new kind of control, you’re creating a JavaScript class. You can define control behavior by creating regular JavaScript functions that act as instance methods.

To create a control, you create an instance of that control's class. There are several ways to do this, but the simplest is to invoke the .create() method shown earlier. Everything about working with control instances is the same as working with any other kind of JavaScript class: you can set properties on them; you create references to them; you can test whether an instance of a control class is a member of class with the standard “instanceof” keyword; etc.

This page creates a instance of the ColorSwatchComboBox control class by calling that class' .create()  method. The page then tests that the new control is an instance of the ColorSwatchComboBox class. The ColorSwatchComboBox class happens to inherit from a class called ListComboBox, so any color swatch combo box is also an instance of ListComboBox.

-->

<div id="demo"></div>

<a href="/quickui/JnCwu/" target="_top">Next page</a>

CSS

body { padding: 1em; }
body > * { margin-bottom: 1em; }
p { margin: 1em 0; }

.ButtonBase {
    margin-right: .5em;
}

JavaScript

/*
YOUR GOAL: The ColorSwatchComboBox class derives from a class called ListComboBox, which in turn derives from a base class ComboBox, and ultimately from a base class called Control. Update the tests below
to convince yourself that a color swatch combo box is also an instance of the ComboBox class and the Control class.
*/

var $comboBox = ColorSwatchComboBox.create()
    .content( "Green" )
    .items([ "Red", "Green", "Blue" ]);

$( "#demo" ).append( $comboBox );

$( "#demo" ).append(
    $( "<p/>" ).text( "Instance of ColorSwatchComboBox: "
        + ( $comboBox instanceof ColorSwatchComboBox ) ),
    $( "<p/>" ).text( "Instance of ListComboBox: "
        + ( $comboBox instanceof ListComboBox ) )
);