Core idea: Every control class has a content() property which, by convention, refers to the main user-visible information rendered within the control.

QuickUI properties emulate jQuery’s pervasive use of getter/setter functions: a single function that can either get or set a value, depending on whether an argument is supplied. The getter form has no arguments, and will return the given property value for the first element in the jQuery object it’s applied to. The setter form takes a single argument, and will set that property to that value on every element in the jQuery object it’s applied to.

The semantics of the “content” property vary from control class to control class. The base Control class defines a standard implementation of the content() getter/setter function, but a control class can override this. Most controls take anything passed to content() and stash it within an element somewhere in the control’s DOM tree. In this common case, the content may be either anything supported by jQuery’s append() function: a string, a DOM element, a jQuery object (including a control), an array, etc.

The standardization of the content function makes it easier to learn how to use new control classes, simplifies the transfer of data into or out of various controls, and minimizes the amount of code which must be rewritten when experimenting to see which control class works best for a job. It also facilitates the creation of meta-controls, discussed later.

The demo code sets the content on instances of several different control classes. Each class implements the content() function differently. One of the controls is an instance of the Repeater control, a meta-control that creates a given number of instances of the indicated control class. (Meta-controls are discussed more later.) The Repeater class’ content() property is defined to set the same content on all the controls it has generated.

Keep in mind that just because the same content property can be set on all these controls doesn’t mean all controls can accept the same types of content. Some controls can only accept text content, some only expect a single element, and so on.

Your goal: Add instances of the ColorSwatchTextBox and AutoSizeTextBox control classes to the demo, and see how they handle their content.