Nifty Default Controls Example (1.3.1)

Nifty Standard Examples (1.3.1)

Have fun,
void

You can find an overview over all of the panel styles in the Nifty Wiki.

And here is a little video that also shows the Hint effect in action:

Nifty 1.3 Standard Panel Styles from void on Vimeo.

void

Example

You can check the first example of the new ListBox online with the following Webstart URL:

The source code of this project is available online. You can check out the source directly from SVN using https://nifty-gui.svn.sourceforge.net/svnroot/nifty-gui/nifty-default-controls-examples/trunk or you can browse it online here: http://nifty-gui.svn.sourceforge.net/viewvc/nifty-gui/nifty-default-controls-examples/trunk/.

And if that is not enough … we’ve done the same new API treatment to the CheckBox and we plan to do the same to the remaining Nifty Standard Controls!

Reference in the Wiki

You can find a complete reference about the new standard controls in Nifty 1.3 already on the Wiki (for the ListBox and the CheckBox):

http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Nifty_Standard_Controls_%28Nifty_1.3%29

And you can keep reading about all the little Nifty details we’ve changed and improved and especially why.

It all started with a feature request for Nifty 1.3 which seems easy to add at first. Removing all or single elements from a Nifty ListBox sounds like a reasonable feature to have available. So I’d try to add this … and failed miserable! The closer I looked into it the more despaired I’ve become.

What a mess!

Something I’d really love to do with Nifty 2.0 is to add a nice and clean API to the standard Nifty controls. The current way of interacting with most of the Nifty controls is kinda awkward (at least) and I want to improve this. So, I thought, hey, why not try to define a new API for the ListBox as a preparation for this and see how everything works out. Well, it turns out that in the end I’ve pretty much rewrote the whole ListBox! =) And that the new one is way better than what you currently have available!

One of the shortcomings of the old ListBox was speed. Internally it directly added the Nifty element tree adding elements dynamically and then used a Scrollpanel to scroll around that (maybe) huge list of elements. So basically it always rendered all elements and used the clipping of the element to hide everything that was not currently seen. Not a great idea after all

Another problem was the API and that’s a little difficult to interact with Niftys internal screen representation. Although it’s not impossible to dynamically add/remove elements from Nifty this might not be the ideal solution to the ListBox problem.

So what did we changed? Well, actually a lot!

The new ListBox:

• Instead of relying upon the scroll panel we now only use Nifty elements for what you can see and simply replace the content of the elements when you scroll to a big list of items. So, when your ListBox only display 4 elements there really are only 4 Nifty elements allocated. Of course the ListBox allows many more Items to be added but in that case only the content of the 4 elements are replaced. You can now specify how many elements you want your display to show with the “displayItems” attribute.

• Scrollbars are now optional and you can disable them completly with the “vertical” and “horizontal” attributes. Simply adding for instance vertical=”false” to the ListBox will hide the vertical Scrollbar.

• The ListBox now supports single as well as multiple selections. This means you can now configure your ListBox to allow the selection of only a single item or that you want to select multipe items. If you don’t want to allow selection at all you can even disable the selection completly.

• Instead of relying on storing Strings the new ListBox allows you to story your own Objects directly. So say you want your user to select different space ships by the name of the ship you could simply store your “Ship” instances directly in the ListBox. Nifty determines what text it should display for your instance by calling toString() of your objects. If this is not suitable for you, you can change this by setting a specifc ListBoxViewConverter for your class.

• The new ListBox now features a pretty complete API ListBox that allows you to dynamically add, remove, select, clear items to the ListBox. This is now all available using generics..

EventBus Notification

In the process of updating the ListBox we’ve noticed that we’re missing a nice way to allow the controls to notify other components of the system about things happening. If the selection of the ListBox is changed we’d like other parts to be notified about that event. Well, the first thing that comes to ones mind is of course the Listener/Observer pattern. But there are some problems with this approach, mostly the strong binding between the objects that communicate. There is a great PDF available from the OSGI people that discusses some of the problems of the Listener pattern.

Having previously worked with GWT 2.x and its event bus architecture we’d like to have someting similar for Nifty too. What we want is a loose coupling between Nifty (as the creator of events) and your application (as the receiver of the events). As it turns out a publish/subscribe mechanism allows us to do just that! Nifty publishes events to some “global” EventBus. And your application on the other hand subscribes to this EventBus for all the events that it needs to handle. What sounds not very different from the standard Listener pattern at first is in fact a great improvement! There is only a dependency to the EventBus and not between the objects that communicate! Which helps a lot to decouple the objects from one another. Nifty does not need to know who will receive the event in the end. It just creates the event and publishes it to the EventBus and everybody interessted in it will be notified.

As it turns out there is a neat little project available that implements that mechanism for us. It is called EventBus and is available as Open Source under the Apache License, Version 2.0. It’s only 80KB in size, so it should not hurt the download/memory footprint of Nifty that much. Nifty is now using the EventBus project for ListBox and CheckBox notifications which worked very very well so far! You subscribe to the EventBus using the id of the element as a topic and you’ll receive all events that the control with the given id produces. In the case of the ListBox this means that you receive instances of the ListBoxSelectionChangedEvent. This basically sends you the current selection of the ListBox everytime the selection has been changed

Good Times,
void

PS: And if you NOW don’t feel like christmas is already here then I can’t help you =)

And there is an updated tutorial/demo available too:
Nifty 1.2 – Updated Tutorial/Demo

Nifty 1.2 Tutorial/Demo

The Tutorial/Demo has been greatly improved and updated with Nifty 1.2 informations and is *THE* source to learn how to use Nifty!

Important Information

Please note that starting with Nifty 1.2 the main nifty.jar is now independend of lwjgl and slick2d. This means you need a nifty-<system>-renderer.jar for your rendering system! For instance, if you would like to use Nifty with a Lwjgl based rendering backend you will now need to download nifty-1.2.jar as well as nifty-lwjgl-renderer-1.0.jar!

Please note that we assume that all of the required jars of your rendering system, like lwjgl.jar, slick.jar and so on are downloaded by yourself. The nifty-<system>-renderer.jar only acts as the adapter between nifty and your rendering backend. They don’t come with all the required libs. This decision was simply done under the assumption that Nifty comes as an add on to an existing application.

The Nifty 1.2 compatible jme2 renderer will be available soon after the 1.2 release and Nifty 1.2 will be integrated into jme3 soon as well.

have fun

Nifty gives you an easy to use framework that you can extend with your own ideas. Just like Nifty user zozo64 did. Nifty is missing drag and drop support? No problem! He created his own!

To be honest, he found some bugs too but all of that improved Niftys core systems. So that’s a good thing. We’ll probably bring his work as a standard drag and drop control into the standard controls project soon.

For the moment you can take a look at the code. It’s part of the nifty examples project:

http://nifty-gui.svn.sourceforge.net/viewvc/nifty-gui/nifty-examples/trunk/src/main/java/de/lessvoid/nifty/examples/dragndrop/

And here is a first preview of zozo64 work:

Nifty Basic Drag and Drop from void on Vimeo.

Note the awesome effects on the checkmark when I toggle the Checkbox and watch the Keyboard only usage in the second part of the video

Nifty GUI New Style and Control Preview from void on Vimeo.

Nifty 1.0 – probably available this year! )

Have a Merry Christmas and watch out for the upcoming Nifty GUI Release!

have fun

Check it out here

Nifty Project Page at Sourceforge

or get the release here

Nifty Release Download

Have fun =)