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

Los Pimps - Prefab Tutorial

Prefab Tutorial

For making your GUI this semester, one of the options you have is PreFab. PreFab is a third party GUI creation tool designed to expedite the GUI creation process. You can find it here: http://www.csclub.uwaterloo.ca/~cgreuter/prefab.html. There are two ways to use PreFab, one is considerably easier to use than the other. The other way gives you MUCH more control over the look of the GUI.

Option #1: Using the PreFab construction tool. Once installed, left click on the Squeak background, and select New Morph -> From Alphabetical List -> P-R -> PrefabConstruction. This will allow you to place the Construction pane onto the Squeak background. To add GUI elements to your construction pane, follow the above process and select any morph object beginning with the prefix “PreFab-“. Make sure you place the morphs inside the construction pane, or else they will not be attached to the GUI. Use the middle mouse button to select morphs in the pane; you can use the halos to perform certain manipulations to the morphs. To export your GUI as is into code to use in your program, select the Menu halo of the Construction pane and select Display Construction Source (at the bottom). This will open a workspace with the code to build the GUI you have designed. Don’t forget to put this code into your program. From here you can edit the source code, which is covered more extensively in Option #2.

Option #2: Writing the code manually. Once you become a little more familiar with the PreFab code, you may wish to write your GUI manually.

"Builds the main window"
aManager
extent: 800@600;
color: (Color r: 1.0 g: 1.0 b: 1.0);
foregroundColor: (Color r: 0.0 g: 0.0 b: 0.0);
minSize: 800@600;
maxSize: 800@600.

The above is a sample of code for the PreFab manager, something you’ll need in every GUI. This is the basis of the GUI; it defines the properties of your window. Note: the @ character splits the X and Y coordinates.

Here is all the code you need for a button:

"Builds the new person button"
aManager addClient: (PrefabButton new
extent: 100@25;
color: (Color r: 0.851 g: 0.851 b: 0.851);
foregroundColor: (Color r: 0.0 g: 0.0 b: 0.0);
text: 'New Person';
tag: #newPersonButton;
contentOrientation: #centered;
yourself)
atRelPosition: 275@5.

“atRelPosition” is the coordinate of the upper left corner of the button with respect to the PreFab Manager (the origin of a PFM is upper left).
“extent” is the size of the button, measured to the bottom left corner of the button.
“tag” is the pointer symbol to this object.
“text” is the starting text written on the button.
“contentOrientation” can be set to #left , #centered , or #right .

Here is all the code you need for a listbox and scroll bar:

"Builds the geneology list box for the first geneology"
aManager addClient: (PrefabListBox new
extent: 170@35;
color: (Color r: 0.851 g: 0.851 b: 0.851);
foregroundColor: (Color r: 0.0 g: 0.0 b: 0.0);
elementHeight: 15;
tag: #genOneGenList;
selectColor: (Color r: 0.7 g: 0.7 b: 0.7);
selectionMode: #single;
yourself)
atRelPosition: 5@5.

"Builds the geneology list boxes scroll bar for the first geneology"
aManager addClient: (PrefabScrollBar new
extent: 15@35;
color: (Color r: 0.9 g: 0.9 b: 0.9);
orientation: #vertical;
tag:#genOneGenListScroll;
yourself)
atRelPosition: 175@5.

searchListBox _ self clientWithTag: #genOneGenList.
searchListBox vScrollBar: (self clientWithTag: #genOneGenListScroll).

The first chunk of code builds the listbox morph.
The second chunk of code builds the scroll bar morph.
The bottom two lines bind the scrollbar to the listbox.
Note that “searchListBox” is a temporary variable.

These are the fundamentally different PreFab morphs. The other morphs are similar enough to these to figure out. We suggest you build a GUI as described in Option #1 to see more examples of code and also to experiment with.

Make sure that your GUI class is a subclass of PrefabManager, like so:

PrefabManager subclass: #myGUIclass

Be sure your class has a class method named “new” with this code:

new
"default constructor to build the window"

^super new openInSystemWindowNamed: 'Geneology'.

This will instantiated your class, open it in a new window, and give that window a name.

Last part: adding actions to your GUI morphs.

Here is example code of adding semantic actions to your morphs.

addMainActions
"Control the main buttons in the top pane"
| var |

"Semantic action for the new person button"
var _ (self clientWithTag: #newPersonButton).
(var = nil) ifFalse: [
var
target: self;
action: #initializePerson.
].

“target” is the class containing the method you wish to call.
“action” is the method name you wish to call when this morph is clicked on.

One more example, this time for a listbox:

"Semantic action: load Geneology from list1 into left person and fam listboxes"
var := (self clientWithTag: #genOneGenList).
(var = nil) ifFalse: [
var
targetClicked: self;
actionClicked: #loadGenToLeftLists:.
].


This should get you on your way to making GUIs in PreFab. Good luck and don’t let Squeak win. Ever.



Link to this Page