Java FX Application
The purpose of this assignment is to get you familiar with the
basics of the JavaFX GUI interface components. This assignment will
cover Labels, Fonts, Basic Images, and Layouts. You will use a
StackPane and a BorderPane to construct the layout to the right. In
addition you will use the Random class to randomly load an image
when the application loads
The application sets the root layout to a BorderPane. The
BorderPane can be divided into four areas: North, South, East,
West, Center. In the North of the Border Pane is the Label that
says Random Card. In the South is the Label that says ‘Nothing Up
My Sleeve’. The middle of the BorderPane is a Label that holds
image of the card. This Label is placed inside a StackPane which is
then placed in the middle.
The image is randomly loaded by creating the name of the card
from a random number that is generated using the Random Object
There are 55 gif images of the cards. They are named 101.gif up
to 155.gif. This includes two Jokers and the card back. The images
have been placed in a zip file and can be downloaded here.
You should download the cards and unzip the folder and place the
images in a folder named img. This folder should be in the root of
your project folder. If you are using Netbeans the root folder
should have the following folders:
and img which you will create.
Step 1 – Getting Started
The first thing you need to do is create a new JavaFX
application project. You can name this project anything you wish
but something like Assignment3 or Lab3 seems to be appropriate.
If you have used NetBeans it creates a ‘Hello World’ application
that will run. This is OK you are just going to have to change a
few things. First, make sure that you have imported
javafx.scene.layout.* You may simply need to
change the javafx.scene.layout.StackPane import. The reason we are
doing this is that we are going to use two layouts.
Inside the start method do the following:
Create a BorderPane called root.
Create a new Scene object called scene and pass the BorderPane
called root, and a height of 300, width of 250 to the
Call the setTitle method that is a member of primaryStage and
set the title to ‘Assignment 3’
Call the show method that is part of the primaryStage object.
This has no parameters.
At this point you should have a simple empty window that
Step 2 – Creating Components
Create a new StackPane called middle
Create a Label for the top. Name it anything you like. Use the
constructor to give it some text of your choosing
Create a Label to hold the card image. Name it lblCard. Use the
default constructor to leave the Label blank
Create a Label for the bottom. Name it anything you like. Use
the constructor to give it some text of your choosing
Add the Label you created for the top to the North of the
BorderPane called root
Add the Label you created for the bottom to the South of the
BorderPane called root.
Add lblCard to the StackPane called middle
Add the StackPane to the Center of the BorderPane called
At this point you should have the layout set and all of your
Labels in place (of course no image yet)
Step 3 – Create The Fonts & Colors
Create a Font for the top Label. Use any font, weight and size
Use the setFont method for the top label to set the Font you
Use the setFillColor method on the top label to give the label
some color. Use any Color you wish
Create a Font for the bottom Label. Use any font, weight and
size you want
Use the setFont method for the bottom label to set the Font you
Use the setFillColor method on the bottom label to give the
label some color. Use any Color you wish
At this point your application should look something like
Step 4 – Load The Image
Make sure you have imported javafx.scene.image.*. You will need
this to create and load an image. Also make sure you have imported
java.util.Random. You will need this to generate a random
The cards are named 101.gif to 155.gif. You will need to
generate a random number in this range.
Once you have a random number in the range of 101 to 155 you
will need this to construct the name and path to the image. You
will need to construct a String that looks something like this
Using file tells Java to get the image from a file and img is
the folder to get if from. Notice the use of \ this is an escape
character that allows the use of in the path (which is needed by
Windows). Finally, .gif is the file extension
The above can easily be done with String concatenation simply
use the random number where 101 is.
Create a new Image called imgCard pass the String that contains
the file path to the constructor.
Call the setGraphic method on lblCard pass to the constructor
At this point you should have a working application. Each time
you start the program a new card image should appear.