Question

Java FX Application

Purpose

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

Introduction

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

The Cards

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:

build

dist

nbproject

src

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 constructor.

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 runs.

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 root.

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 you want

Use the setFont method for the top label to set the Font you just created

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 just created

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 this:

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 number

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

file:img\\101.gif

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 new ImageView(imgCard)

At this point you should have a working application. Each time you start the program a new card image should appear.

Answer 1

Program screeshot:

Code to copy:

// Header files

import javafx.scene.image.*;

import java.util.Random;

import javafx.application.Application;

import javafx.event.ActionEvent;

import javafx.event.EventHandler;

import javafx.geometry.Insets;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.control.Label;

import javafx.scene.layout.BorderPane;

import javafx.scene.layout.StackPane;

import javafx.scene.paint.Color;

import javafx.scene.text.Font;

import javafx.stage.Stage;

// Create a class named "RandomImage"

public class RandomImage extends Application {

     @Override

          public void start(Stage primaryStage) {

          primaryStage.setTitle("Assignment 3");

          BorderPane root = new BorderPane();

          StackPane middle = new StackPane();

          Label lblTop = new Label("Random Card");

          //set font style for the label and size

          lblTop.setFont(new Font("Arial", 20));

          //to set the color to the label font

          lblTop.setTextFill(Color.ROYALBLUE);

          //set label to the border pane

          root.setTop(lblTop);

          Label lblCard = new Label();

          middle.getChildren().add(lblCard);

          //genrating the path and the name of the image

          String imgName = randomName();

          //creating the image

          Image imgCard = new Image(imgName);

          lblCard.setGraphic(new ImageView(imgCard));

          root.setCenter(middle);

          Label lblBottom = new Label("Nothing Up My Sleeve.");

          //set font style for the label and size

          lblBottom.setFont(Font.font("Cambria", 22));

          // to set the color to the label font

          lblBottom.setTextFill(Color.CHOCOLATE);

          //set label to the border pane

          root.setBottom(lblBottom);

          Scene scene = new Scene(root, 300, 250);

          primaryStage.setScene(scene);

          primaryStage.show();

     }

     public String randomName() {

          Random rdm = new Random();

          int low = 101;

          int high = 156;

          int result = rdm.nextInt(high - low) + low;

          System.out.println("file:img\\" + result + ".gif");

          return "file:img\\" + result + ".gif";

     }

     /**

     * @param args the command line arguments

     */

     public static void main(String[] args) {

          launch(args);

     }

}

Sample output screenshot: