### <== Previous | Contents | Next ==>

## The User Interface Framework

The Strongtalk user interface framework departs considerably from the Model-View-Controller framework of Smalltalk-80. It has a number of interesting design freatures:

- Use of flyweight glyphs (an idea borrowed from Calder's implementation in the InterViews system). A glyph is a shareable widget, i.e. it can have many parents. This shareability allows them to be used in a much more fine-grained manner than normal widgets (called Visuals in the Strongtalk system). For example, every character on this page is represented by an individual glyph that manages its own layout and rendering.
- Advanced, automatic dynamic layout using a shrink/stretch model computed from minimum/desired/maximum sizes. A layout is specified by combining a number of standard visuals such as Row, Column, Table, and Glue, which then manage the layout process for the application. For example, the lines of text on this page are actually just standard GlyphRow visuals, that knows how to lay things out horizontally.

  The goal is that applications should normally not have to create their own subclasses of Visual, or worry about doing layout on their own, which is fraught with difficulty in most systems as soon as layouts become dynamic. This works nicely; for example, the entire programming environment in Strongtalk was designed without creating a single additional Visual subclass, or doing any layout other than using the standard layout widgets.

- The layout mechanism uses lazy relayout and intelligent layout reordering to eliminate the algorithmic problems seen in most other UI frameworks whereby widgets inadvertently get layed out and redrawn multiple times when simple changes are made.
- The UI framework provides a framework for imbedding true native widgets into any place in any Visual layout, which is traditionally a shortcoming of most Smalltalk systems. A subset of the Visual classes support many of the standard native aspects of the UI (buttons, check boxes, listboxes, dialogs, message boxes, and scrollbars)
- The framework's API is designed to be highly portable (although some parts require a different implementation on other platforms). Native widgets are represented by Visual subclasses that abstract their behavior in a portable way.

Visuals are responsible for the physical aspects of the UI (layout, rendering, event processing, etc). Separate wrapper visuals can be used to control and modify event processing, taking the place of the separate Controller hierarchy in other Smalltalk systems. Glyphs and Visuals interact smoothly: all Visuals are Glyphs, and any glyph can be wrapped for use as a Visual with the message #asVisual.

Application and model-specific logic is placed in a separate hierarchy, the Application hierarchy. Applications are responsible for creating and parameterizing the Visual instances they need, handling logical interaction. A subclass of Application, View, mediates between Visuals and model objects.

Because the Strongtalk UI framework is strongly-typed, it uses Blocks to parameterize the behavior of Visuals, rather than using the selector/perform approach used in other Smalltalk systems.

Here is a hierarchy browser showing the UI framework public API:

The UI framework public API (spawn)

If you are interested in looking at what kind of Visuals and Applications are in the windows you are looking at, there are two neat tools for doing that directly. First, most of strongtalk applications have a "Meta" menu item on their main menu. This will open an inspector on the Application object associated with that window.

To look at the Visuals associated with any point in any Strongtalk window, you can open a Core Sampler by clicking here. Once a core sampler is open, clicking the left mouse button while holding down the <Ctrl> key in any other window will display a list of inspectors on Visuals in the CoreSampler window. The list represents the slice of the Visual hierarchy that contains the point you clicked on, from outermost to innermost. Try ctrl-clicking on this line of text to see all the levels of glyphs and Visuals that make up an HTML browser page.

### Next ==>