CSCI 151 - Lab 6
JavaFX GUIs

Overview

In this lab, we learn how to create GUI components to an application using JavaFX.

Materials

Eclipse
Lab partner
Scene Builder

Description

To create an application using JavaFX, we will need a number of pieces. There will often be a Model, View, Controller, and Application. For our first application we will create a tip calculator.

Step 1 - Tip Application Setup

Create a new Java project named "tip".
Create a new package within the project also called "tip".
Create a new class called Tip. This will hold the overview code for the Application. Then enter the following code:

package tip;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;

public class Tip extends Application {
  @Override
  public void start(Stage primaryStage) {
    try {
      FXMLLoader loader = new FXMLLoader();
      BorderPane root = 
        (BorderPane)loader.load(getClass().getResource("TipGUI.fxml").openStream());
      primaryStage.setScene(new Scene(root));
      primaryStage.show();
    } catch (Exception e) {
      e.printStackTrace();
      System.exit(1);
    }
  }
  public static void main(String[] args) {
    launch(args);
  }
}

Step 2 - Tip FXML View

Now, we need to add in the View, describing how the GUI will look on the screen and the components available to the program.

Select File → New → Other → New FXML Document
For "Root Element" select BorderPane.
For "Name" enter TipGUI
Then click "Finish".

Make sure you have created this file in the package, and not in the src directory.

Editing the raw XML document can be extremely tedious. Luckily, there is a extension called SceneBuilder that you can use to graphically add components.

Go to Package Explorer.
Open TipGUI.fxml with SceneBuilder.
Go to Containers and drag a VBox into "insert CENTER".
- Select the VBox and pick the Layout menu.
- Change Pref Width and Pref Height to USE_COMPUTED_SIZE.
Drag an HBox into the VBox.
- Go to Controls and drag a Label and a TextField into the HBox.
- Select the HBox and pick the Layout menu.
- Change Pref Width and Pref Height to USE_COMPUTED_SIZE.
- Select the Label and pick Properties. Then change the text to "Bill".
Add another HBox to the VBox.
- Add a Label and a ChoiceBox.
- Fix the layout as described above.
- Then change the Label to "Service".
Add another HBox to the VBox.
- Add a Label and a TextField.
- Fix the layout as described above.
- Then change the Label to "Total".

Your GUI should look like this

Now, save the GUI and close SceneBuilder. Refresh the FXML document in Eclipse to see the changes you made in SceneBuilder.

Step 3 - Service Enum

We would like to tip based on three perceived levels of service. This is an excellent opportunity for an Enum. Create a new Enum called Service. Add the following code:

public enum Service {
  POOR {
    @Override
    public double tip() {
      return 0.1;
    }
  }, GOOD {
    @Override
    public double tip() {
      return 0.15;
    }
  }, GREAT {
    @Override
    public double tip() {
      return 0.2;
    }
  };

  abstract public double tip();
  
  public double computeTotal(double bill) {
    return (1.0 + tip()) * bill;
  }
}

Step 4 - TipController

Now create a new class called TipController. This gives us a way to respond to the clicks and keys pressed when the program is running. Notice the calculate method, which will compute the tip amount based on the selected options in the app.

Add the following code:

import javafx.fxml.FXML;
import javafx.scene.control.ChoiceBox;
import javafx.scene.control.TextField;

public class TipController {

  @FXML
  private TextField bill;

  @FXML
  private ChoiceBox<Service> tips;

  @FXML
  private TextField total;

  @FXML
  public void initialize() {
    bill.setEditable(true);
    total.setEditable(false);
    for (Service s: Service.values()) {
      tips.getItems().add(s);
    }
    tips.getSelectionModel().select(Service.GOOD);
  }

  @FXML
  public void calculate() {
    double billEntered = Double.parseDouble(bill.getText());
    Service level = tips.getSelectionModel().getSelectedItem();
    double totalAmount = level.computeTotal(billEntered);
    total.setText(String.format("%7.2f", totalAmount));
  }
}

Step 5 - Tip Calculation

Finally, we need a button we can click that will calculate the tip according to our choices. In this step we are setting up the wiring between the View and Controller portions of the app. Open up TipGUI.fxml again in SceneBuilder.

Add a Button to the VBox between the second and third HBox elements. Change the text to "Calculate Total".

On the left side, go to Document → Controller. Select tip.TipController in the drop-down menu.

Select the top TextField.
- Go to the Code menu on the right.
- For fx:id, select "bill".
Select the other TextField. For its fx:id, select "total".
Select the ChoiceBox. For its fx:id, select "tips".
Select the Button. For "On Action", select "calculate".

Save the GUI in SceneBuilder and close SceneBuilder.

Your GUI should look like this

Run Tip and test the program.

Step 6 - Extensions

Now, edit the program and interface as follows:

Add an EXCELLENT category to service, tipped at 18%.
Add a way for the user to enter the number of people dining. Then, add a field to display the amount of money each individual separately owes.

Step 7 - Project

The main goal of this lab is to prepare you for Project 2. If you finish the lab early, please start the project. Take advantage of the lab period to discuss possible project topics with the instructor.

What to Hand In

Create a zip file of your project. Submit the zip file to Moodle. (To create the zip file, select File -> Export -> General -> Archive File -> Save in Zip Format.)

Grading

Cumulative Progress	Points Earned
Step 1	3
Step 2	6
Step 3	9
Step 4	12
Step 5	14
Step 6.1	16
Step 6.2	20

CSCI 151 - Lab 6JavaFX GUIs