nifty_gui_java_interaction.html 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1">
  6. <title>Interacting with the GUI from Java :: jMonkeyEngine Docs</title>
  7. <link rel="canonical" href="https://wiki.jmonkeyengine.org/docs/jme3/advanced/nifty_gui_java_interaction.html">
  8. <meta name="keywords" content="gui, documentation, input, control, hud, nifty">
  9. <meta name="generator" content="Antora 2.3.3">
  10. <link rel="stylesheet" href="../../../_/css/site.css">
  11. <meta property="og:image" content="https://mitm001.github.io/docs.jmonkeyengine.org/_/img/iconx128.png">
  12. <meta property="og:description" content="Interacting with the GUI from Java">
  13. <meta property="og:title" content="jMonkeyEngine Docs">
  14. <link rel="icon" href="../../../_/img/favicon.ico" type="image/x-icon">
  15. </head>
  16. <body class="article">
  17. <header class="header">
  18. <nav class="navbar">
  19. <div class="navbar-brand">
  20. <a class="navbar-item" href="https://wiki.jmonkeyengine.org">
  21. <img alt="" src="../../../_/img/iconx128.png" width="32" type="image/x-icon" style="margin-right:16px">
  22. jMonkeyEngine Docs
  23. </a>
  24. <button class="navbar-burger" data-target="topbar-nav">
  25. <span></span>
  26. <span></span>
  27. <span></span>
  28. </button>
  29. </div>
  30. <div id="topbar-nav" class="navbar-menu">
  31. <div class="navbar-end">
  32. <div class="navbar-item theme-switch-wrapper">
  33. <label class="theme-switch" for="checkbox">
  34. <input type="checkbox" id="checkbox" />
  35. <div class="slider round"></div>
  36. </label>
  37. <p class="navlabel">Dark Mode</p>
  38. </div>
  39. <a class="navbar-item" href="https://github.com/jmonkeyengine/wiki">Github</a>
  40. </div>
  41. </div>
  42. </nav>
  43. </header>
  44. <div class="body">
  45. <div class="nav-container" data-component="docs" data-version="master">
  46. <aside class="nav">
  47. <div class="panels">
  48. <div class="nav-panel-menu is-active" data-panel="menu">
  49. <nav class="nav-menu">
  50. <h3 class="title"><a href="../../documentation.html">Docs</a></h3>
  51. <ul class="nav-list">
  52. <li class="nav-item" data-depth="0">
  53. <ul class="nav-list">
  54. <li class="nav-item" data-depth="1">
  55. <a class="nav-link" href="../../documentation.html">Getting Started</a>
  56. </li>
  57. <li class="nav-item" data-depth="1">
  58. <a class="nav-link" href="https://javadoc.jmonkeyengine.org/v3.3.2-stable">JavaDoc</a>
  59. </li>
  60. <li class="nav-item" data-depth="1">
  61. <button class="nav-item-toggle"></button>
  62. <a class="nav-link" href="../../jme3.html">jMonkeyEngine 3</a>
  63. <ul class="nav-list">
  64. <li class="nav-item" data-depth="2">
  65. <button class="nav-item-toggle"></button>
  66. <span class="nav-text">Beginner Tutorials</span>
  67. <ul class="nav-list">
  68. <li class="nav-item" data-depth="3">
  69. <a class="nav-link" href="../beginner/hello_simpleapplication.html">Hello SimpleApplication</a>
  70. </li>
  71. <li class="nav-item" data-depth="3">
  72. <a class="nav-link" href="../beginner/hello_node.html">Hello Node</a>
  73. </li>
  74. <li class="nav-item" data-depth="3">
  75. <a class="nav-link" href="../beginner/hello_asset.html">Hello Asset</a>
  76. </li>
  77. <li class="nav-item" data-depth="3">
  78. <a class="nav-link" href="../beginner/hello_main_event_loop.html">Hello Main Event Loop</a>
  79. </li>
  80. <li class="nav-item" data-depth="3">
  81. <a class="nav-link" href="../beginner/hello_input_system.html">Hello Input System</a>
  82. </li>
  83. <li class="nav-item" data-depth="3">
  84. <a class="nav-link" href="../beginner/hello_material.html">Hello Material</a>
  85. </li>
  86. <li class="nav-item" data-depth="3">
  87. <a class="nav-link" href="../beginner/hello_animation.html">Hello Animation</a>
  88. </li>
  89. <li class="nav-item" data-depth="3">
  90. <a class="nav-link" href="../beginner/hello_picking.html">Hello Picking</a>
  91. </li>
  92. <li class="nav-item" data-depth="3">
  93. <a class="nav-link" href="../beginner/hello_collision.html">Hello Collision</a>
  94. </li>
  95. <li class="nav-item" data-depth="3">
  96. <a class="nav-link" href="../beginner/hello_terrain.html">Hello Terrain</a>
  97. </li>
  98. <li class="nav-item" data-depth="3">
  99. <a class="nav-link" href="../beginner/hello_audio.html">Hello Audio</a>
  100. </li>
  101. <li class="nav-item" data-depth="3">
  102. <a class="nav-link" href="../beginner/hello_effects.html">Hello Effects</a>
  103. </li>
  104. <li class="nav-item" data-depth="3">
  105. <a class="nav-link" href="../beginner/hello_physics.html">Hello Physics</a>
  106. </li>
  107. </ul>
  108. </li>
  109. <li class="nav-item" data-depth="2">
  110. <button class="nav-item-toggle"></button>
  111. <span class="nav-text">Intermediate Tutorials</span>
  112. <ul class="nav-list">
  113. <li class="nav-item" data-depth="3">
  114. <button class="nav-item-toggle"></button>
  115. <span class="nav-text">Concepts</span>
  116. <ul class="nav-list">
  117. <li class="nav-item" data-depth="4">
  118. <a class="nav-link" href="../intermediate/best_practices.html">Best Practices</a>
  119. </li>
  120. <li class="nav-item" data-depth="4">
  121. <a class="nav-link" href="../intermediate/simpleapplication.html">Simple Application</a>
  122. </li>
  123. <li class="nav-item" data-depth="4">
  124. <a class="nav-link" href="../features.html">Features</a>
  125. </li>
  126. <li class="nav-item" data-depth="4">
  127. <a class="nav-link" href="../intermediate/optimization.html">Optimization</a>
  128. </li>
  129. <li class="nav-item" data-depth="4">
  130. <a class="nav-link" href="../faq.html">FAQ</a>
  131. </li>
  132. </ul>
  133. </li>
  134. <li class="nav-item" data-depth="3">
  135. <button class="nav-item-toggle"></button>
  136. <span class="nav-text">Math Concepts</span>
  137. <ul class="nav-list">
  138. <li class="nav-item" data-depth="4">
  139. <a class="nav-link" href="../math_for_dummies.html">Math For Dummies</a>
  140. </li>
  141. <li class="nav-item" data-depth="4">
  142. <a class="nav-link" href="../intermediate/math.html">Math</a>
  143. </li>
  144. <li class="nav-item" data-depth="4">
  145. <a class="nav-link" href="../math.html">More Math</a>
  146. </li>
  147. <li class="nav-item" data-depth="4">
  148. <a class="nav-link" href="../rotate.html">Rotate</a>
  149. </li>
  150. <li class="nav-item" data-depth="4">
  151. <a class="nav-link" href="../math_video_tutorials.html">Math Video Tutorials</a>
  152. </li>
  153. </ul>
  154. </li>
  155. <li class="nav-item" data-depth="3">
  156. <button class="nav-item-toggle"></button>
  157. <span class="nav-text">3D Graphics Concepts</span>
  158. <ul class="nav-list">
  159. <li class="nav-item" data-depth="4">
  160. <a class="nav-link" href="../intermediate/multi-media_asset_pipeline.html">Multi-Media Asset Pipeline</a>
  161. </li>
  162. <li class="nav-item" data-depth="4">
  163. <a class="nav-link" href="../scenegraph_for_dummies.html">Scenegraph for Dummies</a>
  164. </li>
  165. <li class="nav-item" data-depth="4">
  166. <a class="nav-link" href="../beginner/hellovector.html">Hello Vector</a>
  167. </li>
  168. <li class="nav-item" data-depth="4">
  169. <a class="nav-link" href="../terminology.html">Terminology</a>
  170. </li>
  171. <li class="nav-item" data-depth="4">
  172. <a class="nav-link" href="../intermediate/how_to_use_materials.html">How to Use Materials</a>
  173. </li>
  174. <li class="nav-item" data-depth="4">
  175. <a class="nav-link" href="../intermediate/transparency_sorting.html">Transparency and Sorting</a>
  176. </li>
  177. <li class="nav-item" data-depth="4">
  178. <a class="nav-link" href="../external/blender.html">Importing from Blender</a>
  179. </li>
  180. <li class="nav-item" data-depth="4">
  181. <a class="nav-link" href="../external/3dsmax.html">Importing from 3DS Max</a>
  182. </li>
  183. </ul>
  184. </li>
  185. </ul>
  186. </li>
  187. </ul>
  188. </li>
  189. <li class="nav-item" data-depth="1">
  190. <a class="nav-link" href="../../logo.html">Logo Usage</a>
  191. </li>
  192. <li class="nav-item" data-depth="1">
  193. <a class="nav-link" href="../../bsd_license.html">License</a>
  194. </li>
  195. <li class="nav-item" data-depth="1">
  196. <a class="nav-link" href="../../github_tips.html">Github Tips</a>
  197. </li>
  198. </ul>
  199. </li>
  200. <li class="nav-item" data-depth="0">
  201. <button class="nav-item-toggle"></button>
  202. <span class="nav-text">SDK</span>
  203. <ul class="nav-list">
  204. <li class="nav-item" data-depth="1">
  205. <a class="nav-link" href="../../sdk.html">jMonkeyEngine SDK</a>
  206. </li>
  207. </ul>
  208. </li>
  209. </ul>
  210. </nav>
  211. </div>
  212. <div class="nav-panel-explore" data-panel="explore">
  213. <div class="context">
  214. <span class="title">Docs</span>
  215. <span class="version">master</span>
  216. </div>
  217. <ul class="components">
  218. <li class="component is-current">
  219. <span class="title">Docs</span>
  220. <ul class="versions">
  221. <li class="version is-current is-latest">
  222. <a href="../../documentation.html">master</a>
  223. </li>
  224. </ul>
  225. </li>
  226. <li class="component">
  227. <span class="title">Wiki UI</span>
  228. <ul class="versions">
  229. <li class="version is-latest">
  230. <a href="../../../wiki-ui/index.html">master</a>
  231. </li>
  232. </ul>
  233. </li>
  234. </ul>
  235. </div>
  236. </div>
  237. </aside>
  238. </div>
  239. <main class="article">
  240. <div class="toolbar" role="navigation">
  241. <button class="nav-toggle"></button>
  242. <nav class="breadcrumbs" aria-label="breadcrumbs">
  243. <ul>
  244. <li><a href="../../documentation.html">Docs</a></li>
  245. <li><a href="nifty_gui_java_interaction.html">Interacting with the GUI from Java</a></li>
  246. </ul>
  247. </nav>
  248. <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/docs/modules/ROOT/pages/jme3/advanced/nifty_gui_java_interaction.adoc">Edit this Page</a></div>
  249. </div>
  250. <div class="content">
  251. <article class="doc">
  252. <h1 class="page">Interacting with the GUI from Java</h1>
  253. <div id="preamble">
  254. <div class="sectionbody">
  255. <div class="olist arabic">
  256. <ol class="arabic">
  257. <li>
  258. <p><a href="nifty_gui.html" class="page">Nifty GUI Concepts</a></p>
  259. </li>
  260. <li>
  261. <p><a href="nifty_gui_best_practices.html" class="page">Nifty GUI Best Practices</a></p>
  262. </li>
  263. <li>
  264. <p><a href="nifty_gui_xml_layout.html" class="page">Nifty GUI XML Layout</a> or <a href="nifty_gui_java_layout.html" class="page">Nifty GUI Java Layout</a></p>
  265. </li>
  266. <li>
  267. <p><a href="nifty_gui_overlay.html" class="page">Nifty GUI Overlay</a> or <a href="nifty_gui_projection.html" class="page">Nifty GUI Projection</a></p>
  268. </li>
  269. <li>
  270. <p><strong>Nifty <abbr title="Graphical User Interface">GUI</abbr> Java Interaction</strong></p>
  271. </li>
  272. </ol>
  273. </div>
  274. <div class="paragraph">
  275. <p>In the previous parts of the tutorial, you created a two-screen user interface. But it is still static, and when you click the buttons, nothing happens yet. The purpose of the <abbr title="Graphical User Interface">GUI</abbr> is to communicate with your Java classes: Your game needs to know what the users clicked, which settings they chose, which values they entered into a field, etc. Similarly, the user needs to know what the currently game state is (score, health, etc).</p>
  276. </div>
  277. </div>
  278. </div>
  279. <div class="sect1">
  280. <h2 id="connect-gui-to-java-controller"><a class="anchor" href="#connect-gui-to-java-controller"></a>Connect GUI to Java Controller</h2>
  281. <div class="sectionbody">
  282. <div class="paragraph">
  283. <p>To let a Nifty screen communicate with the Java application, you register a <code>ScreenController</code> to every NiftyGUI screen. You create a ScreenController by creating a Java class that implements the <code>de.lessvoid.nifty.screen.ScreenController</code> interface and its abstract methods.</p>
  284. </div>
  285. <div class="paragraph">
  286. <p><strong>Pro Tip:</strong> Since you are writing a jME3 application, you can additionally make the ScreenController class extend the <a href="application_states.html" class="page">BaseAppState</a> class! This gives the ScreenController access to the application object and to the update loop!</p>
  287. </div>
  288. <div class="paragraph">
  289. <p>Create an AppState <strong>MyStartScreen</strong>.java file in your package. ( <b class="button">RMB</b> click on your package and select <code><span class="menuseq"><b class="menu">New</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="submenu">Other</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="submenu">JME3 Classes</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="menuitem">New BaseAppState</b></span></code>)</p>
  290. </div>
  291. <div class="paragraph">
  292. <p>Now add <strong>implements ScreenController</strong> to <em>public class MyStartScreen extends BaseAppState{</em> and add <strong>import de.lessvoid.nifty.screen.ScreenController;</strong></p>
  293. </div>
  294. <div class="paragraph">
  295. <p>Continue with adding:</p>
  296. </div>
  297. <div class="listingblock">
  298. <div class="content">
  299. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">import de.lessvoid.nifty.screen.Screen;
  300. ...
  301. public void bind(Nifty nifty, Screen screen) {
  302. throw new UnsupportedOperationException("Not supported yet.");
  303. }
  304. public void onStartScreen() {
  305. throw new UnsupportedOperationException("Not supported yet.");
  306. }
  307. public void onEndScreen() {
  308. throw new UnsupportedOperationException("Not supported yet.");
  309. }</code></pre>
  310. </div>
  311. </div>
  312. <div class="listingblock">
  313. <div class="title">Complete BaseAppState file</div>
  314. <div class="content">
  315. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">package mygame;
  316. import com.jme3.app.Application;
  317. import com.jme3.app.state.BaseAppState;
  318. import de.lessvoid.nifty.Nifty;
  319. import de.lessvoid.nifty.screen.Screen;
  320. import de.lessvoid.nifty.screen.ScreenController;
  321. public class MyStartScreen extends BaseAppState implements ScreenController {
  322. @Override
  323. protected void initialize(Application app) {
  324. //It is technically safe to do all initialization and cleanup in the
  325. //onEnable()/onDisable() methods. Choosing to use initialize() and
  326. //cleanup() for this is a matter of performance specifics for the
  327. //implementor.
  328. //TODO: initialize your AppState, e.g. attach spatials to rootNode
  329. }
  330. @Override
  331. protected void cleanup(Application app) {
  332. //TODO: clean up what you initialized in the initialize method,
  333. //e.g. remove all spatials from rootNode
  334. }
  335. //onEnable()/onDisable() can be used for managing things that should
  336. //only exist while the state is enabled. Prime examples would be scene
  337. //graph attachment or input listener attachment.
  338. @Override
  339. protected void onEnable() {
  340. //Called when the state is fully enabled, ie: is attached and
  341. //isEnabled() is true or when the setEnabled() status changes after the
  342. //state is attached.
  343. }
  344. @Override
  345. protected void onDisable() {
  346. //Called when the state was previously enabled but is now disabled
  347. //either because setEnabled(false) was called or the state is being
  348. //cleaned up.
  349. }
  350. @Override
  351. public void update(float tpf) {
  352. //TODO: implement behavior during runtime
  353. }
  354. /**
  355. * Bind this ScreenController to a screen. This happens right before the
  356. * onStartScreen STARTED and only exactly once for a screen!
  357. * @param nifty nifty
  358. * @param screen screen
  359. */
  360. @Override
  361. public void bind(Nifty nifty, Screen screen) {
  362. throw new UnsupportedOperationException("Not supported yet.");
  363. }
  364. /**
  365. * called right after the onStartScreen event ENDED.
  366. */
  367. @Override
  368. public void onStartScreen() {
  369. throw new UnsupportedOperationException("Not supported yet.");
  370. }
  371. /**
  372. * called right after the onEndScreen event ENDED.
  373. */
  374. @Override
  375. public void onEndScreen() {
  376. throw new UnsupportedOperationException("Not supported yet.");
  377. }
  378. }</code></pre>
  379. </div>
  380. </div>
  381. <div class="paragraph">
  382. <p>The name and package of your custom ScreenController class (here <code>mygame.MyStartScreen</code>) goes into the controller parameter of the respective XML screen it belongs to. For example:</p>
  383. </div>
  384. <div class="listingblock">
  385. <div class="content">
  386. <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;nifty&gt;
  387. &lt;screen id="start" controller="mygame.MyStartScreen"&gt;
  388. &lt;!-- layer and panel code ... --&gt;
  389. &lt;/screen&gt;
  390. &lt;/nifty&gt;</code></pre>
  391. </div>
  392. </div>
  393. <div class="paragraph">
  394. <p>Or the same in a Java syntax, respectively:</p>
  395. </div>
  396. <div class="listingblock">
  397. <div class="content">
  398. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">nifty.addScreen("start", new ScreenBuilder("start") {{
  399. controller(new mygame.MyStartScreen());
  400. }}.build(nifty));</code></pre>
  401. </div>
  402. </div>
  403. <div class="paragraph">
  404. <p>Now the Java class <code>MyStartScreen</code> and this <abbr title="Graphical User Interface">GUI</abbr> screen (<code>start</code>) are connected. For this example you can also connect the <code>hud</code> screen to MyStartScreen.</p>
  405. </div>
  406. <div class="paragraph">
  407. <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: Elements (Screen Controller)</a></p>
  408. </div>
  409. </div>
  410. </div>
  411. <div class="sect1">
  412. <h2 id="make-gui-and-java-interact"><a class="anchor" href="#make-gui-and-java-interact"></a>Make GUI and Java Interact</h2>
  413. <div class="sectionbody">
  414. <div class="paragraph">
  415. <p>In most cases, you will want to pass game data in and out of the ScreenController. Note that you can pass any custom arguments from your Java class into your ScreenController constructor (<code>public MyStartScreen(GameData data) {}</code>).</p>
  416. </div>
  417. <div class="paragraph">
  418. <p>Use any combination of the three following approaches to make Java classes interact with the <abbr title="Graphical User Interface">GUI</abbr>.</p>
  419. </div>
  420. <div class="sect2">
  421. <h3 id="gui-calls-a-void-java-method"><a class="anchor" href="#gui-calls-a-void-java-method"></a>GUI Calls a Void Java Method</h3>
  422. <div class="paragraph">
  423. <p>This is how you respond to an <abbr title="Graphical User Interface">GUI</abbr> interaction such as clicks in XML GUIs:</p>
  424. </div>
  425. <div class="olist arabic">
  426. <ol class="arabic">
  427. <li>
  428. <p>Add <code>visibleToMouse="true"</code> to the parent element!</p>
  429. </li>
  430. <li>
  431. <p>Embed the <code>&lt;interact /&gt;</code> element into the parent element.</p>
  432. </li>
  433. <li>
  434. <p>Specify the Java methods that you want to call when the users performs certain actions, such as clicking.<br>
  435. Example: <code>&lt;interact onClick="startGame(hud)" /&gt;</code></p>
  436. </li>
  437. </ol>
  438. </div>
  439. <div class="paragraph">
  440. <p>Or this is how you respond to an <abbr title="Graphical User Interface">GUI</abbr> interaction such as clicks in Java GUIs:</p>
  441. </div>
  442. <div class="olist arabic">
  443. <ol class="arabic">
  444. <li>
  445. <p>Add <code>visibleToMouse(true);</code> to the parent element!</p>
  446. </li>
  447. <li>
  448. <p>Embed one of the <code>interact…()</code> elements into the parent element.</p>
  449. </li>
  450. <li>
  451. <p>Specify the Java method that you want to call after the interaction.<br>
  452. Example: <code>interactOnClick("startGame(hud)");</code></p>
  453. </li>
  454. </ol>
  455. </div>
  456. <div class="paragraph">
  457. <p>In the following example, we call the <code>startGame()</code> method when the player clicks the Start button, and <code>quitGame()</code> when the player clicks the Quit button.</p>
  458. </div>
  459. <div class="listingblock">
  460. <div class="content">
  461. <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;panel id="panel_bottom_left" height="50%" width="50%" valign="center" childLayout="center"&gt;
  462. &lt;control name="button" label="Start" id="StartButton" align="center" valign="center"
  463. visibleToMouse="true" &gt;
  464. &lt;interact onClick="startGame(hud)"/&gt;
  465. &lt;/control&gt;
  466. &lt;/panel&gt;
  467. &lt;panel id="panel_bottom_right" height="50%" width="50%" valign="center" childLayout="center"&gt;
  468. &lt;control name="button" label="Quit" id="QuitButton" align="center" valign="center"
  469. visibleToMouse="true" &gt;
  470. &lt;interact onClick="quitGame()"/&gt;
  471. &lt;/control&gt;
  472. &lt;/panel&gt;</code></pre>
  473. </div>
  474. </div>
  475. <div class="paragraph">
  476. <p>Or the same in a Java syntax, respectively:</p>
  477. </div>
  478. <div class="listingblock">
  479. <div class="content">
  480. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">control(new ButtonBuilder("StartButton", "Start") {{
  481. alignCenter();
  482. valignCenter();
  483. height("50%");
  484. width("50%");
  485. visibleToMouse(true);
  486. interactOnClick("startGame(hud)");
  487. }});
  488. ...
  489. control(new ButtonBuilder("QuitButton", "Quit") {{
  490. alignCenter();
  491. valignCenter();
  492. height("50%");
  493. width("50%");
  494. visibleToMouse(true);
  495. interactOnClick("quitGame()");
  496. }});</code></pre>
  497. </div>
  498. </div>
  499. <div class="paragraph">
  500. <p>Back in the MyStartScreen class, you specify what the <code>startGame()</code> and <code>quitGame()</code> methods do. As you see, you can pass String arguments (here <code>hud</code>) in the method call. You also see that you have access to the Application object.</p>
  501. </div>
  502. <div class="listingblock">
  503. <div class="content">
  504. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">public class MyStartScreen extends BaseAppState implements ScreenController {
  505. ...
  506. /** custom methods */
  507. public void startGame(String nextScreen) {
  508. nifty.gotoScreen(nextScreen); // switch to another screen
  509. // start the game and do some more stuff...
  510. }
  511. public void quitGame() {
  512. getApplication().stop();
  513. }
  514. ...
  515. }</code></pre>
  516. </div>
  517. </div>
  518. <div class="paragraph">
  519. <p>The startGame() example simply switches the <abbr title="Graphical User Interface">GUI</abbr> to the <code>hud</code> screen when the user clicks Start. Of course, in a real game, you would perform more steps here: Load the game level, switch to in-game input and navigation handling, set a custom <code>running</code> boolean to true, attach custom in-game AppStates – and lots more.</p>
  520. </div>
  521. <div class="paragraph">
  522. <p>The quitGame() example shows that you have access to the Application object because you made the ScreenController extend BaseAppState.</p>
  523. </div>
  524. </div>
  525. <div class="sect2">
  526. <h3 id="gui-gets-return-value-from-java-method"><a class="anchor" href="#gui-gets-return-value-from-java-method"></a>GUI Gets Return Value from Java Method</h3>
  527. <div class="paragraph">
  528. <p>When the Nifty <abbr title="Graphical User Interface">GUI</abbr> is initialized, you can get data from Java. In this example, the Java class <code>getPlayerName()</code> in <code>MyStartScreen</code> defines the Text that is displayed in the textfield before the words <code>'s Cool Game</code>.</p>
  529. </div>
  530. <div class="paragraph">
  531. <p>First define a Java method in the screen controller, in this example, <code>getPlayerName()</code>.</p>
  532. </div>
  533. <div class="listingblock">
  534. <div class="content">
  535. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">public class MySettingsScreen implements ScreenController {
  536. ...
  537. public String getPlayerName(){
  538. return System.getProperty("user.name");
  539. }
  540. }</code></pre>
  541. </div>
  542. </div>
  543. <div class="paragraph">
  544. <p>Nifty uses <code>${CALL.getPlayerName()}</code> to get the return value of the getPlayerName() method from your ScreenController Java class.</p>
  545. </div>
  546. <div class="listingblock">
  547. <div class="content">
  548. <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;text text="${CALL.getPlayerName()}'s Cool Game" font="Interface/Fonts/Default.fnt" width="100%" height="100%" /&gt;</code></pre>
  549. </div>
  550. </div>
  551. <div class="paragraph">
  552. <p>Or the same in a Java syntax, respectively:</p>
  553. </div>
  554. <div class="listingblock">
  555. <div class="content">
  556. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">text(new TextBuilder() {{
  557. text("${CALL.getPlayerName()}'s Cool Game");
  558. font("Interface/Fonts/Default.fnt");
  559. height("100%");
  560. width("100%");
  561. }});</code></pre>
  562. </div>
  563. </div>
  564. <div class="paragraph">
  565. <p>You can use this for Strings and numeric values (e.g. when you read settings from a file, you display the results in the <abbr title="Graphical User Interface">GUI</abbr>) and also for methods with side effects.</p>
  566. </div>
  567. </div>
  568. <div class="sect2">
  569. <h3 id="java-modifies-nifty-elements-and-events"><a class="anchor" href="#java-modifies-nifty-elements-and-events"></a>Java Modifies Nifty Elements and Events</h3>
  570. <div class="paragraph">
  571. <p>You can also alter the appearance and functions of your nifty elements from Java. Make certain that the element that you want to alter has its <code>id="name"</code> attribute set, so you can identy and address it.</p>
  572. </div>
  573. <div class="paragraph">
  574. <p>Here&#8217;s an example of how to change an image called <code>playerhealth</code>:</p>
  575. </div>
  576. <div class="listingblock">
  577. <div class="content">
  578. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">// load or create new image
  579. NiftyImage img = nifty.getRenderEngine().createImage("Interface/Images/face2.png", false);
  580. // find old image
  581. Element niftyElement = nifty.getCurrentScreen().findElementByName("playerhealth");
  582. // swap old with new image
  583. niftyElement.getRenderer(ImageRenderer.class).setImage(img);</code></pre>
  584. </div>
  585. </div>
  586. <div class="paragraph">
  587. <p>The same is valid for other elements, for example a text label &#8220;score&#8221;:</p>
  588. </div>
  589. <div class="listingblock">
  590. <div class="content">
  591. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">// find old text
  592. Element niftyElement = nifty.getCurrentScreen().findElementByName("score");
  593. // swap old with new text
  594. niftyElement.getRenderer(TextRenderer.class).setText("124");</code></pre>
  595. </div>
  596. </div>
  597. <div class="paragraph">
  598. <p>Similarly, to change the onClick() event of an element, create an <code>ElementInteraction</code> object:</p>
  599. </div>
  600. <div class="listingblock">
  601. <div class="content">
  602. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">Element niftyElement = nifty.getCurrentScreen().findElementByName("myElement");
  603. niftyElement.getElementInteraction().getPrimary().setOnMouseOver(new NiftyMethodInvoker(nifty, "myCustomMethod()", this));</code></pre>
  604. </div>
  605. </div>
  606. <div class="paragraph">
  607. <p>For this to work, there already needs to be a (possibly inactive) <code>&lt;interact /&gt;</code> tag inside your xml element:</p>
  608. </div>
  609. <div class="listingblock">
  610. <div class="content">
  611. <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;interact onClick="doNothing()"/&gt;</code></pre>
  612. </div>
  613. </div>
  614. </div>
  615. </div>
  616. </div>
  617. <div class="sect1">
  618. <h2 id="next-steps"><a class="anchor" href="#next-steps"></a>Next Steps</h2>
  619. <div class="sectionbody">
  620. <div class="paragraph">
  621. <p>You&#8217;re done with the basic Nifty <abbr title="Graphical User Interface">GUI</abbr> for jME3 tutorial. You can proceed to advanced topics and learn how add controls and effects:</p>
  622. </div>
  623. <div class="ulist">
  624. <ul>
  625. <li>
  626. <p><a href="nifty_gui_scenarios.html" class="page">Nifty GUI Scenarios</a></p>
  627. </li>
  628. <li>
  629. <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</a></p>
  630. </li>
  631. <li>
  632. <p><a href="https://github.com/nifty-gui/nifty-gui/wiki/Controls">Controls</a></p>
  633. </li>
  634. </ul>
  635. </div>
  636. </div>
  637. </div>
  638. </article>
  639. <aside class="toc sidebar" data-title="Contents" data-levels="2">
  640. <div class="toc-menu"></div>
  641. </aside>
  642. </div>
  643. </main>
  644. </div>
  645. <footer class="footer">
  646. <p>Copyright 2020 jMonkeyEngine Wiki Contributors. Licensed BSD-3.</p>
  647. </footer>
  648. <script src="../../../_/js/site.js"></script>
  649. <script async src="../../../_/js/vendor/highlight.js"></script>
  650. </body>
  651. </html>