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

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.

Uploaded Image: m5-menubar.png

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'
	classVariableNames: ''
	poolDictionaries: ''
	category: 'MenuCategory'

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.
   initialize
        super initialize.
        self position: 100@100.
	self color: Color transparent;
		 borderColor: Color orange lighter.
	self setNameTo: 'Menu bar';
		 extent: 300 @ 5.
        self populateMenu


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.
populateMenu
  self addMorph: (self makeButton: 'Close Menu'
 		        balloonText: 'Close this menu.'
			for: #close).

  self addMorph: (self makeButton: 'Close magnifier'
			balloonText: 'Close the magnifier object.'
			for: #closeMagnifier).

  self addMorph: (self makeButton: 'Open Magnifier'
			balloonText: 'Open a new instance of the Magnifier object.'
			for: #openMagnifier).
	
  self addMorph: (self makeButton: 'Close rectangle'
			balloonText: 'Close the rectangle.'
			for: #closeRectangle).

  self addMorph: (self makeButton: 'Move rectangle'
			balloonText: 'Move the rectangle to the right.'
			for: #moveRectangle).

  self addMorph: (self	makeButton: 'Open Rectangle'
			balloonText: 'Opens a new instance of a Rectangle.'
			for: #openRectangle).


Each one of these blocks of code creates one single button wiht the given parameters. Here is what the first block of code creates. Uploaded Image: close-menu-button.png
Here is the code for the makeButton method.
makeButton: aString balloonText: anotherString for: aSymbol 
    ^ SimpleButtonDelayedMenuMorph new target: self;
	 borderColor: #raised;
	 color: Color orange lighter;
	 label: aString translated font: TextStyle defaultFont;
	 setBalloonText: anotherString translated;
	 actionSelector: aSymbol


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.
openRectangle
  rectangle := RectangleMorph new.
  rectangle color: Color yellow.
  rectangle position: 150@150.
  rectangle extent: 300@200.
  rectangle openInWorld.


moveRectangle
  rectangle position: ((rectangle position) + (10@10)).


closeRectangle
  rectangle delete.


openMagnifier
  magnifier := MagnifierMorph new.
  magnifier openInWorld.


closeMagnifier
  magnifier delete.


close
  self delete.


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.

Uploaded Image: presentation-menu.png


created by Izudin Ibrahimbegovic

Links to this Page