nifty-gui

Create your own Nifty Panel Styles – it’s easy! :D

// November 8th, 2008 // docs

To customize and extend the default nifty styles is easy. In this example you add your own panel style

Default Styles
Nifty default styles need to be included using the <useStyle> tag:

 <!-- include the default styles-->

To actual use this Style for a panel you use the “style” Attribute in the <panel> tag:

 <!-- panel with "nifty-panel" style -->

When you’re using the two (!) lines you’ll get the well known default “yellow, red, black” colored panel:

default panel style

Note
The “nifty-default-styles.xml” was until Version 0.0.4 a part of “nifty.jar”. Starting with Version 0.0.5 the default styles will be a part of the seperate “nifty-default-styles.jar”.

The Default “nifty-panel” Style
Here is the complete style definition for the “nifty-panel” style:

<!-- style for a nifty panel -->
<!--
  <attributes
    backgroundImage="dialog.png"
    imageMode="resize:32,32,32,32,32,32,32,168,32,32,32,32" />

-->

Not really complicated, eh? Besides the funny numbers of course, but we get to those in a minute

The “nifty-panel” Style only consists of a background image named “dialog.png”. This image is a part of “nifty-default-styles.jar” and looks like this:

dialog.png

If you would just use a fixed sized image as the background for your panel you can skip the “imageMode” attribute. But if you need to resize your panel later the default behavior would stretch the image. For some images that could work but when you use rounded edges you would get bad streching like in this example:

bad stretching

So to kinda work around this limitation you can add the “imageMode” attribute to give Nifty a hint where stretching is possible and where the proportions need to be kept. The “imageMode” Attribute will take 12 arguments:
w1,w2,w3,h1,w4,w5,w6,h2,w7,w8,w9,h3
where “w” means “width” and “h” means “height”. Here is an example:

stretching

Nifty will stretch only the subimages w2, w5 and w8 horizontally when your panel needs to be stretched horizontal and it will change the height of parts w4, w5 and w6 when vertical stretching occurs. All other subimages will stay unchanged and this way we can keep the round edges.

Finally your own Style
I’ve made a half transparent Image:

custom panel picture

Making this into a custom style is pretty easy. You just need to add the image to your resources so that Nifty can find it and you add this to your xml:

<!--
 style for a custom panel -->
 
--&gt;

And thats it

Now you just use this Style in your panel and you get a resizable custom panel (Here we have two overlapping panels to show of the transparency too):

custom panel picture

Have Fun