CSCI 151 - Lab 9


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



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

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 {
  public void start(Stage primaryStage) {
    try {
      FXMLLoader loader = new FXMLLoader();
      BorderPane root = 
      primaryStage.setScene(new Scene(root));;
    } catch (Exception e) {
  public static void main(String[] 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.

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.

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 {
    public double tip() {
      return 0.1;
  }, GOOD {
    public double tip() {
      return 0.15;
  }, GREAT {
    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 {

  private TextField bill;

  private ChoiceBox tips;

  private TextField total;

  public void initialize() {
    for (Service s: Service.values()) {

  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.

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:

What to Hand In

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


© Gabe Ferrer and Mark Goadrich, Hendrix College