13. Components Lesson

Components

Components

Show Collapsed Show Notes Show Solutions Full Page Print Max Width Show All Hide All

Lesson Objectives

Motivate and introduce custom components in JavaFX.

JavaFX Components

Download starter code

Download the starter code for this chapter and places it into a subdirectory called cs1302-components:

sh -c "$(curl -fsSL https://cs1302book.com/_bundle/cs1302-components.sh)"

- downloading cs1302-components bundle...
- verifying integrity of downloaded files using sha256sum...
- extracting downloaded archive...
- removing intermediate files...
subdirectory cs1302-components successfully created

Activity: Draw Scene Graph

Our goal is to create the application (app) depicted below.

On your group's exit ticket (and in your notes):

1. list the different JavaFX Node classes that you think the app uses; and

2. draw the containment hierarchy and scene graph for the app based on your list of Node classes and what you see in the screenshot.

Do not worry about styling (color, font, etc) for now.

Note

The blue boxes are Label components.

Fig. 65 Final application with two side-by-side push counters.

Fig. 66 Containment Hierarchy & Scene Graph: Redundant Counter App

Sample Solution: Draw Scene Graph (1)

Fig. 67 Sample Soluton: Containment Hierarchy & Scene Graph: Redundant Counter App

Discussion - Part 1

• What if we want to add another counter to our application?

• Identify what's redundant.

Fig. 68 Final application with two side-by-side push counters.

Fig. 69 Sample Soluton: Containment Hierarchy & Scene Graph: Redundant Counter App

Discussion - Part 2

What is the best way to reduce redundancy in this situation?

Aside: Student - Part 1

What is wrong with this code?

public class FakeAthena {

   // Student names
   private String name0;
   private String name1;
   private String name2;
   private String name3;

   // Student 81 numbers
   private long idNum0;
   private long idNum1;
   private long idNum2;
   private long idNum3;

   // Student account balances
   private double balance0;
   private double balance1;
   private double balance2;
   private double balance3;

} // FakeAthena

Aside: Student - Part 2

What is wrong with this code?

public class FakeAthenaV2 {
   // Student names
   private Student student0;
   private Student student1;
   private Student student2;
   private Student student3;
} // FakeAthena

public class Student {
   private String name;
   private long idNum;
   private double balance;
} // Student

Aside: Student - Part 3

public class FakeAthenaV3 {
   // Student names
   private Student[] students;
} // FakeAthena

public class Student {
   private String name;
   private long idNum;
   private double balance;
} // Student

Discussion: CounterApp - Part 1

Can we do better?

Listing 106 Sample Solution: Code: Redundant Counter App

public class CounterApp extends Application {

   Stage stage;
   Scene scene;
   HBox root;

   VBox pushCounter0;
   VBox pushCounter1;
   VBox pushCounter2;

   Label counterLabel0;
   Label counterLabel1;
   Label counterLabel2;

   Button incrementButton0;
   Button incrementButton1;
   Button incrementButton2;

} // CounterApp

Fig. 70 Sample Soluton: Containment Hierarchy & Scene Graph: Redundant Counter App

Discussion: CounterApp - Part 2

Is this better?

public class CounterApp extends Application {

   Stage stage;
   Scene scene;
   HBox root;

   PushCounter pushCounter0;
   PushCounter pushCounter1;
   PushCounter pushCounter2;

   ...

} // CounterApp

public class PushCounter {

   Label counterLabel;
   Button incrementButton;

} // PushCounter

Fig. 71 Sample Soluton: Containment Hierarchy & Scene Graph: Redundant Counter App

Discussion: CounterApp - Part 3

Is this better?

public class CounterApp extends Application {

   Stage stage;
   Scene scene;
   HBox root;

   PushCounter[] pushCounters;

} // CounterApp

public class PushCounter {

   Label counterLabel;
   Button incrementButton;

} // PushCounter

Fig. 72 Sample Soluton: Containment Hierarchy & Scene Graph: Redundant Counter App with Array

Activity: PushCounter

On your exit ticket (and in your notes), fill in the blanks in the code below.

Scene Graphs: Before and After

All

package cs1302.app;

import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;

/**
 * A "push counter" component.
 */
public class PushCounter extends ______ {  // BLANK 1

    /** Default initial counter value. */
    public static final int DEF_INITIAL_COUNTER = 0;

    int counter;
    Label counterLabel;
    Button incrementButton;

    /**
     * Construct a push counter with an initial {@code counter} value.
     * @param counter The initial counter value.
     */
    public PushCounter(int counter) {
        ________________;                 // BLANK 2
        this.counter = 0;
        this.counterLabel = new Label(Integer.toString(this.counter));
        this.incrementButton = new Button("+");
        this.initScene();
        this.initEventHandlers();
    } // PushCounter

    /**
     * Construct a push counter with the default initial counter value.
     */
    public PushCounter() {
        this(PushCounter.DEF_INITIAL_COUNTER);
    } // PushCounter

    /** Initialize the scene. */
    private void initScene() {
        // Add the label and the button to the PushCounter
        ________________;                 // BLANK 3
    } // initScene

    /** Initialize the event handlers. */
    private void initEventHandlers() {
        EventHandler<ActionEvent> incrementHandler = __________; // BLANK 4
        incrementButton.setOnAction(incrementHandler);
    } // initEventHandlers

    /** Increment the counter counter. */
    private void increment() {
        this.counter += 1;
        this.counterLabel.setText(Integer.toString(this.counter));
    } // increment

} // PushCounter

Class

public class PushCounter extends ______ {  // BLANK 1

} // PushCounter

Constructor

/** Default initial counter value. */
public static final int DEF_INITIAL_COUNTER = 0;

public PushCounter(int counter) {
    ________________;                 // BLANK 2
    this.counter = 0;
    this.counterLabel = new Label(Integer.toString(this.counter));
    this.incrementButton = new Button("+");
    this.initScene();
    this.initEventHandlers();
} // PushCounter

public PushCounter() {
    this(PushCounter.DEF_INITIAL_COUNTER);
} // PushCounter

initScene

int counter;
Label counterLabel;
Button incrementButton;

private void initScene() {
    // Add the label and the button to the PushCounter
    ________________;                 // BLANK 3
} // initScene

initEventHandlers

Button incrementButton;

private void initEventHandlers() {
    EventHandler<ActionEvent> incrementHandler = __________; // BLANK 4
    incrementButton.setOnAction(incrementHandler);
} // initEventHandlers

private void increment() {
    this.counter += 1;
    this.counterLabel.setText(Integer.toString(this.counter));
} // increment

Live Coding

Finish the PushCounter and the CounterApp and run the code.

Quick Review

Fig. 73 The original scene graph (assuming three "push counters").

Fig. 74 The scene graph after creating and using the PushCounter class.

Fig. 75 The induced scene graph after creating PushCounter class (does not include child nodes for PushCounter).

Fun with Styling

The starter code includes a styled version of the push counter class called StyledPushCounter. You can replace PushCounter with StyledPushCounter in your scene graph to get the fully styled version of the app! The way it works is described below:

PushCounter

StyledPushCounter

Constructor

/** Constructs a new Styled Push Counter! */
public StyledPushCounter() {
    super();
    // style the label
    this.counterLabel.setPrefWidth(StyledPushCounter.DEF_LABEL_SIZE);
    this.counterLabel.setPrefHeight(StyledPushCounter.DEF_LABEL_SIZE);
    this.counterLabel.setAlignment(Pos.BASELINE_CENTER);
    this.counterLabel.setFont(StyledPushCounter.DEF_FONT);
    this.counterLabel.setBackground(StyledPushCounter.DEF_BACKGROUND);
    // style the button
    this.incrementButton.setMaxWidth(Double.MAX_VALUE);
    this.incrementButton.setPrefWidth(this.counterLabel.getWidth());
} // StyledPushCounter

Full Code

package cs1302.app;

import javafx.geometry.Pos;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.paint.Paint;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;

/** A styled "push counter" component. */
public class StyledPushCounter extends PushCounter {

    /** Default Font for Counter. */
    private static final Font DEF_FONT =
        Font.font("Padauk", FontWeight.BOLD, 50.0);

    /** Default Label Size for Counter. */
    private static final double DEF_LABEL_SIZE = 200.0;

    /** Default Background for Counter. */
    private static final Background DEF_BACKGROUND =
        new Background(new BackgroundFill(Color.AQUA, null, null));

    /** Constructs a new Styled Push Counter! */
    public StyledPushCounter() {
        super();
        // style the label
        this.counterLabel.setPrefWidth(StyledPushCounter.DEF_LABEL_SIZE);
        this.counterLabel.setPrefHeight(StyledPushCounter.DEF_LABEL_SIZE);
        this.counterLabel.setAlignment(Pos.BASELINE_CENTER);
        this.counterLabel.setFont(StyledPushCounter.DEF_FONT);
        this.counterLabel.setBackground(StyledPushCounter.DEF_BACKGROUND);
        // style the button
        this.incrementButton.setMaxWidth(Double.MAX_VALUE);
        this.incrementButton.setPrefWidth(this.counterLabel.getWidth());
    } // StyledPushCounter

} // StyledPushCounter

Extra Practice: TabbedPane

Take the ImageLoader and add a TabbedPane (Image Browswer app). Start with the scene graph with multiple ImageLoaders. We want to put one in each tab. How do we adjust the scene graph?