java
/
jMonkeyEngine-wiki
mirror de https://github.com/jMonkeyEngine/wiki.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660
							<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]--><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="Asciidoctor 1.5.4"><meta name="keywords" content="gui, documentation, nifty, hud"><title>Laying Out the GUI in Java</title><link rel="stylesheet" href="./asciidoctor.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./coderay-asciidoctor.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css"><link rel="stylesheet" href="/home/travis/build/jMonkeyEngine/wiki/build/asciidoc/html5/jme3/advanced/twemoji-awesome.css"></head><body class="article toc2 toc-left"><div id="header"><div id="toolbar"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/src/docs/asciidoc/jme3/advanced/nifty_gui_java_layout.adoc"><i class="fa fa-pencil-square" aria-hidden="true"></i></a><a href="https://github.com/jMonkeyEngine/wiki/new/master/src/docs/asciidoc/jme3/advanced/"><i class="fa fa-plus-square" aria-hidden="true"></i></a><input dir="auto" style="position: relative; vertical-align: top;" spellcheck="false" autocomplete="off" class="searchbox__input aa-input" id="doc-search" name="search" placeholder="Search in the doc" required="required" type="search"></div><h1>Laying Out the GUI in Java</h1><div class="details"><span class="author" id="author"></span><br><span id="revnumber">version ,</span> <span id="revdate">2016/03/17 20:48</span></div><div id="toc" class="toc2"><div id="toctitle">Table of Contents</div><ul class="sectlevel1"><li><a href="#sample-code">Sample Code</a></li><li><a href="#implement-your-gui-layout">Implement Your GUI Layout</a><ul class="sectlevel2"><li><a href="#make-screens">Make Screens</a></li><li><a href="#make-layers">Make Layers</a></li><li><a href="#make-panels">Make Panels</a></li></ul></li><li><a href="#adding-content-to-panels">Adding Content to Panels</a><ul class="sectlevel2"><li><a href="#add-images">Add Images</a></li><li><a href="#add-static-text">Add Static Text</a></li><li><a href="#add-controls">Add Controls</a></li></ul></li><li><a href="#intermediate-result">Intermediate Result</a></li><li><a href="#nifty-java-settings">Nifty Java Settings</a></li><li><a href="#next-steps">Next Steps</a></li></ul></div></div><div id="content"><div id="preamble"><div class="sectionbody"><div class="olist arabic"><ol class="arabic"><li><p><a href="../../jme3/advanced/nifty_gui.html">Nifty GUI Concepts</a></p></li><li><p><a href="../../jme3/advanced/nifty_gui_best_practices.html">Nifty GUI Best Practices</a></p></li><li><p><a href="../../jme3/advanced/nifty_gui_xml_layout.html">Nifty GUI XML Layout</a> or <strong>Nifty <abbr title="Graphical User Interface">GUI</abbr> Java Layout</strong></p></li><li><p><a href="../../jme3/advanced/nifty_gui_overlay.html">Nifty GUI Overlay</a> or <a href="../../jme3/advanced/nifty_gui_projection.html">Nifty GUI Projection</a></p></li><li><p><a href="../../jme3/advanced/nifty_gui_java_interaction.html">Interact with the GUI from Java</a></p></li></ol></div>
<div class="paragraph"><p>You can &#8220;draw&#8221; 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&#8217;t cover that here).</p></div></div></div>
<div class="sect1"><h2 id="sample-code">Sample Code</h2><div class="sectionbody"><div class="paragraph"><p>Sample project</p></div>
<div class="ulist"><ul><li><p><strong>Original Source Code:</strong> <a href="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/</a>.</p></li></ul></div>
<div class="paragraph"><p>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.</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java"><span class="keyword">package</span> <span class="namespace">mygame</span>;

<span class="keyword">import</span> <span class="include">com.jme3.app.Application</span>;
<span class="keyword">import</span> <span class="include">com.jme3.app.SimpleApplication</span>;
<span class="keyword">import</span> <span class="include">com.jme3.app.state.BaseAppState</span>;
<span class="keyword">import</span> <span class="include">com.jme3.niftygui.NiftyJmeDisplay</span>;
<span class="keyword">import</span> <span class="include">de.lessvoid.nifty.Nifty</span>;
<span class="keyword">import</span> <span class="include">de.lessvoid.nifty.builder.LayerBuilder</span>;
<span class="keyword">import</span> <span class="include">de.lessvoid.nifty.builder.PanelBuilder</span>;
<span class="keyword">import</span> <span class="include">de.lessvoid.nifty.builder.ScreenBuilder</span>;
<span class="keyword">import</span> <span class="include">de.lessvoid.nifty.controls.button.builder.ButtonBuilder</span>;
<span class="keyword">import</span> <span class="include">de.lessvoid.nifty.screen.DefaultScreenController</span>;

<span class="directive">public</span> <span class="type">class</span> <span class="class">MyStartScreen</span> <span class="directive">extends</span> BaseAppState {

    <span class="annotation">@Override</span>
    <span class="directive">protected</span> <span class="type">void</span> initialize(Application app) {
        <span class="comment">//It is technically safe to do all initialization and cleanup in the</span>
        <span class="comment">//onEnable()/onDisable() methods. Choosing to use initialize() and</span>
        <span class="comment">//cleanup() for this is a matter of performance specifics for the</span>
        <span class="comment">//implementor.</span>
        <span class="comment">//TODO: initialize your AppState, e.g. attach spatials to rootNode</span>
    }

    <span class="annotation">@Override</span>
    <span class="directive">protected</span> <span class="type">void</span> cleanup(Application app) {
        <span class="comment">//TODO: clean up what you initialized in the initialize method,</span>
        <span class="comment">//e.g. remove all spatials from rootNode</span>
    }

    <span class="comment">//onEnable()/onDisable() can be used for managing things that should</span>
    <span class="comment">//only exist while the state is enabled. Prime examples would be scene</span>
    <span class="comment">//graph attachment or input listener attachment.</span>
    <span class="annotation">@Override</span>
    <span class="directive">protected</span> <span class="type">void</span> 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(<span class="predefined-constant">true</span>);

        nifty.loadStyleFile(<span class="string"><span class="delimiter">&quot;</span><span class="content">nifty-default-styles.xml</span><span class="delimiter">&quot;</span></span>);
        nifty.loadControlFile(<span class="string"><span class="delimiter">&quot;</span><span class="content">nifty-default-controls.xml</span><span class="delimiter">&quot;</span></span>);

        <span class="comment">// &lt;screen&gt;</span>
        nifty.addScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">Screen_ID</span><span class="delimiter">&quot;</span></span>, <span class="keyword">new</span> ScreenBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">Hello Nifty Screen</span><span class="delimiter">&quot;</span></span>){{
            controller(<span class="keyword">new</span> DefaultScreenController()); <span class="comment">// Screen properties</span>

            <span class="comment">// &lt;layer&gt;</span>
            layer(<span class="keyword">new</span> LayerBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">Layer_ID</span><span class="delimiter">&quot;</span></span>) {{
                childLayoutVertical(); <span class="comment">// layer properties, add more...</span>

                <span class="comment">// &lt;panel&gt;</span>
                panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">Panel_ID</span><span class="delimiter">&quot;</span></span>) {{
                   childLayoutCenter(); <span class="comment">// panel properties, add more...</span>

                    <span class="comment">// GUI elements</span>
                    control(<span class="keyword">new</span> ButtonBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">Button_ID</span><span class="delimiter">&quot;</span></span>, <span class="string"><span class="delimiter">&quot;</span><span class="content">Hello Nifty</span><span class="delimiter">&quot;</span></span>){{
                        alignCenter();
                        valignCenter();
                        height(<span class="string"><span class="delimiter">&quot;</span><span class="content">5%</span><span class="delimiter">&quot;</span></span>);
                        width(<span class="string"><span class="delimiter">&quot;</span><span class="content">15%</span><span class="delimiter">&quot;</span></span>);
                    }});

                    <span class="comment">//.. add more GUI elements here</span>

                }});
                <span class="comment">// &lt;/panel&gt;</span>
              }});
            <span class="comment">// &lt;/layer&gt;</span>
          }}.build(nifty));
        <span class="comment">// &lt;/screen&gt;</span>

        nifty.gotoScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">Screen_ID</span><span class="delimiter">&quot;</span></span>); <span class="comment">// start the screen</span>
    }

    <span class="annotation">@Override</span>
    <span class="directive">protected</span> <span class="type">void</span> onDisable() {
        <span class="comment">//Called when the state was previously enabled but is now disabled</span>
        <span class="comment">//either because setEnabled(false) was called or the state is being</span>
        <span class="comment">//cleaned up.</span>
    }

    <span class="annotation">@Override</span>
    <span class="directive">public</span> <span class="type">void</span> update(<span class="type">float</span> tpf) {
        <span class="comment">//TODO: implement behavior during runtime</span>
    }

}</code></pre></div></div></div></div>
<div class="sect2"><h3 id="implement-your-gui-layout">Implement Your GUI Layout</h3><div style="text-align: left;" class="imageblock"><div class="content"><img src="../../jme3/advanced/gui-layout-draft.png" alt="gui-layout-draft.png" width="" height=""></div></div>
<div class="paragraph"><p>In this tutorial, you recreate the same screen as in the <a href="../../jme3/advanced/nifty_gui_xml_layout.html">Laying out the GUI in XML</a> example.</p></div>
<div class="paragraph"><p>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).</p></div>
<div class="paragraph"><p>Next, setup your Nifty display.</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="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(<span class="predefined-constant">true</span>);

nifty.loadStyleFile(<span class="string"><span class="delimiter">&quot;</span><span class="content">nifty-default-styles.xml</span><span class="delimiter">&quot;</span></span>);
nifty.loadControlFile(<span class="string"><span class="delimiter">&quot;</span><span class="content">nifty-default-controls.xml</span><span class="delimiter">&quot;</span></span>);

<span class="comment">// &lt;!-- ... --&gt;</span>

nifty.gotoScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">start</span><span class="delimiter">&quot;</span></span>); <span class="comment">// start the screen</span></code></pre></div></div>
<div class="sect2"><h3 id="make-screens">Make Screens</h3><div class="paragraph"><p>The following minimal Java file contains a start screen and a HUD screen. (Neither has been defined yet.)</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">nifty.addScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">start</span><span class="delimiter">&quot;</span></span>, <span class="keyword">new</span> ScreenBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">start</span><span class="delimiter">&quot;</span></span>) {{
    controller(<span class="keyword">new</span> DefaultScreenController());
    <span class="comment">// &lt;!-- ... --&gt;</span>
}}.build(nifty));

nifty.addScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">hud</span><span class="delimiter">&quot;</span></span>, <span class="keyword">new</span> ScreenBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">hud</span><span class="delimiter">&quot;</span></span>) {{
    controller(<span class="keyword">new</span> DefaultScreenController());
    <span class="comment">// &lt;!-- ... --&gt;</span>
}}.build(nifty));</code></pre></div></div>
<div class="paragraph"><p>Every Nifty <abbr title="Graphical User Interface">GUI</abbr> must have a start screen. The others (in this example, the HUD screen) are optional.</p></div></div>
<div class="sect2"><h3 id="make-layers">Make Layers</h3><div class="paragraph"><p>The following Java code shows how we add layers to the start screen and HUD screen. Add the following to your <code>Screen.java</code> file:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">nifty.addScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">start</span><span class="delimiter">&quot;</span></span>, <span class="keyword">new</span> ScreenBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">start</span><span class="delimiter">&quot;</span></span>) {{
    controller(<span class="keyword">new</span> DefaultScreenController());
    <span class="comment">// layer added</span>
    layer(<span class="keyword">new</span> LayerBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">background</span><span class="delimiter">&quot;</span></span>) {{
        childLayoutCenter();
        backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#000f</span><span class="delimiter">&quot;</span></span>);

        <span class="comment">// &lt;!-- ... --&gt;</span>
    }});

    layer(<span class="keyword">new</span> LayerBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">foreground</span><span class="delimiter">&quot;</span></span>) {{
        childLayoutVertical();
        backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#0000</span><span class="delimiter">&quot;</span></span>);

        <span class="comment">// &lt;!-- ... --&gt;</span>
    }});
    <span class="comment">// layer added</span>

}}.build(nifty));</code></pre></div></div>
<div class="paragraph"><p>Repeat the same, but use</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code>nifty.addScreen("hud", new ScreenBuilder("hud"){{</code></pre></div></div>
<div class="paragraph"><p>for the HUD screen.</p></div>
<div class="paragraph"><p>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.</p></div></div>
<div class="sect2"><h3 id="make-panels">Make Panels</h3><div class="paragraph"><p>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 <code>start</code> screen <code>foreground</code> layer:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">nifty.addScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">start</span><span class="delimiter">&quot;</span></span>, <span class="keyword">new</span> ScreenBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">start</span><span class="delimiter">&quot;</span></span>) {{
    controller(<span class="keyword">new</span> DefaultScreenController());
    <span class="comment">// layer added</span>
    layer(<span class="keyword">new</span> LayerBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">background</span><span class="delimiter">&quot;</span></span>) {{
        childLayoutCenter();
        backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#000f</span><span class="delimiter">&quot;</span></span>);

        <span class="comment">// &lt;!-- ... --&gt;</span>
    }});

    layer(<span class="keyword">new</span> LayerBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">foreground</span><span class="delimiter">&quot;</span></span>) {{
        childLayoutVertical();
        backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#0000</span><span class="delimiter">&quot;</span></span>);

        <span class="comment">// panel added</span>
        panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_top</span><span class="delimiter">&quot;</span></span>) {{
            childLayoutCenter();
            alignCenter();
            backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#f008</span><span class="delimiter">&quot;</span></span>);
            height(<span class="string"><span class="delimiter">&quot;</span><span class="content">25%</span><span class="delimiter">&quot;</span></span>);
            width(<span class="string"><span class="delimiter">&quot;</span><span class="content">75%</span><span class="delimiter">&quot;</span></span>);
        }});

        panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_mid</span><span class="delimiter">&quot;</span></span>) {{
            childLayoutCenter();
            alignCenter();
            backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#0f08</span><span class="delimiter">&quot;</span></span>);
            height(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
            width(<span class="string"><span class="delimiter">&quot;</span><span class="content">75%</span><span class="delimiter">&quot;</span></span>);
        }});

        panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_bottom</span><span class="delimiter">&quot;</span></span>) {{
            childLayoutHorizontal();
            alignCenter();
            backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#00f8</span><span class="delimiter">&quot;</span></span>);
            height(<span class="string"><span class="delimiter">&quot;</span><span class="content">25%</span><span class="delimiter">&quot;</span></span>);
            width(<span class="string"><span class="delimiter">&quot;</span><span class="content">75%</span><span class="delimiter">&quot;</span></span>);

            panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_bottom_left</span><span class="delimiter">&quot;</span></span>) {{
                childLayoutCenter();
                valignCenter();
                backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#44f8</span><span class="delimiter">&quot;</span></span>);
                height(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
                width(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
            }});

            panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_bottom_right</span><span class="delimiter">&quot;</span></span>) {{
                childLayoutCenter();
                valignCenter();
                backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#88f8</span><span class="delimiter">&quot;</span></span>);
                height(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
                width(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
            }});
        }}); <span class="comment">// panel added</span>
    }});
    <span class="comment">// layer added</span>

}}.build(nifty));</code></pre></div></div>
<div class="paragraph"><p>The following panels go into in the <code>hud</code> screen:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="Java">nifty.addScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">hud</span><span class="delimiter">&quot;</span></span>, <span class="keyword">new</span> ScreenBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">hud</span><span class="delimiter">&quot;</span></span>) {{
    controller(<span class="keyword">new</span> DefaultScreenController());

    layer(<span class="keyword">new</span> LayerBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">background</span><span class="delimiter">&quot;</span></span>) {{
        childLayoutCenter();
        backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#000f</span><span class="delimiter">&quot;</span></span>);
        <span class="comment">// &lt;!-- ... --&gt;</span>
    }});

    layer(<span class="keyword">new</span> LayerBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">foreground</span><span class="delimiter">&quot;</span></span>) {{
        childLayoutHorizontal();
        backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#0000</span><span class="delimiter">&quot;</span></span>);

        <span class="comment">// panel added</span>
        panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_left</span><span class="delimiter">&quot;</span></span>) {{
            childLayoutVertical();
            backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#0f08</span><span class="delimiter">&quot;</span></span>);
            height(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
            width(<span class="string"><span class="delimiter">&quot;</span><span class="content">80%</span><span class="delimiter">&quot;</span></span>);
            <span class="comment">// &lt;!-- spacer --&gt;</span>
        }});

        panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_right</span><span class="delimiter">&quot;</span></span>) {{
            childLayoutVertical();
            backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#00f8</span><span class="delimiter">&quot;</span></span>);
            height(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
            width(<span class="string"><span class="delimiter">&quot;</span><span class="content">20%</span><span class="delimiter">&quot;</span></span>);

            panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_top_right1</span><span class="delimiter">&quot;</span></span>) {{
                childLayoutCenter();
                backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#00f8</span><span class="delimiter">&quot;</span></span>);
                height(<span class="string"><span class="delimiter">&quot;</span><span class="content">15%</span><span class="delimiter">&quot;</span></span>);
                width(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
            }});

            panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_top_right2</span><span class="delimiter">&quot;</span></span>) {{
                childLayoutCenter();
                backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#44f8</span><span class="delimiter">&quot;</span></span>);
                height(<span class="string"><span class="delimiter">&quot;</span><span class="content">15%</span><span class="delimiter">&quot;</span></span>);
                width(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
            }});

            panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_bot_right</span><span class="delimiter">&quot;</span></span>) {{
                childLayoutCenter();
                valignCenter();
                backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#88f8</span><span class="delimiter">&quot;</span></span>);
                height(<span class="string"><span class="delimiter">&quot;</span><span class="content">70%</span><span class="delimiter">&quot;</span></span>);
                width(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
            }});
        }}); <span class="comment">// panel added</span>
    }});
}}.build(nifty));</code></pre></div></div>
<div class="paragraph"><p>Try the sample. Remember to activate a screen using <code>nifty.gotoScreen("start");</code> or <code>hud</code> respectively.
The result should look as follows:</p></div>
<div style="text-align: center;" class="imageblock"><div class="content"><img src="../../jme3/advanced/nifty-gui-panels.png" alt="nifty-gui-panels.png" width="" height=""></div></div></div></div>
<div class="sect2"><h3 id="adding-content-to-panels">Adding Content to Panels</h3><div class="paragraph"><p>See also <a href="https://github.com/nifty-gui/nifty-gui/raw/1.4/nifty-core/manual/nifty-gui-the-manual-1.3.2.pdf">Nifty GUI - the Manual: Layouts</a> on the Nifty <abbr title="Graphical User Interface">GUI</abbr> site.</p></div>
<div class="sect2"><h3 id="add-images">Add Images</h3><div class="paragraph"><p>The <code>start-background.png</code> image is a fullscreen background picture. In the <code>start</code> screen, add the following image element:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">nifty.addScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">start</span><span class="delimiter">&quot;</span></span>, <span class="keyword">new</span> ScreenBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">start</span><span class="delimiter">&quot;</span></span>) {{
    controller(<span class="keyword">new</span> DefaultScreenController());
    <span class="comment">// layer added</span>
    layer(<span class="keyword">new</span> LayerBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">background</span><span class="delimiter">&quot;</span></span>) {{
        childLayoutCenter();
        backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#000f</span><span class="delimiter">&quot;</span></span>);

        <span class="comment">// add image</span>
        image(<span class="keyword">new</span> ImageBuilder() {{
            filename(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/start-background.png</span><span class="delimiter">&quot;</span></span>);
        }});
    }});
    <span class="comment">// &lt;!-- ... --&gt;</span>
}}.build(nifty));</code></pre></div></div>
<div class="paragraph"><p>The <code>hud-frame.png</code> image is a transparent frame that we use as HUD decoration. In the <code>hud</code> screen, add the following image element:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">nifty.addScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">hud</span><span class="delimiter">&quot;</span></span>, <span class="keyword">new</span> ScreenBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">hud</span><span class="delimiter">&quot;</span></span>) {{
    controller(<span class="keyword">new</span> DefaultScreenController());

    layer(<span class="keyword">new</span> LayerBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">background</span><span class="delimiter">&quot;</span></span>) {{
        childLayoutCenter();
        backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#000f</span><span class="delimiter">&quot;</span></span>);

        <span class="comment">// add image</span>
        image(<span class="keyword">new</span> ImageBuilder() {{
            filename(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/hud-frame.png</span><span class="delimiter">&quot;</span></span>);
        }});
    }});
    <span class="comment">// &lt;!-- ... --&gt;</span>
}}.build(nifty));</code></pre></div></div>
<div class="paragraph"><p>The <code>face1.png</code> image is an image that you want to use as a status icon.
In the <code>hud</code> screens <code>foreground</code> layer, add the following image element:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_top_right2</span><span class="delimiter">&quot;</span></span>) {{
    childLayoutCenter();
    backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#44f8</span><span class="delimiter">&quot;</span></span>);
    height(<span class="string"><span class="delimiter">&quot;</span><span class="content">15%</span><span class="delimiter">&quot;</span></span>);
    width(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);

    <span class="comment">// add image</span>
    image(<span class="keyword">new</span> ImageBuilder() {{
        filename(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/face1.png</span><span class="delimiter">&quot;</span></span>);
        valignCenter();
        alignCenter();
        height(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
        width(<span class="string"><span class="delimiter">&quot;</span><span class="content">30%</span><span class="delimiter">&quot;</span></span>);
    }});
}});</code></pre></div></div>
<div class="paragraph"><p>This image is scaled to use 50% of the height and 30% of the width of its container.</p></div></div>
<div class="sect2"><h3 id="add-static-text">Add Static Text</h3><div class="paragraph"><p>The game title is a typical example of static text. In the <code>start</code> screen <code>foreground</code> layer, add the following text element:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java"><span class="comment">// panel added</span>
panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_top</span><span class="delimiter">&quot;</span></span>) {{
    childLayoutCenter();
    alignCenter();
    backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#f008</span><span class="delimiter">&quot;</span></span>);
    height(<span class="string"><span class="delimiter">&quot;</span><span class="content">25%</span><span class="delimiter">&quot;</span></span>);
    width(<span class="string"><span class="delimiter">&quot;</span><span class="content">75%</span><span class="delimiter">&quot;</span></span>);

    text(<span class="keyword">new</span> TextBuilder() {{
        text(<span class="string"><span class="delimiter">&quot;</span><span class="content">My Cool Game</span><span class="delimiter">&quot;</span></span>);
        font(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/Fonts/Default.fnt</span><span class="delimiter">&quot;</span></span>);
        height(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
        width(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
    }});
}});</code></pre></div></div>
<div class="paragraph"><p>For longer pieces of static text, such as an introduction, you can use <code>wrap="true"</code>. Setting <code>wrap="true"</code> 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 <code>Start</code> screen <code>foreground</code> layer:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_mid</span><span class="delimiter">&quot;</span></span>) {{
    childLayoutCenter();
    alignCenter();
    backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#0f08</span><span class="delimiter">&quot;</span></span>);
    height(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
    width(<span class="string"><span class="delimiter">&quot;</span><span class="content">75%</span><span class="delimiter">&quot;</span></span>);

    <span class="comment">// add text</span>
    text(<span class="keyword">new</span> TextBuilder() {{
        text(<span class="string"><span class="delimiter">&quot;</span><span class="content">Here goes some text describing the game and the rules and stuff. </span><span class="delimiter">&quot;</span></span>
           + <span class="string"><span class="delimiter">&quot;</span><span class="content">Incidentally, the text is quite long and needs to wrap at the end of lines.</span><span class="delimiter">&quot;</span></span>);
        font(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/Fonts/Default.fnt</span><span class="delimiter">&quot;</span></span>);
        wrap(<span class="predefined-constant">true</span>);
        height(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
        width(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
    }});
}});</code></pre></div></div>
<div class="paragraph"><p>The font used is jME3&#8217;s default font &#8220;Interface/Fonts/Default.fnt&#8221; which is included in the jMonkeyEngine.JAR. You can add your own fonts to your own <code>assets/Interface</code> directory. Set your font to the one you created during the start of the <a href="../../jme3/advanced/nifty_gui_xml_layout.html#implement-your-gui-layout">Gui Implementation</a> phase of your game.</p></div></div>
<div class="sect2"><h3 id="add-controls">Add Controls</h3><div class="paragraph"><p>Before you can use any control, you must load a Control Definition first. Thats why we add the following two lines <em>before</em> the screen definitions:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">nifty.loadStyleFile(<span class="string"><span class="delimiter">&quot;</span><span class="content">nifty-default-styles.xml</span><span class="delimiter">&quot;</span></span>);
nifty.loadControlFile(<span class="string"><span class="delimiter">&quot;</span><span class="content">nifty-default-controls.xml</span><span class="delimiter">&quot;</span></span>);</code></pre></div></div>
<div class="sect3"><h4 id="label-control">Label Control</h4><div class="paragraph"><p>Use label controls for text that you want to edit dynamically from Java. One example for this is the score display.
In the <code>hud</code> screen&#8217;s <code>foreground</code> layer, add the following text element:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_top_right1</span><span class="delimiter">&quot;</span></span>) {{
    childLayoutCenter();
    backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#00f8</span><span class="delimiter">&quot;</span></span>);
    height(<span class="string"><span class="delimiter">&quot;</span><span class="content">15%</span><span class="delimiter">&quot;</span></span>);
    width(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);

    control(<span class="keyword">new</span> LabelBuilder(){{
        color(<span class="string"><span class="delimiter">&quot;</span><span class="content">#000</span><span class="delimiter">&quot;</span></span>);
        text(<span class="string"><span class="delimiter">&quot;</span><span class="content">123</span><span class="delimiter">&quot;</span></span>);
        width(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
        height(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
    }});
}});</code></pre></div></div>
<div class="paragraph"><p>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&#8217;t scale well).</p></div></div>
<div class="sect3"><h4 id="button-control">Button Control</h4><div class="paragraph"><p>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 <code>start</code> screen using the <code>&lt;control&gt;</code> element:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_bottom_left</span><span class="delimiter">&quot;</span></span>) {{
    childLayoutCenter();
    valignCenter();
    backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#44f8</span><span class="delimiter">&quot;</span></span>);
    height(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
    width(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);

    <span class="comment">// add control</span>
    control(<span class="keyword">new</span> ButtonBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">StartButton</span><span class="delimiter">&quot;</span></span>, <span class="string"><span class="delimiter">&quot;</span><span class="content">Start</span><span class="delimiter">&quot;</span></span>) {{
        alignCenter();
        valignCenter();
        height(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
        width(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
    }});
}});

panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_bottom_right</span><span class="delimiter">&quot;</span></span>) {{
    childLayoutCenter();
    valignCenter();
    backgroundColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">#88f8</span><span class="delimiter">&quot;</span></span>);
    height(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
    width(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);

    <span class="comment">// add control</span>
    control(<span class="keyword">new</span> ButtonBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">QuitButton</span><span class="delimiter">&quot;</span></span>, <span class="string"><span class="delimiter">&quot;</span><span class="content">Quit</span><span class="delimiter">&quot;</span></span>) {{
        alignCenter();
        valignCenter();
        height(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
        width(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
    }});
}});</code></pre></div></div>
<div class="paragraph"><p>Note that these controls don&#8217;t do anything yet – we&#8217;ll get to that soon.</p></div></div>
<div class="sect3"><h4 id="other-controls">Other Controls</h4><div class="paragraph"><p>Nifty additionally offers many customizable controls such as check boxes, text fields, menus, chats, tabs, …</p></div>
<div class="paragraph"><p>See also:</p></div>
<div class="ulist"><ul><li><p><a href="https://github.com/nifty-gui/nifty-gui/raw/1.4/nifty-core/manual/nifty-gui-the-manual-1.3.2.pdf">Nifty GUI - the Manual: Elements</a></p></li><li><p><a href="https://github.com/nifty-gui/nifty-gui/wiki/Controls">Controls</a></p></li></ul></div></div></div></div>
<div class="sect1"><h2 id="intermediate-result">Intermediate Result</h2><div class="sectionbody"><div class="paragraph"><p>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).</p></div>
<div class="admonitionblock tip"><table><tr><td class="icon"><i class="fa icon-tip" title="Tip"></i></td><td class="content">Remove all lines that set background colors, you only needed them to see the arrangement.</td></tr></table></div>
<div style="text-align: center;" class="imageblock"><div class="content"><img src="../../jme3/advanced/nifty-gui-simple-demo.png" alt="nifty-gui-simple-demo.png" width="" height=""></div></div>
<div class="paragraph"><p>Your <code>Screen.java</code> file should look like this:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java"><span class="keyword">package</span> <span class="namespace">mygame</span>;

<span class="keyword">import</span> <span class="include">com.jme3.app.Application</span>;
<span class="keyword">import</span> <span class="include">com.jme3.app.SimpleApplication</span>;
<span class="keyword">import</span> <span class="include">com.jme3.app.state.BaseAppState</span>;
<span class="keyword">import</span> <span class="include">com.jme3.niftygui.NiftyJmeDisplay</span>;
<span class="keyword">import</span> <span class="include">de.lessvoid.nifty.Nifty</span>;
<span class="keyword">import</span> <span class="include">de.lessvoid.nifty.builder.ImageBuilder</span>;
<span class="keyword">import</span> <span class="include">de.lessvoid.nifty.builder.LayerBuilder</span>;
<span class="keyword">import</span> <span class="include">de.lessvoid.nifty.builder.PanelBuilder</span>;
<span class="keyword">import</span> <span class="include">de.lessvoid.nifty.builder.ScreenBuilder</span>;
<span class="keyword">import</span> <span class="include">de.lessvoid.nifty.builder.TextBuilder</span>;
<span class="keyword">import</span> <span class="include">de.lessvoid.nifty.controls.button.builder.ButtonBuilder</span>;
<span class="keyword">import</span> <span class="include">de.lessvoid.nifty.controls.label.builder.LabelBuilder</span>;
<span class="keyword">import</span> <span class="include">de.lessvoid.nifty.screen.DefaultScreenController</span>;

<span class="directive">public</span> <span class="type">class</span> <span class="class">Screen</span> <span class="directive">extends</span> BaseAppState {

    <span class="annotation">@Override</span>
    <span class="directive">protected</span> <span class="type">void</span> initialize(Application app) {
        <span class="comment">//It is technically safe to do all initialization and cleanup in the</span>
        <span class="comment">//onEnable()/onDisable() methods. Choosing to use initialize() and</span>
        <span class="comment">//cleanup() for this is a matter of performance specifics for the</span>
        <span class="comment">//implementor.</span>
        <span class="comment">//TODO: initialize your AppState, e.g. attach spatials to rootNode</span>
    }

    <span class="annotation">@Override</span>
    <span class="directive">protected</span> <span class="type">void</span> cleanup(Application app) {
        <span class="comment">//TODO: clean up what you initialized in the initialize method,</span>
        <span class="comment">//e.g. remove all spatials from rootNode</span>
    }

    <span class="comment">//onEnable()/onDisable() can be used for managing things that should</span>
    <span class="comment">//only exist while the state is enabled. Prime examples would be scene</span>
    <span class="comment">//graph attachment or input listener attachment.</span>
    <span class="annotation">@Override</span>
    <span class="directive">protected</span> <span class="type">void</span> 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(<span class="predefined-constant">true</span>);

        nifty.loadStyleFile(<span class="string"><span class="delimiter">&quot;</span><span class="content">nifty-default-styles.xml</span><span class="delimiter">&quot;</span></span>);
        nifty.loadControlFile(<span class="string"><span class="delimiter">&quot;</span><span class="content">nifty-default-controls.xml</span><span class="delimiter">&quot;</span></span>);

        nifty.addScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">start</span><span class="delimiter">&quot;</span></span>, <span class="keyword">new</span> ScreenBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">start</span><span class="delimiter">&quot;</span></span>) {{
            controller(<span class="keyword">new</span> DefaultScreenController());
            <span class="comment">// layer added</span>
            layer(<span class="keyword">new</span> LayerBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">background</span><span class="delimiter">&quot;</span></span>) {{
                childLayoutCenter();
<span class="comment">//                backgroundColor(&quot;#000f&quot;);</span>

                <span class="comment">// add image</span>
                image(<span class="keyword">new</span> ImageBuilder() {{
                    filename(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/start-background.png</span><span class="delimiter">&quot;</span></span>);
                }});
            }});

            layer(<span class="keyword">new</span> LayerBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">foreground</span><span class="delimiter">&quot;</span></span>) {{
                childLayoutVertical();
<span class="comment">//                backgroundColor(&quot;#0000&quot;);</span>

                <span class="comment">// panel added</span>
                panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_top</span><span class="delimiter">&quot;</span></span>) {{
                    childLayoutCenter();
                    alignCenter();
<span class="comment">//                    backgroundColor(&quot;#f008&quot;);</span>
                    height(<span class="string"><span class="delimiter">&quot;</span><span class="content">25%</span><span class="delimiter">&quot;</span></span>);
                    width(<span class="string"><span class="delimiter">&quot;</span><span class="content">75%</span><span class="delimiter">&quot;</span></span>);

                    text(<span class="keyword">new</span> TextBuilder() {{
                        text(<span class="string"><span class="delimiter">&quot;</span><span class="content">My Cool Game</span><span class="delimiter">&quot;</span></span>);
                        font(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/Fonts/Arial.fnt</span><span class="delimiter">&quot;</span></span>);
                        height(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
                        width(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
                    }});
                }});

                panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_mid</span><span class="delimiter">&quot;</span></span>) {{
                    childLayoutCenter();
                    alignCenter();
<span class="comment">//                    backgroundColor(&quot;#0f08&quot;);</span>
                    height(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
                    width(<span class="string"><span class="delimiter">&quot;</span><span class="content">75%</span><span class="delimiter">&quot;</span></span>);

                    <span class="comment">// add text</span>
                    text(<span class="keyword">new</span> TextBuilder() {{
                        text(<span class="string"><span class="delimiter">&quot;</span><span class="content">Here goes some text describing the game and the rules and stuff. </span><span class="delimiter">&quot;</span></span>
                           + <span class="string"><span class="delimiter">&quot;</span><span class="content">Incidentally, the text is quite long and needs to wrap at the end of lines. </span><span class="delimiter">&quot;</span></span>);
                        font(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/Fonts/Arial.fnt</span><span class="delimiter">&quot;</span></span>);
                        wrap(<span class="predefined-constant">true</span>);
                        height(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
                        width(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
                    }});
                }});

                panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_bottom</span><span class="delimiter">&quot;</span></span>) {{
                    childLayoutHorizontal();
                    alignCenter();
<span class="comment">//                    backgroundColor(&quot;#00f8&quot;);</span>
                    height(<span class="string"><span class="delimiter">&quot;</span><span class="content">25%</span><span class="delimiter">&quot;</span></span>);
                    width(<span class="string"><span class="delimiter">&quot;</span><span class="content">75%</span><span class="delimiter">&quot;</span></span>);

                    panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_bottom_left</span><span class="delimiter">&quot;</span></span>) {{
                        childLayoutCenter();
                        valignCenter();
<span class="comment">//                        backgroundColor(&quot;#44f8&quot;);</span>
                        height(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
                        width(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);

                        <span class="comment">// add control</span>
                        control(<span class="keyword">new</span> ButtonBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">StartButton</span><span class="delimiter">&quot;</span></span>, <span class="string"><span class="delimiter">&quot;</span><span class="content">Start</span><span class="delimiter">&quot;</span></span>) {{
                            alignCenter();
                            valignCenter();
                            height(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
                            width(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
                        }});
                    }});

                    panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_bottom_right</span><span class="delimiter">&quot;</span></span>) {{
                        childLayoutCenter();
                        valignCenter();
<span class="comment">//                        backgroundColor(&quot;#88f8&quot;);</span>
                        height(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
                        width(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);

                        <span class="comment">// add control</span>
                        control(<span class="keyword">new</span> ButtonBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">QuitButton</span><span class="delimiter">&quot;</span></span>, <span class="string"><span class="delimiter">&quot;</span><span class="content">Quit</span><span class="delimiter">&quot;</span></span>) {{
                            alignCenter();
                            valignCenter();
                            height(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
                            width(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
                        }});
                    }});
                }}); <span class="comment">// panel added</span>
            }});
            <span class="comment">// layer added</span>

        }}.build(nifty));

        nifty.addScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">hud</span><span class="delimiter">&quot;</span></span>, <span class="keyword">new</span> ScreenBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">hud</span><span class="delimiter">&quot;</span></span>) {{
            controller(<span class="keyword">new</span> DefaultScreenController());

            layer(<span class="keyword">new</span> LayerBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">background</span><span class="delimiter">&quot;</span></span>) {{
                childLayoutCenter();
<span class="comment">//                backgroundColor(&quot;#000f&quot;);</span>

                <span class="comment">// add image</span>
                image(<span class="keyword">new</span> ImageBuilder() {{
                    filename(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/hud-frame.png</span><span class="delimiter">&quot;</span></span>);
                }});
            }});

            layer(<span class="keyword">new</span> LayerBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">foreground</span><span class="delimiter">&quot;</span></span>) {{
                childLayoutHorizontal();
<span class="comment">//                backgroundColor(&quot;#0000&quot;);</span>

                <span class="comment">// panel added</span>
                panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_left</span><span class="delimiter">&quot;</span></span>) {{
                    childLayoutVertical();
<span class="comment">//                    backgroundColor(&quot;#0f08&quot;);</span>
                    height(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
                    width(<span class="string"><span class="delimiter">&quot;</span><span class="content">80%</span><span class="delimiter">&quot;</span></span>);
                    <span class="comment">// &lt;!-- spacer --&gt;</span>
                }});

                panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_right</span><span class="delimiter">&quot;</span></span>) {{
                    childLayoutVertical();
<span class="comment">//                    backgroundColor(&quot;#00f8&quot;);</span>
                    height(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
                    width(<span class="string"><span class="delimiter">&quot;</span><span class="content">20%</span><span class="delimiter">&quot;</span></span>);

                    panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_top_right1</span><span class="delimiter">&quot;</span></span>) {{
                        childLayoutCenter();
<span class="comment">//                        backgroundColor(&quot;#00f8&quot;);</span>
                        height(<span class="string"><span class="delimiter">&quot;</span><span class="content">15%</span><span class="delimiter">&quot;</span></span>);
                        width(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);

                        control(<span class="keyword">new</span> LabelBuilder(){{
                            color(<span class="string"><span class="delimiter">&quot;</span><span class="content">#000</span><span class="delimiter">&quot;</span></span>);
                            text(<span class="string"><span class="delimiter">&quot;</span><span class="content">123</span><span class="delimiter">&quot;</span></span>);
                            width(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
                            height(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
                        }});
                    }});

                    panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_top_right2</span><span class="delimiter">&quot;</span></span>) {{
                        childLayoutCenter();
<span class="comment">//                        backgroundColor(&quot;#44f8&quot;);</span>
                        height(<span class="string"><span class="delimiter">&quot;</span><span class="content">15%</span><span class="delimiter">&quot;</span></span>);
                        width(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);

                        <span class="comment">// add image</span>
                        image(<span class="keyword">new</span> ImageBuilder() {{
                            filename(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/face1.png</span><span class="delimiter">&quot;</span></span>);
                            valignCenter();
                            alignCenter();
                            height(<span class="string"><span class="delimiter">&quot;</span><span class="content">50%</span><span class="delimiter">&quot;</span></span>);
                            width(<span class="string"><span class="delimiter">&quot;</span><span class="content">30%</span><span class="delimiter">&quot;</span></span>);
                        }});
                    }});

                    panel(<span class="keyword">new</span> PanelBuilder(<span class="string"><span class="delimiter">&quot;</span><span class="content">panel_bot_right</span><span class="delimiter">&quot;</span></span>) {{
                        childLayoutCenter();
                        valignCenter();
<span class="comment">//                        backgroundColor(&quot;#88f8&quot;);</span>
                        height(<span class="string"><span class="delimiter">&quot;</span><span class="content">70%</span><span class="delimiter">&quot;</span></span>);
                        width(<span class="string"><span class="delimiter">&quot;</span><span class="content">100%</span><span class="delimiter">&quot;</span></span>);
                    }});
                }}); <span class="comment">// panel added</span>
            }});
        }}.build(nifty));

        nifty.gotoScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">hud</span><span class="delimiter">&quot;</span></span>); <span class="comment">// start the screen</span>

    }

    <span class="annotation">@Override</span>
    <span class="directive">protected</span> <span class="type">void</span> onDisable() {
        <span class="comment">//Called when the state was previously enabled but is now disabled</span>
        <span class="comment">//either because setEnabled(false) was called or the state is being</span>
        <span class="comment">//cleaned up.</span>
    }

    <span class="annotation">@Override</span>
    <span class="directive">public</span> <span class="type">void</span> update(<span class="type">float</span> tpf) {
        <span class="comment">//TODO: implement behavior during runtime</span>
    }

}</code></pre></div></div></div></div>
<div class="sect1"><h2 id="nifty-java-settings">Nifty Java Settings</h2><div class="sectionbody"><div class="paragraph"><p>Before initializing the nifty screens, you set up properties and register media.</p></div>
<table class="tableblock frame-all grid-all spread"><colgroup><col style="width: 50%;"><col style="width: 50%;"></colgroup><thead><tr><th class="tableblock halign-left valign-top">Nifty Method</th><th class="tableblock halign-left valign-top">Description</th></tr></thead><tbody><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>registerSound("mysound", "Interface/abc.wav");</p></div></div></td><td class="tableblock halign-left valign-top"><div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>registerMusic("mymusic", "Interface/xyz.ogg");</p></div></div></td><td class="tableblock halign-left valign-top"><div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>registerMouseCursor("mypointer", "Interface/abc.png", 5, 4);</p></div></div></td><td class="tableblock halign-left valign-top"><div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>registerEffect(?);</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>?</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>setDebugOptionPanelColors(true);</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Highlight all panels, makes it easier to arrange them.</p></div></div></td></tr></tbody></table>
<div class="paragraph"><p>Example:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">nifty.registerMouseCursor(<span class="string"><span class="delimiter">&quot;</span><span class="content">hand</span><span class="delimiter">&quot;</span></span>, <span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/mouse-cursor-hand.png</span><span class="delimiter">&quot;</span></span>, <span class="integer">5</span>, <span class="integer">4</span>);</code></pre></div></div></div></div>
<div class="sect1"><h2 id="next-steps">Next Steps</h2><div class="sectionbody"><div class="paragraph"><p>Integrate the <abbr title="Graphical User Interface">GUI</abbr> into the game. Typically, you will overlay the <abbr title="Graphical User Interface">GUI</abbr>.</p></div>
<div class="ulist"><ul><li><p><a href="../../jme3/advanced/nifty_gui_overlay.html">Nifty GUI Overlay</a> (recommended)</p></li><li><p><a href="../../jme3/advanced/nifty_gui_projection.html">Nifty GUI Projection</a> (optional)</p></li></ul></div></div></div></div><div id="footer"><div id="footer-text">Version <br>Last updated 2019-12-20 23:30:51 +00:00</div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script><script>docsearch({
  apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
  indexName: 'jmonkeyengine',
  inputSelector: '#doc-search',
  debug: false // Set debug to true if you want to inspect the dropdown
});</script></body></html>