Yakov Fain's Blog

My notes about everything in IT

JavaFX Event handling and Property Binding

with 7 comments


Some time ago I blogged that Java Swing should be deprecated and replaced with JavaFX. In this blog I’ll show a piece of JavaFX namely event handlers and binding. I’ve created a simple Sign In window with a GridPane layout (it’s JavaFX equivalent of Swing’s GridBagLayout). I’m not going to spend much time on the GridPane itself, but will show you a basic event handling and a binding.

In JavaFX an event object is represented by the instance of the class javafx.event.Event. There are different ways of handling events. Depending on how you structured your application you can handle events either in Java or in FXML. In this blog I’ll do everything in Java, where you can process events using one of the following techniques:

1. Create an instance of an anonymous class overriding its handle() callback method. Pass it to the the event handler for a specific event.

2. Use lambda expressions.

3. Use Java method references introduced in Java 8.

The Sign In window, will have the buttons Sign In, Cancel, and the hyperlink Forgot password. Each of these controls will use different way of handling click event. The Sign In window will look as follows:

f1807

The event handler for the button Sign In will be implemented using an anonymous inner class. The event handler for the Cancel button will be implemented using a lambda expression. I’ll implement the click handler for the hyperlink Forgot password using a method reference. The code of the class GridPaneSampleEvents is shown next (see the section marked as event handlers).

public class GridPaneSampleEvents extends Application {

    public void start(Stage primaryStage) {
        
        Label userIdLbl = new Label("User ID:");
        TextField userIdTxt = new TextField();
        Label userPwdLbl = new Label("Password:");
        PasswordField userPwdTxt = new PasswordField();
        Button signInBtn = new Button ("Sign In");
        Button cancelBtn = new Button ("Cancel");
        Hyperlink forgotPwdLink = new Hyperlink("Forgot password");

        GridPane root = new GridPane();
        root.setVgap(20);
        root.setPadding(new Insets(10));
        root.setAlignment(Pos.CENTER);
        
        // Using static methods for setting node constraints 
        GridPane.setConstraints(userIdLbl, 0, 0);
        GridPane.setConstraints(userIdTxt, 1, 0);
        GridPane.setConstraints(userPwdLbl, 0, 1);
        GridPane.setConstraints(userPwdTxt, 1, 1);
        GridPane.setConstraints(signInBtn, 0, 2);
        //Cancel button: span 1, right aligned
        GridPane.setConstraints(cancelBtn, 1,2, 1, 1, HPos.RIGHT,
                                                      VPos.CENTER);
        GridPane.setConstraints(forgotPwdLink, 0, 3,2,1);

        root.getChildren().addAll(userIdLbl, userIdTxt, userPwdLbl, 
                     userPwdTxt,signInBtn, cancelBtn, forgotPwdLink);
            
        // event handlers
        //1. Anonymous class 
        signInBtn.setOnAction(new EventHandler(){
            public void handle(ActionEvent evt){
              System.out.println(
                      "Anonymous class handler. Sign in clicked.");   
            }
        });
        
        // lambda expression
        cancelBtn.setOnAction(evt -> 
            System.out.println("Lambda handler. Cancel clicked.")
        );
        
        // method reference
        forgotPwdLink.setOnAction(this::forgotPwdHandler);
        
        // Show the window
        Scene scene = new Scene(root,250,200);
        primaryStage.setScene(scene);
        primaryStage.show();

    }
    
    private void forgotPwdHandler(ActionEvent evt){
        System.out.println(
              "Method reference handler. Forgot password clicked");
    }

    public static void main(String[] args) {
        launch(args);
    }
}

If you run this program, and click on Sign In, Cancel, and Forgot password, the console output will show the following:

Anonymous class handler. Sign in clicked.
Lambda handler. Cancel clicked.
Method reference handler. Forgot password clicked

While each of the event handlers works the same, I prefer the lambda expression version as it’s concise and is easy to read. Each of the JavaFX GUI controls has a set of setOnXXX() methods (e.g. setOnAction(), setOnMouseMoved() et al) that should be called for the events you’re interested in handling.

Properties and Binding

While Java developers casually use the words properties referring to class attributes, JavaFX properties are more than just class attributes. JavaFX defines an interface javafx.beans.property.Property, which has a very useful functionality allowing to bind the GUI components (the view) with properties of the Java classes (the model) and automate notifications of the GUI components when the value in the model change or visa versa.

Imagine that you’re developing a financial application that receives notification from the server about the stock price changes. When a Java object receives the new price, you need to modify the content of the corresponding GUI component. With JavaFX you can simply bind a property price of a Java class to the property of, say Label component. No more coding required. As soon as the price value changes, the Label will be automatically updated. JavaFX properties greatly simplify the process of synchronization of the data and the GUI.

Existing implementations of the Property interface serve as wrappers to Java attributes adding the change notification functionality. The interface Property declares the following methods: bind(), unbind(), bindBidirectional() , unbindBidirctional(), and isBound(). Can you bind any value to a JavaFX property? No – the value has to be of an ObservableValue type.

JavaFx property classes are located in the package javafx.beans.property. For each property type there are two classes: read-only and read-write ones. For example, if you need a String property, use either SimpleStringProperty or ReadOnlyStringWrapper. Both of these implement StringProperty interface. Similarly named classes exist for other data types and some collections too.

Let’s modify the GridPaneSampleEvents class. I will place an additional Label components at the bottom of the Sign In window. It’ll display the messages about the events as the user clicks on the buttons and the hyperlink. Initially this label will not have any text:

Label messageLbl = new Label();

JavaFX properties are observables. Hence we can add a listener (observer) to the property to be notified when the property value changes. But it’s much easier to simply use property in a binding expressions. I’ll bind this label to the string property, and as soon as the value of this property changes, the label component messageLbl will display this value.

private StringProperty message = new SimpleStringProperty();
messageLbl.textProperty().bind(message);

The class GridePaneSampleEvents was just printing messages on the system console when the user clicked on the buttons or the hyperlink. The new class GridPaneSampleBinding will modify our property message instead, for example:

cancelBtn.setOnAction(evt -> message.set(“Cancel clicked.”));

The click on the cancelBtn changes the value of the the message property, which was bound to the label’s text – the GUI will change automatically! This is how our Sign In window will look like after pressing the Cancel button.

f1808

The complete code of the GridPaneSampleBinding class is shown next.

public class GridPaneSampleBinding extends Application {

    //Declaring a JavaFX property
    private StringProperty message = new SimpleStringProperty();
    
    public void start(Stage primaryStage) {
        
        Label userIdLbl = new Label("User ID:");
        TextField userIdTxt = new TextField();
        Label userPwdLbl = new Label("Password:");
        PasswordField userPwdTxt = new PasswordField();
        Button signInBtn = new Button ("Sign In");
        Button cancelBtn = new Button ("Cancel");
        Hyperlink forgotPwdLink = new Hyperlink("Forgot password");
        
        // A label to display messages using binding
        Label messageLbl = new Label();
        // binding the StringProperty to a GUI component
        messageLbl.textProperty().bind(message);
        
        GridPane root = new GridPane();
        root.setVgap(20);
        root.setPadding(new Insets(10));
        root.setAlignment(Pos.CENTER);
        
        // Using static methods for setting node constraints 
        GridPane.setConstraints(userIdLbl, 0, 0);
        GridPane.setConstraints(userIdTxt, 1, 0);
        GridPane.setConstraints(userPwdLbl, 0, 1);
        GridPane.setConstraints(userPwdTxt, 1, 1);
        GridPane.setConstraints(signInBtn, 0, 2);
        
        //Cancel button: span 1, right aligned
        GridPane.setConstraints(cancelBtn, 1,2, 1, 1, 
                                      HPos.RIGHT, VPos.CENTER);
        GridPane.setConstraints(forgotPwdLink, 0, 3,2,1);
        
        // Message label: span 2
        GridPane.setConstraints(messageLbl, 0,4,2,1);

        root.getChildren().addAll(userIdLbl, userIdTxt, userPwdLbl,
          userPwdTxt,signInBtn, cancelBtn, forgotPwdLink, messageLbl);
        
        // event handlers
        //1. Anonymous class 
        signInBtn.setOnAction(new EventHandler(){
            public void handle(ActionEvent evt){
                  message.set("Sign in clicked.");   
            }
        });
        
        // lambda expression
        cancelBtn.setOnAction(evt -> 
           message.set("Cancel clicked.")
        );
        
        // method reference
        forgotPwdLink.setOnAction(this::forgotPwdHandler);
        
        // Show the window
        Scene scene = new Scene(root,250,220);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    private void forgotPwdHandler(ActionEvent evt){
        message.set("Forgot password clicked");
    }

    public static void main(String[] args) {
        launch(args);
    }
}

The binding can be bidirectional. If the value of the GUI component changes it can change the value of the underlying model (remember MVC?), and if the value of the model changes the GUI is updated too. If you want to stop binding at any time, use the method unbind().

That’s all folks for now.

About these ads

Written by Yakov Fain

August 11, 2014 at 2:32 am

Posted in java

7 Responses

Subscribe to comments with RSS.

  1. Hello, Yakov!
    I know, that you use IntelliJ Idia, and maybe You can help me.
    I have a problem in JavaFX… i cann’t correct explain it in English, but this is my part of code:

    @FXML TableView tvAlarms;

    ObservableList<TableColumn> tColumns = tvAlarms.getColumns();
    for (TableColumn tableColumn : tColumns) {
    tableColumn.setCellValueFactory(p -> Bindings.selectString(p.getValue(), tableColumn.getId()));
    }

    In Eclipse Luna all working fine, but in IntelliJ Idea i have an error:
    Error:(78, 71) java: incompatible types: bad return type in lambda expression
    javafx.beans.binding.StringBinding cannot be converted to javafx.beans.value.ObservableValue

    Pavlo

    August 11, 2014 at 11:11 am

    • I’m using Eclipse Luna for JavaFX. But if your code works in one IDE, but not in another one, the difference is in JDK. See if your IntelliJ project uses the same version of JDK as Luna does. To be more specific, compare the versions of the jfxrt.jar.

      Yakov Fain

      August 11, 2014 at 12:17 pm

      • In both cases c:\Program Files (x86)\Java\jdk1.8.0_05 and c:\Program Files (x86)\Java\jre8
        And I copy c:\Program Files (x86)\Java\jre8 to c:\Program Files (x86)\Java\jdk1.8.0_05\jre becouse in IntelliJ I find only JDK (in Eclipse was alternative JRE = jre8) – the same error in the same row:
        tvAlarms.getColumns().forEach(c -> { c.setCellValueFactory(p -> Bindings.selectString(p.getValue(), c.getId())); });

        Pavlo

        August 11, 2014 at 2:52 pm

  2. […] how should my Java students learn GUI programming? There is another Oracle product called JavaFX. It’s a better looking wrapper for Swing. It still runs on JVM, so Amazon would go out of […]

  3. […] Yakov Fain has a post about JavaFX event handling and property binding. […]

  4. Hi Pavlo,
    I am using intellj IDEA Ultimate 13.1
    @FXML
    TableView tvAlarms;

    public void dude() {
    ObservableList tColumns = tvAlarms.getColumns();
    for(TableColumn tableColumn:tColumns) {
    tableColumn.setCellValueFactory(p -> Bindings.selectString(p.getValue(), tableColumn.getId()));
    }
    }

    this piece of code compiled fine for me !, make you sure you’re using language level ( not project JDK )to java8 in module settings .

    chandu0101

    August 18, 2014 at 2:26 am

  5. Maybe enyone will be have the same problem …
    You need change compiler from Javac to Eclipse.
    Settings > Build, Execution, Deployment > Compiler > Java Compiler: Use compiler = Eclipse
    After that all be fine.

    Pavlo

    November 8, 2014 at 12:04 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 150 other followers

%d bloggers like this: