Interaction with JavaFX

JavaFX did a good job in designing and realizing a beautiful GUI interface for us, like the amazing button; however the button is not ready to be clicked, since we have nothing behind to make user interact with JavaFX interface. How should we make the interaction with JavaFX to be real? we need to use Event and Controller. Events are notifications that something important for the application has happened (e.g. the user clicked on the button). Controller, which is the right place for the code that communicates with GUI components.

Event: When the event happens, the event object is represented by one of the subclasses of the class Event located in the packages javafx.event and javafx.scene.input. You need to decide what events are important to your program and, as the programmers say, “listen to these events”. You’ll always write event handlers (a.k.a. event listeners) in Java, but there are different ways of assigning event handlers to GUI elements. If your GUI is designed using FXML, you’ll need to specify the name of your controller class right in the FXML file.

<GridPane maxHeight=”-Infinity” maxWidth=”-Infinity” minHeight=”-Infinity” minWidth=”-Infinity” prefHeight=”176.0″ prefWidth=”353.0″ style=”-fx-background-color: lightblue;” xmlns=”http://javafx.com/javafx/8&#8243; xmlns:fx=”http://javafx.com/fxml/1&#8243; fx:controller=”application.SampleController”>

We practice one event which is clicking the button of “Log In”, the action we need to define in fxml file:

<Button id=”submitBtn” alignment=”CENTER_RIGHT” contentDisplay=”RIGHT” mnemonicParsing=”false” onAction=”#signInClicked” text=”Log in” textAlignment=”RIGHT” GridPane.rowIndex=”2″>

#signInClicked is the action name. To make it in reality, we need to implement this method in SampleController

package application;

import javafx.beans.property.SimpleStringProperty;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;

public class SampleController {

public void signInClicked(ActionEvent evt) {

System.out.println(“Hello from signInClicked method in controller”);

}

}

To make it a little bit fancy, you can implement the method which is able to change the color of the text field based on the username’s true of false.

 

package application;

import javafx.beans.property.SimpleStringProperty;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;

public class SampleController {

@FXML
private TextField id;
@FXML
private PasswordField pwd;
@FXML
private Label errMsg;

SimpleStringProperty signinError = new SimpleStringProperty();

public void signInClicked(ActionEvent evt) {

System.out.println(“Hello from signInClicked method in controller”);

String userID = id.getText();
String password = pwd.getText();

if (!”Paul”.equals(userID)) {
id.setStyle(“-fx-background-color: lightblue;”);
signinError.set(“Wrong id:” + userID);

} else {
id.setStyle(“-fx-background-color: white;”);
signinError.set(“”);
}

}

@FXML
public void initialize() {
errMsg.textProperty().bind(signinError);
}

}

Now you can see we have 4 files in the folder, and these 4 files helping us to  make the JavaFX beautiful, make us to interact with JavaFX interface.

Screen Shot 2017-03-15 at 12.02.37 AM

I am attaching all codes below:

Main.java

package application;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.fxml.FXMLLoader;

public class Main extends Application {
@Override
public void start(Stage primaryStage) {
try {

GridPane root = (GridPane) FXMLLoader.load(getClass().getResource(“Sample.fxml”));

Scene scene = new Scene(root, 400, 300);

scene.getStylesheets().add(getClass().getResource(“application.css”).toExternalForm());

primaryStage.setScene(scene);
primaryStage.show();

} catch (Exception e) {
e.printStackTrace();
}
}

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

SampleController.java

package application;

import javafx.beans.property.SimpleStringProperty;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;

public class SampleController {

@FXML
private TextField id;
@FXML
private PasswordField pwd;
@FXML
private Label errMsg;

SimpleStringProperty signinError = new SimpleStringProperty();

public void signInClicked(ActionEvent evt) {

System.out.println(“Hello from signInClicked method in controller”);

String userID = id.getText();
String password = pwd.getText();

if (!”Paul”.equals(userID)) {
id.setStyle(“-fx-background-color: lightblue;”);
signinError.set(“Wrong id:” + userID);

} else {
id.setStyle(“-fx-background-color: white;”);
signinError.set(“”);
}

}

@FXML
public void initialize() {

errMsg.textProperty().bind(signinError);
}

}

 

application.css

/* JavaFX CSS – Leave this comment until you have at least create one rule which uses -fx-Property */
#submitBtn{
-fx-background-color: lightskyblue;
-fx-font-family:verdana;
-fx-font-size:20;
-fx-font-weight: bold;
-fx-stroke:navy;
-fx-font-style:italic;
-fx-border-radius: 20;
-fx-background-radius: 20;
-fx-padding: 5;
}

#CancelBtn{
-fx-background-color: blue;
-fx-font-family:verdana;
-fx-font-size:20;
-fx-font-weight: bold;
-fx-stroke:navy;
-fx-font-style:italic;
-fx-border-radius: 20;
-fx-background-radius: 20;
-fx-padding: 5;
}

.label{
-fx-text-fill: red;
}

.bluelabel{
-fx-text-fill: blue;
-fx-font-family:verdana;
-fx-font-style:italic;
}

 

Sample.fxml

<?xml version=”1.0″ encoding=”UTF-8″?>

<?import javafx.geometry.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.GridPane?>

<GridPane maxHeight=”-Infinity” maxWidth=”-Infinity” minHeight=”-Infinity” minWidth=”-Infinity” prefHeight=”176.0″ prefWidth=”353.0″ style=”-fx-background-color: lightblue;” xmlns=”http://javafx.com/javafx/8&#8243; xmlns:fx=”http://javafx.com/fxml/1&#8243; fx:controller=”application.SampleController”>
<columnConstraints>
<ColumnConstraints hgrow=”SOMETIMES” maxWidth=”146.0″ minWidth=”10.0″ prefWidth=”120.0″ />
<ColumnConstraints hgrow=”SOMETIMES” maxWidth=”180.0″ minWidth=”10.0″ prefWidth=”180.0″ />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight=”10.0″ prefHeight=”30.0″ vgrow=”SOMETIMES” />
<RowConstraints minHeight=”10.0″ prefHeight=”30.0″ vgrow=”SOMETIMES” />
<RowConstraints minHeight=”10.0″ prefHeight=”30.0″ vgrow=”SOMETIMES” />
</rowConstraints>
<children>
<Label styleClass=”label” text=”User ID”>
<font>
<Font size=”25.0″ />
</font>
</Label>
<Label styleClass=”label” text=”Password” GridPane.rowIndex=”1″>
<font>
<Font size=”25.0″ />
</font>
</Label>
<Button id=”submitBtn” alignment=”CENTER_RIGHT” contentDisplay=”RIGHT” mnemonicParsing=”false” onAction=”#signInClicked” text=”Log in” textAlignment=”RIGHT” GridPane.rowIndex=”2″>
<font>
<Font size=”21.0″ />
</font>
</Button>
<Button id=”CancelBtn” mnemonicParsing=”false” text=”Cancel” GridPane.columnIndex=”1″ GridPane.rowIndex=”2″>
<font>
<Font size=”22.0″ />
</font>
</Button>
<TextField promptText=”userId” GridPane.columnIndex=”1″ fx:id=”id” />
<PasswordField promptText=”password” GridPane.columnIndex=”1″ GridPane.rowIndex=”1″ fx:id=”pwd”/>
<Label alignment=”CENTER” GridPane.rowIndex=”3″
GridPane.columnSpan=”2″ prefWidth=”300.0″ fx:id=”errMsg”/>
</children>
<padding>
<Insets bottom=”10.0″ left=”10.0″ right=”10.0″ top=”10.0″ />
</padding>
</GridPane>

 

Advertisements

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