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
T223

HTML Tutorial & Web Design
T170,T171 and TT180

Search this site

Home

Smalltalk Index

Student
Licence Software
at special prices

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	Figure 1. OpenGUI
Rubber band / Resize / Move objects
Action button
Check box
Radio button
List
Slider
Text editor
Input / Output field
Label
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.

Top

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

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

Top

Selecting widgets

To select a widget

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

To select several widgets

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

Rubber banding widgets

Ensure that the pointer is in Rubber band / Resize / Move objects mode. If not click on the Arrow button.
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.
All these widgets can be moved together.

Top

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 #actionSelector
Check box	Creates a check box, more than one check box can be selected.	Label Boolean getter Boolean setter	check box label #getBoolean #setBoolean:
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 #selectSymbol #getSymbol #setSymbol:
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	#getList #setSelection:
Slider	Creates a horizontal slider.	Number getter Number setter Start Step Stop	#getNumber #setNumber: 0 1 10
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	#getText #setText:
Input / Output field	Creates an input field / output field box.	Value getter Value setter	#getString #setString: 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

Top

Connecting a model to a user interface

Checklist before you try to connect.

Make sure that all your methods are written.
Make sure the names in the widget properties match the corresponding method.
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.

Figure 2. Add Dialog box

Figure 3. Choose model Dialog box

Figure 4. Error message example.

Save the GUI, for demonstration purposes, I will save as AccessGUI.
Click on the Page button, then release the mouse button on Add.
In the Add dialog box. Figure 2, click on the user-defined radio button.
Select the name, e.g. AccessGUI from the list of user interface classes.
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.
Click OK.
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.
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.

Top

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.

Use the Class browser and select your GUI, say AccessGUI.
Click the Class radio button in the Class browser.
Click the Class method, windowSpec.
Examine the code, look for #collection: #(
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