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

Team Los Defensores Intergalacticos - HotDraw Case

HotDraw Customization

HotDraw is a package developed for Smalltalk that allows users to rapidly build GUI driven applications. This guide will demonstrate to an intermediate Smalltalk user exactly how to use the HotDraw DrawingEditor as a superclass and modify the application to suit the developer’s personal needs.

Loading the HotDraw Bundle

1. Connect to the Cincom repository.
2. From the main VisualWorks (VW) window, click on Store and then click on Published Items.
3. Once the repository is accessed, type “hotdraw” into the text field and click on the bundle. It is important that you click on the bundle and not the parcel.
4. In the ‘Versions’ section, right-click on the latest version and click Load.
5. Confirm that you want to load the bundle and then proceed to wait for the bundle to be loaded.
6. That’s it – the bundle is now loaded.

Creating Your Application

1. Create a new class in your package and for the ‘Superclass’ field click the browse button.
2. Type in “drawingeditor” and select the HotDraw DrawingEditor from the list and click Ok.
3. You can test to make sure your new class works by typing the name of your class and open in the browse. (i.e. If you class is ‘Hello’ type “Hello open” and click the Do It button. The resulting window should look like the DrawingEditor in HotDraw).
Now that you’ve successfully created your application and used HotDraw’s DrawingEditor as a superclass, I’ll proceed to let you in on a little secret.

Customizing Your Application

1. Navigate to the ‘Tool’ class in the HotDraw bundle and click on the Class tab.
2. Select all the methods in the “tool state” protocol and move them to your package.
3. From here on out, you simply edit the tool states to perform the actions you want. Descriptions of a few of the key tool state methods are listed at the end of this guide.
4. To edit a tool state, select a method and select the commented portion of the source. Right-click on the selection and click Do It.
5. The previous step should have brought up the ToolStateEditor. See figure 1 below (initializeCanvasToolStates) – it looks very much like the DrawingEditor.

HotDraw Customization

The ToolStateEditor may look confusing to some initially but in reality, it is very easy to use.

Using the ToolStateEditor

1. To add a new state to the canvas, simply right-click and select Add state from the menu. This will create a new state object.
2. Editing the action of a state is done by right-clicking on the state and selecting edit command from the menu. This will bring up the ToolStateCommandEditor.
3. Within the CommandEditor, simply enter your commands as your would for any other Smalltalk code within the block. The block has a reference to the tool which was selected when the event occurred as well as a reference to the event that occurred.
4. To add a transition between two states, drag the middle square from the selection box of the starting state to anywhere on the ending state. The default transition is redButtonPress. Right-clicking on the line between two states and selection transition allows the user to customize the transition type.
5. To save a tool state, right-click on the canvas and select compile. This will prompt you for a tool state name (Note: unless you create your own state from a blank canvas, simply enter the original tool state name).

ToolState Descriptions

initializeCanvasToolStates – contains the basic actions of the canvas, namely the right-click menu and selecting a tool and performing its task
initializeOriginCornerCreationTool – contains the actions for the different shapes
initializeSelectionToolStates – contains the actions for the selection tool

Link to this Page