anchor.diff:  .  <<jme3/advanced/nifty_gui_overlay#,Nifty GUI Overlay>> or <<jme3/advanced/nifty_gui_projection#,Nifty GUI Projection>>
   .  <<jme3/advanced/nifty_gui_java_interaction#,Interact with the GUI from Java>>
   
  -*Work in progress* You can “draw the +++<abbr title="Graphical User Interface">GUI</abbr>+++ to the screen by writing Java code – alternatively to using XML. Typically you lay out the static base +++<abbr title="Graphical User Interface">GUI</abbr>+++ in XML, and use Java commands if you need to change the +++<abbr title="Graphical User Interface">GUI</abbr>+++ dynamically at runtime. In theory, you can also lay out the whole +++<abbr title="Graphical User Interface">GUI</abbr>+++ in Java (but we don't cover that here).
  +You can "`draw`" the +++<abbr title="Graphical User Interface">GUI</abbr>+++ to the screen by writing Java code – alternatively to using XML. Typically you lay out the static base +++<abbr title="Graphical User Interface">GUI</abbr>+++ in XML, and use Java commands if you need to change the +++<abbr title="Graphical User Interface">GUI</abbr>+++ dynamically at runtime. In theory, you can also lay out the whole +++<abbr title="Graphical User Interface">GUI</abbr>+++ in Java (but we don't cover that here).
   
   
   == Sample Code
   
   Sample project
   
  -*  *Original Source Code:* link:http://nifty-gui.svn.sourceforge.net/viewvc/nifty-gui/nifty-default-controls-examples/trunk/src/main/java/de/lessvoid/nifty/examples/[/nifty-default-controls-examples/trunk/src/main/java/de/lessvoid/nifty/examples/]. +
  -*  *Download demo project:* link:http://files.seapegasus.org/NiftyGuiDemo.zip[http://files.seapegasus.org/NiftyGuiDemo.zip] (jme3-ready) +The full demo ZIP is based on `de.lessvoid.nifty.examples.controls.ControlsDemo.java`.
  -..  The demo is a SimpleApplication-based game (use e.g. the BasicGame template in the jMonkeyEngine SDK).
  -..  Copy images and sound files into your project's `assets/Interface/` directory. (In this example, I copied them from `nifty-default-controls-examples/trunk/src/main/resources/` to `assets/Interface/`).
  -..  Make sure to use paths relative to your project's `assets/` directory.
  -***  E.g. for .fnt/.png/.jpg files use `filename(“Interface/yang.png);` ( not `filename(“yang.png);`).
  -***  E.g. for .wav/.ogg files use `filename(“Interface/sounds/gong.wav);` (not `filename(“sounds/gong.wav);`).
  -
  -
  +*  *Original Source Code:* link:https://github.com/nifty-gui/nifty-gui/tree/1.4/nifty-examples/src/main/java/de/lessvoid/nifty/examples/defaultcontrols[/nifty-examples/src/main/java/de/lessvoid/nifty/examples/defaultcontrols/].
  +//*  *Download demo project:* link:http://files.seapegasus.org/NiftyGuiDemo.zip[http://files.seapegasus.org/NiftyGuiDemo.zip] (jme3-ready) +
  +//The full demo ZIP is based on `de.lessvoid.nifty.examples.controls.ControlsDemo.java`.
  +//..  The demo is a SimpleApplication-based game (use e.g. the BasicGame template in the jMonkeyEngine SDK).
  +//..  Copy images and sound files into your project's `assets/Interface/` directory. (In this example, I copied them from `nifty-default-controls-examples/trunk/src/main/resources/` to `assets/Interface/`).
  +//..  Make sure to use paths relative to your project's `assets/` directory.
  +//***  E.g. for .fnt/.png/.jpg files use filename `Interface/yang.png` not filename `yang.png`.
  +//***  E.g. for .wav/.ogg files use filename `Interface/sounds/gong.wav` not filename `sounds/gong.wav`.
   
   Just so you get a quick picture what Nifty +++<abbr title="Graphical User Interface">GUI</abbr>+++'s Java Syntax looks like, here is the most basic example. It creates a screen with a layer and a panel that contains a button.
   
   [source,java]
   ----
  +
   package mygame;
   
  +import com.jme3.app.Application;
   import com.jme3.app.SimpleApplication;
  +import com.jme3.app.state.BaseAppState;
   import com.jme3.niftygui.NiftyJmeDisplay;
   import de.lessvoid.nifty.Nifty;
  -import de.lessvoid.nifty.builder.ScreenBuilder;
   import de.lessvoid.nifty.builder.LayerBuilder;
   import de.lessvoid.nifty.builder.PanelBuilder;
  +import de.lessvoid.nifty.builder.ScreenBuilder;
   import de.lessvoid.nifty.controls.button.builder.ButtonBuilder;
   import de.lessvoid.nifty.screen.DefaultScreenController;
   
  -/**
  - * @author iamcreasy
  -*/
  -public class Main extends SimpleApplication {
  -
  -    public static void main(String[] args) {
  -        Main app = new Main();
  -        app.start();
  -    }
  -
  -    @Override
  -    public void simpleInitApp() {
  -    NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
  -            assetManager, inputManager, audioRenderer, guiViewPort);
  -    Nifty nifty = niftyDisplay.getNifty();
  -    guiViewPort.addProcessor(niftyDisplay);
  -    flyCam.setDragToRotate(true);
  -
  -    nifty.loadStyleFile("nifty-default-styles.xml");
  -    nifty.loadControlFile("nifty-default-controls.xml");
  -
  -    // <screen>
  -    nifty.addScreen("Screen_ID", new ScreenBuilder("Hello Nifty Screen"){{
  -        controller(new DefaultScreenController()); // Screen properties
  -
  -        // <layer>
  -        layer(new LayerBuilder("Layer_ID") {{
  -            childLayoutVertical(); // layer properties, add more...
  -
  -            // <panel>
  -            panel(new PanelBuilder("Panel_ID") {{
  -               childLayoutCenter(); // panel properties, add more...
  -
  -                // GUI elements
  -                control(new ButtonBuilder("Button_ID", "Hello Nifty"){{
  -                    alignCenter();
  -                    valignCenter();
  -                    height("5%");
  -                    width("15%");
  +public class MyStartScreenJava extends BaseAppState {
  +
  +    @Override
  +    protected void initialize(Application app) {
  +        //It is technically safe to do all initialization and cleanup in the
  +        //onEnable()/onDisable() methods. Choosing to use initialize() and
  +        //cleanup() for this is a matter of performance specifics for the
  +        //implementor.
  +        //TODO: initialize your AppState, e.g. attach spatials to rootNode
  +    }
  +
  +    @Override
  +    protected void cleanup(Application app) {
  +        //TODO: clean up what you initialized in the initialize method,
  +        //e.g. remove all spatials from rootNode
  +    }
  +
  +    //onEnable()/onDisable() can be used for managing things that should
  +    //only exist while the state is enabled. Prime examples would be scene
  +    //graph attachment or input listener attachment.
  +    @Override
  +    protected void onEnable() {
  +        NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
  +                getApplication().getAssetManager(),
  +                getApplication().getInputManager(),
  +                getApplication().getAudioRenderer(),
  +                getApplication().getGuiViewPort());
  +
  +        Nifty nifty = niftyDisplay.getNifty();
  +        getApplication().getGuiViewPort().addProcessor(niftyDisplay);
  +        ((SimpleApplication) getApplication()).getFlyByCamera().setDragToRotate(true);
  +
  +        nifty.loadStyleFile("nifty-default-styles.xml");
  +        nifty.loadControlFile("nifty-default-controls.xml");
  +
  +        // <screen>
  +        nifty.addScreen("Screen_ID", new ScreenBuilder("Hello Nifty Screen"){{
  +            controller(new DefaultScreenController()); // Screen properties
  +
  +            // <layer>
  +            layer(new LayerBuilder("Layer_ID") {{
  +                childLayoutVertical(); // layer properties, add more...
  +
  +                // <panel>
  +                panel(new PanelBuilder("Panel_ID") {{
  +                   childLayoutCenter(); // panel properties, add more...
  +
  +                    // GUI elements
  +                    control(new ButtonBuilder("Button_ID", "Hello Nifty"){{
  +                        alignCenter();
  +                        valignCenter();
  +                        height("5%");
  +                        width("15%");
  +                    }});
  +
  +                    //.. add more GUI elements here
  +
                   }});
  -
  -                //.. add more GUI elements here
  -
  -            }});
  -            // </panel>
  -          }});
  -        // </layer>
  -      }}.build(nifty));
  -    // </screen>
  -
  -    nifty.gotoScreen("Screen_ID"); // start the screen
  -    }
  +                // </panel>
  +              }});
  +            // </layer>
  +          }}.build(nifty));
  +        // </screen>
  +
  +        nifty.gotoScreen("Screen_ID"); // start the screen
  +    }
  +
  +    @Override
  +    protected void onDisable() {
  +        //Called when the state was previously enabled but is now disabled
  +        //either because setEnabled(false) was called or the state is being
  +        //cleaned up.
  +    }
  +
  +    @Override
  +    public void update(float tpf) {
  +        //TODO: implement behavior during runtime
  +    }
  +
   }
  +
   ----
   
   
   == Implement Your GUI Layout
   
   
  -image::jme3/advanced/gui-layout-draft.png[gui-layout-draft.png,width="",height="",align="right"]
  -
  -
  -In this tutorial, you recreate the same screen as in the Nifty +++<abbr title="Graphical User Interface">GUI</abbr>+++ XML example.
  -
  -Create an Screen.Java file in the `assets/Interfaces/` directory of your project. One Java file can contain several, or even all screens. As a reminder: Nifty displays one screen at a time; a screen contains several layers on top of one another; each layer contains panels that are embedded into another; the panels contain the actual content (text, images, or controls).
  +image::jme3/advanced/gui-layout-draft.png[gui-layout-draft.png,width="",height="",align="left"]
  +
  +
  +In this tutorial, you recreate the same screen as in the <<jme3/advanced/nifty_gui_xml_layout#, Laying out the GUI in XML>> example.
  +
  +Create an Screen.Java file that extends BaseAppState in the mygame directory of your project. One Java file can contain several, or even all screens. As a reminder: Nifty displays one screen at a time; a screen contains several layers on top of one another; each layer contains panels that are embedded into another; the panels contain the actual content (text, images, or controls).
  +
  +Next, setup your Nifty display.
  +[source, java]
  +----
  +NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
  +        getApplication().getAssetManager(),
  +        getApplication().getInputManager(),
  +        getApplication().getAudioRenderer(),
  +        getApplication().getGuiViewPort());
  +
  +Nifty nifty = niftyDisplay.getNifty();
  +getApplication().getGuiViewPort().addProcessor(niftyDisplay);
  +((SimpleApplication) getApplication()).getFlyByCamera().setDragToRotate(true);
  +
  +nifty.loadStyleFile("nifty-default-styles.xml");
  +nifty.loadControlFile("nifty-default-controls.xml");
  +
  +// <!-- ... -->
  +
  +nifty.gotoScreen("start"); // start the screen
  +----
  +
   
   
   === Make Screens
  
positive.code: 
  [source,java]
  ----
                  panel(new PanelBuilder("panel_top_right1") {{
                      childLayoutCenter();
                      backgroundColor("#00f8");
                      height("15%");
                      width("100%");
  
                      control(new LabelBuilder(){{
                          color("#000");
                          text("123");
                          width("100%");
                          height("100%");
                      }});
  ----
  
  Note that the width and height do not scale the bitmap font, but make indirectly certain it is centered. If you want a different size for the font, you need to provide an extra bitmap font (they come with fixes sizes and don't scale well).
  
  
  ==== Button Control
  
  Our +++<abbr title="Graphical User Interface">GUI</abbr>+++ plan asks for two buttons on the start screen. You add the Start and Quit buttons to the bottom panel of the `start` screen using the `&lt;control&gt;` element:
  
  [source,java]
  ----
  
                  panel(new PanelBuilder("panel_bottom_left") {{
                      childLayoutCenter();
                      valignCenter();
                      backgroundColor("#44f8");
                      height("50%");
                      width("50%");
  
                      // add control
                      control(new ButtonBuilder("StartButton", "Start") {{
                        alignCenter();
                        valignCenter();
                        height("50%");
                        width("50%");
                      }});
  
                  }});
  
                  panel(new PanelBuilder("panel_bottom_right") {{
                      childLayoutCenter();
                      valignCenter();
                      backgroundColor("#88f8");
                      height("50%");
                      width("50%");
  
                      // add control
                      control(new ButtonBuilder("QuitButton", "Quit") {{
                        alignCenter();
                        valignCenter();
                        height("50%");
                        width("50%");
                      }});
  
                  }});
  ----
  
  Note that these controls don't do anything yet – we'll get to that soon.
  
  
  ==== Other Controls
  
  Nifty additionally offers many customizable controls such as check boxes, text fields, menus, chats, tabs, … See also link:http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Elements[Elements] on the Nifty +++<abbr title="Graphical User Interface">GUI</abbr>+++ site.
  
  
  == Intermediate Result
  
  When you preview this code in the jMonkeyEngine SDK, our tutorial demo should looks as follows: A start screen with two buttons, and a game screen with a simple HUD frame and a blue cube (which stands for any jME3 game content).
  
  *Tip:* Remove all lines that set background colors, you only needed them to see the arrangement.
  
  
  image::jme3/advanced/nifty-gui-simple-demo.png[nifty-gui-simple-demo.png,width="",height="",align="center"]
  
negative.code: [source,java]
  ----
  
  nifty.addScreen("start", new ScreenBuilder("start") {{
      controller(new DefaultScreenController());
      // layer added
      layer(new LayerBuilder("background") {{
          childLayoutCenter();
          backgroundColor("#000f");
  
          // <!-- ... -->
      }});
  
      layer(new LayerBuilder("foreground") {{
          childLayoutVertical();
          backgroundColor("#0000");
  
          // <!-- ... -->
      }});
      // layer added
  
  }}.build(nifty));
  ----
  
  Repeat the same, but use
  
  [source]
  ----
  nifty.addScreen("hud", new ScreenBuilder("hud"){{
  ----
  
  for the HUD screen.
  
  In a layer, you can now add panels and arrange them. Panels are containers that mark the areas where you want to display text, images, or controls (buttons etc) later.
  
  
  === Make Panels
  
  A panel is the inner-most container (that will contain the actual content: text, images, or controls). You place panels inside layers. The following panels go into in the `start` screen `foreground` layer:
  
  [source,java]
  ----
  
  nifty.addScreen("start", new ScreenBuilder("start") {{
      controller(new DefaultScreenController());
      // layer added
      layer(new LayerBuilder("background") {{
          childLayoutCenter();
          backgroundColor("#000f");
  
          // <!-- ... -->
      }});
  
      layer(new LayerBuilder("foreground") {{
          childLayoutVertical();
          backgroundColor("#0000");
  
          // panel added
          panel(new PanelBuilder("panel_top") {{
              childLayoutCenter();
              alignCenter();
              backgroundColor("#f008");
              height("25%");
              width("75%");
          }});
  
          panel(new PanelBuilder("panel_mid") {{
              childLayoutCenter();
              alignCenter();
              backgroundColor("#0f08");
              height("50%");
              width("75%");
          }});
  
          panel(new PanelBuilder("panel_bottom") {{
              childLayoutHorizontal();
              alignCenter();
              backgroundColor("#00f8");
              height("25%");
              width("75%");
  
              panel(new PanelBuilder("panel_bottom_left") {{
                  childLayoutCenter();
                  valignCenter();
                  backgroundColor("#44f8");
                  height("50%");
                  width("50%");
              }});
  
              panel(new PanelBuilder("panel_bottom_right") {{
                  childLayoutCenter();
                  valignCenter();
                  backgroundColor("#88f8");
                  height("50%");
                  width("50%");
              }});
          }}); // panel added
      }});
      // layer added
  
  }}.build(nifty));
  
  ----
  
  The following panels go into in the `hud` screen:
  
  [source,Java]
  ----
  
  nifty.addScreen("hud", new ScreenBuilder("hud") {{
      controller(new DefaultScreenController());
  
      layer(new LayerBuilder("background") {{
          childLayoutCenter();
          backgroundColor("#000f");
          // <!-- ... -->
      }});
  
      layer(new LayerBuilder("foreground") {{
          childLayoutHorizontal();
          backgroundColor("#0000");
  
          // panel added
          panel(new PanelBuilder("panel_left") {{
              childLayoutVertical();
              backgroundColor("#0f08");
              height("100%");
              width("80%");
              // <!-- spacer -->
          }});
  
          panel(new PanelBuilder("panel_right") {{
              childLayoutVertical();
              backgroundColor("#00f8");
              height("100%");
              width("20%");
  
              panel(new PanelBuilder("panel_top_right1") {{
                  childLayoutCenter();
                  backgroundColor("#00f8");
                  height("15%");
                  width("100%");
              }});
  
              panel(new PanelBuilder("panel_top_right2") {{
                  childLayoutCenter();
                  backgroundColor("#44f8");
                  height("15%");
                  width("100%");
              }});
  
              panel(new PanelBuilder("panel_bot_right") {{
                  childLayoutCenter();
                  valignCenter();
                  backgroundColor("#88f8");
                  height("70%");
                  width("100%");
              }});
          }}); // panel added
      }});
  }}.build(nifty));
  
  ----
  
  Try the sample. Remember to activate a screen using `nifty.gotoScreen("start");` or `hud` respectively.
  The result should look as follows:
  
  image::jme3/advanced/nifty-gui-panels.png[nifty-gui-panels.png,width="",height="",align="center"]
  
  
  == Adding Content to Panels
  
  See also link:https://versaweb.dl.sourceforge.net/project/nifty-gui/nifty-gui/1.3.2/nifty-gui-the-manual-1.3.2.pdf[Nifty GUI - the Manual: Layouts] on the Nifty +++<abbr title="Graphical User Interface">GUI</abbr>+++ site.
  
  
  === Add Images
  
  The start-background.png image is a fullscreen background picture. In the `start` screen, add the following image element:
  
  [source,java]
  ----
  
  nifty.addScreen("start", new ScreenBuilder("start") {{
      controller(new DefaultScreenController());
      // layer added
      layer(new LayerBuilder("background") {{
          childLayoutCenter();
          backgroundColor("#000f");
  
          // add image
          image(new ImageBuilder() {{
              filename("Interface/start-background.png");
          }});
      }});
      // <!-- ... -->
  }}.build(nifty));
  
  ----
  
  The hud-frame.png image is a transparent frame that we use as HUD decoration. In the `hud` screen, add the following image element:
  
  [source,java]
  ----
  
  nifty.addScreen("hud", new ScreenBuilder("hud") {{
      controller(new DefaultScreenController());
  
      layer(new LayerBuilder("background") {{
          childLayoutCenter();
          backgroundColor("#000f");
  
          // add image
          image(new ImageBuilder() {{
              filename("Interface/hud-frame.png");
          }});
      }});
      // <!-- ... -->
  }}.build(nifty));
  
  ----
  
  The face1.png image is an image that you want to use as a status icon.
  In the `hud` screens `foreground` layer, add the following image element:
  
  [source,java]
  ----
  
  panel(new PanelBuilder("panel_top_right2") {{
      childLayoutCenter();
      backgroundColor("#44f8");
      height("15%");
      width("100%");
  
      // add image
      image(new ImageBuilder() {{
          filename("Interface/face1.png");
          valignCenter();
          alignCenter();
          height("50%");
          width("30%");
      }});
  }});
  
  ----
  
  This image is scaled to use 50% of the height and 30% of the width of its container.
  