About GUI Classes

General Interface provides numerous ways for developers to customize the look, feel, and behavior of the existing GUI controls. In some cases, however, a control may not exist or must be modified so extensively that it makes sense to create an entirely new class. By leveraging the base class, jsx3.gui.Template, developers can simplify many of the difficult steps with GUI class development, including cross-browser layout differences. The template engine also employs HTML syntax for its templates, making the development process familiar to developers.

Background

General Interface employs a model-view-controller (MVC) architecture. For each on-screen object (the "view") there is a corresponding state model that describes it (the "model"). Logical functions synchronize the two (the "controller"). For example, consider a slider widget with the model shown in the following table.

Model for Slider Widget

When it is time to paint the model, the corresponding view is generated as HTML.

Note: Some content in the following code has been removed for readability.

<span onmousewheel=";" onkeydown=";" style="position:absolute;width:200px;height:15px;">
  <div style="position:relative;width:200px;height:7px;padding:4px 0px 4px 0px;;">
    <div onclick=";" style=" width:198px;height:5px;background:gray;border:inset 1px;"/>
    <div onmousedown=";" style="position:absolute;width:15px;height:15px;left:50px;top:0px;">
      <div style=" width:15px;height:15px; background:url(JSX/images/slider/top.gif);"/>
    </div>
  </div>
</span>

The HTML is then sent to the browser (the view delegate---basically a helper that can render the HTML) and it renders as follows:

If the user interacts with the view by dragging the slider handle, the controller is notified of the relevant events, including mousedown, mousemove, and mouseup. The controller then updates the model based upon its own processing rules. In this case, assume the slider has been dragged to position 50.

Example Position

The system then synchronizes the model to the view (which is sent to the browser to reflect the updated state), and the cycle continues.

Like all architectures, MVC is merely an organizing schema---a way to describe objects and their relationships to help better understand and build complex systems. By abstracting the view and the model, you are able to envision your Web application not as a tangle of HTML, but rather a group of higher-level objects. Being freed to imagine the model, you can more easily architect appropriate business solutions.

The remainder of this document describes how to create custom GUI classes according to MVC principles. The exercises become progressively more complex as the various capabilities of the template language are described. All of the examples describe how to create a basic spinner control.