. .

st4u

ST 4U 219: Creating a Visual Part in VA Smalltalk

April 13, 2012 10:51:48.185

Today's Smalltalk 4 You adds a UI that connects to the timer (non visual) part we created last time. If you have trouble viewing it here in the browser, you can also navigate directly to YouTube. To watch now, click on the image below:

Parts.

If you have trouble viewing that directly, you can click here to download the video directly. If you need the video in a Windows Media format, then download that here.

You can also watch it on YouTube:


Today we'll create a visual part in VA Smalltalk, and hook it up to the non-visual part we created last time. Here's the end result - we'll walk through the steps, taking the connections one by one, from the top of the screen down:

Connections

First, how did we add the non-visual part? We used the "add part" menu option in the composition editor, and selected the part by browsing for the name. It appears as a "puzzle piece", since there's no UI. To connect up the #timerFired event to a script, right click on the part, and select "connect". When presented with options, select the script - you'll add a #beep method:

Beep

The code for that is as follows:


beep
	CgDisplay default bell: 20

That will simply play a tone when the timer fires - that way we can tell whether our hookups worked. The properties for this look like this:

Connection

To get the UI parts on the canvas, simply select them in the toolbar at the top of the window, click on the canvas below, and move them around. To set properties, double click - you'll need to set the input field to be an integer, for instance.

Next, create a connection from the input field to the timer object. Hook up the "Object" (value) attribute of the field to the length attribute of the timer. Now when we enter a value, it will flow to the timer object:

length

Now create a connection from the checkbox to the repeat attribute (which we set up as a boolean) in the timer. If checked, this will run our timer repeatedly:

repeat

Next, we need to hook up the start and stop buttons. Create one connection for each to the timer - hook up "clicked" to the start and stop actions respectively:

Start

Stop

Now use the Test menu option. The UI should come up. Enter 1000 (this is milliseconds) in the input field, and then hit the start button. You should get a tone if you have it all set up properly.

App

That just about wraps it up - version this off in ENVY so you can continue with it later - you've just hooked up your visual and non-visual parts in VA Smalltalk.

Save

Need more help? There's a screencast for other topics like this which you may want to watch. Questions? Try the "Chat with James" Google gadget over in the sidebar.

Technorati Tags: , ,

Enclosures:
[st4u219-iPhone.m4v ( Size: 5613950 )]

posted by James Robertson

 Share Tweet This