Nifty in general

tobi82 · May 4, 2011, 2:52pm

did not take long for me to return.

how do you guys setup nifty from scratch? i mean, do you install jme3 alpha and thats all you need

to use nifty?

thats what i did and the only thing i get is problems.

the font doesnt look right, as it cant be read at all (at least something shows up). the “size” attribute doesnt

work at all
the positioning of elements is very poor. is there only right,left,center and top,center,bottom to position elements?
can you put only one element in a panel? i tried to put 2 text elements under each other, but only one is displayed.
the jme3test project doesnt really work. when i try to launch the testniftygui.java it doesnt find the needed xml. why is that?
when i add a button, it looks totally wrong, not at all like the ones in the examples shown on the net (style-black), but i added at the top

damn, i really dont know how you guys can get difficult things to work, when i suck at even the essentials

it seems, that not even the example things work. whats wrong there?

skye · May 5, 2011, 11:22am

Hey, can you guys help me out? I’m a complete noob but i’m really trying to learn, and right now my passion is playing around with jmonkey. I’m trying to design the gui for a simple game using nifty, but im having alot of problems with it. I have the xml part at my fingertips, but im having trouble loading the xml file. How do I instantiate the Nifty class? What packages do I need to import? Thanks

ractoc · May 5, 2011, 11:28am

Check out either the nifty test case in JME or the nifty blog. Both are exelent sources of information.

The first can be found in the JME svn, the second can be found at http://nifty-gui.lessvoid.com/. More precisely, the wiki can be found at: https://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Main_Page. The getting started page should be a good place to begin your nifty gui.

normen · May 4, 2011, 3:06pm

Yeah, thats basically what I did for MonkeyZone. Create an XML file, edited the basic layout in the editor and added the code to manipulate the GUI to my app and that was it. I don’t know whats wrong there.

tobi82 · May 4, 2011, 3:12pm

sounds better to me. did you use the windows version?

next example:

i copy the code for the dragable element

[xml]<control id=“MyDraggable1” name=“draggable” backgroundColor="#f60f" width=“120px” height=“120px” childLayout=“center” valign=“top”>

<text text=“Drag Me!” color="#eeef" valign=“center” width=“100%” />

</control>[/xml]

and i get the error “missing font in rendertext” ??

but even without the text element i get

WARNUNG: missing popup [draggablePopup] o_O

i dont get it at all. there must be something wrong on the app side this time. something in general. help…

normen · May 4, 2011, 3:14pm

How about you first get a basic gui done and understand how nifty works before you add all kinds of controllers?

tobi82 · May 4, 2011, 3:28pm

thats what i try to do, but i think theres something wrong right from the start. why else wont even the example workt properly?

i have a simple gui with two buttons, that call different methods and it works.

now i wanted to work on the looks, but as mentioned above, not even the text works right, let

alone the buttondesign, so i came here again.

tobi82 · May 4, 2011, 3:38pm

sorry for doublepost

normen, i took a look at your xml file and what i get, when i test your load game screen is this:

http://img859.imageshack.us/i/niftyn.jpg/

no warnings, no errors and i cant imagine that it looks the same on your side, does it?

pspeed · May 4, 2011, 11:19pm

If you are running stock alpha 4 with no nightly updates then I think you will run into lots of problems. For a long time the nifty examples didn’t work at all in JME.

Update to a nightly build so that those work and then use them as examples.

Regarding the “only one child shows up”, that’s probably because the parent’s child layout is set to “center” instead of horizontal or vertical.

tobi82 · May 4, 2011, 11:27pm

thanks for the hint.

reason for most of my problems was my graphics card. switched to omegadrivers and now i can finally see

what i´m doing

the only question that remains is, can the position of elements be done in a more precise way than

left, center and right etc.?

madjack · May 5, 2011, 12:35am

Nifty elements that can contain other elements, like screen, panels, etc, use the childLayout="" tag.

That tag can use horizontal, vertical and center.

Horizontal:

Displays elements (can be anything. Other “containers”, buttons, etc) horizontally. That is one beside the other.

Vertical is the same as horizontal except it “stacks” those elements on top of each other.

Center will center the element it contains. That is, it can only contain one element.

Then, each of these (and other elements too) use align="", valign="".

align is horizontal alignment of the children’s element.

valign is vertical alignment.

The values in quotes can either be: left, right or center.

Those two, align and valign, ONLY applies to elements, NOT to text. For that you have to use alignHText="" and alignVText=""

Finally, you can also use paddings. If my memory serves, it can be used on the control itself to align it inside its containing container.

Hopefully that’s clear.

ractoc · May 5, 2011, 5:25am

So to expand on the above…

If you want to have 2 textfield which are below each other and together they are centered, you would have one panel with childrenlayout=“center”. This one can only contain 1 element though, so in there you put another panel. This panel you give a childrenlayout=“vertical”. And in here you put your 2 textfield controls.

madjack · May 5, 2011, 8:32am

Oh and it’s childLayout, not childrenLayout as I and ractoc wrote… Sorry.

tobi82 · May 5, 2011, 10:13am

thank you guys for making that clear. i´m building a gui for a project at my university.

as i have to write a full documentation, i would really like to share that with others, that are

new to nifty gui, once its done. i guess a very detailed step by step instruction/documentation

will solve most of the common issues for beginners, so that they are not as frustrated as i was lately

madjack · May 5, 2011, 10:26am

That would be extremely welcomed tobi82.

Nifty, although a great GUI tool, can seem spaghetti-like at times. We sure can’t blame void though as he is actively working on implementing stuff we want to have and fixing version 1.3. I know I feel bad just by posting here in the GUI forum. On the other hand, having coherent documentation and examples are what software acceptation and usage is all about.

What’s the use of a fantastic tool if nobody can understand how it works right? It isn’t the case with Nifty, but there are things that do seem that way at times.

skye · May 6, 2011, 7:21am

I checked out the blog and it was very helpful, thanks However, i’m now currently trying to add more than one panel to a screen using nifty, and i have no idea how to go about this. By more than one panel i mean independent panels which have different effects, colors, texts, etc. Any advice on how to go about this?

tobi82 · May 6, 2011, 11:05am

as someone stated earlier in this thread it goes as follows:

lets take an example, where there is one layer that contains a textelement above two button elements, like

any typical exit prompt.

you will need to create a parent layer, that has three panels inside it, like this:

[xml]

<layer>

<panel childlayout=vertical>

<panel childlayout=center>

<text />

</panel>

<panel childlayout=horizontal>

<control button 1 />

<control button 2 />

</panel>

</panel>

</layer>

[/xml]

as you can see, with the first panel, you tell all the childs it is going to have, to be positioned underneath each other (vertically).

so when you put another panel inside that one, you can again tell this ones childs, how to behave. in the

third panel, they are positioned horizontally.

the small example in unfinished code (yet to be done right)

[xml]

<layer id="layer" backgroundColor="#0000" childLayout="center">

<panel id="panel" height="100px" width="250px" align="center" valign="center" backgroundColor="#21111199" childLayout="vertical" visibleToMouse="true">

<panel id="text_panel" height="20px" width="200px" align="center" valign="center" childLayout="center" visibleToMouse="true">

<text id="text" font="console.fnt" color="#ffff" size="10" text="really want to exit?" align="center" valign="center" />

</panel>

<panel style="nifty-panel" id="exit_panel" height="50px" width="200px" align="center" valign="center" childLayout="horizontal" visibleToMouse="true">

<control id="exit_ok" name="button" label="ok" width="70px" height="40px" align="center" valign="center">

<interact onClick="exit()"/>

</control>

<control id="exit_cancel" name="button" label="cancel" width="70px" height="40px" align="center" valign="center">

<interact onClick="change_options()"/>

</control>

</panel>

</panel>

</layer>

[/xml]

its you choice now to add effects. effects can be attached to almost anything. in the above case,

you could let the parent panel be moved in from above, just by adding the effect right into that first layer:

[xml]

<layer id="layer" backgroundColor="#0000" childLayout="center">

<panel id="panel" height="100px" width="250px" align="center" valign="center" backgroundColor="#21111199" childLayout="vertical" visibleToMouse="true">

<effect>

<onStartScreen name="move" mode="in" direction="top" length="1000" startDelay="250" inherit="true"/>

</effect>

<panel id="text_panel" height="20px" width="200px" align="center" valign="center" childLayout="center" visibleToMouse="true">

<text id="text" font="console.fnt" color="#ffff" size="10" text="really want to exit?" align="center" valign="center" />

</panel>

…

[/xml]

hope that helps

skye · May 7, 2011, 4:15am

It helped me tons, thanks a bunch!

aaron · May 11, 2011, 4:49pm

[xml]<control id="MyDraggable1" name="draggable" backgroundColor="#f60f" width="120px" height="120px" childLayout="center" valign="top">

<text text="Drag Me!" color="#eeef" valign="center" width="100%" />

</control>[/xml]

tobi82 said:
WARNUNG: missing popup [draggablePopup] o_O

This is a bug (or the nifty libs in the jME3 nightly are out of date). It eluded me all morning. I updated my jME3 to the latest nightly with no change. I replaced the nifty snapshots with the latest from the nifty maven repo and everything worked as expected. Replace the nifty*-SNAPSHOT.jar files in the jME3/lib folder with the latest from the maven repo. (You'll need to rename the files or adjust your classpath)

The draggable windows are working in jME3_2011-05-11 after replacing the nifty libs with the 20110508 snapshots from the maven repo.

At a minimum you'll want these:
http://nifty-gui.sourceforge.net/nifty-maven-repo/lessvoid/nifty/1.3-SNAPSHOT/
http://nifty-gui.sourceforge.net/nifty-maven-repo/lessvoid/nifty-default-controls/1.3-SNAPSHOT/

It probably won't hurt to grab the latest styles and examples:
http://nifty-gui.sourceforge.net/nifty-maven-repo/lessvoid/nifty-style-black/1.3-SNAPSHOT/
http://nifty-gui.sourceforge.net/nifty-maven-repo/lessvoid/nifty-examples/1.3-SNAPSHOT/

tobi82 · May 12, 2011, 4:51pm

thanks ractoc

i already had put that idea aside, but now i´ll have to rethink implementing dragables, cause it works now hehe