Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007
How to create custom menubars
This is a complete tutorial on how to create custom menu bars. It explains how to create the individual buttons and how to implelent the actions that are triggered by pressing the buttons.
Let's first define our needs and what the Menu bar should do.
We will assume that we need a menu bar that can create a rectangle and open it on the screen, move the rectangle and close it. Another thing we wanna do is open a magnifying glass and be able to close it. And the last thing we want the menu to have is a Close menu button.
Here is an image of what we need and it's actually a screenshot of what we're about to create.
The buttons on this menu bar change their color on mouse-down and the blue background is the color of the Squeak desktop background, this menu bar does not have a background, it is transparent.
Let's start by definig a MenuBar class.
AlignmentMorph subclass: #MenuBar
instanceVariableNames: 'rectangle magnifier'
As we can see our class extends from an AlignmentMorph which will organize Morphs in a row when they are added.
The rectangle and magnifier variables are references to the objects which will perform actions once the buttons are pressed. Once the Close Menu button is pressed, the menu bar will dissapear from the screen.
Next let's see how the meny bar is constructed.
First we need an initialize method which will set up our MenuBar.
self position: 100@100.
self color: Color transparent;
borderColor: Color orange lighter.
self setNameTo: 'Menu bar';
extent: 300 @ 5.
We first call the initialize of the parent, set some colors and call the method named populateMenu which as the name implies populates the menu with buttons, that is where all the work is done.
Let's see what populateMenu does.
self addMorph: (self makeButton: 'Close Menu'
balloonText: 'Close this menu.'
self addMorph: (self makeButton: 'Close magnifier'
balloonText: 'Close the magnifier object.'
self addMorph: (self makeButton: 'Open Magnifier'
balloonText: 'Open a new instance of the Magnifier object.'
self addMorph: (self makeButton: 'Close rectangle'
balloonText: 'Close the rectangle.'
self addMorph: (self makeButton: 'Move rectangle'
balloonText: 'Move the rectangle to the right.'
self addMorph: (self makeButton: 'Open Rectangle'
balloonText: 'Opens a new instance of a Rectangle.'
Each one of these blocks of code creates one single button wiht the given parameters. Here is what the first block of code creates.
Here is the code for the makeButton method.
makeButton: aString balloonText: anotherString for: aSymbol
^ SimpleButtonDelayedMenuMorph new target: self;
color: Color orange lighter;
label: aString translated font: TextStyle defaultFont;
setBalloonText: anotherString translated;
And finally we will implement the action methods which are invoked when the buttons are pressed.
Here are all the action methods for all the buttons.
rectangle := RectangleMorph new.
rectangle color: Color yellow.
rectangle position: 150@150.
rectangle extent: 300@200.
rectangle position: ((rectangle position) + (10@10)).
magnifier := MagnifierMorph new.
The image below shows the MenuBar in action. It shows a PowerPoint like presentation application and the menu bar is identical to the one in this tutorial.
created by Izudin Ibrahimbegovic
Links to this Page
- Cases last edited on 30 July 2011 at 2:33 am by r59h132.res.gatech.edu
- Izudin Ibrahimbegovic last edited on 12 December 2005 at 4:59 pm by r59h22.res.gatech.edu
- CoWeb Assignment1 gtg514z last edited on 16 May 2006 at 11:32 pm by c-69-180-22-55.hsd1.ga.comcast.net