Dynamic Nifty Problem [Solved]

Hi guys, I have another question. I looked at the nifty gui on how to create elements dynamically and its been good so far. However, it seems like only some things are attributed to the text, mainly actually only the text itself and not its colors or position. Sometimes the text doesn’t even change. The text is stuck at red and the position is stuck at 0,0 even though I change it and the parent child alignment is at absolute.

Here is my creation of the elements.

@Override
public void onStartScreen() {
    Element namePanel = screen.findElementById("namePanel");
    Element ipPanel = screen.findElementById("ipPanel");
     Element name1 = new TextBuilder("name1") {{
            font("aurulent-sans-16.fnt");
            color("#ffff");
            text("Hello World!");
            x("50");
            y("50");
            height("10%");
            width("20%");
        }}.build(nifty, screen, namePanel);
    Element ip1 = new TextBuilder("ip1") {{
        try {
            
            font("aurulent-sans-16.fnt");
            color("#0f0f");
            text(InetAddress.getLocalHost().getHostAddress());
            x("20");
            y("0");
            
            
            } catch (UnknownHostException ex) {
            ex.printStackTrace();
        }
    }}.build(nifty, screen, ipPanel);
    listener = new Listener();
    listener.start();
}

Here is the xml for my GUI

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<nifty xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://nifty-gui.lessvoid.com/nifty-gui" xsi:schemaLocation="https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd">
    <screen id="GScreen0" controller="Controller.ZombiesHostLobbyController">
        <layer id="GLayer0" childLayout="absolute" backgroundImage="Images/Background/ZombiesBackground.png">
            
            <panel id="namePanel" childLayout="absolute" backgroundColor="#fff1" width="19.5%" height ="60%" x="5%" y="10%"/>
            <panel id="dividerPanel" childLayout="absolute" backgroundColor="#0001" width="1%" height="60%" x="24.5%" y="10%"/>
            <panel id="ipPanel" childLayout="absolute" backgroundColor="#fff1" width="19.5%" height ="60%" x="25.5%" y="10%"/> 
            <control name="button" id="startButton" label="Start" width = "40%" height="10%" x="30%" y ="80%"/>
            
        </layer>
    </screen>
</nifty>

Finally here is how the scene is rendered.

Any suggestions?
Thanks for the help in advance. :slight_smile:

Colors and changing text should work out of the box. It is just unclear to me that are you really changing them or always trying to dynamically create those (one time?). As you have both, the code and XML.

Other than that, I remember the constraints at least you need to call manually after changing the text. Position might have worked… With the constraints I mean the whole elements relation to the text that everything is sized as you specified on the layout.

Ok, this is quite poor example, but the best and least lines for now:

But in there, we set the element constraints manually after changing its contents. And then ask its parent to re-calculate the layout. I think that was necessary it the texts were changed and it really affects the layout, the text length.

What I’m trying to do is dynamically create text and put them into two premade panels. I’m doing this because I’m trying to begin to add multiplayer support for my game and I wanted to make a basic lobby so when people connect it displays their username and their IP. So I’m not really changing text I’m more flat out creating it and when I said change before I was trying to reference the fact that my text didn’t change. That misconception is my fault cause I accidentally pasted the code before I changed the text(“Hello World!”); to text(“Name goes here”); Also if I’m am just creating the text instead of modifying it would I have to manually update the constraints manually? So I guess my question is why does my code create text but not create it with most of the properties I specified.

Updated code (I should have originally posted this, I changed the text to see if that would change as an after thought) This one has text(“Name goes here”);

@Override
public void onStartScreen() {
    Element namePanel = screen.findElementById("namePanel");
    Element ipPanel = screen.findElementById("ipPanel");
    
    
    
    Element name1 = new TextBuilder("name1") {{
            font("aurulent-sans-16.fnt");
            color("#ffff");
            text("Name goes here");
            x("50");
            y("50");
            height("10%");
            width("20%");
        }}.build(nifty, screen, namePanel);
    Element ip1 = new TextBuilder("ip1") {{
        try {
            
            font("aurulent-sans-16.fnt");
            color("#0f0f");
            text(InetAddress.getLocalHost().getHostAddress());
            x("20");
            y("0");
            
            
            } catch (UnknownHostException ex) {
            ex.printStackTrace();
        }
    }}.build(nifty, screen, ipPanel);
    listener = new Listener();
    listener.start();
}

Same xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<nifty xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://nifty-gui.lessvoid.com/nifty-gui" xsi:schemaLocation="https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd">
    <screen id="GScreen0" controller="Controller.ZombiesHostLobbyController">
        <layer id="GLayer0" childLayout="absolute" backgroundImage="Images/Background/ZombiesBackground.png">
            
            <panel id="namePanel" childLayout="absolute" backgroundColor="#fff1" width="19.5%" height ="60%" x="5%" y="10%"/>
            <panel id="dividerPanel" childLayout="absolute" backgroundColor="#0001" width="1%" height="60%" x="24.5%" y="10%"/>
            <panel id="ipPanel" childLayout="absolute" backgroundColor="#fff1" width="19.5%" height ="60%" x="25.5%" y="10%"/> 
            <control name="button" id="startButton" label="Start" width = "40%" height="10%" x="30%" y ="80%"/>
            
        </layer>
    </screen>
</nifty>

and unfotunatly the same render. (Notice how the text is not “Name goes here” and the color and position are not what I set them to be)

You might need to. At least you need to call the parent to recalculate the layout if it makes some difference in your UI.

You might want to consider using the ListBox though. It might even solve the problem for you as it is easier to add items to and should absolutely work. Also what happens when you get more players than can fit to your panels? You need scrollboxes. That is more code. Why reinvent the wheel :slight_smile: ListBox does this all for you…

1 Like

Thanks for the response. I’ll probably keep the panel adding for now just because there won’t ever be that many people in a game and I think I’ll have more control over looks but I will probably use the ListBox for a chat system so thanks for pointing out that tip.

My problem wasn’t in any of the code but I just had to run a new clean build :sleepy:

Thanks for the responses however. :slight_smile:

1 Like

You should really look into the styles system. And of course get the Nifty manual PDF, it is nearly impossible to develop without it. For reference, here is our nifty listbox (the player list):
https://scontent-arn2-1.xx.fbcdn.net/v/t31.0-8/18423100_1972347892997710_1084711393733135467_o.jpg?oh=ea76e82c1d968a12b09ec68f54bf1629&oe=5A4C0E1C

1 Like

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

1 Like

Wow! I really do need to look at the styles. I wanted to go for that transparent gui style so I’ll definitely look into the ListBox element and I’ll let you know how it goes :slight_smile:

1 Like

So far my GUI is looking spiffy but I want it to look better and more creepy. I believe once before for a textfield I stylized certain parts of it by doing something with a hashtag like this:

<style id="goodInput#text" base="base-font">
    <attributes color="#ffff" selectionColor="#000f" visibleToMouse="false" align="left" valign="center"
                textHAlign="left"/>
    <effect>
        <onFocus name="textColor" post="false" color="#cccf"/>
    </effect>
</style>

Is this how you ended up being able to colorize the text within the boxes and change their font?

It has been a long since I made it. Our list holds our PlayerModels rather than plain strings as rows and colorizes them by their ID automatically in the code. You can’t easily make different colors to a list box with styles alone, just one overall style. So it made sense to make a component out of it, extending the native ListBox. Also we have a graphical item for boolean data in our ListBox. Not a task for styles alone.

But yes, you can style everything, the ready components too with the styles. The hashtag notation refers to a sub style. So all of your Goodinput style users can use the substyle text. Or something (looong time…)…

For the styling of stock components you need the sources, I don’t think there is any way around it. They use some predefined styles names. And then you just override them in yours. Or copy the whole style from the source and start stabbing it.