Nifty GUI and Styles - Devblog #2 news - Waste Land

There were basically three variations on how I've used Nifty GUI styles:

1. New custom styles for simple text and image elements
2. Override styles of default controls
3. Override styles of nested default controls

If you'd like to have a look at the current implementation of Wasteland's menu system go ahead and download its latest Alpha Release at indiedb.com

New cutom styles

This one is pretty straightforward. It really prevents a lot of code duplication and it is well documented. I used it to group attributes of reoccuring elements. For example every main button in the 'Wasteland' menu uses the same style and effects. So I've defined one style and reused it on every button element.

<!--

color="#333f" margin="5px,0px" />

--> This is the style definition for the menu buttons. The attributes element holds common attributes which shall be applied to elements using this style. Additionally, it's possible to define common effects as well. And that is how to apply the style:

Now this text element uses the attributes defined in the style and in addition also uses the defined effects. If an attribute is defined in the style and the element itself, then the value defined on the element will have precedence. This makes it possible to override style attributes if necessary.

Override styles of default controls

Next I needed to override the style of a default control, the text field that is. The default Nifty Black looks nice but particularly the red background of it didn't really fit with the rest of my screen. The documentation includes quite a bit on how to use styles but I couldn't find a plain example for this use case. However, the following sentence from the documentation sums up what is necessary:

You only need to make sure that you‘ll define all sub styles of the control.

To achieve what I wanted I went thru the following steps:

1. Copy the style definitions from Nifty Black (/textfield/nifty-textfield.xml) and paste them into my Nifty XML file
2. Renamed the style from 'nifty-textfield' to 'custom-textfield'
3. Adapted the styles to my needs
4. Set the style="custom-textfiled" attribute on my text field controls

That is all. Now the control uses the custom style and because every sub style is overriden the conrol's requirements are satisfied.

Override styles of nested default controls

As it turns out this one was a bit more difficult. For certain areas I decided to use the scrollpanel control. So in case not all content fits on the screen it is still possible to scroll around and see everything. Now I wanted to adjust the style of the scrollpanel and the scrollbars within scrollpanel. Thus the solution from before didn't work this time, because it wouldn't be convenient to redefine the scrollpanel just so I could set a different style on the nested scrollbar controls.

My first attempt was to copy and adjust the style definitions from Nifty Black and paste it in my Nifty XML file. But for some reason that won't work. I didn't take the time to analyze and find out why though.
But after a while I found out that importing style files using the element useStyles will work. So instead of trying to override the styles directly in the main file, the overrides are defined in an external file based on the one from Nifty Black (/scrollbar/nifty-scrollbar-style.xml). The style definition files are processed in a sequential manner, so, importing the custom style after the one coming with Nifty GUI will effectively allow to override the previous with the latter.

Summary

I have to say that working with Nifty GUI was really a charm. It is very well documented and stable. Furthermore I think the concepts and design are sound.
I can recommend using it to anyone who is willing to build a OpenGL based UI with Java.

(This is a cross-post from White-ibex.com)