Question about nifty and panels

Hello,



I'm trying to get Nifty to do what I want it to do.

I have figured out how to do most of it already, now I'm just working on something I can't quite get my head around.



I have an application that's made up from several screens. I want each screen to have it's own XML config. Aside from that, there are several screens that have the possibility to display error messages to the user (login screen, registration screen for instance). How do I make it so these all look the same and work the same? I would hate to have to add the panel code for the login panel to each and every xml. There must be an easier way to configure the panel in one central xml file and then include that one everywhere or something?

Yes, a custom control would probably the best way to solve this and is also a great way to organize your GUI into reusable components instead of a lot of spaghetti XML Code.



And you don't need to worry about the Controller stuff at all! When all you need is a XML-Snippet you want to re-use later you can simply get away with writing:


<controlDefinition name="myStuff">
...
</controlDefinition>



And use it somewhere else:

<control name="myStuff" />



And the elements you used inside the <controlDefinition> will be inserted at this position!

:D



Advanced Topic: Parameters

It's also possible to parameterize this:

<control name="myStuff" myCoolNewAttribute="something" />



This will actually resolve to a new parameter with the name "myCoolNewAttribute" and the value "something" which you can access with "$myCoolNewAttribute" inside the <controlDefintion>:

<controlDefinition name="myStuff">
  <panel backgroundColor="$myCoolNewAttribute" ...>
  ...
</controlDefinition>



This will actually be resolved to:

<panel backgroundColor="something" ...>



when you use the <control> tag!

Nifty, eh? :D

If I understand what you're trying to do (not quite sure I do) there would be two options (or a combination).

To use the same look in several places you can use styles (I thought there was something in the wiki about this, but I can't find it now, there should be a part about it in the tutorial - it's in the examples project, I believe).



If you want to make a component that works the same way in several places you could make custom controls with your own custom controllers. There should be a bit about them in the tutorial as well, otherwise just ask and I'll explain it more (when I'm not so tired). You could style this to make it look the same way everywhere and easily be able to change it later.



Good luck!

Custom control sounds like what I need. I'll look into that further tomorrow (I hope). Now to get some sleep.

Very nice…

I'll be looking into this for sure later on then. The login and registration panel won't need this, but the error panel will.

  1. this has been asked before and I’ve just added it to the new Nifty Howto in the Nifty Wiki:

    http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Nifty_Howto

    and there has been a blog post before explaining how to make the image changing more interessting with the use of Nifty effects. You can find the blog post as well as example code here: http://nifty-gui.lessvoid.com/archives/112


  2. that's a problem, I'm afraid :frowning:

    When you click the button it automatically gets the keyboard focus as well as the mouse "focus". This is normal behaviour and one would expect it to work like this. But here is the problem: When you hide some element and the current focus element is a child of this element then Nifty currently does not detect this and then you're stuck with an element that has the focus but is not visible anymore :confused:



    I think you can tab away from it but mouse events will be kept at the hidden element which is an odd thing and clearly a nifty bug!  :frowning:



    You can work around this with the following code after you've hide your panel:


screen.getFocusHandler().resetFocusElements();



This will just reset the focus element.

If you want/need to change the focus to a special element you can do so too:

screen.findElementByName("name").setFocus();

hey there again. Well, I fixed the focus issue with your suggestions. The image icon stil doesn't work though. I use this in my xml:



<image id="message-icon" width="15px" height="15px" filename="/OpenGameFinder/client/resources/images/icons/error.jpg" />



which gives the error:


WARNING: Cannot locate resource: C:projectsOpenGameFinderbinresourcesimagesiconserror.jpg/F



setting the image through java with this code:


public void setMessageIcon(String icon) {
        NiftyImage newImage = nifty.getRenderEngine().createImage(icon, false);
        Element element = screen.findElementByName("message-icon");
        element.getRenderer(ImageRenderer.class).setImage(newImage);
    }


has the same result.

Oh, and I found another bug, this time with the textfield. (I think). I have my registration panel, which starts of hidden. On there, I have 3 textfields, name, password and repeatpassword. When I go an show the panel, all three textfields have a blinking cursor instead of just the name one. Cycling throgh all of them with setFocus() fixes the problem though. So I have a workable setup atm.

Panel XML can be found in the previous post.