This is quick guide explaining how I created my first JavaFX application using the Gluon Scene Builder in the IntelliJ IDEA IDE.

I have a number of guides on moving away from CPanel, Setting up VM’s on UpCloud, AWS, Vultr or Digital Ocean along with installing and managing WordPress from the command line. I created this blog post on creating a Java GUI app with the older Swing technology (Java FX replaces Swing). I now want to create a JavaFX app to control my UpCloud VM’s.

If you have not read my previous posts I have now moved my blog etc to the awesome UpCloud host. Sign up using this link to get $25 free credit.

Do read: Preparing for JavaFX Application Development: https://wiki.openjdk.java.net/display/OpenJFX/Building+OpenJFX#BuildingOpenJFX-Mac

Downloading Java

Download and install Java SE 8 or higher from http://www.oracle.com/technetwork/java/javase/downloads/index.html

Download Intelli J IDEA IDE

Goto https://www.jetbrains.com/idea/

Click Download

Download the community edition

Install Intelli J IDEA IDE

Install Scenebuilder

I downloaded the Java Scene Builder (1.1 or 2.0) from here.

Install the Scene Builder (open the installer and drag it to your applications folder).

Configure the Scene Builder in IntelliJ IDEA IDE

1. Open Intelli J IDEA IDE (set the default’s you wish)
2. Create a New Project
3. Open Intelli J IDEA IDE Preferences
4. Open Languages & Frameworks then JavaFX and set your Scene Builder path (e.g /Applications/JavaFX Scene Builder 2.0.app/)
5. Exit Preferences

You can now create a JavaFX project an have a workign scene builder GUI.

After you create a JavaFX project open your JavaFX fxml file in Scene Builder (right click on the .fxml file and select Open in Scene Builder)

Extended Scene Builder from Gluon

I read that there is a better Scene builder GUI available from https://gluonhq.com/products/scene-builder/

Read some of the Java Scene Builder v Gluon Scene Builder history here at Reddit for the latest on why.

I am going to download the Gluon Scene Builder from http://gluonhq.com/products/scene-builder/

Download and install the Gluon Scene builder (at the time of writing requires Java 9 or higher).

Now open IntelliJ IDEA IDE and open the preferences and change the scene builder path from “/Applications/JavaFX Scene Builder 2.0.app/” to “/Applications/SceneBuilder.app/“.

Save the IntelliJ IDEA preferences and Right click on your projects “fxml” file again and click “Open In Scene Builder” , do verify it is indeed the Gluon Scene builder by opening the about menu.

Designing your first JavaFX app

Now you can design and code a JavaFX application with Gluon Scene Builder.

I am not an expert at java apps so i’d highly recommend you follow this guide to learn how to build a well-structured JavaFX panel layout (just ignore that it is using the standard Scene Builder, it works with the gluon one).

You should now have a working Java FX App

The scene builder will save changes to your fxml file

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.TreeView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.VBox?>


<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/9.0.4" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <top>
      <VBox BorderPane.alignment="CENTER">
         <children>
            <MenuBar>
              <menus>
                <Menu mnemonicParsing="false" text="File">
                  <items>
                    <MenuItem mnemonicParsing="false" text="Close" />
                  </items>
                </Menu>
                <Menu mnemonicParsing="false" text="Edit">
                  <items>
                    <MenuItem mnemonicParsing="false" text="Delete" />
                  </items>
                </Menu>
                <Menu mnemonicParsing="false" text="Help">
                  <items>
                    <MenuItem mnemonicParsing="false" text="About" />
                  </items>
                </Menu>
              </menus>
            </MenuBar>
            <HBox spacing="8.0">
               <children>
                  <TextField promptText="ip" />
                  <TextField promptText="Username" />
                  <TextField promptText="Password" />
                  <Button mnemonicParsing="false" onMouseClicked="#loginButtonClicked" prefHeight="27.0" prefWidth="68.0" text="Login" />
                  <Region HBox.hgrow="ALWAYS" />
                  <Button mnemonicParsing="false" onMouseClicked="#settingsButtonClicked" text="Settings" />
               </children>
               <padding>
                  <Insets bottom="8.0" left="8.0" right="8.0" top="8.0" />
               </padding>
            </HBox>
         </children>
      </VBox>
   </top>
   <left>
      <TreeView prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
   </left>
   <center>
      <TextArea prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
   </center>
   <bottom>
      <HBox BorderPane.alignment="CENTER">
         <children>
            <Label text="Label" />
         </children>
         <padding>
            <Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
         </padding>
      </HBox>
   </bottom>
</BorderPane>

You can add functions into your controller class

package sample;

public class Controller {

    public void loginButtonClicked(){
        System.out.println("Login");

    }

    public void settingsButtonClicked(){
        System.out.println("Settings");

    }

}

Instaling Gluon JavaFX Templates

Close your test project and create a new project, but before you do click Configure then Plugins

Now lets open In the following screen click Browse Repositories.

Search the repository for and install the “Gluon” plugin

Restart IntelliJ IDEA IDE then you can use templates when creating a project.

Get your own VM

If you have not read my previous posts I have now moved my blog etc to the awesome UpCloud host. Sign up using this link to get $25 free credit.

Packaging a Java app for distribution on OSX

I will show how you can package your app to run on a Mac by using this.

Coming Soon

I will add more guides soon on using a custom JavaFx app to allow you to manage your own UpCloud server and perform Deploy/Init/Setup/Configure/Operate actions. Running CLI commands to deploy and manage a server is fun but is very tedious.

I blogged recently about using the UpCloud API and setting up a subdomain recently (I will use this server to test and prove the Javmanagementnt app).

Links

• Official Javafx examples
• Official Java learning paths.
• Javafx examples at javacodegeeks.com
• Java widgets
• Reddit JavaHelp
• Jenkov Tutorials

I hope this guide helps someone.

Ask a question or recommend an article

[contact-form-7 404 "Not Found"]

Revision History

V1.6 Jenkov Tutorials

V1.5 Reddit java help

V1.4 added java widgets link

V1.3 added javafx examples link.

V1.2 added Java learning paths

V1.1 added official Javafx examples

v1.0 Initial post