bio photo

Jattra tries to dynamically change button text from within Java and he needs a Button that automatically resizes according to the width of the changed text.

You can follow both threads at the Nifty Help Forum at

    Changing Button Text Thread</a></ul>
      Resizing Buttons to Text Thread</a>.</ul>

      Read the complete blog post for details.

      Dynamically changing text was easy and has been added to the ButtonControl. You can now simply change text with the following code from java:

      screen.findControl("backButton", ButtonControl.class).setText("New Text");</pre>

      Automatically resizing Buttons was a bit more involving tho.

      Nifty actually has build in support for resizing elements according to other elements. But before we can understand what that means we first need to know a bit about the internal workings of a Nifty Button Control.

      A Nifty Button consists of a Panel element with childLayout="center" and one child element which is a Label element that represents the actual button text. So far so good and the standard style set (nifty-style-black) simply adds a fixed width to the button.

      So simply using the Button control:

      <control name="button" label="Hello World" /></pre>

      will give you a button with a style specific fixed width.

      You can override this fixed width when you use the button control like that:

      <control name="button" width="4532px" label="Hello Large Button World" /></pre>

      This works pretty good if you don't need to change the button label text. No matter what you do to a button with a fixed width it will always stay at this width (Unless you change the width constraint from code as one of Jattras code examples shows. And although this works it is a bit cumbersome but until now the only way to achieve resizing buttons).

      So what should we do to fix this?

      Well, actually there is not really much to do. If you ever used a childLayout="vertical" on something without setting a width but every child in that special element had a fixed size you already have seen that Nifty actually resizes the parent element!

      And this is basically default behaviour in Nifty: Whenever Nifty finds an element without a width (or height) constraint it looks at all the child elements and if they all have a fixed width (or height) it automatically resizes the parent element to the size of all child elements.

      And this is just what we need here :)

      As stated above the Button control uses childLayout="center" and up until now the center layout did not support this kind of auto-resizing feature. But this has been added to svn a moment ago.

      So whenever Nifty encounters an element with childLayout="center" and the child element has a fixed width then it will resize the element to the child width. And this works for our button control too! And it works even when dynamically changing text from within Java :D

      Well, there is one thing to note tho. For backward compatibility the nifty-style-black still sets a fixed width to the button. So to enable the auto resizing you have to override the witdh of the button with an empty String.

      Example to enable the auto resizing Button:

      <control name="button" width="" label="autoresizing button"/></pre>

      And that's it. :)

      Another thing to note is, that the change to the center layout logic now requires you to set a width to all elements that use childLayout="center". Before this change there was no auto resizing done to elements that use center layout. To prevent the auto resizing that will be used on that elements now you need to specify a width to this elements.