nifty-gui

Nifty GUI uses XML to store the layout of your GUI. To connect such a XML description with some class in Java there is the ScreenController Interface you need to provide:

/**
 * ScreenController Interface all screen controllers should support.
 * @author void
 */
public interface ScreenController {
  /**
   * Bind this ScreenController to a screen. This happens
   * when the Screen got the onStartScreen() method.
   * @param nifty nifty
   * @param screen screen
   */
  void bind(Nifty nifty, Screen screen);
 
  /**
   * called when all start effects are ended and the screen
   * is ready for interactive manipulation.
   */
  void onStartScreen();
 
  /**
   * called when the onEndScreen effects ended and this screen is done.
   */
  void onEndScreen();
}

To let Nifty know what ScreenController class you want to use for a Nifty Screen there is the “controller” attribute on the xml tag:

...
<nifty>
  <screen id="start" controller="com.mypackage.HelloWorldStartScreen">
  ...
  </screen>
</nifty>

To resolve the concrete ScreenController instance Nifty can use two different ways:

1. Nifty creates a new instance of the given ScreenController class and registers this instance with the Screen
2. You can give Nifty a ScreenController instance that matches the class given in the controller attribute. Nifty will first look for an existing instance and creates a new class only when it can’t find one.

To register ScreenController instances with Nifty there are additional parameters on the “fromXml()” method of the Nifty class. This way you can even add multiple different instances for use in multiple Nifty screens.

  /**
   * load xml.
   * @param filename file to load
   * @param controllers controllers to use
   */
  public void fromXml(final String filename, final ScreenController ... controllers) {
...

Note: You still need the controller attribute in the xml so that Nifty can connect the screen with your ScreenController instance.

Note: In case you use anonymous inner classes like in this example here:

class MyStuff {
...
nifty.fromXml("menu.xml", new ScreenController() {
    public void bind(Nifty nifty, Screen screen) {
...

the classname then turns to “MyStuff$1″.

Slick 2D is a great library for game development. With the upcoming release of Nifty GUI 0.0.4 there will be an even easier way to integrate your Nifty GUI into your Slick application.

The current Nifty GUI Version 0.0.3 can already be used with Slick but it might become a little tricky to save/restore OpenGL state when switching between Slick and Nifty rendering. The basic approach would be to call niftys render() method after you’ve rendered all of your Slick graphics. This “manual” rendering is the usual way for Nifty integration and is shown in the Hello World example on the Nifty Project Website.

With the Release of Nifty Version 0.0.4 there will be a Slick GameState implementation available for easy of use. If you’re new to Slick GameStates there’s an article in the Slick wiki about the basic principles. With Nifty 0.0.4 you get a NiftyGameState class that extends the Slick BasicGameState. So you can simply use an instance of this new class (or a subclass) and voila you have the ability to add a Nifty GUI to your Slick app in no time

Example:

public void initStatesList(final GameContainer container) throws SlickException {
  NiftyGameState state = new NiftyGameState(MENU_ID);
  state.fromXml("mainmenu.xml", new ScreenController() {
    public void bind(Nifty nifty, Screen screen) {
    }
    public void onEndScreen() {
    }
    public void onStartScreen() {
    }
  });
  addState(state);
}

Nifty!

Current Demo for Nifty 0.0.3 Release (Java Webstart)

Old Nifty XML - pretty ugly

<menu id="mainMenu" font="menu.fnt" childlayout="vertical" align="center" valign="center" height="50%">
  <effect>
    <onstartscreen name="hide" length="500" inherit="true" startdelay="1000"/>
    <onstartscreen name="fade" startcolor="#fff0" endcolor="#ffff" length="1000" startdelay="500" inherit="true"/>
    <onendscreen name="fade" startcolor="#ffff" endcolor="#fff0" length="500" inherit="true"/>
  </effect>
  <menuitem id="helloWorld" text="Hello World" align="center">
    <interact onclick="helloWorld()"/>
    <hover width="200%" falloffconstraint="horizontal"/>
    <effect>
      <onhover name="hint" hoverwidth="200%" width="200%" targetelement="hintElement" text="Run the Hello World Example"/>
      <onfocus name="pulsate" hoverwidth="200%" width="200%" period="500" startcolor="#3c000000" endcolor="#ff7c00ff" timetype="infinite" cycle="false"/>
    </effect>
  </menuitem>
  <menuitem id="textfield" text="Textfield Example" align="center">
    <interact onclick="textField()"/>
    <hover width="200%" falloffconstraint="horizontal"/>
    <effect>
      <onhover name="hint" hoverwidth="200%" width="200%" targetelement="hintElement" text="Run the Textfield Example"/>
      <onfocus name="pulsate" hoverwidth="200%" width="200%" period="500" startcolor="#3c000000" endcolor="#ff7c00ff" timetype="infinite" cycle="false"/>
    </effect>
  </menuitem>
  <menuitem id="exit" text="Exit" align="center">
    <interact onclick="exit()"/>
    <hover width="200%" falloffconstraint="horizontal"/>
    <effect>
      <onhover name="hint" hoverwidth="200%" width="200%" targetelement="hintElement" text="Leave the Examples"/>
      <onfocus name="pulsate" hoverwidth="200%" width="200%" period="500" startcolor="#3c000000" endcolor="#ff7c00ff" timetype="infinite" cycle="false"/>
    </effect>
  </menuitem>
</menu>

Nifty XML with Style - a lot better

<menu id="mainMenu" font="menu.fnt">
  <menuitem id="helloWorld" text="Hello World">
    <interact onclick="helloWorld()"/>
  </menuitem>
  <menuitem id="textfield" text="Textfield Example">
    <interact onclick="textField()"/>
  </menuitem>
  <menuitem id="exit" text="Exit">
    <interact onclick="exit()"/>
  </menuitem>
</menu>

Nifty XML Style Definition

<!-- main menu style -->
<style id="menu">
  <attributes childLayout="vertical" align="center" valign="center" height="50%"/>
  <effect>
    <onStartScreen name="hide" length="500" inherit="true" startDelay="1000"/>
    <onStartScreen name="fade" startColor="#fff0" endColor="#ffff" length="1000" startDelay="500" inherit="true"/>
    <onEndScreen name="fade" startColor="#ffff" endColor="#fff0" length="500" inherit="true"/>
  </effect>
</style>
 
<!-- menu item style -->
<style id="menu-item">
  <attributes align="center"/>
  <hover width="200%" falloffConstraint="horizontal"/>
  <effect>
    <onFocus name="pulsate" hoverWidth="200%" width="200%" period="500" startColor="#3c000000" endColor="#ff7c00ff" timeType="infinite" cycle="false"/>
  </effect>
</style>

Well, no, not “dry” … but “DRY - (D)on’t (R)epeat (Y)ourself” =)

Suppose for some reason you need a lot of red colored panels in your nifty screen. At the moment you’ll need to do something like this:

<panel id="first" backgroundcolor="#f00f"> ... </panel>
<panel id="second" backgroundcolor="#f00f"> ... </panel>
<panel id="third" backgroundcolor="#f00f"> ... </panel>
...
<panel id="fortytwo" backgroundcolor="#f00f"> ... </panel>

So far so good, but what if you change your mind and want green panels instead? Ugly - no, not the color - but you’ll now have to change all this backgroundColor definitions. Quite ugly.

Introducing Nifty Styles
So what we really want, is to specify the color of the panels only one time and use it multiple times.
So with Nifty 0.0.3 you’ll be able to use style definitions to get DRY =)

<style id="my-panel-style">
  <attributes backgroundColor="#f00f"></attributes>
</style>
<panel id="first" style="my-panel-style"> ...</panel>

This way you can define common attributes once and use them multiple times! This principle will be extended to attributes, effects, fonts and so on. This is not only nifty but will naturally lead to UI-skins! Imagine you have all your style definitions in one big “style.xml”. So you could define colors, fonts, effects, etc. once in this file. Changing this single file or including another style.xml whould change your whole UI!

Nifty indeed

And still work in Progress too =)

Removing XmlBeans and Commons-Logging reduced the nifty with all dependencies jar from 4,4 MB to 1,6 MB

Check it out here

Nifty Project Page at Sourceforge

or get the release here

Nifty Release Download

Have fun =)

Actually I like XmlBeans a lot. Define a XML-Schema (XSD) for your XML-File, throw XmlBeans at it and let it generate some Java classes. Voila. XML-Binding. Validate against the XML-Schema, easily access your XML-File from within Java, etc… XML? Java? Done!

There’s even a Maven Plugin for it, so one can generate the classes on the fly within your build process. Great Stuff!

So why would some half insane person want to removed it?

Well, one drawback is the size of the lib. Because XmlBeans is your Swiss army knife of XML-Java-Binding it is rather large being around 2,6 MB in size. Altough this is not that bad in DSL-century you can still notice it when running a Java Applet or Java Webstart.

Another and somewhat profoundly drawback is, that in a Java Webstart it seems to parse Xml-Files very very slow. I’m not sure what exactly causes this slowdown but from what I grasp this might be a classLoader issue or something. When run localy everything works fine but from within a Webstart Version it runs painfully slow. I’ve tried to pinpoint what causes these issues but had not much luck in doing so.

Now I’ve settled to get rid of XmlBeans and replace it with some simpler form of xml parsing. What I’m currently using is XPP3. Hopefully this will remove the issues. The lib is very small (25 KB) and very fast. The only drawback so far is that I lose the Schema-Validation. I’ll keep the XML-Schema for development and documentation purposes but the actual Loader inside Nifty won’t check against the Schema anymore. Which is a bit sad but something I can’t do anything about at this very moment.

Nifty sourceforge.net project available

Nifty Website available 

Have fun

void

I’m currently preparing the first alpha release of Nifty and moving the source over to sourceforge.net. This means you get access to the source as well as a first release of Nifty to play with.

There’s a new nifty-example.jar on the way too

Stay tuned … more news soon!

At the moment there are not many actual controls in Nifty. Besides from clicking on elements, f.i. an Image, there was so far not a lot of interaction possible.

Well, it’s about time to change this with Nifty Controls

To allow as much freedom as possible I’ve decided against predefining new control types that let you only change color or customize some images. Instead the idea is, that you use the already existing elements (Text, Image, Panel) and combine them to create the control you like.

You can create your own control with the <controlDefinition> Tag:

  <controldefinition name="coolControl" controller="my.package.SimpleSlider">
<panel layout="absolute" backgroundcolor="#f0ff">
      <img id="scrollposition" filename="ball.tga" />
    </panel>
  </controldefinition>

With this xml tag you can define a control like it is illustrated in figure 1.

A controldefinition actually defines a couple of things:

1. The name of the new control with the name attribute.
2. The control logic class with the controller attribute.
3. The actual look of the control with a combination of panel, image and text elements. You can even add effects. So if you want a hover effect you can simply add it to the control definition

With the mandatory attribute “name” you give your new control a name so that you can refer to it later. There’s another new tag to use your newly created control, the control tag:

  <control name="coolControl"></control>

So you define the look and feel as well as the control logic once and then use it everywhere you need it like figure 2 shows.

That’s all for now. This just covers the basic idea. More on controls later.

Have Fun!