Core idea: QuickUI makes it easy for you to package up content, styling, and behavior as a reusable control class. You can do this by calling the function Control.sub(), passing in a JSON dictionary defining default values for various class properties. The result of this call will be your new control class: a JavaScript class that you can instantiate as part of a user interface.

The Control.sub() method does its core work via a jQuery method called sub(), which implements a standard JavaScript prototype-based inheritance scheme. Your class will inherit a large set of standard behavior from the base Control class. Since Control inherits from jQuery, your new class will also inherit all of jQuery’s abilities.

The sub() call permits a single parameter: a JavaScript object whose values will be copied to the new class' prototype. That is, these values will be available on all new instances of the class you're defining. For example, you will typically supply a “className:” key to define the name for the new control class, which will be applied as a CSS class to all controls created by the class (see CSS class names.) You can also define properties and methods which you want to make available on all instances of your new class.

One special member of this object passed to sub() has the key “inherited:”. This takes the form of a JavaScript sub-object in Control JSON format. Briefly, this format lets you define, in a declarative, data-driven way, the initial content of a control. Any keys in that “inherited:” sub-object will invoke property setters on your new object. That is, an entry of the form foo: “bar” will cause the base class property foo() to be invoked with value “bar”.

The result of calling sub() is typically stored in a global JavaScript variable with the same identifier as the control’s class name. It’s this form of the name that you will reference directly in your JavaScript code.

The demo code creates a new control class called Greet that will be a subclass of the base Control class. The “className:” key in the JavaScript object sets the class’ name to “Greet”. The “inherited:” key indicates that new instances of the Greet class should have their content() property set to the indicated value. The result of the sub() call is stored in a JavaScript variable with the identifier Greet.

The Greet.create() calls that follow add three instances of the new Greet class to the demo. However, since Greet currently has no meaningful pre-defined content, the three controls don’t appear to be visible.

Your goal: Add default content to Greet controls by giving the “content:” key a string value like “Hello, world!”

When Greet.create() is called, a plain instance of the base Control class is created. The string you specify will then be passed to the Control class’ content() property, which will insert the text into the control’s top element. When the resulting elements are passed to $demo.append(), you end up seeing three copies of the text.