View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide
Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

Connecting GUI's and code: Starter guide on how to get and send information to your GUI

So you've got your ideas and your plans to make a program with the GUI painter. Good for you, you're headed in the right direction. The point of this little guide is to help you with some essential details to help you bridge your GUI and your code. There is obviously quite a lot more, but these tips were discovered by myself and fellow group members (Hose and Tricks), whose project name was "CRC Maker" which can be found on the Cincom Public Repository. For further reading, I'd recommend the GUI Developer's Guide, which is installed under your VisualWorks directory under "docs".

Now, first thing's first. You'll need your application model class. This'll be the class that will control the GUI. If you know all about this already, skip ahead. Otherwise, read on (Note: there is also a Shortcut to getting to your GUI editor straight from the System Browser).

You can either start playing with the VWPainter right away and create a class when you're ready, or install the GUI aspects onto a pre-existing class. Once you have that up, you can start adding widgets on your canvas and coding in your class. (Note: all the new functions suggested here are added under a 'commands' protocol, since that's the only place the GUI will look for them, or so I've found)


Lists are widgets that allow you to select items within it. Once you have a list widget on the canvas, you need to hit the 'Define' button on the GUI editor. This allows you to use the List widget by name in your code. You supply that name on the right hand side of the GUI editor where it says 'Aspect' under the Basics tab. I've found it conducive to my peace of mind to simply make it the same as the ID. Now we can move on to the code. (Note: be sure to initialize the List widget in the application model class's initialize function as show below)
listWidget:= SelectionInList with: List new
listWidget selectionIndexHolder onChangeSend:
		#listWidget to: self.

You can't directly add to the List widget item by item. You have to give it a List object or OrderedCollection. Be careful here, because if your list/orderedcollection is anything but a string, it will list each value as the object that it is (e.g. 'an object' instead of the string you'd want). Because of this, you have to populate a new list and match the string of the new one to the objects of the old. Refer to the example below.

| returnVal |

	returnVal := Dialog
	request: 'Please enter your goal'
	initialAnswer: ''
	onCancel: [].

	returnVal value == nil ifFalse: [
	listForGoalList add: returnVal value.
	goalpanel addGoal: returnVal value.
	goalsList list: listForGoalList.].

In this example, returnVal is a pop-up dialog that requests a string from the user. That string is accessed by returnVal value. This string, if it's not empty, is added to listForGoalList, which is a list the application model class has that is meant to reflect the list of actual goals, a type of object in the example. goalsList is our List widget from our GUI, and has been defined on the class this method is in. Notice the syntax of giving it a list. You can also access the widget's list by omitting the colon. Removing from the list is as simple as giving goalsList another list without the item you want.

Lastly, you want to be able to know which item is selected on the widget, and when. For this, you can create a function, and call it whatever you want. Then go to the GUI editor, select your List widget, and on the tabs on the right, select 'Notification'. Under this tab, you can specify a function to be called when one of the four events listed happens. In this particular case, you want to know when the selection changes, so place your new function's name next to 'Change:', and make sure it is preceded by '#'. Also, to access the selection in the List widget, you can simply make the following call:

self goalsList selection.

This returns the string that is selected in the list. This becomes useful when you want to synchronize other widgets to the selections on your list.

Text Editors

Text editors are similar in setup to lists, so see the first paragraph of Lists and follow the same directions. Beyond that, texteditors are very easy to manipulate. | aString |
aString := self textEditorName value.
self textEditorName value: 'all the text in a string you could add goes here, like this or as a variable'.

Action Buttons

Action buttons are also relatively easy to set up and use. Place one on your canvas, then, on the GUI Painter Tool, select your button and select the basics tab. Here you give the button a string to display, as well as give it a function to call when it is pressed, which you type out next to 'Action:'. In that function, you can do whatever you need.


When you have many widgets in multiple groups on your GUI canvas, it can be useful to use Composites to group them. Composites are created when you select multiple widgets on the GUI Painter Tool and, on the menu, select Arrange -> Group (quick trick: to add a widget to and already created composite, select the desired widget and composite, group them into another composite, then ungroup the original composite and make the new one just like the old).

A useful trick we found with Composites was switching between them so we don't have to open new windows or anything for a new set of widgets. By connecting them to menu items, I was able to make composites appear and disappear on command by using wrappers. For example:
widgetWrapper := self wrapperAt: #theCompositeNameGoesHere.

	widgetWrapper beInvisible.

The beInvisible message will apply to all the widgets within the composite, and you can send a beVisible message for the opposite effect. Please note that, if using this trick, it will not work in the initialize method if you plan to start off with a blank screen. For that, you'll have to go widget by widget on the GUI Painter Tool, and for each one select 'Initially Invisible' under the 'Details' tab.

I hope this all proves useful to you in building your program! Good luck!

'Define' button for defining aspects from GUI editor

Uploaded Image: Define Button.JPG

Shortcut to opening a GUI editor on your application model class (as well as running it)

Uploaded Image: edit from Browser.JPG

Links to this Page