×
Namespaces

Variants
Actions
Revision as of 17:07, 3 September 2009 by vdharankar (Talk | contribs)

How to make Menu on Canvas

From Nokia Developer Wiki
Jump to: navigation, search


Article Metadata
Tested with
Devices(s): S60,S40 All
Compatibility
Platform(s): MIDP 2.0
Series 40
Symbian
MIDP 2.0
Article
Keywords: Menu, Canvas
Created: (29 Aug 2009)
Last edited: vdharankar (03 Sep 2009)




There are some issues in the menu rendering algorithm which may prevent proper rendering. Use this code with caution.


Problem

How to display Menu on Canvas, allow the user to scroll through different options, select an option and to redirect the flow to the selected module of the application.

Solution

Variables

We take an array of Strings for Menu options, a variable (selectedRowPos) to keep the track of selected Menu option and define two fonts and three colors to render different elements on the screen.

 String[] options={"Module1","Module2","Module3"};
int selectedRowPos=0;
int bgcolor=(255<<16)+(255<<8)+255; // Background color - white
int fgcolor=(0<<16)+(0<<8)+0; // Foreground color - black
int hilightcolor=(84<<16)+(171<<8)+67; // Menu highlight color color
Font bldFont = Font.getFont(Font.FACE_SYSTEM, Font.STYLE_BOLD, Font.SIZE_SMALL); // Small Bold
Font hedFont = Font.getFont(Font.FACE_SYSTEM, Font.STYLE_BOLD, Font.SIZE_MEDIUM); // Medium Bold

Painting the Menu

The below given method paints all the menu options using a for loop on the Canvas, then the selected menu option is Highlighted by painting a rectangle filled with highlight color and the menu option is drawn over it again. This method may be called from the paint() method of the main MenuCanvas class.

 private void showMainMenu(Graphics g) 
{
int WIDTH=Device.WIDTH;
int HEIGHT=Device.HEIGHT;
int gap=30
 
// Set Background and paint the Header
g.setColor(bgcolor);
g.fillRect(0,0,WIDTH,HEIGHT);
g.setColor(fgcolor);
g.setFont(hedFont);
g.drawString("MainMenu",5+(WIDTH/2),5,g.TOP|g.HCENTER);
 
//Drawing the Menu Options
g.setFont(bldFont);
for(int x=0;x<2;x++) {
g.drawString(options[x],60,65*gap,g.TOP|g.LEFT); // Print the Menu
}
 
//Highlighting the selected menu option
g.setColor(hilightcolor);
g.fillRoundRect(2, 55+( selectedRowPos)*gap, WIDTH-2, gap-3, 3, 3);
g.setColor(fgcolor);
g.drawString(options[selectedRowPos],60,65+( selectedRowPos)*gap,g.TOP|g.LEFT);
 
//Draw Line and paint the Footer
g.drawLine(0,HEIGHT-35,WIDTH,HEIGHT-35);
g.drawString("Select", 2 , HEIGHT-31 , g.LEFT|g.TOP);
g.drawString("Fire", WIDTH/2 , HEIGHT-31 , g.HCENTER|g.TOP);
g.drawString("Exit", WIDTH - 2 , HEIGHT-31 , g.RIGHT|g.TOP);
}

Scrolling Through the Menu & Selection

Scrolling through the menu option is managed by the KeyPressed method of the Canvas, in which the value of selectedRowPos is changed when user presses up or down key, and Menu option action is selected on Left Soft key or the Fire Key and Right Softkey can be used for back or exit. Repaint method of the Canvas is called to show the change of selection on the menu.

public void keyPressed(int keyCode) {
switch(keyCode) {
case Device.UP: if(selectedRowPos >0) selectedRowPos --;
break;
case Device.DOWN: if(selectedRowPos <2) selectedRowPos ++;
break;
case Device.RSK: // Exit
selectedRowPos =0;
// display.setCurrent(new ExitCanvas(this));
break;
case Device.LSK: // Select
case Device.FIRE: // Fire
gotoModule();
break;
}
repaint();
}

Go to Module

The application flow is re-directed based on users selection of option on which the fire/select key is pressed.

private void gotoModule() {
switch(selectedRowPos) {
case 0: //display.setCurrent(new Module1Canvas(this)); // Module1
break;
case 1: //display.setCurrent (new Module2Canvas(this)); //Module2
break;
case 2: //display.setCurrent (new Module3Canvas(this)); //Module13
break;
}

--Submitted by Amitabh Srivastava at 13:00(IST), 29 August 2009.

157 page views in the last 30 days.
×