The View Composer is the Dolphin development tool where the user interface elements (or views) of an application are designed.
Dolphin Smalltalk uses an application framework known as model-view-presenter or MVP. In this framework, an application is split into triads of elements each with its own jurisdiction. Models represent the application data and the operations that can be performed on it; they have no concern with the user interface aspects of how they will be manipulated. Presenters contain the functionality that describes how a model will be controlled by the user interface. Views are the user interface components that "clip" on to their associated models and presenters. A view will display the contents of its model (it is in fact an observer of the model) and it will send user input gestures (such as menu commands or mouse movements) to the presenter for interpretation as to how they should affect the model data.
The framework gains because the user interface design is held entirely by the view layer and is kept separate from the logic of the application which is held by the model and presenter layers. This means that a user interface can be changed without affecting the way the underlying application works. In fact, it is very reasonable for a non-programmer to be able to create and maintain the views for a Dolphin application. He or she would use the View Composer to do this.
Tip: in Dolphin Smalltalk/98 Release 1, the View Composer is in its first incarnation and, as such, some operations may require knowledge of Smalltalk. Future versions should relieve this burden.
The large pane at the top of the window is known as the Composing Arena and this is where views are graphically edited. To the lower left is the View Hierarchy pane which displays a tree representation of the view hierarchy being created. The lower center pane displays a list of the Published Aspects for the view that is selected in the Composing Arena. The lower right hand, Aspect Value, pane displays the value of the selected aspect in the Published Aspects list.
Tip: the Published Aspects list and the Aspect Value pane are effectively an embedded inspector onto the published aspects of the selected view. Such aspects are published by a view's #publishedAspectsOfInstances class method. Another way of seeing the published aspects for a particular view class is to use the Class/Published aspects command from within the Class Hierarchy Browser.
A composite view is built in the Composing Arena by dragging items from the View Composer's Toolbox. This can be shown (if it is not already visible) by choosing Draw/Show Toolbox or typing Ctrl+T.
Tip: the Toolbox is pretty much identical to the Resource Browser except that it only displays view resources and does not allow them to be added or deleted.
In the Composing Arena, views are positioned and sized automatically using the mouse. When a view is selected in the arena this is indicated by a thick striped border and small "grabbers" positioned at each corner and in the middle of each edge. The grabbers can be manipulated with the mouse and used to adjust the view's size.
It is possible to select multiple views by holding down the Ctrl key while clicking with the mouse. Several of the operations in the Draw menu can operate on multiple view selections. The Draw/Align menu contains a number of commands for lining up the edges of multiple views. The Draw/Match menu contains commands for matching particular aspects of multiple views. In both cases, one view (the first selected) is known as the primary selection and is used as the base, relative to which the others are aligned or matched.
Tip: although multiple selections can be cut and copied to the clipboard they cannot be dragged and re-sized with the mouse.
Much of the work when creating a view is performed in the Published Aspect Inspector. This allows you to alter the attributes of a selected view and thus configure its appearance. When you select a view in the Composing Arena or in the View Hierarchy the Published Aspect list displays all of the aspects that can be modified for this view. The first entry in this list, self, represents the view itself. You can then use the Aspect Value pane as a workspace to talk to the view directly. For example, evaluating:
self backcolor: Color red
will set the view's background color to red. As you can see this is a very powerful concept, allowing you to manipulate a view in any way, with the full power of Smalltalk at your disposal.
If you choose one of the other aspects in the Published Aspect list an appropriate editor for that aspect will be created in the Aspect Value pane. The type of editor depends on the type of the aspect chosen.
Tip: looking in the #publishedAspectForInstances class method for a view class will show you how the different editors are associated with each aspect.
The following types of aspect editor are common:
Some additional specialized aspect editors are available and it is likely that more will be added as the system evolves.
Normally when a view resource is dragged from the toolbox and dropped into the Composing Arena a copy is taken and you are effectively adding this copy to your view. In many cases this is what you'll want but sometimes it is convenient to be able to drop a reference to the original resource. You can do this by holding down the Alt key during the drag operation.
When you add a view reference, a copy of the original resource is not added to the view you are creating. Instead the reference acts as a place holder that causes the original resource to be re-loaded whenever your view is loaded. This can greatly ease maintenance issues for systems that tend to reuse complex view resources in many places, since it may only be necessary to make a change in a single view for it to be reflected (by reference) to many others. The development system tools make use of this feature extensively. For example, all of the places that a Smalltalk workspace view is used are in fact references to the SmalltalkWorkspace.Rich text view. Consequently, making a single change to the latter (say changing the background color) will cause the change to the reflected in all places that reference this view.
There are limitations when using reference views. Since the reference is really a wrapper around the actual view that will eventually be loaded, it cannot allow all of the aspects for the enclosed view to be edited. You'll find that references merely support a base set of aspects that are common to all views.
By default, Windows allows tabbing between all fields that are marked with the #isTabStop aspect being set to true. If you do not wish a field to be part of the tab sequence, simply select it and set #isTabStop to false. You can alter the order of the fields in the tab sequence by using the Draw/Order commands.
The View Hierarchy pane shows the complete hierarchy for the view in the Composing Arena. You can use this as a drop target for items dragged from the Toolbox. You will only be able to drop resources onto views in the hierarchy that are capable of accepting them. Note that this facility can be very convenient when creating complex view hierarchies. Sometimes it is not possible to find an appropriate drop location in the Composing Arena so the View Hierarchy pane provides an important alternative.
Tip: sometimes it is also difficult to select an appropriate view within the Composing Arena. In these situations you can select views in the View Hierarchy pane instead. This is particularly importan, for example, to allow the ability to select different cards in a CardContainer.
As you expand levels of hierarchy in this pane, the order of the sub-views within their parent view matches the Windows Z-order. Since this is also identical to the tabbing order this can be used to reveal what the tab sequence will be at any level in the hierarchy. To alter the tab sequence simply select the view whose position you want to change and use the Draw/Order commands to move it. The change will be reflected immediately in the View Hierarchy pane.
You can create a context menu (that will appear on a right mouse click) for any view being edited by the View Composer. Simply select the view and choose Draw/Menu/Context Menu or choose Context Menu from the context menu in the Composing Arena. This will bring up a Menu Composer tool to allow you to create and edit an appropriate popup menu.
If the main view being edited is a shell window then you can also use the Menu Composer to create and edit a menu bar by using the Draw/Menu/Menu Bar command.
When editing is complete use File/Save to save down the view as a resource attached to a particular class. A Resource Identification dialog will be brought up and you can choose an appropriate owning class and textual resource name.
The resource name is a String and therefore may be any combination of characters including spaces. Once a view resource has been saved it will automatically appear in the Resource Browser.