Nifty: Creating tree structure in nifty menu

Troubleshooting gui
1

So i’ve been using the Nifty java builder for my gui and things has been running great. Now that I have all my nifty controls running, I want to make things more neat and put them in a menu that has a form of a tree structure. For example: instead of having three different button about the Player Camera angle, I would like a Button that when hovered on will open up the other sub-buttons. I saw the MENU example on the nifty wiki but still it doesn’t have the parent/child capability.

Is that capability available?

thanks

2

It’s possible in nifty. You would need to code it yourself though.

3

thanks… not asking anyone to code it for me but any hints on how is that doable?

4

Trigger off the onHover event on the button. When it is triggered open a popup (either using nifty’s popups or by just creating a panel on a blank layer) in the correct location with the buttons you need on it.

5

That sounds like reinventing the wheel… are you sure that feature isn’t already implemented?? @Void256 sorry to keep bothering you but you’re the expert here. Is @Zarch correct that I need to implement it from scratch?

6

@Zarch is always correct.

Looking at the Menu interface it does not support any sub menus. Out of the box it can only handle simple menu items.

So you have to either roll your complete own solution (like zarch said, which is btw not really reinventing the wheel since it’s a perfectly valid way one can use Nifty: just stick to the core elements, events and effects and combine them in whatever way you like) or you could use the more higher level standard controls … and add that to the MenuControl yourself and send me a pull request :wink:

1 Like
7

Thanks :slight_smile: I’ll do my best :slight_smile: on it…

8

Ok, I’ve thought i should comment in this topic. :stuck_out_tongue: But I’m hesitate a little bit because I also think my solution is a bit dull, so bear with me:

Please ask your self (as i asked): What is an Menu anyway? They’re nested element? Is it really important that hierachy in data structure should be represented as hierachy in visualization?

Ok, to be clear Menu (and its subs menus and items) are elements which “can be” ordered, arranged in a way - a “Menu layout” maybe.

So as if you are talking about the menu like the topbar menu of almost every desktop application. The Layout menu has the resposibilities to arrange and show/hide appropriate elements. The data structure in other hand can be as simple as nested ArrayList<Menu> or even nested ArrayList<Object> …

Because menu and its sub element are real elements, you can do anything inside of it. You can use buttons, image, controls, whatever and nifty should figure out properly.

My so call solution also come from my Web/HTML and CSS experiences. In the world of Div, we just align them whatever you like, and only have an almighty Array in JavaScript. That’s why they usually do the visual artifacts and the data structure seperatedly. They don’t really have to be coupled with each other, resemble each other and it’s turn out pretty good and easy to implemented at the end.

[ Yeah, I’ve talked way too much about the idea]
Let’s get to the real thing:

What i did is I make another layout for this specific purpose, make elements nested. The tree of elements or so call the “Menu model” can be build like this in my Groovy code:

menu(“File”){
__menu(“Open”){
____menu(“Project”);
____menu(“File”);
__menu() // or separator()
__menu(“Exit”).onClick{
___quit();
__}
}

or even simplier and handful, as text, (I’ve use this for tons of customizable elements in character customization application) :
Face
–Eyes
----Left
----Right
–Nose
–Mouth
----Tounge
----Teeth
Body
–Arms
–Legs
–Weapon
----Gun
—Sword
…
This build up a tree, then I created a bunch of Text elements with the appropriate name. The function of this is so obvious I don’t have to code every single menu execution routine. I can just write:

RootMenu.any.onClick{
changePart(it.text);
}

You may find interest about the MenuLayout, it’s really simple:
Positioning: Your sub element is align with its marked parent left or right.
Event tabing and switching: event is a little bit complicated but not too much, you can capture up- down, left - right, tab of just mouse click.
At this point I think you can code it your self. I have my code but STILL it belongs to a whole that should not be share separately :stuck_out_tongue:

Happy coding,

9

thanks @atomix i’ll take a look…

So I already have a horizontal menu (5 buttons). onHover() on each button I will call another Vertical menu of buttons. I’ve spent the whole day trying to figure out a way to align the 2nd menu of buttons right below the parent button with no luck. How can I offset a panel or any element off an existing one? since we don’t have getter methods for the locations of these elements.

Even if I try to put the position in absolute values nothing happens when i use x or y like below: (buttons remain in the middle of the screen)

[java] PanelBuilder panel = new PanelBuilder(“panel_hud”) {{

        childLayoutHorizontal();

// alignCenter();
// valignCenter();
//alignLeft();
//valignTop();
x(“100”);
y(“100”);
width(“100%”);

        ButtonBuilder test1 = new ButtonBuilder("test1", "SubMenu1") {
            {   
                width("100%");
                visibleToMouse(true);
                this.focusable(false);
            }};


            ButtonBuilder test2 = new ButtonBuilder("test2", "SubMenu2") {
                { 

                    width("100%");
                    visibleToMouse(true);
                    this.focusable(false); 
                }};

                // Build into nifty
                test1.build(nifty, screen, element);
                test2.build(nifty, screen, element);
    }};[/java]
10

First, you have to make the Root element - a Panel which contain all the child menus and item, has the AbsoluteLayout. Then the x,y values will have their effects. In my approach, I made a MenuLayout, which very similiar with AbsoluteLayout and also arrange childElement in some orders (a hierachy order for topbar Menu style, or carousel style, whatever you like…)

So to mark that a Element is a child of another element. If you use XML, you can use control definition and the Nifty default internal containment. Then you can made up a list or a tree to save that information. This method is not very flexible thought. If you only use builder, there are much more way as I said in the last post. Anyway, just try, :stuck_out_tongue:

11
First, you have to make the Root element – a Panel which contain all the child menus and item, has the AbsoluteLayout. Then the x,y values will have their effects.

but this is what i’m doing in my example above. What am I doing wrong?

12

[java]
PanelBuilder panel = new PanelBuilder(“panel_hud”) {{
childLayoutAbsolute();
// childLayoutHorizontal();
// alignCenter();
// valignCenter();
//alignLeft();
//valignTop();
x(“100″);
y(“100″);[/java]

It looks like you still lack of basic Nifty exercises. Read these please, before going to the Menu thingys!

http://sourceforge.net/projects/nifty-gui/files/nifty-gui/1.3.2/nifty-gui-the-manual-1.3.2.pdf/download

13

or could you please show me an exmple of a parent/ children in Java builder?

thanks!