Creating JavaFx Frames Using The Dialog Class

[Notorious 341]

Well as some of you may already know, Dreambot was built using JavaFx, and I wanted to clarify how our writers could take advantage of this opportunity to make easy JavaFX frames using the class Dialog class.

 

Well before we begin, make sure you have these items:

• Java (Newest Version Preferably)
• A IDE (Eclipse, Netbeans, or Intellij)
• JavaFX Scene Builder

 

In this tutorial, the final product will look something like:

 

What I will be reviewing:

1. What are FXML files?
   a. What are FXML files?
   b. Basics of Scene Builder.
   c. Create a basic frame inside of Scene Builder.
2. Basics of the Dialog class.
   a. Basic structure of the class.
   b. How to load FXML files.
   c. Different styles of frames.
   d. Accessing FXML component from Dialog.
3. Dialog Controllers
   a. Using #onAction.
   b. Using listeners.

 

1. What are FXML files?

Well FXML was introduced upon the release of JavaFX and “is a declarative XML-based language created by Oracle Corporation for defining the user interface of a JavaFX 2.0 application.” as defined by Google.

 But what does this all mean? Let’s look at a comparison to see the differences between code implementation and FXML provided by Mastering FXML.

 

Example 1-1 Java Code for a User Interface

BorderPane border = new BorderPane();
Label toppanetext = new Label("Page Title");
border.setTop(toppanetext);
Label centerpanetext = new Label ("Some data here");
border.setCenter(centerpanetext);

Now the same code as above, just using FXML this time.

Example 1-2 FXML Markup for a User Interface

<BorderPane>
    <top>
        <Label text="Page Title"/>
    </top>
    <center>
        <Label text="Some data here"/>
    </center>
</BorderPane>

Though the amount of lines may not differ much, the simplicity of FXML makes working with it much easier as compared to before.

But Oracle was nice enough to make a tool for creating FXML files for us lazy folk, such as myself. Scene Builder is a nice GUI builder, which allows you to create, load and save FXML files.

 

     a. Basic of Scene Builder.

 

So when we first open the program it should look something like:

 

Well for this tutorial, I will be using a styled frame from our Dialog class, and for this style to work, it must be designed with certain aspects. If you do not want the styled frame, you can skip these next few steps, or until you see RESUME HERE marker.

 

To begin we need to a root container, and for the styled frame, we need to use VBox for this as Dialog extends it. So from the left side, inside of the Containers tab, scroll to the bottom, and find vBox, then click and drag it over into the workspace.

 

 

Now for the setup this is important for the style to look correct on your frame. For starters, let’s throw in two panes containers into our vBox (Located in the same tab as vBox). Each pane should automatically take up half of the root vBox, though on the right side panel, at the bottom click the Layout tab, scroll until you see Pref Width & Height. Now highlight the top Pane inside of the vBox, and set its Pref Height to 30px, so that it now looks like. (This will be replaced by the styled frame, so it is important to leave this empty space at the top!)

 

 

!!! RESUME HERE !!!

 

Then in the pane below, add whatever components you like from the left side tabs (Controls, Menu, Misc., etc.), I’m going to make a random design, and afterwards you should have a frame that looks somewhat usable like so.

 

So we now have a frame using FXML, in the next section I will show how we actually use it now.

Before moving to the next steps, ensure that your root container is a VBox, as it is to use the Dialog class correctly.

 

We also need to examine our FXML file, to avoid any issues. Since we are using the Dialog class in this tutorial, the root has already been set for us, though Scene Builder also likes to set the root of the FXML too, which will cause conflicts when trying to load the frame. To remedy this issue we open our FXML inside of our IDE or text editor. If we direct towards the opening block of the FXML, we sometimes will notice something like:

Which we notice that

Thankfully this is a very easy issue to remedy. All that needs to be done, is to change VBox as a root, to a generic type such as fx:root. To do this all we do this change VBox to fx:root, and add a type, such as type="javafx.scene.layout.VBox" to the opening block. If done correctly, then opening and closing blocks should now look something like:

Remember to check, as this will cause your frame not load!

 

> Basics of the Dialog class.

 

Well the Dialog class was created to make loading your own JavaFx frames as painless as possible. It is able to create styled frames, or just launch as the basic style. In this tutorial I will be using the styled design.

 

• Basic Structure of a dialog frame.

/**
 * The type Tutorial dialog.
 * @author Notorious
 */
public class TutorialDialog extends Dialog {

    /**
     * Instantiates a new Tutorial dialog. This is
     * where you want to load your FXML.
     */
    public TutorialDialog() {
        /**
         * Using FXUtils, allows you to load the FXML file using a URL,
         * in this example I obtain the URL of the FXML file using
         * java/lang/Class.getResource(String location)
         *
         * We also pass a instance of this dialog to become the parent of the FXML
         * frame once created.
         */
        FXUtils.load(getClass().getResource("TutorialFrame.fxml"), this);
    }

    /**
     * Whatever you would like to the
     * title of the dialog to be.
     */
    @Override
    public String getTitle() {
        return "Tutorial";
    }

    /**
     * Whatever actions you would like to preform when
     * the dialog is closed.
     */
    @FXML
    public void onClose() {
        Main.showConsole = false;
        getScene().getWindow().hide();
    }

    /**
     * Whatever actions you would like to preform when
     * the dialog is minimized.
     */
    @FXML
    void onMinimize() {
        getStage().setIconified(true);
    }
}

> Loading your FXML once your dialog is created

 

• Different styles of frames.

 

Well as demonstrated above, we load the FXML file using FXUtils, though this alone will not launch your frame, because first you must choose which style you want to launch it with.

displayUnDecoratedStage() : Creates a styled frame. The method we will be using in this tutorial.

displayDecoratedStage() : Creates a standard design frame.

The usage of these methods looks like (When launching them, we need to have a FX thread, thus why new Platform.runLater() is used.):

Java7:

Platform.runLater(new Runnable() {
   public void run() {
       try {
           TutorialDialog dialog = new TutorialDialog();
            dialog.displayUnDecoratedStage();
       } catch (Exception e) {
         e.printStackTrace();
      }
   }
});

Java 8:

Platform.runLater(() ->{
   try {
      TutorialDialog dialog = new TutorialDialog(); //Creates the dialog
      dialog.displayUnDecoratedStage(); //Displays styled dialog.
   } catch (Exception e) {
      e.printStackTrace();
   }
});

Simple enough?

 

• Accessing FXML components from Dialog.

 

Well we have all these components in the FXML, how do we use them inside of our Dialog class you may be asking. Well in JavaFx, we need to assign each time we want to use a fx:id, as well as create an annotated variable in our Dialog class that will represent the component we would like to use.

So I’ll create a variable of the Start Button component I add to my FXML to demonstrate how it is done.

To make things easy, I’ll do everything inside of Scene Builder to avoid confusion for some. So we head to Scene Builder with the frame we designed above, and you want to highlight the component you would like. So once highlighted, one the right side select the code tab, and locate the fx:id textbox. Once located name this whatever you would like your variable to be named. Since I’m using a start button, I will be using buttonStart as a fx:id. Once done, save the frame, and your component should now have this box filled:

So now to access this field in the Dialog class, we first want to create a variable of the same type of object we want to grab, as well name it the same as the fx:id, also be annotated using @FXML.

So using the example above, it should look something like this inside of your dialog class.

Now, if you have followed all the steps correctly, once launched, buttonStart will be set to the component inside of the FXML, allowing to set listeners, change aspects of it during runtime, and plenty of other things.

This will be followed up later in the tutorial, when we add listeners.

So some things to remember from this section:

• Use FxUtils to load FXML using URL inside the constructor of your Dialog
• Undecorated actually displays a styled frame.
• To launch frame use displayUnDecoratedStage();
• Use fx:id to set the components name so it can be identified.
• @FXML annotates a FXML component or action inside of the controller class (Dialog in this case).

1. Dialog controllers.

• Using #onAction.

 

Using onAction for me personally is the easiest option, though there are some things that you should remember when using this type of action listener. Any method you associate with a onAction method, you must also implement that method inside your Dialog class! Or else you will get errors!

To start, first we head back over to scene builder. And using the frame we designed earlier, I am going to select the Start button. Once selected, on the right side, open the Code tab, and locate the On Action text box. The method can be named whatever you would like it to be, so I will be using something generic, and naming the method onButtonClick. Once you have named your method, save it, and it now should look like this in Scene Builder:

 

Now first thing we must do is head over to our Dialog class that corresponds with this FXML. Since we added the method onButtonClick to the FXML, we need to have a method which handles that action, so we need to create one inside of Dialog.

It needs to be public void, annotated with a @FXML, and the name of the action you entered in Scene Builder, also needs to be placed in the dialog class which the FXML that uses that method is loaded from. After you have created it, it should look like:

Now every time an event occurs with a component that matches onAction id, it will execute the onAction method.

 

• Listeners

 

Well just like Swing, we are able to use EventListeners, though a tad different than before. Well like we did above, we want to grab a component from our FXML, and once again I will just use the Start Button. Since we have already created the variable above, all that is needed it to call it, and add the listener. So inside of the init method, I call the start button, and use the following to add an even listener.

Java 7 implementation:

buttonStart.addEventFilter(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() {
     @Override
     public void handle(MouseEvent event) {
          //Do action stuff here!
     }
});

Java 8 implementation (Lambdas ftw):

buttonStart.addEventFilter(MouseEvent.MOUSE_CLICKED, event -> {
    //Do action stuff here!
});

Well now, you should have all the knowledge you will need to create your own Java FX dialogs using Dreambot, as well as be familiarized with some of the features JavaFx has to offer. I really hope you enjoyed this tutorial, and if you ever have any question, please do not hesitate to ask! If I missed something, errors, grammatical mistakes, just anything you don’t like, let me know as well, I will take it into consideration! Thank you for reading, and hope you enjoy once again!

[Swaq 243]

This guide seems so good besides the fact that I don't understand a single thing you're talking about.

[Superman 49]

Useful guide for beginners thank youu.

[Ericthecmh 184]

Awesome guide Noto, I expect all scripters to be using fx frames from now on!

[Thepecher 21]

Usefull,thanks Not. But excuse my noobyness i guess, but what are the main benefits of FXFrames compared to standard stuff?

[qbots 239]

Usefull,thanks Not. But excuse my noobyness i guess, but what are the main benefits of FXFrames compared to standard stuff?

Well for one you can create a custom CSS sheet which makes adding custom looks to the UI a helluva lot easier.

[Notorious 341]

Usefull,thanks Not. But excuse my noobyness i guess, but what are the main benefits of FXFrames compared to standard stuff?

Well as stated by @qbots is that using FX your able to create much cleaning, more uniquely designed UI's, and having the ability to use FXML is also very nice as it's a language framework designed around creating UI's, making the creation process easier for some.

[dlinkb 0]

Nice tutorial!

 

I've never used JavaFX before and have extremely limited experience with Swing, so I have some questions.

 

Where are you getting FXUtils from? It doesn't seem to come with standard Java, unless if I'm doing something wrong.

 

I was just reading Oracle's JavaFX tutorial and it seems to me that JavaFX guis aren't like Swing guis where you just create a new instance of it and it'll show up, so is there a way to use JavaFX in Dreambot without dialogs? (Or would I just like add a JFXPanel to a JFrame?)

 

Also, could you explain the need for the separate JavaFX thread?  (For scripts, people don't generally put their swing guis in a seperate thread because, and I'm assuming, that freezing up the GUI isn't a concern at the start of the script. So why is it needed for JavaFX?)

(And, if you don't mind, what Platform and runLater is/does and when do we need to use it. I understand if you don't want to answer that since I could just google it because it's not specific to Dreambot/this tutorial.)

Edited February 21, 2015 by dlinkb

[Dogerina 330]

Nice tutorial!

 

I've never used JavaFX before and have extremely limited experience with Swing, so I have some questions.

 

Where are you getting FXUtils from? It doesn't seem to come with standard Java, unless if I'm doing something wrong.

 

I was just reading Oracle's JavaFX tutorial and it seems to me that JavaFX guis aren't like Swing guis where you just create a new instance of it and it'll show up, so is there a way to use JavaFX in Dreambot without dialogs? (Or would I just like add a JFXPanel to a JFrame?)

 

Also, could you explain the need for the separate JavaFX thread?  (For scripts, people don't generally put their swing guis in a seperate thread because, and I'm assuming, that freezing up the GUI isn't a concern at the start of the script. So why is it needed for JavaFX?)

(And, if you don't mind, what Platform and runLater is/does and when do we need to use it. I understand if you don't want to answer that since I could just google it because it's not specific to Dreambot/this tutorial.)

Use JavaFXTools instead of FXUtils. Platform.runLater passes a Runnable to the JaxaFX thread

[descoladan 1]

Is this still valid?