The Graphical User interface. Using the Open GUI. Creating a Wideit. Properties. Connecting a model to a user interface.

The Open GUI

More Tutorials
C Programming Tutorial

HTML Tutorial & Web Design
T170,T171 and TT180

Search this site



| 1. Starting Smalltalk, and Terminology | 2. Precedence Rules | 3. Classes - Strings | 4. Class Browser | 5. Variables | 6. Error Messages | 12. Control Structures | 16. Dialogs | 23. Collection class | 39. OpenGUI |


| Smalltalk Books | Student Software & Books | Hints & Tips | Sites | Download Smalltalk | Coloured code | Download Documents | ASCII Codes |


Smalltalk Index





Updated 23 Oct. 2000


Using the OpenGUI Creating a Widget Selecting widgets
Widget Properties Connecting a model to a user interface Class method windowSpec
  Answers to questions (Not available)  

Using the OpenGUI. The Graphical User Interface

This tutorial uses the M206 LearningWorks program, as supplied by the OU ( Open University )


The following OpenGUI window shows the various widgets that can be used in the GUI, Graphical User Interface.
The top of the widgets are roughly aligned with the button, from the vertical line of buttons on the left, that created the widget.
Note the following:
  • The Action button is selected. This can be seen by the blue border and 4 square blobs, 1 on each corner.
  • After creation widgets can be moved easily.
  • After creation widgets can be resized easily
  • Most of the widgets have a set of properties that can be changed by the you, the programmer.
  • Hover the mouse over the buttons on the left and a the name of the button pops up. Check the names against the following list.
Description of the Buttons on the left of the OpenGUI window {OpenGUI image} Figure 1. OpenGUI
Rubber band / Resize / Move objects
Action button
Check box
Radio button
Text editor
Input / Output field
Horizontal / Vertical dividers
Group box
To the left of these buttons are an example of the widget that, that button produces.
The Action button widget is the "Active Widget" Note: The blue border and square blobs denoting this.



Creating a Widget

Warning. Be careful when you create/move/resize a widget that you do not create a very small one, e.g., 1 or 2 pixels in size, which may not be noticed. This can easily be done accidentally. This will create havoc at a later stage.
Similar to the above, be careful not to hide 1 widget behind another.


To create a widget
  1. click on one of the buttons on the left. NOT the Arrow one (Rubber band / Resize / Move objects)
  2. move the mouse pointer to the large window. Note the new mouse pointer style.
  3. Click and drag the mouse pointer diagonally across the window. Remember the warnings above.
  4. Release the mouse button.
  5. Adjust the size, and/or position using the 4 blue square blobs at the widgets corners.


Selecting widgets

To select a widget

  1. Ensure that the pointer is in Rubber band / Resize / Move objects mode. If not click on the Arrow button.
  2. Click on the widget you wish to select.
  3. Selected widgets have a blue border and 4 blue square blobs at the widgets corners.

To select several widgets

  1. Start as per selecting a single widget above.
  2. Hold down the Ctrl. key and continue selecting widgets.

Rubber banding widgets

  1. Ensure that the pointer is in Rubber band / Resize / Move objects mode. If not click on the Arrow button.
  2. Click, on the window, NOT a widget, and drag the the mouse pointer diagonally across the window. All the widgets fully enclosed in the box will be selected.
  3. All these widgets can be moved together.



Widget Properties

All the widgets (except dividers) have a set of properties that you amend from there default values. This is an important step and where most mistakes are made, especially when attempting TMA questions.


Look through the table below. Pay particular attention to the default value column. Especially those in bold print. These default values must be changed to match the correct method names you have written.

List of Buttons on the left Comments Property Name Default value
Rubber band / Resize / Move objects Select or rubber band a group of objects that can be moved together. Don't have explicit properties.  
Action button Creates an action button. The label appears centra lly on the action button Label
Action selector
Action button
Check box Creates a check box, more than one check box can be selected. Label
Boolean getter
Boolean setter
check box label

Radio button

Creates a radio button, only one radio button in a group can be selected. Label
Select Symbol
Symbol getter
Symbol setter
radio button label
List Creates a list box with a vertical slider on the right. Looks the same as a text editor box, but works different. List getter
Selection setter
Slider Creates a horizontal slider. Number getter
Number setter
Text editor Creates a text editor box with a vertical slider on the right. Looks the same as a list box, but works different. Text getter
Text setter
Input / Output field Creates an input field / output field box. Value getter
Value setter
Select either String or Number
Label Creates a seperate label. Action button, Check box, Radio button and Group box objects have there own built in labels. Label a label
Horizontal / Vertical dividers Creates horizontal or vertical dividers (straight lines) Don't have explicit properties.  
Group box Creates a group box Group box label A group box label
Table 1. List of Property Names


Connecting a model to a user interface

Checklist before you try to connect.

  1. Make sure that all your methods are written.
  2. Make sure the names in the widget properties match the corresponding method.
  3. Make sure you have created an instance of the class that your methods have been written in. This instance will be chosen for your model in step 7 below.

{add dialog box image}
Figure 2. Add Dialog box


{choose model image}
Figure 3. Choose model Dialog box


{not supported.image}
Figure 4. Error message example.
  1. Save the GUI, for demonstration purposes, I will save as AccessGUI.
  2. Click on the Page button, then release the mouse button on Add.
  3. In the Add dialog box. Figure 2, click on the user-defined radio button.
  4. Select the name, e.g. AccessGUI from the list of user interface classes.
  5. Type in a name you wish to appear on the tab at the top of the main window, in thePage name input field , say Access.
  6. Click OK.
  7. In the Choose model dialog box. Figure 3 Select your model from the list. Note that the list of models are instances of the various classes you have created in this LearningBook. Your list may be completely different from those in Figure 3.
  8. Click OK.

Assume you have made an error and up pops the error message shown in Figure 4.
  • This "is not supported by your model!" is a very common error message. Check that you have written the required method(s)
  • The "getSymbol" part of the message will be one of the names in the widget properties dialog box. In this case it's a default name. This is a very good clue to the cause.
  • Question 1. Look at Table 1. List of Property Name, above, and say which widget the getSymbol is refering too.
  • Question 2. Make a list of thinks that may have caused the error.

Lets now assume that the name in front of the error message is not a default property value, but a name of a misspelt method. You now can't use the above table, but the class method windowSpec can help. See below.


Class method windowSpec

The Class method windowSpec, is a very good source of information for you GUI, especially when you have problems with the GUI not working correctly.


  1. Use the Class browser and select your GUI, say AccessGUI.
  2. Click the Class radio button in the Class browser.
  3. Click the Class method, windowSpec.
  4. Examine the code, look for #collection: #(
  5. Note the list of widgets the example below only has an Action button, and their properties.


If you receive an error message similar to "myActionSelector is not supported by your model!", then you can look through the list of the widgets properties looking for myActionSelector. When you find it look for the type of widget, ActionButton, in this case. You can then go to the openGUI and alter myActionSelector, to the name of the correct method.

Previous Tutorial 16. Dialog | Top