anchor.diff:  [source,java]
   ----
   
  -nifty.addScreen("start", new ScreenBuilder("start"){{
  -        controller(new DefaultScreenController());
  -
  -         // layer added
  -         layer(new LayerBuilder("background") {{
  +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();
  -            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:
  -
  -[source,java]
  -----
  -
  -    nifty.addScreen("start", new ScreenBuilder("start") {{
  -        controller(new DefaultScreenController());
  -        layer(new LayerBuilder("background") {{
  +            alignCenter();
  +            backgroundColor("#f008");
  +            height("25%");
  +            width("75%");
  +        }});
  +
  +        panel(new PanelBuilder("panel_mid") {{
               childLayoutCenter();
  -            backgroundColor("#000f");
  -            // <!-- ... -->
  +            alignCenter();
  +            backgroundColor("#0f08");
  +            height("50%");
  +            width("75%");
           }});
   
  -        layer(new LayerBuilder("foreground") {{
  -                childLayoutVertical();
  -                backgroundColor("#0000");
  -
  -            // panel added
  -            panel(new PanelBuilder("panel_top") {{
  +        panel(new PanelBuilder("panel_bottom") {{
  +            childLayoutHorizontal();
  +            alignCenter();
  +            backgroundColor("#00f8");
  +            height("25%");
  +            width("75%");
  +
  +            panel(new PanelBuilder("panel_bottom_left") {{
                   childLayoutCenter();
  -                alignCenter();
  -                backgroundColor("#f008");
  -                height("25%");
  -                width("75%");
  +                valignCenter();
  +                backgroundColor("#44f8");
  +                height("50%");
  +                width("50%");
               }});
   
  -            panel(new PanelBuilder("panel_mid") {{
  +            panel(new PanelBuilder("panel_bottom_right") {{
                   childLayoutCenter();
  -                alignCenter();
  -                backgroundColor("#0f08");
  +                valignCenter();
  +                backgroundColor("#88f8");
                   height("50%");
  -                width("75%");
  +                width("50%");
               }});
  -
  -            panel(new PanelBuilder("panel_bottom") {{
  -                childLayoutHorizontal();
  -                alignCenter();
  +        }}); // 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("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
  +                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 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");
  -            // <!-- ... -->
  +    }});
  +    // <!-- ... -->
  +}}.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");
           }});
  -
  -        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:http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Layout_Introduction[Layout Introduction] 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(new LayerBuilder("background") {{
  -            childLayoutCenter();
  -            backgroundColor("#000f");
  -
  -            // add image
  -            image(new ImageBuilder() {{
  -                filename("Interface/tutorial/start-background.png");
  -            }});
  -
  -        }});
  -
  -----
  -
  -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/tutorial/hud-frame.png");
  -            }});
  -
  -        }});
  +    }});
  +    // <!-- ... -->
  +}}.build(nifty));
  +
   ----
   
   The face1.png image is an image that you want to use as a status icon.
  -In the `hud` screen's `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/tutorial/face1.png");
  -                        valignCenter();
  -                        alignCenter();
  -                        height("50%");
  -                        width("30%");
  -                    }});
  -
  -                }});
  +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.
  
positive.code: .  <<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).
  
  
  == 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);`).
  
  
  
  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.SimpleApplication;
  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.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%");
                  }});
  
                  //.. add more GUI elements here
  
              }});
              // </panel>
            }});
          // </layer>
        }}.build(nifty));
      // </screen>
  
      nifty.gotoScreen("Screen_ID"); // start the screen
      }
  }
  ----
  
  
  == 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).
  
  
  === Make Screens
  
negative.code: [source,java]
  ----
  
  nifty.addScreen("start", new ScreenBuilder("start") {{
      controller(new DefaultScreenController());
      // <!-- ... -->
  }}.build(nifty));
  
  nifty.addScreen("hud", new ScreenBuilder("hud") {{
      controller(new DefaultScreenController());
      // <!-- ... -->
  }}.build(nifty));
  
  ----
  
  