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

Adding an Icon to your GUI - Raschel Mead

Importing Graphics from Outside of Smalltalk to Inside Smalltalk for use on a Toolbar

1. Create a 20x20 bitmap icon (you can do this using Paint or Photoshop, etc.) The image I will be using is named ‘magnify-icon.bmp’.

2. Open up VisualWorks.

3. Now you are going to want to read the image into memory. In the Workspace window, type in the following lines of code. Reference the screen-shot below if needed.
img:= (ImageReader fromFile: ‘magnify-icon.bmp’) image.   <---reads in image & gives back image
string:= img2 minimalStorage String.    <---creates a string that you can use in a resource method
string := ‘^CachedImage on: (‘, string, ‘)’.    <---simply adds cached image on


4. Now we are going to want to create the method by pasting it into the browser. In the top window select “Browse” from the toolbar at the top. Then choose “Class/Variable/Name Space…” Here, open up class “Simple Counter” go to the class side, create a new resources area and paste the method in.

5. Now you see the method name and the executable comment. Paste in the string from the Workspace window so that it looks like this:

6. Execute the comment so that you can get the tool editor on the image to see what it looks like. The 20x20 bitmap should pop up in the Image Editor.

7. To add the icon to a toolbar, re-open the interface for editing. Open it so that you see the GUI Painter Tool. Here you can use the Menu Editor to edit the toolbar.

8. Add the name and the method that it will invoke.

9. Then put in the class: SimpleCounter and the selector: #magnify. Then install it.

10. You will need to reinstall the toolbar since you changed that. The editing version won’t show the changes you made yet because you just modified the menu without reinstalling the interface and re-bringing it up. However you can open up the executable to see what it looks like. Now you have a new magnifying glass icon on the toolbar!

Links to this Page