anchor.diff:  a| Nifty Method
   a| Description
   
  -a| registerSound(“mysound, “Interface/abc.wav);
  +a| registerSound("`mysound`", "`Interface/abc.wav`");
   a|
   
  -a| registerMusic(“mymusic, “Interface/xyz.ogg);
  +a| registerMusic("`mymusic`", "`Interface/xyz.ogg`");
   a|
   
  -a| registerMouseCursor(“mypointer, “Interface/abc.png, 5, 4);
  +a| registerMouseCursor("`mypointer`", "`Interface/abc.png`", 5, 4);
   a|
   
   a| registerEffect(?);
  
positive.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:
  
  [source,java]
  ----
  
      nifty.addScreen("start", new ScreenBuilder("start") {{
          controller(new DefaultScreenController());
          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
          }});
  
      }}.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: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");
              }});
  
          }});
  ----
  
  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%");
                      }});
  
                  }});
  ----
  
  This image is scaled to use 50% of the height and 30% of the width of its container.
  
negative.code: 
  === Add Static Text
  
  The game title is a typical example of static text. In the `start` screen `foreground` layer, add the following text element:
  
  [source,java]
  ----
  
  // panel added
  panel(new PanelBuilder("panel_top") {{
      childLayoutCenter();
      alignCenter();
      backgroundColor("#f008");
      height("25%");
      width("75%");
  
      text(new TextBuilder() {{
          text("My Cool Game");
          font("Interface/Fonts/Default.fnt");
          height("100%");
          width("100%");
      }});
  }});
  
  ----
  
  For longer pieces of static text, such as an introduction, you can use `wrap="true"`. Setting `wrap="true"` will only work when you set a width for the text element, so that Nifty knows when to wrap a line. Add the following text element to the `Start` screen `foreground` layer:
  
  [source,java]
  ----
  
  panel(new PanelBuilder("panel_mid") {{
      childLayoutCenter();
      alignCenter();
      backgroundColor("#0f08");
      height("50%");
      width("75%");
  
      // add text
      text(new TextBuilder() {{
          text("Here goes some text describing the game and the rules and stuff. "
                  + "Incidentally, the text is quite long and needs to wrap at the end of lines. ");
          font("Interface/Fonts/Default.fnt");
          wrap(true);
          height("100%");
          width("100%");
      }});
  }});
  
  ----
  
  The font used is jME3's default font "`Interface/Fonts/Default.fnt`" which is included in the jMonkeyEngine.JAR. You can add your own fonts to your own `assets/Interface` directory. Set your font to the one you created during the start of the <<jme3/advanced/nifty_gui_xml_layout#implement-your-gui-layout#, Gui Implementation>> phase of your game.
  
  
  === Add Controls
  
  Before you can use any control, you must load a Control Definition first. Thats why we add the following two lines _before_ the screen definitions:
  
  [source,java]
  ----
  
  nifty.loadStyleFile("nifty-default-styles.xml");
  nifty.loadControlFile("nifty-default-controls.xml");
  
  ----
  
  
  