Chapter 4: Creating GUIs with VisualWorks

The purpose of this chapter is to demonstrate the GUI implementation features of VisualWorks by developing a GUI for a sample application.

One important requirement of many applications being developed is a GUI. GUIs are becoming commonplace in today's software products in an attempt to make software more "user-friendly." The VisualWorks environment provides many powerful and easy-to-use tools that make creating GUIs a relatively effortless and enjoyable task.

A GUI window is developed using the Canvas, Canvas Tool, and Palette. In order to create a functional GUI, there are several tools and techniques that must be learned. In the next few sections, you will learn how to select and alter widgets, set the size of the Canvas, and install the Canvas. All of these actions are important in the process of creating a GUI using VisualWorks. If you do not remember the basic ideas about these tools from Chapter 2, it may be helpful to review them before proceeding with this chapter.

The objective of this chapter is to demonstrate the tools used to build a GUI by building a simple money calculator that adds and subtracts amounts in dollars and cents. Keep in mind that this chapter is primarily intended to illustrate the process of building a GUI for an application, and not to explain how all of the processes work.

Our money calculator is to have two operand fields, one result field, and three operations: add, subtract, and clear. The interface will look like Figure 4.1.

Figure 4.1

The top data field will contain the first operand amount ("operand1"), the middle data field will contain the second operand amount ("operand2"), and the bottom data field will contain the result (operand1+operand2 or operand1-operand2). All amounts will be in dollars and cents using standard notation.

Selecting, Resizing, and Moving Widgets

Now let's start painting our canvas with widgets from the palette. There are two methods for selecting widgets from the Palette. These two methods are Single Selection and Multiple Selection. Single Selection requires that you select a widget type and place exactly one widget of the selected type on the Canvas. Multiple Selection allows you to select a widget type and then place multiple widgets of that type on the Canvas without reselecting the widget type from the Palette.

Single Selection Mode

Open the Canvas Tool

from the VisualWorks Launcher. Make sure that the Palette is in single selection mode by clicking on the single selection button

. The input field for an operand or the result on the money calculator GUI is added to the Canvas as follows:

Select the Input Field widget from the Palette. The word "Input Field" should be displayed in the text area at the bottom of the Palette. Move the mouse pointer over the canvas. As you move the mouse pointer around on the canvas, an image of the selected widget will follow the pointer.
Place the widget on the canvas by clicking with the mouse button on the canvas.
Resize the widget as desired.
1. If a widget has been selected, four anchors will appear around the widget. If the widget is not selected, select the widget by clicking on the widget with the mouse button.
2. Click on one of the four anchors around the widget and hold down the mouse button, then move the mouse to resize the widget.
3. Release the mouse button when you have finished resizing the widget.
Move the widget as desired.
1. Click and hold down the mouse button anywhere on the widget.
2. Move the mouse to the desired location of the widget.
3. Release the mouse button to place the widget.

Select two more Input Fields and a Divider

from the Palette and place them on the Canvas as they are depicted in Figure 4.2. Follow the steps outlined above to select, place, resize, and move these widgets as needed.

Figure 4.2

Select the widget.
Select Edit->Copy or Edit->Cut from the [Operate] menu and release the middle mouse button.
If you selected Cut, the widget will disappear from the Canvas. If you selected Copy, the widget will remain selected. In both cases a copy of the widget is saved by VisualWorks for possible use in a paste function.

To paste a widget:

Cut or copy the widget.
Select Edit->Paste from the [Operate] menu and release the middle mouse button.
The new widget will appear on the Canvas and be selected.

Resizing the Canvas

The Canvas is probably too small to fit all of the widgets we are going to use in this window. You can resize the Canvas using the resizing handles located at each of the four corners of the canvas. Once you have resized the canvas, you can set the initial size of the interface using the Layout->Window->Preferred Size option from the Canvas Tool menu.

Setting Properties

Once widgets have been placed on the Canvas, names need to be given to the Canvas window, labels, and buttons. This is done by using the Properties Tool. The Properties Tool can be activated by clicking on the Properties button

on the Canvas Tool. The properties tool should look similar to Figure 4.4.

Figure 4.4

Make sure that no widget is selected by clicking on the background of the Canvas. The properties for the window should be displayed in the Properties Tool window. Edit the Label field in the Properties Tool and change "Unlabeled Canvas" to "Money Calculator". Click Apply and the label on the Canvas window will change to "Money Calculator". This provides the window title for the main GUI window for our money calculator.

Next, we complete the steps that are needed to include a menu bar in a GUI window. Enable a menu bar by clicking on the Enable check box. In the Aspect input field enter "menuBar". Click Apply and a blank menu bar will appear on the Canvas. Creating a menu bar shifts the widgets on the Canvas down, so it may be necessary to move the widgets or resize the window so that all of the widgets are visible. If you resize the window, make sure to reset the interface size using the Layout->Window->Preferred Size option from the Canvas Tool menu. We have now added a menu bar to the GUI for our money calculator and given it the name "menuBar".

Now we will label our action buttons as needed for our money calculator. Select the left action button on the Canvas. The properties for that widget should be displayed in the Properties Tool window. Edit the Label field using the Properties Tool and change "Action" to "+". Click Apply and the changes should appear on the Canvas. Now select the middle action button on the Canvas. Edit the Label field in the Properties Tool and change "Action" to "-" and click Apply. Use the same procedure for the right action button, changing its label to "Clear". Click Apply and the Canvas should be similar to Figure 4.5.

Figure 4.5

For our money calculator, we want the operand and result fields to be money amounts in standard dollars and cents format. Also, the result field is an output only (read only) field. These characteristics can be set using the Properties Tool. We denote the three fields Operand1, Operand2, and Result (top-to-bottom) here.

Using the Properties Tool, set the properties listed in Table 4.6 for the three widgets.

	Tab	Property	Setting
Input Field (Operand1)	Basics Basics Details	Type Format Align	Number $#,##0.00;[Red]($#,##0.00) Right
Input Field (Operand2)	Basics Basics Details	Type Format Align	Number $#,##0.00;[Red]($#,##0.00) Right
Input Field (Result)	Basics Basics Details Details Details	Type Format Align Can Tab Read Only	Number $#,##0.00;[Red]($#,##0.00) Right Off On

Table 4.6

For example, to define the type of the Operand1 field as Number, select the Operand1 widget on the Canvas and change the Type field to Number (using the pull-down menu for Type) and click Apply. Then set the Format property by using the Format pull-down menu, and click Apply. The tab field indicates which tab to select on the Properties Tool to jump to the page that contains a specific property, so we next click on the Details page tab to obtain the page for the Details properties. Set the Align property by using the pull-down menu, and Apply. Make sure to click Apply after each Tab/Page before going on to the next Tab/Page.

After setting the properties for each of the three number field widgets, close the Properties Tool by selecting close from the Properties Tool [Window] menu with the right mouse button. The Canvas should now look like Figure 4.7.

Figure 4.7

Adjusting the Placement and Sizing of Widgets

Now that all of the widgets are on the main window, it is desirable for cosmetic purposes to line up each widget perfectly. There are a few tools that make this easy.

Widgets can be aligned with other widgets by using the alignment buttons found on the Canvas Tool. There are alignment buttons for the following types of alignments.

Top Align	Horizontal Center	Bottom Align
Left Align	Vertical Center	Right Align

The +, -, and Clear Action buttons should be grouped together. To accomplish this, first deselect all widgets by clicking on the background of the Canvas. Separate the three widgets by a distance that is pleasing to the eye. Resize one of the buttons to a preferred size for all three widgets. Leave the resized widget selected and select the other widgets by using the Shift-Click technique. All three widgets should now be selected. To match the buttons width and height click on the Equalize Height> and Equalize Width buttons on the Canvas Tool. The three buttons should be of equal height and width.

With all three widgets still selected select the Arrange->Group option from the Canvas Tool menu. This will group the three widgets as one object so they can be moved without changing their relative position to each other. Now click the Bottom Align button to align the three widgets on a horizontal axis.

Next, deselect all widgets by clicking on the background of the Canvas. Select the three input field widgets using the Shift-Click technique and then equalize the height of the three widgets using the Equalize Height button . Now shift-click on the divider, so that the divider and all three input fields are selected. Equalize the width of all four widgets using the Equalize Width button . Now align all four widgets on a vertical axis by selecting the Left Align button .

Now we want to group the four widgets together by selecting the Arrange->Group option from the Canvas Tool menu. With the four widgets still selected as one group, move the group to a desirable location. Then select the group of action buttons using the Shift-Click technique. Finally, select the Vertical Center button to center the group of action buttons under the input fields. The main window should now look much more polished.

Installing the Canvas

Now that you have created the interface you need to store all of its information into a class so that it can be used in an application. This is called installing the Canvas on a class. Once the Canvas has been installed on a class, your work can be permanently saved by filing out the class or category, or by saving your image. We will now save the work done in building the Canvas by installing the Canvas on an application model (interface class). (Note: The menu bar will be added in the next section.)

We choose to call the class for our interface "CalculatorInterface", and the main calculator window will be designated by a resource selector named "windowSpec" (the default). Click Install... on the Canvas Tool. A Dialog Window will appear and prompt you for a class to install on. Enter "CalculatorInterface" into the INSTALL on Class field. Make sure that the or enter new Selector field contains the name "windowSpec". The dialog should look like Figure 4.8; if so click, OK.

Figure 4.8

Because the CalculatorInterface class does not exist, an additional dialog window will appear. This dialog will define information about the newly created class. Verify that the Name field has the value "CalculatorInterface". The Category field is the name of the category for this class in the system. Click the Application radio button in the Define As box. Verify that the SuperClass is "ApplicationModel". If all the information matches the information in Figure 4.9 then click OK. The Install on Class dialog should still be active; once again click OK to complete the installation of the Canvas.

Figure 4.9

Creating a Menu Bar

We previously enabled a menu bar. Now we need to build and install the menu bar. VisualWorks treats a menu bar as a separate resource that must be installed into the interface class. Therefore it is easier to build a menu bar after the interface class has been created.

Make sure that all widgets on the Canvas are deselected. From the Canvas Tool, select Tools->Menu Editor. A blank Menu Editor should appear. Fill in the Menu Editor with the text as it appears below. Make sure that a leading tab precedes each menu item and that one or more tabs separate each menu item and the word "nil" that follows it.

File
	Exit		nil  
Action	
	Add		nil
	Subtract	nil

This code specifies that our menu bar will have two menus, "File" and "Action". The File menu will contain only one item, "Exit", and the Action menu will contain two items, "Add" and "Subtract". Exit will be used to exit (close) the calculator, and Add and Subtract will be equivalent to the + and - action buttons, respectively. The use of "nil" here is temporary, and each "nil" will be replaced later by the names of actions (methods) that are to be invoked when the menu action is selected during an execution of the money calculator application.

Click on Build to generate code for creating a menu bar object. A test bar will appear at the top of the Menu Editor. Test the menu bar to make sure all of the menu titles and items are correct. If any corrections are necessary, correct the errors in the Menu Editor and click Build again. Once you have built the menu bar, the Menu Editor should resemble Figure 4.10.