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

Ye Yan's Prefab Tutorial

We used a widget set named Prefab for the construction of 2D GUIs for our project. I heard that some groups used a similar package named BobsUI. We haven't tried that package since Prefab satisfied all of our needs, but future groups may also want to take a look at BobsUI (From what I read on the BobsUI webpage, it seems that it doesn't actually allow WYSIWYG GUI layout, which Prefab allows. This may be one reason to use Prefab over BobsUI).

Prefab can be downloaded at

Installation: Download the .zip file from the webpage above. Unzip the files into your Squeak folder. First file-in "xpm.cs", then file-in "Prefab.cs". (If you're really new to Squeak, here's how you file-in:

1. Left click on an empty area in the background to open the world menu.
2. Select "open..." to open up the open menu.
3. On the open menu, select "file list".
4. A file browser should pop up. Browse to the folder that contains the files you want to file in.
5. Left click on the file name of the file you want to import.
6. If the file can be filed-in, a button named "fileIn" should appear above the file names.
7. Click on the button and the file should be filed in.
8. Open system browser and you should discover the change.)

Usage: All the elements of Prefab are added to PrefabConstruction, similar to the content pane in Java. To make a new PrefabConstruction, follow the following steps:

1. Left click on an empty area in the background to open the world menu.
2. Select "new morph..." to open the "Add a new morph" menu.
3. Go to "from alphabetical list"
4. Select "PrefabConstruction"
5. A gray square should appear. Resize the square as neeeded.
6. Repeat the same steps to create PrefabLabels, PrefabButtons, etc.
7. To add the buttons and labels to the PrefabConstruction, create them and then drag them onto the gray square. Just make sure that the square is large enough to contain the added elements and then the new elements are completely within the PrefabConstruction.

Integrate into code:
1. Make a subclass of PrefabManager, for example's sake, let's call it NewManager.
2. In the class, create a method "buildOn: aManager". The code for the buildOn: method comes from the GUI you've just created.
3. To get that code, click on the PrefabConstruction with your middle mouse button to see the halo, then click on the red Menu button to bring up a menu.
4. Click on the last entry of the menu, which should read "Display construction source".
5. A window should pop up displaying the source for a method with the signature "buildOn: aManager".
6. Copy that entire source code to the method you created with the same name.
7. To display the GUI now, use the following line in the Workspace:
NewManager new openInSystemWindowNamed: 'Whatever label you want'.

A window should pop up that looks exactly like you created.

Action listening: Of course your GUI should be interactive. In your NewManager class, add a method named "addSemanticActions". Here's an example:

"Make the PrefabButtons and PrefabListBoxes do stuff when clicked"
| var |

var := (self clientWithTag: #closeButton).
(var = nil) ifFalse: [
target: guide;
action: #finish.

You should tag all components in the GUI with a name. (For example, to set the name of a PrefabButton to "aButton": First create that button, then bring up the halo of the button, click on the red menu button, and select "Set tag" on the menu. Then just type in "aButton", without the quotes, to set the that of that button to "aButton". You should give different buttons different names to differentiate them). In this case, the GUI contains a button with the tag #closeButton. var points to the button. The target of an event handling is the variable guide, and the action #finish should be a method present in the guide class. In this case, clicking the close button should call a method finish in the guide and that method closes the GUI.

Examples: The Prefab package comes with three simple GUIs in the Morphic-Prefab-Examples category. They were very helpful in helping me understand how the package works. The Calculator class is especially useful.

Hope this tutorial will help you understand the Prefab package. It may be confusing in the beginning, but once you learn it, GUI development should be very fast.

Links to this Page