CSCI 151 - Lab 9
JavaFX GUIs

Overview

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

Materials

Eclipse
Lab partner

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 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 = (Service)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.

What to Hand In

Export your project to an Archive File. Submit your zipped file to Moodle.

Grading

To earn a D, finish Step 1
To earn a C, finish the above and Steps 2 and 3.
To earn a B, finish the above and Step 4 and 5.
To earn a 100, finish the above and Step 6.

CSCI 151 - Lab 9JavaFX GUIs