# Laying out the GUI in XML

1. Nifty GUI XML Layout
2. Nifty GUI Overlay or Nifty GUI Projection
3. Interact with the GUI from Java

You “draw” the GUI to the screen by writing XML code. We will be referring to the following elements:

- Every Nifty Gui is made up of screens.
  - Nifty can display only one screen at a time.
  - You must name the first screen `id=“start”`. Name any others whatever you like.
  - Every screen is controlled by a Java class.
- A screen contains one or more layers.
  - Layers are containers that impose an alignment on their content (vertical, horizontal, centered)
  - Layers can overlap (z-order), but cannot be nested.
  - Layers are usually transparent (but can be opaque).
- A layer contains panels.
  - Panels are containers that impose an alignment on their content (vertical, horizontal, centered)
  - Panels can be nested, but not overlap.
  - Panels are usually opaque (but can be transparent). ?
- A panel can contain images, text fields, buttons, controls.
- Every element has an id to refer to it.

## How to Use Screens and Layers

Create an empty helloworld.xml file in the `assets/Interfaces/` directory of your project.

Here's a minimal example showing an empty centered layer on the start screen:

    <?xml version="1.0" encoding="UTF-8"?>
    <nifty xmlns="http://nifty-gui.sourceforge.net/nifty.xsd"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty.xsd
                               http://nifty-gui.sourceforge.net/nifty.xsd">

      <screen id="start" controller="de.lessvoid.nifty.examples.helloworld.HelloWorldStartScreen">
        <layer id="layer1" backgroundColor="#003f" childLayout="center">
           <!-- ... panels go here... -->
        </layer>
      </screen>

    </nifty>

Into a layer, you add panels (text, images, etc), and specify their properties:

### Panel

A panels looks like a rectangular colored box.

    ...
    <panel height="25%" width="35%" align="center" valign="center" backgroundColor="#f60f"
           childLayout="center" visibleToMouse="true">
    </panel>
    ...

### Text

    ...
    <text font="verdana-24-shadow.fnt" text="Hello World!" align="center" valign="center" />
    ...

or

    ...
    <label text="this is my text" align="left"/>
    ...

### Image

    <image filename="Textures/jme-logo.png" ></image>

Nifty additionally offers predefined controls – learn more from the NiftyGUI page:

## Effects

You can register effects to screen elements.

- Respond to element events such as onStartScreen, onEndScreen, onHover, onFocus, onActive,
- Trigger effects that change movement, blending, size, color, fading, and much more.

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.

    ...
      <panel height="25%" width="35%" ...>
        <effect>
          <onStartScreen name="move" mode="in" direction="top"
                         length="300" startDelay="0" inherit="true"/>
        </effect>
      </panel>
    ...

Playing sounds using nifty is also possible with effects as triggers. Remember to first register the sound you're going to play:

    ...
      <registerSound id="click" filename="Sounds/Gui/ButtonClick.ogg" />
    ...
      <label>
        <effect>
           <onClick name="playSound" sound="click"/>
        </effect>
      </label>
    ...

Learn more from the NiftyGUI page:

1. Nifty GUI XML Layout
2. Nifty GUI Overlay or Nifty GUI Projection
3. Interact with the GUI from Java

documentation, gui

view online version