slide menu in j2me

[afka]

hi,
I would like to add a Slide menu to my Canvas. It should be "grown" from the bottom and move back. This "moving" effect is very inportant.

Any ideas how to do it?

Thanks a lot,

A

[axs]

Hi,

You can easily do it on a canvas by redrawing your slide menu N times with increased or decreased menu's vertical offsets. Of course, you will also need a thread for implementing correct timings between these N redrawings. It's up to you how much time your menu will need for moving out or back, and only this time and your menu's height will affect on animation timings.

[afka]

Thanks, I understand your answer, but if I create this menu as Image ( and then redraw it many times for a "moving" effect), it will be impossible
make a selections in this menu (it will be "dead" image), so what is a possible
solution?

[peterblazejewicz]

hi,

such menu is kind of list,
http://discussion.forum.nokia.com/fo...ad.php?t=88447
you need your own solution for focus,
focused: one image (selected state)
uncocuded: another image (unselected state)
states are changed by redrawing part of canvas,

hth,
regards,
Peter

[axs]

Thanks, I understand your answer, but if I create this menu as Image ( and then redraw it many times for a "moving" effect), it will be impossible
make a selections in this menu (it will be "dead" image), so what is a possible
solution?

Hi,

You don't have to create the menu as an Image (in fact, it would not be an efficient solution at all). Any custom menu could be simlpy drawn as a rectangle (or any figure) in which you put menu options (as strings or images), and which you are drawing on the top of you main GUI.

In your GUI class it would look like this (sorry, forum doesn't support white spaces before the lines):


public class MainGUI extends Canvas (or GameCanvas) ... {

...

public void keyPressed(int keyCode) {

// check out if the menu activation buttons were pressed

if (keyCode == 'menu activation button') {

menuIsActivated = true;

} // end if menu is activated
else if (keyCode == 'exit or cancel button') {

menuIsActivated = false;

} // end if menu option was selected
else if (keyCode == 'menu selection button') { // 'menu selection button' is usually FIRE button

menuIsActivated = false; // now have to hide the menu

String selectedMenuOption = menuOptions[currentMenuSelectionIndex];

// or call any function according to the selected menu index or option

} // end if menu option was selected



// update menu selection indexes (for drawing selected menu option)

if (menuIsActivated & (keyCode == 'scroll up button')) {

currentMenuSelectionIndex--; // actually depends on used logic

} // end if scroll down button pressed with
else if (menuIsActivated & (keyCode == 'scroll down button')) {

currentMenuSelectionIndex++; // actually depends on used logic

} // end if scroll down button pressed with



repaint(); // draw GUI and show or hide menu


} // end keyPressed


...


public void paint(Graphics g) {

// draw main GUI

drawGUI(g);


// draw Menu

if (menuIsActivated) {

// this method draws a menu rectangle (or anything else, it's just up to your GUI style),
// starting from the coordinate (startX, startY) and ending at (maxWidth, maxHeight)
// g (graphics) is just for drawing the menu
// menuOptions[] are menu options you show on your menu
// currentSelectionIndex is used to separate selected menu option from the others (underline/different backgound/different color/etc.)

drawActiveMenu(g, menuOptions[], startX, startY, maxWidth, maxHeight, currentSelectionIndex);

} // end if menu is activated

} // end paint


...

} // end MainGUI



Sorry, I just have no time, so I've put here a pseudocode, but I hope this will give you the basic idea and will help you to draw your menu(s).

With animated menu (as you probably have realized), you just start a thread, and call drawActiveMenu(g, menuOptions[], startX, startY, maxWidth, maxHeight, currentSelectionIndex) with updated startX or startY values (as well as with updated maxWidth and maxHeight) until the menu will be fully visible.

As I have realized in many projects, the easies (and the cheapest) way to separate selected menu options is just bold and underlined text, but it's not a difficult thing to draw just a rectangle with different color at the selected index, and put currently selected menu option on it.