This is a GUI for a slot machine program that we made previously. I've also expanded upon it by introducing the 'Always Win' and 'Trollface' bonus modes selectable via checkboxes. Write a java application program that simulates a simple slot machine in which three numbers between 0 and 9 are randomly selected and printed side by side. The program will allow the user to place a bet, and then make a payout if any two of the numbers are the same, or if all three numbers are the same.

Topics in Part 1

• Getting to know JavaFX
• Creating and starting a JavaFX Project
• Using Scene Builder to design the user interface
• Basic application structure using the Model-View-Controller (MVC) pattern

Prerequisites

• Latest Java JDK 8 (includes JavaFX 8).
• Eclipse 4.4 or greater with e(fx)clipse plugin. The easiest way is to download the preconfigured distro from the e(fx)clipse website. As an alternative you can use an update site for your Eclipse installation.
• Scene Builder 8.0 (provided by Gluon because Oracle only ships it in source code form).

Eclipse Configurations

We need to tell Eclipse to use JDK 8 and also where it will find the Scene Builder:

1. Open the Eclipse Preferences and navigate to Java | Installed JREs.

2. Click Add…, select Standard VM and choose the installation Directory of your JDK 8.

3. Remove the other JREs or JDKs so that the JDK 8 becomes the default.
   

4. Navigate to Java | Compiler. Set the Compiler compliance level to 1.8.
   

5. Navigate to the JavaFX preferences. Specify the path to your Scene Builder executable.
   

Helpful Links

You might want to bookmark the following links:

• Java 8 API - JavaDoc for the standard Java classes
• JavaFX 8 API - JavaDoc for JavaFX classes
• ControlsFX API - JavaDoc for the ControlsFX project for additional JavaFX controls
• Oracle’s JavaFX Tutorials - Official JavaFX Tutorials by Oracle

Now, let’s get started!

Create a new JavaFX Project

In Eclipse (with e(fx)clipse installed) go to File | New | Other… and choose JavaFX Project.
Specify the Name of the project (e.g. AddressApp) and click Finish.

Remove the application package and its content if it was automatically created.

Create the Packages

Right from the start we will follow good software design principles. One very important principle is that of Model-View-Controller (MVC). According to this we divide our code into three units and create a package for each (Right-click on the src-folder, New… | Package):

• ch.makery.address - contains most controller classes (=business logic)
• ch.makery.address.model - contains model classes
• ch.makery.address.view - contains views

Note: Our view package will also contain some controllers that are directly related to a single view. Let’s call them view-controllers.

Create the FXML Layout File

There are two ways to create the user interface. Either using an XML file or programming everything in Java. Looking around the internet you will encounter both. We will use XML (ending in .fxml) for most parts. I find it a cleaner way to keep the controller and view separated from each other. Further, we can use the graphical Scene Builder to edit our XML. That means we will not have to directly work with XML.

Right-click on the view package and create a new FXML Document called PersonOverview.

Design with Scene Builder

Right-click on PersonOverview.fxml and choose Open with Scene Builder. Now you should see the Scene Builder with just an AncherPane (visible under Hierarchy on the left).

(If Scene Builder does not open, go to Window | Preferences | JavaFX and set the correct path to your Scene Builder installation).

1. Select the Anchor Pane in your Hierarchy and adjust the size under Layout (right side):
   

2. Add a Split Pane (Horizontal Flow) by dragging it from the Library into the main area. Right-click the Split Pane in the Hierarchy view and select Fit to Parent.
   

3. Drag a TableView (under Controls) into the left side of the SplitPane. Select the TableView (not a Column) and set the following layout constraints to the TableView. Inside an AnchorPane you can always set anchors to the four borders (more information on Layouts).
   

4. Go to the menu Preview | Show Preview in Window to see, whether it behaves right. Try resizing the window. The TableView should resize together with the window as it is anchored to the borders.

5. Change the column text (under Properties) to “First Name” and “Last Name”.
   

6. Select the TableView and choose constrained-resize for the Column Resize Policy (under Properties). This ensures that the colums will always take up all available space.
   

7. Add a Label on the right side with the text “Person Details” (hint: use the search to find the Label). Adjust it’s layout using anchors.
   

8. Add a GridPane on the right side, select it and adjust its layout using anchors (top, right and left).
   

9. Add the following labels to the cells.
   Note: To add a row to the GridPane select an existing row number (will turn yellow), right-click the row number and choose “Add Row”.
   

10. Add a ButtonBar at the bottom. Add three buttons to the bar. Now, set anchors (right and bottom) to the ButtonBar so it stays in the right place.
    

11. Now you should see something like the following. Use the Preview menu to test its resizing behaviour.
    

Create the Main Application

We need another FXML for our root layout which will contain a menu bar and wraps the just created PersonOverview.fxml.

1. Create another FXML Document inside the view package called RootLayout.fxml. This time, choose BorderPane as the root element.
   

2. Open the RootLayout.fxml in Scene Builder.

3. Resize the BorderPane with Pref Width set to 600 and Pref Height set to 400.
   

4. Add a MenuBar into the TOP Slot. We will not implement the menu functionality at the moment.
   

The JavaFX Main Class

Now, we need to create the main java class that starts up our application with the RootLayout.fxml and adds the PersonOverview.fxml in the center.

1. Right-click on your project and choose New | Other… and choose JavaFX Main Class.
   

2. We’ll call the class MainApp and put it in the controller package ch.makery.address (note: this is the parent package of the view and model subpackages).
   

The generated MainApp.java class extends from Application and contains two methods. This is the basic structure that we need to start a JavaFX Application. The most important part for us is the start(Stage primaryStage) method. It is automatically called when the application is launched from within the main method.

As you see, the start(...) method receives a Stage as parameter. The following graphic illustrates the structure of every JavaFX application:

Image Source: http://www.oracle.com

It’s like a theater play: The Stage is the main container which is usually a Window with a border and the typical minimize, maximize and close buttons. Inside the Stage you add a Scene which can, of course, be switched out by another Scene. Inside the Scene the actual JavaFX nodes like AnchorPane, TextBox, etc. are added.

For more information on this turn to Working with the JavaFX Scene Graph.

Free Java Slot Machine Games

Open MainApp.java and replace the code with the following:

The various comments should give you some hints about what’s going on.

If you run the application now, you should see something like the screenshot at the beginning of this post.

Frequent Problems

If JavaFX can’t find the fxml file you specified, you might get the following error message:

java.lang.IllegalStateException: Location is not set.

To solve this issue double check if you didn’t misspell the name of your fxml files!

What’s Next?

Java Slot Machine Gui Code Generator

In Tutorial Part 2 we will add some data and functionality to our AddressApp.

Some other articles you might find interesting

No matter how simple or complex the game is, Java can do the job!

On this post, let’s take a look at how beginners of Java programming can make a simple, yet fully functional slot machine. Slot machines have been around for a long time, but its entertainment value doesn’t seem to fade one bit. InterCasino, the first website to offer online casino gaming to the world in 1996, is still around and its slot games seem to get updated often. In addition, according to the American Gaming Association, slots generate around 62% – 90% of gaming money, making the machines the cash cows of casinos. With these facts in mind, don’t you ever want to create your very own slot machine that millions of casino gaming fans might like in the future? If you’re interested in creating Java-based slot games, the code below might prove useful for you.

Kudos to M ajestic, a YouTube user, for the code above. Here are the images that he used in the creation of the game.

If you made it this far, you may as well follow me: