|
@@ -4,441 +4,65 @@
|
|
|
|
|
|
<p>
|
|
|
|
|
|
-Although it is possible to embed a <a href="/com/jme3/gde/core/docs/jme3/advanced/swing_canvas.html">jME3 canvas</a> in a Swing <acronym title="Graphical User Interface">GUI</acronym> app, a 3D game typically runs full-screen, or in a window of its own. This soon raises the question of how to add a user interface: Most games respond to the escape key by displaying buttons that allow users to switch to different screens – for example to view high scores, customize settings, or load saved games.
|
|
|
+<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/nifty-gui.png">
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
-This doc introduces you to <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://nifty-gui.lessvoid.com/"><param name="text" value="<html><u>Nifty GUI</u></html>"><param name="textColor" value="blue"></object>, a Java library for graphical user interfaces (GUIs). Nifty <acronym title="Graphical User Interface">GUI</acronym> (<code>de.lessvoid.nifty</code> package) is well integrated with jME3 via the <code>com.jme3.niftygui</code> package. You define the <acronym title="Graphical User Interface">GUI</acronym> layout in <acronym title="Extensible Markup Language">XML</acronym> and call it from your Java code. All the JAR libraries that you need are already included in your jME3 download, so you do not need to install anything extra (Just make sure they are on the classpath).
|
|
|
+Although it is possible to embed a <a href="/com/jme3/gde/core/docs/jme3/advanced/swing_canvas.html">jME3 canvas</a> in a Swing <acronym title="Graphical User Interface">GUI</acronym> app, a 3D game typically runs full-screen, or in a window of its own. This soon raises the question of how to add a user interface: Most games respond to the escape key by displaying buttons that allow users to switch to different screens – for example to view high scores, customize settings, or load saved games.
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
-There are three steps needed to add a <acronym title="Graphical User Interface">GUI</acronym> to your jME3 game:
|
|
|
-
|
|
|
+This doc introduces you to <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://nifty-gui.lessvoid.com/"><param name="text" value="<html><u>Nifty GUI</u></html>"><param name="textColor" value="blue"></object>, a Java library for graphical user interfaces (GUIs). Nifty <acronym title="Graphical User Interface">GUI</acronym> (<code>de.lessvoid.nifty</code> package) is well integrated with jME3 via the <code>com.jme3.niftygui</code> package. You define the <acronym title="Graphical User Interface">GUI</acronym> layout in <acronym title="Extensible Markup Language">XML</acronym> and call it from your Java code. All the JAR libraries that you need are already included in your jME3 download, so you do not need to install anything extra (Just make sure they are on the classpath).
|
|
|
</p>
|
|
|
-<ol>
|
|
|
-<li><div> Lay out the <acronym title="Graphical User Interface">GUI</acronym></div>
|
|
|
-<ul>
|
|
|
-<li><div> in <acronym title="Extensible Markup Language">XML</acronym>, or</div>
|
|
|
-</li>
|
|
|
-<li><div> in Java (work in progress)</div>
|
|
|
-</li>
|
|
|
-</ul>
|
|
|
-</li>
|
|
|
-<li><div> Integrate the <acronym title="Graphical User Interface">GUI</acronym> into the Game</div>
|
|
|
-<ul>
|
|
|
-<li><div> Overlay the User Interface Over the Screen, or</div>
|
|
|
-</li>
|
|
|
-<li><div> Project the User Interface Onto a Texture</div>
|
|
|
-</li>
|
|
|
-</ul>
|
|
|
-</li>
|
|
|
-<li><div> Interact with the <acronym title="Graphical User Interface">GUI</acronym> from Java</div>
|
|
|
-</li>
|
|
|
-</ol>
|
|
|
|
|
|
<p>
|
|
|
-
|
|
|
-<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/nifty-gui.png">
|
|
|
+<em>Typically, you lay out the Nifty <acronym title="Graphical User Interface">GUI</acronym> using <acronym title="Extensible Markup Language">XML</acronym>, but using Java will soon be a second option.</em>
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
-<h2><a>Sample Code</a></h2>
|
|
|
-<div>
|
|
|
-<ul>
|
|
|
-<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/branches/jme3/src/test/jme3test/niftygui/TestNiftyGui.java"><param name="text" value="<html><u>TestNiftyGui.java</u></html>"><param name="textColor" value="blue"></object></div>
|
|
|
-</li>
|
|
|
-<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/branches/jme3/src/test/jme3test/niftygui/TestNiftyToMesh.java"><param name="text" value="<html><u>TestNiftyToMesh.java</u></html>"><param name="textColor" value="blue"></object></div>
|
|
|
-</li>
|
|
|
-</ul>
|
|
|
-
|
|
|
-</div>
|
|
|
-
|
|
|
-<h2><a>Laying out the GUI</a></h2>
|
|
|
+<h2><a>Overview</a></h2>
|
|
|
<div>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
-Usually, you lay out the <acronym title="Graphical User Interface">GUI</acronym> using <acronym title="Extensible Markup Language">XML</acronym>, but using Java will soon be a second option.
|
|
|
+<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/nifty-gui-example.png">
|
|
|
</p>
|
|
|
|
|
|
-</div>
|
|
|
-
|
|
|
-<h3><a>a) Lay out the GUI in XML</a></h3>
|
|
|
-<div>
|
|
|
-
|
|
|
<p>
|
|
|
+There are three steps needed to add a <acronym title="Graphical User Interface">GUI</acronym> to your jME3 game:
|
|
|
|
|
|
-Create an empty helloworld.xml file in the <code>assets/Interfaces/</code> directory of your project.
|
|
|
-</p>
|
|
|
-
|
|
|
-<p>
|
|
|
-You “draw” the <acronym title="Graphical User Interface">GUI</acronym> to the screen by writing <acronym title="Extensible Markup Language">XML</acronym> code.
|
|
|
</p>
|
|
|
-<ul>
|
|
|
-<li><div> The base element is the screen.</div>
|
|
|
-<ul>
|
|
|
-<li><div> Name the first screen <code>id=“start”</code>. Name any others whatever you like.</div>
|
|
|
-</li>
|
|
|
-</ul>
|
|
|
-</li>
|
|
|
-<li><div> A screen contains one or more layers. </div>
|
|
|
-</li>
|
|
|
-<li><div> A layer contains elements such as panels, images, text fields.</div>
|
|
|
+<ol>
|
|
|
+<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_xml_layout.html">Lay out the GUI in XML</a></div>
|
|
|
</li>
|
|
|
-<li><div> Every element has an id to refer to it.</div>
|
|
|
+<li><div> Integrate the <acronym title="Graphical User Interface">GUI</acronym> into the Game</div>
|
|
|
+<ul>
|
|
|
+<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_overlay.html">Overlay the User Interface Over the Screen</a>, or</div>
|
|
|
</li>
|
|
|
-<li><div> Every Screen has a Java class as ScreenController.</div>
|
|
|
+<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">Project the User Interface Onto a Texture</a></div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
-
|
|
|
-</div>
|
|
|
-
|
|
|
-<h4><a>How to Use Screens and Layers</a></h4>
|
|
|
-<div>
|
|
|
-
|
|
|
-<p>
|
|
|
-
|
|
|
-Here's a minimal example showing an empty centered layer:
|
|
|
-</p>
|
|
|
-<pre><span><?xml version="1.0" encoding="UTF-8"?></span>
|
|
|
-<span><span><nifty></span></span>
|
|
|
- <span><screen id="start" controller="de.lessvoid.nifty.examples.helloworld.HelloWorldStartScreen"></span>
|
|
|
- <span><layer id="layer" backgroundColor="#003f" childLayout="center"></span>
|
|
|
- <!-- panels and text fields go here -->
|
|
|
- <span><span></layer></span></span>
|
|
|
- <span><span></screen></span></span>
|
|
|
-<span><span></nifty></span></span></pre>
|
|
|
-<p>
|
|
|
-Into a layer, you add elements (panels, text, images, etc), and specify their properties:
|
|
|
-</p>
|
|
|
-
|
|
|
-<p>
|
|
|
-<strong>Load a Panel (rectangular colored box)</strong>
|
|
|
-</p>
|
|
|
-<pre>...
|
|
|
-<span><panel height="25%" width="35%" align="center" valign="center" backgroundColor="#f60f"</span>
|
|
|
-<span> childLayout="center" visibleToMouse="true"></span>
|
|
|
-<span><span></panel></span></span>
|
|
|
-...</pre>
|
|
|
-<p>
|
|
|
-<strong>Load a Piece of Text</strong>
|
|
|
-</p>
|
|
|
-<pre>...
|
|
|
-<span><text font="verdana-24-shadow.fnt" text="Hello World!" align="center" valign="center" /></span>
|
|
|
-...</pre>
|
|
|
-<p>
|
|
|
-
|
|
|
-or
|
|
|
-</p>
|
|
|
-<pre>...
|
|
|
-<span><label text="this is my text" align="left"/></span>
|
|
|
-...</pre>
|
|
|
-<p>
|
|
|
-<strong>Load an Image</strong>
|
|
|
-</p>
|
|
|
-<pre><span><image filename="Textures/jme-logo.png" ><span></image></span></span></pre>
|
|
|
-<p>
|
|
|
-Nifty additionally offers predefined controls – learn more from the NiftyGUI page:
|
|
|
-</p>
|
|
|
-<ul>
|
|
|
-<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Layout_Introduction"><param name="text" value="<html><u>http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Layout_Introduction</u></html>"><param name="textColor" value="blue"></object></div>
|
|
|
</li>
|
|
|
-<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Elements"><param name="text" value="<html><u>http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Elements</u></html>"><param name="textColor" value="blue"></object></div>
|
|
|
+<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_interaction.html">Interact with the GUI from Java</a></div>
|
|
|
</li>
|
|
|
-</ul>
|
|
|
+</ol>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
-<h4><a>How to Add Effects</a></h4>
|
|
|
+<h2><a>Sample Code</a></h2>
|
|
|
<div>
|
|
|
-
|
|
|
-<p>
|
|
|
-
|
|
|
-You can register effects to screen elements.
|
|
|
-</p>
|
|
|
<ul>
|
|
|
-<li><div> Respond to element events such as onStartScreen, onEndScreen, onHover, onFocus, onActive,</div>
|
|
|
+<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/niftygui/TestNiftyGui.java"><param name="text" value="<html><u>TestNiftyGui.java</u></html>"><param name="textColor" value="blue"></object></div>
|
|
|
</li>
|
|
|
-<li><div> Trigger effects that change movement, blending, size, color, fading, and much more.</div>
|
|
|
+<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/niftygui/TestNiftyToMesh.java"><param name="text" value="<html><u>TestNiftyToMesh.java</u></html>"><param name="textColor" value="blue"></object></div>
|
|
|
</li>
|
|
|
-</ul>
|
|
|
-
|
|
|
-<p>
|
|
|
-
|
|
|
-Here is an example that moves a panel when the startScreen opens. You place an < effect > tag inside the element that you want to want to be affected.
|
|
|
-</p>
|
|
|
-<pre>...
|
|
|
- <span><panel height="25%" width="35%" ...></span>
|
|
|
- <span><span><effect></span></span>
|
|
|
- <span><onStartScreen name="move" mode="in" direction="top" </span>
|
|
|
-<span> length="300" startDelay="0" inherit="true"/></span>
|
|
|
- <span><span></effect></span></span>
|
|
|
- <span><span></panel></span></span>
|
|
|
-...</pre>
|
|
|
-<p>
|
|
|
-Playing sounds using nifty is also possible with effects as triggers. Remember to first register the sound you're going to play:
|
|
|
-</p>
|
|
|
-<pre>...
|
|
|
- <span><registerSound id="click" filename="Sounds/Gui/ButtonClick.ogg" /></span>
|
|
|
-...
|
|
|
- <span><span><label></span></span>
|
|
|
- <span><span><effect></span></span>
|
|
|
- <span><onClick name="playSound" sound="click"/></span>
|
|
|
- <span><span></effect></span></span>
|
|
|
- <span><span></label></span></span>
|
|
|
-...</pre>
|
|
|
-<p>
|
|
|
-
|
|
|
-Learn more from the NiftyGUI page:
|
|
|
-</p>
|
|
|
-<ul>
|
|
|
-<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Effects"><param name="text" value="<html><u>http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Effects</u></html>"><param name="textColor" value="blue"></object></div>
|
|
|
+<li><div> You can find more sample code in the nifty-examples-1.3-SNAPSHOT.jar file.</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
-<h3><a>b) Lay out the GUI in Java</a></h3>
|
|
|
-<div>
|
|
|
-
|
|
|
-<p>
|
|
|
-
|
|
|
-The Nifty team has started creating a “Builder Pattern” based way to create Nifty GUIs. These classes can be used from within Java to create a Nifty <acronym title="Graphical User Interface">GUI</acronym> without the need for an external <acronym title="Extensible Markup Language">XML</acronym> file. <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://nifty-gui.lessvoid.com/archives/179"><param name="text" value="<html><u>Check the ScreenBuilder out here.</u></html>"><param name="textColor" value="blue"></object>
|
|
|
-</p>
|
|
|
-
|
|
|
-</div>
|
|
|
-
|
|
|
-<h2><a>Integrating the GUI into the Game</a></h2>
|
|
|
-<div>
|
|
|
-
|
|
|
-<p>
|
|
|
-
|
|
|
-Define a key (for example escape) that switches the <acronym title="Graphical User Interface">GUI</acronym> on and off.
|
|
|
-You can either overlay the running game with the <acronym title="Graphical User Interface">GUI</acronym> (you will most likely pause then game then), or even project it as a texture onto a mesh (but that makes clicking difficult).
|
|
|
-</p>
|
|
|
-
|
|
|
-</div>
|
|
|
-
|
|
|
-<h3><a>a) Overlaying the User Interface Over the Screen</a></h3>
|
|
|
-<div>
|
|
|
-
|
|
|
-<p>
|
|
|
-
|
|
|
-This code shows you how to overlay anything on the screen with the <acronym title="Graphical User Interface">GUI</acronym>. This is the most common usecase.
|
|
|
-</p>
|
|
|
-<pre>NiftyJmeDisplay niftyDisplay = new NiftyJmeDisplay(
|
|
|
- assetManager, inputManager, audioRenderer, guiViewPort);
|
|
|
-nifty = niftyDisplay.getNifty();
|
|
|
-
|
|
|
-// init Nifty start screen
|
|
|
-nifty.fromXml("Interface/helloworld.xml", "start");
|
|
|
-
|
|
|
-// attach the Nifty display to the gui view port as a processor
|
|
|
-guiViewPort.addProcessor(niftyDisplay);
|
|
|
-// disable the fly cam
|
|
|
-flyCam.setDragToRotate(true);</pre>
|
|
|
-</div>
|
|
|
-
|
|
|
-<h3><a>b) Projecting the User Interface Onto a Texture</a></h3>
|
|
|
-<div>
|
|
|
-
|
|
|
-<p>
|
|
|
-
|
|
|
-You can project the Nifty <acronym title="Graphical User Interface">GUI</acronym> onto a texture, load the texture into a material, and assign it to a 3D mesh. Allthough this is possible the approach is rarely used since it is difficult to record clicks this way, you can only interact with this UI by keyboard.
|
|
|
-</p>
|
|
|
-<pre>/** Create a new viewport for the GUI */
|
|
|
-ViewPort niftyView = renderManager.createPreView("NiftyView", new Camera(1024, 768));
|
|
|
-niftyView.setClearEnabled(true);
|
|
|
-
|
|
|
-
|
|
|
-/** Create a new NiftyJmeDisplay for the integration */
|
|
|
-NiftyJmeDisplay niftyDisplay = new NiftyJmeDisplay(
|
|
|
- assetManager, inputManager, audioRenderer, niftyView);
|
|
|
-
|
|
|
-/** Create a new NiftyGUI object and read your XML */
|
|
|
-Nifty nifty = niftyDisplay.getNifty();
|
|
|
-nifty.fromXml("Interface/helloworld.xml", "start");
|
|
|
-
|
|
|
-/** We prepare a framebuffer for the texture niftytex */
|
|
|
-niftyView.addProcessor(niftyDisplay);
|
|
|
-FrameBuffer fb = new FrameBuffer(1024, 768, 0);
|
|
|
-fb.setDepthBuffer(Format.Depth);
|
|
|
-Texture2D niftytex = new Texture2D(1024, 768, Format.RGB8);
|
|
|
-fb.setColorTexture(niftytex);
|
|
|
-niftyView.setClearEnabled(true);
|
|
|
-niftyView.setOutputFrameBuffer(fb);
|
|
|
-
|
|
|
-/** This is the 3D cube we project the GUI on */
|
|
|
-Box(Vector3f.ZERO, 1, 1, 1);
|
|
|
-Geometry geom = new Geometry("Box", b);
|
|
|
-Material mat = new Material(assetManager, "Common/MatDefs/Misc/SimpleTextured.j3md");
|
|
|
-mat.setTexture("m_ColorMap", niftytex); /** Here comes the texture! */
|
|
|
-geom.setMaterial(mat);
|
|
|
-rootNode.attachChild(geom);</pre>
|
|
|
-<p>
|
|
|
-You select buttons on this <acronym title="Graphical User Interface">GUI</acronym> with the arrow keys and then press return – Clicking them will not work.
|
|
|
-</p>
|
|
|
-
|
|
|
-<p>
|
|
|
-Again, check the <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Main_Page"><param name="text" value="<html><u>Nifty GUI wiki</u></html>"><param name="textColor" value="blue"></object> to get all the “bells and whistles”!
|
|
|
-</p>
|
|
|
-
|
|
|
-</div>
|
|
|
-
|
|
|
-<h2><a>Interacting with the GUI from Java</a></h2>
|
|
|
-<div>
|
|
|
-
|
|
|
-<p>
|
|
|
-
|
|
|
-The main purpose of the <acronym title="Graphical User Interface">GUI</acronym> is to send events back to your Java class that indicate what the users clicked, which settings they chose, which values they entered into a field, etc. In the Java class, you want to respond with an appropriate action, or store the entered settings in a file, etc.
|
|
|
-</p>
|
|
|
-
|
|
|
-</div>
|
|
|
-
|
|
|
-<h3><a>Connect GUI to Java Controller</a></h3>
|
|
|
-<div>
|
|
|
-
|
|
|
-<p>
|
|
|
-
|
|
|
-How does the <acronym title="Extensible Markup Language">XML</acronym> file send a message back to your Java application? You register a ScreenController (a Java class) to every NiftyGUI screen.
|
|
|
-</p>
|
|
|
-
|
|
|
-<p>
|
|
|
-Create a ScreenController by creating a Java class that implements the <code>de.lessvoid.nifty.screen.ScreenController</code> interface and its abtract methods.
|
|
|
-</p>
|
|
|
-<pre>package my.game;
|
|
|
-import de.lessvoid.nifty.Nifty;
|
|
|
-import de.lessvoid.nifty.screen.Screen;
|
|
|
-import de.lessvoid.nifty.screen.ScreenController;
|
|
|
-
|
|
|
-public class MySettingsScreen implements ScreenController {
|
|
|
-
|
|
|
- public void bind(Nifty nifty, Screen screen) { }
|
|
|
-
|
|
|
- public void onStartScreen() { }
|
|
|
-
|
|
|
- public void onEndScreen() { }
|
|
|
-}</pre>
|
|
|
-<p>
|
|
|
-The name and package of your custom ScreenController class (here <code>my.game.MySettingsScreen</code>) goes into the controller parameter of the respective screen it belongs to:
|
|
|
-</p>
|
|
|
-<pre><span><span><nifty></span></span>
|
|
|
- <span><screen id="settings" controller="my.game.MySettingsScreen"></span>
|
|
|
- <!-- panel code ... -->
|
|
|
- <span><span></screen></span></span>
|
|
|
-<span><span></nifty></span></span></pre>
|
|
|
-<p>
|
|
|
-Now the Java class <code>my.game.MySettingsScreen</code> and this <acronym title="Graphical User Interface">GUI</acronym> screen (<code>settings</code>) are connected.
|
|
|
-</p>
|
|
|
-
|
|
|
-</div>
|
|
|
-
|
|
|
-<h3><a>Make GUI and Java Interact</a></h3>
|
|
|
-<div>
|
|
|
-
|
|
|
-<p>
|
|
|
-
|
|
|
-You can use any of the three following approaches to interact, and you can also combine them, depending on what you want to do.
|
|
|
-</p>
|
|
|
-
|
|
|
-</div>
|
|
|
-
|
|
|
-<h4><a>a) GUI Calls a Void Java Method</a></h4>
|
|
|
-<div>
|
|
|
-
|
|
|
-<p>
|
|
|
-
|
|
|
-To respond to an interaction, add the <interact /> element to a panel and specify the Java method you want to call. In this example, we want to call <code>sayHello()</code> when a panel on the screen is clicked.
|
|
|
-</p>
|
|
|
-<pre>...
|
|
|
-<span><panel id="panel" height="25%" width="35%" align="center" valign="center" </span>
|
|
|
-<span> backgroundColor="#f60f" childLayout="center" visibleToMouse="true"></span>
|
|
|
- <span><text id="text" font="aurulent-sans-17.fnt" color="#000f" </span>
|
|
|
-<span> text="Hello World!" align="center" valign="center" /></span>
|
|
|
- <span><interact onClick="sayHello(hi)"/></span>
|
|
|
-<span><span></panel></span></span>
|
|
|
-...</pre>
|
|
|
-<p>
|
|
|
-Back in this screen's Java class, we specify what the <code>sayHello()</code> method does. As you see, you can include String arguments in the call.
|
|
|
-</p>
|
|
|
-<pre>public class MySettingsScreen implements ScreenController {
|
|
|
- ...
|
|
|
- public void sayHello(String myarg) {
|
|
|
- System.out.println("Nifty says "+myarg);
|
|
|
- }
|
|
|
-
|
|
|
- public String callThis() {
|
|
|
- return "my friend";
|
|
|
- }
|
|
|
-}</pre>
|
|
|
-</div>
|
|
|
-
|
|
|
-<h4><a>b) GUI Gets Return Value from Java Method</a></h4>
|
|
|
-<div>
|
|
|
-
|
|
|
-<p>
|
|
|
-
|
|
|
-To send a message from Java to Nifty, Nifty uses <code>${CALL.callThis()}</code> to get the return value of a custom <code>callThis()</code> method from your Java class.
|
|
|
-</p>
|
|
|
-<pre>...
|
|
|
-<span><panel id="panel" height="25%" width="35%" align="center" valign="center" </span>
|
|
|
-<span> backgroundColor="#f60f" childLayout="center" visibleToMouse="true"></span>
|
|
|
- <span><text id="text" font="aurulent-sans-17.fnt" color="#000f" </span>
|
|
|
-<span> text="Hello World, ${CALL.callThis()}!" align="center" valign="center" /></span>
|
|
|
- <span><interact onClick="sayHello(hi)"/></span>
|
|
|
-<span><span></panel></span></span>
|
|
|
-...</pre>
|
|
|
-<p>
|
|
|
-The Java class callThis() in MySettingsScreen defines the Text that is displayed in the textfield after the words <code>Hello World, …!</code>
|
|
|
-</p>
|
|
|
-
|
|
|
-</div>
|
|
|
-
|
|
|
-<h4><a>c) Java Modifies Nifty Elements and Events</a></h4>
|
|
|
-<div>
|
|
|
-
|
|
|
-<p>
|
|
|
-
|
|
|
-You can also alter the appearance and functions of your nifty elements from Java.
|
|
|
-</p>
|
|
|
-
|
|
|
-<p>
|
|
|
-Here's an example of how to change an image:
|
|
|
-</p>
|
|
|
-<pre>NiftyImage img = nifty.getRenderEngine().createImage("Interface/Images/image.png", false);
|
|
|
-Element niftyElement = nifty.getCurrentScreen().findElementByName("myElement");
|
|
|
-niftyElement.getRenderer(ImageRenderer.class).setImage(img);</pre>
|
|
|
-<p>
|
|
|
-To change the onClick() event of an element:
|
|
|
-</p>
|
|
|
-<pre>Element niftyElement = nifty.getCurrentScreen().findElementByName("myElement");
|
|
|
-niftyElement.setInteraction(new ElementInteraction(nifty) {
|
|
|
-
|
|
|
- @Override
|
|
|
- public void onClick() {
|
|
|
- // call java functions normally.
|
|
|
- niftyController.onElementClicked();
|
|
|
- super.onClick();
|
|
|
- }
|
|
|
-
|
|
|
- @Override
|
|
|
- public boolean onClick(MouseInputEvent inputEvent) {
|
|
|
- niftyController.onElementClicked();
|
|
|
- return super.onClick(inputEvent);
|
|
|
- }
|
|
|
-});</pre>
|
|
|
-<p>
|
|
|
-For this to work, there already needs to be an < interact > tag inside your xml element:
|
|
|
-</p>
|
|
|
-<pre><interact onClick="doNothing()"/></pre>
|
|
|
-
|
|
|
-<p>
|
|
|
-Learn more: <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=MarkUp"><param name="text" value="<html><u>Nifty Syntax</u></html>"><param name="textColor" value="blue"></object>
|
|
|
-</p>
|
|
|
-
|
|
|
-</div>
|
|
|
-
|
|
|
<h2><a>Pro Tip: Use XML Schema</a></h2>
|
|
|
<div>
|
|
|
|
|
@@ -452,7 +76,7 @@ If you include the following <acronym title="Extensible Markup Language">XML</ac
|
|
|
<span> xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty.xsd
|
|
|
http://nifty-gui.sourceforge.net/nifty.xsd"></span>
|
|
|
|
|
|
- <!-- Example: The IDE will tell you that 1 <screen></screen> element is expected here -->
|
|
|
+ <!-- Example: The IDE will now tell you that one <screen></screen> element is expected here, etc. -->
|
|
|
|
|
|
<span><span></nifty></span></span></pre>
|
|
|
</div>
|
|
@@ -476,6 +100,11 @@ Learn more from the NiftyGUI page!
|
|
|
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://jmonkeyengine.org/groups/gui/forum/topic/anyone-succeeded-in-changing-text-in-nifty-programatically/#post-109510"><param name="text" value="<html><u>Changing the Text in Nifty GUIs programmatically</u></html>"><param name="textColor" value="blue"></object></div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
+<div><span>
|
|
|
+ <a href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a>,
|
|
|
+ <a href="/wiki/doku.php/tag:gui?do=showtag&tag=tag%3Agui">gui</a>,
|
|
|
+ <a href="/wiki/doku.php/tag:input?do=showtag&tag=tag%3Ainput">input</a>
|
|
|
+</span></div>
|
|
|
|
|
|
</div>
|
|
|
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:nifty_gui?do=export_xhtmlbody">view online version</a></em></p>
|