Examples Catalogue
Examples -- Contents
Adaptor1Example
Adaptor2Example
Adaptor3Example
Adaptor4Example
Adaptor5Example
Adaptor6Example
ButtonExample
ClickWidgetExamples (ClickLogoTest and ClickMapApp)
ColorExample
ColorDDExample
ComboBoxExample
ComboConversionExample
CursorExample
Customer1Example
Customer2Example
CustomViewExample
Dataset1Example
Dataset2Example
Dataset3Example
Dataset4Example
DB1Example
DependencyExample
DialogExample
Editor1Example
Editor2Example
EmployeeExample
FieldConnectionExample
FieldFilterExample
FieldMenuExample
FieldSelectionExample
FieldTypeExample
FieldValidation1Example
FieldValidation2Example
FloatingBalloon
Font1Example
Font2Example
HideExample
LineExample
List1Example
List2Example
LoanCalculatorExample
LogoExample
MenuCommandExample
MenuModifyExample
MenuEditorExample
MenuSwapExample
MenuValueExample
MoveExample
Notebook1Example
Notebook2Example
Notebook3Example
Notebook4Example
Notebook5Example
OpaqueLabelExample
PreferredCustomerExample
Size1Example
Size2Example
Size3Example
Slider1Example
Slider2Example
Subcanvas1Example
Subcanvas2Example
Subcanvas3Example
Table1Example
Table2Example
Table3Example
ToolbarDemo
Walker
WalkThrough
Text and Fonts
Font1Example illustrates applying a TextAttribute to text. It displays a menu of styles defined in TextAttributes. When the menu item is selected, the style is applied to a label text.
Online example: Font1Example
Font2Example collects all fonts installed in the system and displays them in a list for selection and appliation to a label.
Online example: Font2Example
Graphics and Color
The examples in this section illustrate using graphics and colors in general. For examples of developing a Graphical User Interface, including using graphics and colors in that context, see GUI Examples
Cursor Example
Copy this code to a workspace and evaluate. Make sure you have loaded the example code first, which can be done by clicking the CursorExample link below.
| cursor colorImage maskImage| colorImage := CursorExample townCrierForCursor. maskImage := CursorExample shadow.

cursor := Cursor image: colorImage mask: maskImage hotSpot: 8@8 name: 'townCrier'. cursor showWhile: [(Delay forSeconds: 3) wait ].
Browse CursorExample
Also see the help topics under System Class Library -> Images, Cursors, and Icons.
Graphics Example
FloatingBalloon contains code illustrating several graphical effects, including displaying a masked bitmap image over a background graphic, and moving the image against the background. The latter part is a simple form of animation (see Animation Example for more complex animation).
Once you have loaded the parcel, which you can do by clicking the link below, evaluate the following code in a workspace and evaluate it with DoIt.
| gc image i j | ExamplesBrowser initialize. gc := (ExamplesBrowser prepareScratchWindowOfSize: 298@219) graphicsContext. gc medium background: (FloatingBalloon sky asPattern). gc medium display. image := FloatingBalloon new image. i := j := 0. [image follow: [ i := j := i + 1. (Delay forMilliseconds: 30) wait. i@j .] while: [ i+32 < 298 and: [ j+32 < 219] ] on: gc.] fork
This code is explained, with additional examples, in the Application Developer's Guide.
Online example: FloatingBalloon
Opaque Label Example
OpaqueImage provides a more efficient way of displaying an image and mask than always having to specify both.
In this example, an OpaqueImage is created in the #opaqueLogo class method. If this image were to be reused frequently, it could be assigned to an instance variable.
The GUI launched below simply shows the unmasked logo image as a label on the canvas, and the masked image, as an OpaqueImage, used as the label on an Action Button.
Online example: OpaqueLabelExample
Animation Example
Walker provides an example of how to do double-buffering animation in VisualWorks.
Once you have loaded the parcel, which you can do by clicking the link below, evaluate the following code in a workspace and evaluate it with DoIt.
Walker runWalker
Online example: Walker
GUI Examples
These examples demonstrate techniques for GUI development and Widget configuration.
Widgets
The examples in this section show simple applications of widgets to a canvas.
Button
ButtonExample provides a simple example of setting up an Action Button, a group of Radion Buttons, and a group Checkbox Buttons.
Note that, because only one of the Radio Buttons should be selected at one time, they have the same Aspect method, #outputMode, but have different Select values.
Online example: ButtonExample
Click Widget
There are two examples of using the Click Widget.
ClickLogoTest is a very simple example, contained entirely in the ClickLogoTest class. Besides the #windowSpec, the logo is provided by the #logo resource method (a bit of VisualWorks history), and the hot spot map is provided by the #logoMap resource. Examine the map by opening it in the HotRegion editor.
Online example: ClickLogoTest
A more extensive example is provided by MapClickApp and its supporting classes. The application model itself is very simple. RegionMap subclasses ClickWidget, the widget's view, providing additional behavior. RegionModel provides the data model; Region provides data for describing different geographicsl regions.
This is a simpler example of a custom view than is provided by CustomViewExample in that it does not require a custom view controller.
Initially, the map shows the USA region. You can change this in ClickMapApp>>constructRegionView. Adding a function to the GUI to change the region dynamically is left as an exercise for the reader.
Online example: MapClickApp
Browse MapClickAppRegionMap
Note that this example appears to have been changed some over the years, so there are no op methods left behind, and the data is no longer read from files, so please read the comments and documentation in a forgiving spirit.
ComboBox
ComboBoxExample demonstrates configuring a ComboBox widget with a simple list as its domain model.
Online example: ComboBoxExample
Often you need a ComboBox to list objects that aren't simply Strings. ComboConversionExample demonstrates how to represent (convert) a collection of objects (Employees) to a list, and how to convert back from a selected item to its object. Browse the converting methods to see how this is done.
Online example: ComboConversionExample
Browse Employee
Text Editors
Editor1Example illustrates displaying and formatting text in a Text Editor widget. Browse the actions methods for examples of setting text alignment. Browse the #changedStyle method for an example of setting text style.
Online example: Editor1Example
Editor2Example is simply a Text Editor widget in a window. It is used by various examples in the documentation, as well Subcanvas3Example.
Online example: Editor2Example
Entry Field
These examples show a variety of techniques for using Input Field widgets.
FieldFilterExample validates the entire input string at once.
Online example: FieldFilterExample
FieldConnectionExample illustrates one- and two-way dependencies between fields.
Online example: FieldConnectionExample
FieldMenuExample illustrates modifying the popup menu for a widget.
Online example: FieldMenuExample
FieldSelectionExample illustrates inserting text and placing the cursor, including possibly a selection of text.
Online example: FieldSelectionExample
FieldTypeExample illustrates formatting field input using TypeConverter.
Online example: FieldTypeExample
FieldValidation1Example illustrates character-by-character input validation.
Online example: FieldValidation1Example
FieldValidation2Example illustrates field completion based on the initial character.
Online example: FieldValidation2Example
Lines, Circles, and Ovals
A silly little example using Region, Line, and GroupBox widgets.
Online example: LineExample
List Examples
List1Example illustrates populating other widgets based on a list selection.
Online example: List1Example
List2Example is a list with Add and Delete buttons. It is used by the Subcanvas Examples
Browse List2Example (limitations prevent linking).
Label Examples
LogoExample illustrates applying effects to a label, such as fonts, colors, and animation.
Online example: LogoExample
Notebook Examples
The Notebook Examples is a succession of elaborations.
Notebook1Example is a simple index-tabbed notebook that displays a list based on the tab selection. Tab labels are specified in the #initialize method. In the GUIPainter, the notbook is assigned an ID #pageHolder. Browse the #postOpenWith: method to see how the list, which is another canvase, is placed on the notebook.
Online example: Notebook1Example
Notebook2Example adds minor tabs (browse #initialize). The minor tabs filter the list, which is done in the #changedPage method.
Online example: Notebook2Example
Notebook3Example adds dependencies between the major and minor tabs, changing one based on the selection of the other. Dependencies are set up using #onChangeSend: messages in the #initialize method.
Online example: Notebook3Example
Notebook4Example changes the canvas displayed on the notebook page (#pageHolder) with each selection; a different application for each tab. The canvas spec is now assigned in #changedExample rather than #postOpenWith:
Online example: Notebook4Example
Notebook5Example connects a Text Editor to Notebook1Example.
Online example: Notebook5Example
Slider Examples
Slider1Example illustrates how to use a Slider widget to set a value and to indicate a value set otherwise.
Online example: Slider1Example
Slider2Example illustrates how to use a Slider widget in a 2-dimensional field.
Online example: Slider2Example
Subcanvas Examples
A Subcanvas is a container for another canvas.
Subcanvas1Example is defined as a subclass of List2Example, and so inherits all methods from its superclass, some of which it overrides.
Online example: Subcanvas1Example
Subcanvas2Example illustrates reusing only the interface, with the current application providing all the behavior, and an entire application. List2Example is imported via subcanvases twice to illustrate the differences.
Online example: Subcanvas2Example
Subcanvas3Example demonstrates using a subcanvas to change the application interface while running.
Online example: Subcanvas3Example
Table Examples
The Table widget examples are a series of examples, each adding a feature to the previous.
Table1Example simply places a Table widget on a canvas and populates it with two rows of data. Table data is specified in the #initialize method.
Online example: Table1Example
Table2Example adds an entry field for editing the contents of a selected cell.
Online example: Table2Example
Table3Example adds row and column labels, by specifying these in the #initialize method.
Online example: Table3Example
Controlling Widgets
These examples illustrate various kinds of control over widgets.
Hiding a Widget
HideExample shows how to toggle a widget between hidden/shown, and active/inactive.
The work is done in the #changedListVisibility method. The method gets the wrapper for the #colorList widget, and the desired state from the #listVisibilty instance variable, which is set by the radio buttons. It then sets the widget to the desired state by sending the appropriate messages to the widget wrapper (#enable, #disable, #beVisible, #beInvisible).
Online example: HideExample
Moving a Widget
MoveExample illustrates how to change the position of a widget by sending it a #moveBy: or #moveTo: message with a coordinate.
Browse the #moveArrowUp, #moveArrowDown, and #resetArrow methods to see how the widget's (a label with a graphic) wrapper is retrieved and then sent the move messages.
Online example: MoveExample
Color Example
ColorExample illustrates how to set the colors for a widget programmatically, during application runtime.
A list of affected widgets is returned by the #sampleWidgets method. Whether the foreground/background and selected/unselected color is being set is held in the #colorLayer instance variable. When the Apply button is clicked, the appropriate action method for the colorLayer is invoked, which walks the list of widgets and sets the color. Browse these methods (#backgroundColor:, #foregroundColor:, #selectionBackgrouncColor, #selectionForegroundColor) to see the actual color-setting work.
Online example: ColorExample
Changing Widget Menus
FieldMenuExample illustrates modifying the popup menu for a widget.
Online example: FieldMenuExample
Sizing a Widget
These examples illustrate how to set the size and location of widgets.
Size1Example illustrates setting the widget positioning explicitly. Open the canvas in the UIPainter and look at the Position page of the GUI Painter Tool to see how each of the widgets is positioned. You must select each widget individually to see its positioning values.
Online example: Size1Example
Size2Example is a comparison of sizing settings for bounded and unbounded widgets.
Online example: Size2Example
Size3Example illustrates changing the size of a widget dynamically. Browse the #expandBox and #shrinkBox methods to see how to assign a new size to a widget.
Online example: Size3Example
Custom Views
CustomViewExample is an example of an application with a custom view, or window area, with a custom controller. The controller, SketchController captures mouse motion within the view's bounds for purposes of drawing. The CustomViewExample application model includes a ViewHolder widget, which holds the custom view, SketchView, the custom view.
Online example: CustomViewExample
The controller is event-driven, since polling has been removed from the VW base.
For an example of a custom view without a custom controller, see the MapClickApp example.
Menus and Toolbars
These examples illustrate techniques for adding and modifying.
MenuCommandExample illustrates creating a menu of action commands. Browse the #fileMenu class method to see how the menu items are created as Associations between a menu selection and a message selector.
Online example: MenuCommandExample
MenuValueExamples illustrates three kinds of menus, and how to return a value, rather than a command. The menu bar menu also uses graphic icons instead of text. Browse the resources methods (instance side) for menu definitions.
Online example: MenuValueExample
MenuEditorExample employs a menu created using the Menu Editor tool. Browse and select the #colorMenu class menu, and select Method -> Edit Resource, to open the editor.
Online example: MenuEditorExample
MenuModifyExample illustrates adding and deleting items on a menu during runtime. Browse the #addTitle and #deleteTitle methods to see how a menu is accessed and changed.
Online example: MenuModifyExample
MenuSwapExample illustrates exchanging two menus based on program state, in this case whether or not an item is selected in a list. The menu is initially specified in the #initialize method, and then exchanged in #selectionChanged.
Online example: MenuSwapExample
FieldMenuExample illustrates modifying the popup menu for a widget.
Online example: FieldMenuExample
Toolbars are implemented as menus. ToolbarDemo illustrates defining a toolbar using the Menu Editor. In the editor, view the Details page for image resource method.
Online example: ToolbarDemo
Dialogs
DialogExample demonstrates several kinds of dialog. Most of the dialogs are defined in the actions methods, using simple, standard dialog classes. A more complex dialog is defined by a canvas spec.
DialogExample
Drag and Drop
ColorDDExample illustrates enabling drag-drop between widgets.
The top-left List is the drag source, and has its drag methods specified on its Drag Source page in the GUI Painter Tool. The list below and to the right is a drag target, and has its processing methods identified on its Drag Target properties page. Action Buttons can be drag targets, but not drag sources.
ColorDDExample
Connecting a GUI to a Domain Model
The following examples show various ways of connecting the GUI with a domain model, and setting up dependencies between widgets.
Using Adaptors
Adaptors conect an application model with its domain model. The application model owns the GUI. The domain model provides values for the GUI and performs requested actions.
Adaptor1Example through Adaptor4Example form a sequence of increasingly powerful methods for adapting an application mode and a domain model.
Adaptor1Example uses ValueHolders to hold a list of customers (instances of Customer1Example). The ValueHolders for each aspect of a customer are stored in instance variables in the application model.
Online example: Adaptor1Example
Adaptor2Example uses AspectAdaptors to access the values of the instance variables in the domain model, rather than redundantly store them in the application model as well.
Online example: Adaptor2Example
Adaptor3Example enhances Adaptor2Example by using BufferedValueHolders to update the domain model in batch.
Online example: Adaptor3Example
Adaptor4Example replaces a locally held list with a domain model holding that list, Customer2Example.
Online example: Adaptor4Example
Adaptor5Example illustrates adapting an indexed collection, such as an Array, to an application model.
Online example: Adaptor5Example
Adaptor6Example illustrates using a custom adaptor (PluggableAdaptor) to perform specified actions upon update.
Online example: Adaptor6Example
Dependencies
Dependencies allow a change in one widget to automatically update another. DependencyExample shows how to register and unregister dependencies during runtime.
Online example: DependencyExample
Database
These examples show how to work with data sets and databases. For examples of using table widgets, see Table Examples
Dataset Widget Examples
These examples form a sequence of enhanced uses of the Dataset Widget.
Dataset1Example shows a very simple configuration of a Dataset widget in an application.
Online example: Dataset1Example
Dataset2Example shows how to add rows, in this case by adding new Employee objects.
Online example: Dataset2Example
Dataset3Example further enhances the example by populating the dataset with Employee instances.
Online example: Dataset3Example
Finally, Dataset4Example adds graphical labels.
Online example: Dataset4Example
Object Lens Examples
These examples illustrate using the ObjectLens to interface to a relational database. The examples are described in detail in the Database Connect Application Developer's Guide.
Online example: Database1Example
Online example: BookMgrExample
Online example: BookLoanMgrExample
Online example: BorrowerMgrExample
Browse Adminexample
Browse Borrowerexample
Browse Bookloanexample
Browse Bookexample
Misc. Applications
Loan Calculator Example
The LoanCalculator Example is an illustration of connecting a domain model, Amortizer, to an application model, LoanCalculator. The calculation work is performed by the domain model, while the application model, by way of its GUI, collects the information needed for doing the calculation. The application model creates an instance of the domain model, which then requests the data from the application model.
Online example: LoanCalculator
Browse Amortizer
PreferredCustomerExample
This example simply illustrates subclassing a class.
Browse PreferredCustomerExample
Walk Through (RandomNumberPicker)
RandomNumberPicker is an example constructed in the VisualWorks Walk Through. It provides a simple GUI front end, the ApplicationModel subclass RandomNumberPicker, for the system class Random, which provides a sequence of pseudo-random numbers.
The finished application, which is linked here, is in its own name space.
Online example: WalkThru.RandomNumberPicker
Browse Random