This study guide highlights the most important subjects in Chapters 14, 15 and 16. We have chosen to make a selection of the various topics in these chapters, because it gives you a more complete overview of what JavaFX is about. Sections and paragraphs not listed are explicitly to be skipped in the PRC1 course (2017). The selected topics should give you enough insight to program a small but complete application with both graphical output and user interaction.

1. JavaFX Topics

Section Description

14

Java FX Basics; Selected sections

14.3

Structure of simplest JavaFX app.

14.4

Panes UI Controls and Shapes

14.5

Property Binding.

14.6

Common Properties and Methods for Nodes

14.10

Layout Panes excluding 14.10.1 .. 14.10.4

15

Event driven programming

15.1

Event driven Programming Intro; selected sections

15.2

Events and Event Sources

15.3

Registering Handlers. We use only the method reference variant.

15.10

Listeners for Observable Objects

16

UI controls; Selected sections.

16.3

Button

16.11

Slider

When studying the above sections, make sure your understand at least the concepts presented here, including the examples and figures.

2. GUI Basics.

In the previous chapters, your programs commanded the user (politely, I hope) to enter information. You will have noticed that these kind of programs have a will of their own. They tell you what to do instead of the other way around. That is finished now, because a properly designed GUI based program should do what the user wants.[1]

The typical structure is that a GUI element, often called a widget, is manipulated by the user. For example a text is entered in a text field, or a button is pressed. The order in which the user does so is complete up to the user. It is the responsibility of the program to react to the actions of the user.

A GUI framework, such as JavaFX, can be dauntingly complex, but luckily the start can be relatively simple, given that you understand OO basics and the previous chapters in particular.

It is often possible to use a GUI program to design the looks of another GUI program. That is also the case with JavaFX. We will use SceneBuilder as tool to create the (basic) layout of the GUI. This is available in the assessment environment as well. If you want to get your hands dirty playing with JavaFX, the install SceneBuilder on your own machine.

3. Basic stucture of a JavaFX program.

For a program to be used as a JavaFX program, it needs to extend javafx.application.Application, and override the start(Stage primaryStage) method.

Your entry point is the this start method. Note that it is NOT a static method.

To see a demo, use NetBeans IDE to create a JavaFX Application.

javafx app

When you run it you will get something like in the figure below.

javafxhello

The whole setup of this program, in terms of widgets is: Stage, StackPane and Button, which are put on top of each order, a bit like in this image:

fxscenebasics
Figure 1. Button on top of StackPane on top of Stage (the window).

To explain what happens when you press an Button, we use a sequence diagram, another UML diagram type.

buttonsequence
Figure 2. Press a button and your program is told to do something.

4. Panes, UI Controls, etc

JavaFX is a rich framework with loads of classes. There are relationships between those classes, as you can see in the class diagram below.

javafx framework
Figure 3. The JavaFX classes: panes, UI controls and shapes [2]

You can style JavaFX components very like what is common in HTML. The reference can be found under JavaFX CSS Reference Guide

5. UI Event Handling

JavaFX implements the handling of user events in the same way as all other GUI frameworks. The framework defines a call back (the EventHandler interface) which you implement and then register (attach) to the source of the event, like a button or text input. In JavaFX you register the event handler by means of the setOnAction method in the source object. Below you see it in action.

5.1. Various ways to implement an EventHandler (see JavaFXEventHandlingDemo netbeans project in student repository)

5.1.1. Normal (external) class

normal (external) class (ButtonEventHandler is a class that implements the EventHandler interface, see below)
        btn1.setOnAction( new ButtonEventHandler() );
ButtonEventHandler class that implements the EventHandler interface
public class ButtonEventHandler implements EventHandler<ActionEvent> {

    @Override
    public void handle(ActionEvent event) {
        System.out.println("Hello world!!");
    }

}

5.1.2. named inner class

CountButtonEventHandler is a so called inner class within the JavaFXEventHandlingDemo class
public class JavaFXEventHandlingDemo extends Application {

    @Override
    public void start( Stage primaryStage ) {

        Button btn2 = new Button();
        btn2.setText( "Make me RED" );
        btn2.setOnAction( new CountButtonEventHandler( "-fx-base: #ff0000;" ) );

    /**
     * Inner class to keep track of the number of button clicks. Nice: the inner
     * class has access to private fields of the class that contains the inner
     * class.
     */
    private class CountButtonEventHandler implements EventHandler<ActionEvent> {

        private final String buttonStyle;
        private int timesClicked = 0;

        public CountButtonEventHandler( String buttonStyle ) {
            this.buttonStyle = buttonStyle;
        }

        @Override
        public void handle( ActionEvent event ) {
            timesClicked++;
            Button theClickedButton = ( ( Button ) event.getSource() );
            theClickedButton.setStyle( buttonStyle );
            theClickedButton.setText( "clicked " + timesClicked + " times" );
            System.out.println( "Button clicked " + timesClicked + " times" );
        }
    }

}

5.1.3. anonymous inner class

        btn4.setOnAction( new EventHandler<ActionEvent>() {
            @Override
            public void handle( ActionEvent event ) {
                ( ( Button ) event.getSource() ).setStyle( b4Style );
                System.out.println( "Hi from anonymous innerclass" );
                System.out.println( event );
            }
        } );

5.1.4. Lambda expression handler

        btn5.setOnAction( event -> {
            System.out.println( "Hi from Lambda" );
            ( ( Button ) event.getSource() ).setStyle( b5Style );
            System.out.println( event );
        } );

5.1.5. Method reference

        btn6.setOnAction( this::handleButtonClick );
handler method referred by previous reference usage.
    public void handleButtonClick( ActionEvent e ) {
        System.out.println( "Buttonclick handler activated!" );
        ( ( Button ) e.getSource() ).setStyle( styles[ styleIndex ] );
        styleIndex = ( styleIndex + 1 ) % styles.length;
    }

6. Property Binding

JavaFX introduces many new concepts, not in the least the fx-properties. FX-Properties provide a mechanism to easily connect sources and destinations of information, even in chains.

In a nutshell: A source property is an observable object, that can have listeners. Whenever something happens that is of interest to the listeners, the property-object notifies those listeners about this.

Node, which is an important class in the top of the JavaFX class hierarchy (see above), and all of its children and grand children are chock-full of such properties. This makes it very easy to connect such a property to a property of another instance of another FX-class.

You can bind the properties of one Node (or subclass, we will not keep repeating this) to a property of another node. Or you can have a property that is a value in your "business domain" and connect that to a GUI component, which will show it.

6.1. Simple Binding Demo (see simpleui netbeans project in student repository)

binding button.rotateProperty to slider.valueProperty
        button.rotateProperty().bind(slider.valueProperty());

1. given the possibilities the program offers
2. Liang, Y Daniel. Intro to Java Programming, Comprehensive Version, Global Edition, 10th Edition. Pearson (Intl), 11/2014. VitalBook file.