Creating Efficient Menus (Help!)

[unrealhacker12]

Hi I'm designing the UI for my level editor and I found managing multiple menus and buttons can become complex and annoying to program for every single situation and for every single button. Which as you can imagine it becomes tedious.

So I ask for your help as I present you with the problem...

Imagine you have 2 buttons both of them open drop down menu's when clicked but I only want to have one menu open at any time.

To further complicated the situation in one of the drop down menu's there is a button that when clicked it'll open a further sub-menu in place of the previous one.

Here is how I've gone about programming such a situation.

var menuOpen:uint = 0;

var mainMenu:MovieClip = new mainMenu_lib;
var hud:MovieClip = new hud_lib;
var worldProps:MovieClip = new worldProps_lib;
var toolBar:MovieClip = new toolBar_lib;
var createBoxMenu:MovieClip = new createBoxMenu_lib;

////CREATE LEVEL MENU
///EDIT WORLD BUTTON
hud.editWorld_btn.addEventListener(MouseEvent.CLICK, editWorldClicked);
function editWorldClicked(e:MouseEvent):void {
    switch(menuOpen){
        case 0:
        menuOpen = 1;
        hud.addChild(worldProps);
        break;
        
        case 1:
        menuOpen = 0;
        hud.removeChild(worldProps);
        break;
        
        case 2:
        menuOpen = 1;
        hud.removeChild(toolBar);
        hud.addChild(worldProps);
        break;
        
        case 3:
        menuOpen = 1;
        hud.removeChild(createBoxMenu);
        hud.addChild(worldProps);
        break;
    }
}
////TOOL BAR MENU
hud.tools_btn.addEventListener(MouseEvent.CLICK, toolsClicked);
function toolsClicked(e:MouseEvent):void {
    switch(menuOpen){
        case 0:
        menuOpen = 2;
        hud.addChild(toolBar);
        break;

        case 1:
        menuOpen = 2;
        hud.removeChild(worldProps);
        hud.addChild(toolBar);
        break;
        
        case 2:
        menuOpen = 0;
        hud.removeChild(toolBar);
        break;
        
        case 3:
        menuOpen = 2;
        hud.removeChild(createBoxMenu);
        hud.addChild(toolBar);
        break;
    }
}
//CREATE BOX BUTTON
toolBar.createBox_btn.addEventListener(MouseEvent.CLICK, createBoxClicked);
function createBoxClicked(e:MouseEvent):void {
    menuOpen = 3;
    hud.removeChild(toolBar);
    hud.addChild(createBoxMenu);
} 

As you can see I've used multiple switch statements to program for ever situation.

Hense:

I want to open menu 1:

checks if any menus are open

if so close them and open menu 1...

...and so on for every menu further multiplying the amount of programming every time I add a new menu. I have to go back to the buttons that open all other menus and program for the occurrence that, the new menu may be open.

I was thinking some kind of function could handle all the menu's but my brain is to frazzled to think.

I tried to explain the problem as best I could...

...if this is insufficient please tell me what you don't understand and I will further try to explain it.


Thanks in advance.

[jAQUAN]

There are any number of ways to handle specific situations but as you've discovered, they are all going to require a similarly tedious approach.

The best answer I can give is to get a better grasp of object oriented programing and some of its terms like abstraction and decoupling. These types of situations have been encountered countless times by countless developers to the point where a standard methods of dealing with them has been developed. These methods are called design patterns. The most popular pattern for dealing with complicated UI's is the Model View Controller pattern.

The goal is separate your data (Model) from the display (View) and use a mediator (Controller) to notify the model when something happens in the view. When done right, a typical scenario would work as follows:
The user clicks on a drop down menu in the View. The view tells the controller who knows how to communicate with the Model. The model updates the value of what menu is open and tells the View to redraw itself. The view completely redraws itself by looking up the data in the model.

[dawsonk]

var menuOpen:uint=0;

var mainMenu:MovieClip=new mainMenu_lib  ;
mainMenu.base=mainMenu.numChildren;

var hud:MovieClip=new hud_lib  ;
hud.base=hud.numChildren;

var worldProps:MovieClip=new worldProps_lib  ;
worldProps.base=worldProps.numChildren;

var toolBar:MovieClip=new toolBar_lib  ;
toolBar.base=toolBar.numChildren;

var createBoxMenu:MovieClip=new createBoxMenu_lib  ;
createBoxMenu.base=createBoxMenu.numChildren;


function cleanUpMenus(obj:Object):void {
	if (obj.base!=undefined&&obj.base<obj.numChildren) {
		var mc:Object=obj.getChildAt(obj.numChildren-1);
		if (mc.base!=undefined&&mc.base<mc.numChildren) {
			cleanUpMenus(mc);
		} else {
			obj.removeChild(mc);
		}
	}
}


hud.editWorld_btn.addEventListener(MouseEvent.CLICK, editWorldClicked);

function editWorldClicked(e:MouseEvent):void {
	cleanUpMenus(e.currentTarget.parent);
	if (menuOpen!=1) {
		hud.addChild(worldProps);
		menuOpen=1;
	}
}


hud.tools_btn.addEventListener(MouseEvent.CLICK, toolsClicked);

function toolsClicked(e:MouseEvent):void {
	cleanUpMenus(e.currentTarget.parent);
	if (menuOpen!=2) {
		hud.addChild(toolBar);
		menuOpen=2;
	}
}


toolBar.createBox_btn.addEventListener(MouseEvent.CLICK, createBoxClicked);

function createBoxClicked(e:MouseEvent):void {
	cleanUpMenus(e.currentTarget.parent.parent);
	if (menuOpen!=3) {
		hud.addChild(createBoxMenu);
		menuOpen=3;
	}
}

[unrealhacker12]

jAQUAN

Thanks but learning all that theory with no specifics relating to menu management is no use at all.

dawsonk

Thanks your code doesn't work but I'll work with it until it does, while I was thinking I had an idea to implement a function in a similar way so that it handles all opening and closing of the menus.

I'll show you what I get at the end.

[unrealhacker12]

Ok I've found the best way of handling menu's opening and closing.

function openCloseMenu(Name:Object) {
    switch(Name){
        case "buttonName":

        break;
    }
}
hud.buttonName.addEventListener(MouseEvent.CLICK, buttonClicked);
function buttonClicked(e:MouseEvent):void {
    openCloseMenu(e.target.name);
}

[jAQUAN]

Nice, now you're starting to think in terms of abstraction. I know my post wasn't going to be immediately helpful. But you can think of it as a waypoint you should be headed towards. Its hard to grasp for sure, but will make the rest of your coding life easier.