Dynamically adding elements in Nifty

Hello everyone,

I’m trying to make a nifty layout that can have any number of radio buttons. To achieve this, I should be able to add Elements to the layer/panel from Java.
Thus I started by testing a simple button.

I have read some old threads (from 2012), but their solution doesn’t work.

Here is the code that adds a button:

public void addNiftyButton() {
        Screen screen = nifty.getCurrentScreen();
        Element layer = screen.findElementById("foreground");
        
        
        ButtonBuilder button = new ButtonBuilder("dynamic button", "dynamic") {{
            width("20%");
            height("20%");
            align(Align.Center);
            valign(VAlign.Center);
        }};
        
        /** nifty is a field */
        button.build(nifty, screen, layer);
        
        /** desperate try */
        Element buttonElement = screen.findElementById("dynamic button");
        buttonElement.show();

        layer.layoutElements();
    }

This is my layout (part of it):

<screen id="start" controller="mygame.StartState">
        
        <layer id="background" backgroundColor="#00f8" />
        
        <layer id="foreground" childLayout="vertical">
            
            <panel id="title" childLayout="vertical" width="100%" height="80%">
                
                <panel id="splash" childLayout="center" width="15%" align="right" height="20%">
                    <control name="label" id="splashText" color="f44f" text="${CALL.getSplashText()}"/>
                </panel>
                
                <control id="titleText" name="label" text="OpenHex v0.0.2" />
                
            </panel>
            
            <panel id="info" childLayout="vertical" width="100%" height="20%">
                <control name="button" id="infoText" label="Press any key to continue">
                    <interact onClick="addNiftyButton()" />
                </control>
            </panel>
            
        </layer>
        
    </screen> 

The screen:

When I press the button “infoText”, which is responsible for adding another button, nothing happens. If i click it again, it says in the console “conflicting id”. I concluded from this that the button is created, but not shown/added. Does anyone know what the correct way of doing this is?

Well, you are adding it to your “foreground” layer which has 2 panels that already take all the available height. The button is being added, but pushed off the screen. When you click it a second time you are getting an ID conflict because you aren’t supposed to add more than one element with the same ID, which in your case is “dynamic button”. The button is probably still being added a second time, but because it is pushed off screen it looks like it isn’t doing anything.

I get the part about the conflicting id’s, I just put that in to show that it’s working to so easy extend.
Your hypothesis sounds quite reasonable, I will try it later. Thank you for your answer.

It works! Thank you!