In the previous part, we saw how to create AlertBox, switching scenes etc for the desktop application using JavaFX. Lets go ahead with the following sections today :

• Communicating Between Windows
• GridPane
• Extract And Validate Input
• CheckBoxes
• ChoiceBox DropDown List

Communicating Between Window

Let look at how to make java application to communicate between two windows. For example : Asking user to enter some name using prompt window.

Create a new class named ConfirmBox.java and replace the content with:

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.geometry.*;

public class ConfirmBox {

    //Create variable
    static boolean answer;

    public static boolean display(String title, String message) {
        Stage window = new Stage();
        window.initModality(Modality.APPLICATION_MODAL);
        window.setTitle(title);
        window.setMinWidth(250);
        Label label = new Label();
        label.setText(message);

        //Create two buttons
        Button yesButton = new Button("Yes");
        Button noButton = new Button("No");

        //Clicking will set answer and close window
        yesButton.setOnAction(e -> {
            answer = true;
            window.close();
        });
        noButton.setOnAction(e -> {
            answer = false;
            window.close();
        });

        VBox layout = new VBox(10);

        //Add buttons
        layout.getChildren().addAll(label, yesButton, noButton);
        layout.setAlignment(Pos.CENTER);
        Scene scene = new Scene(layout);
        window.setScene(scene);
        window.showAndWait();

        //Make sure to return answer
        return answer;
    }

}

This class contains the code for creating a window within the app which will prompt user for some action.
Now lets use the above class in our application
Replace the content of Main.java with the following:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

    Stage window;
    Button button;

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

    @Override
    public void start(Stage primaryStage) {
        window = primaryStage;
        window.setTitle("JavaFX - Tutorials Face");
        button = new Button("Click Me");

        button.setOnAction(e -> {
            boolean result = ConfirmBox.display("Title of Window", "Are you sure you want to send that pic?");
            System.out.println(result);
        });

        StackPane layout = new StackPane();
        layout.getChildren().add(button);
        Scene scene = new Scene(layout, 300, 250);
        window.setScene(scene);
        window.show();
    }

}

We have called the static method of display() ConfirmBox.java in the above class. I am explaining in detail as the code is self explanatory.

GridPane

GridPane is a layout similar to StackPane.
GridPane lays out its children within a flexible grid of rows and columns. If a border and/or padding is set, then its content will be layed out within those insets.
A child may be placed anywhere within the grid and may span multiple rows/columns. Children may freely overlap within rows/columns and their stacking order will be defined by the order of the gridpane’s children list.

Replace the Main.java with the following:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class Main extends Application {

    Stage window;

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        window = primaryStage;
        window.setTitle("TutorialsFace - JavaFX");

        //GridPane with 10px padding around edge
        GridPane grid = new GridPane();
        grid.setPadding(new Insets(10, 10, 10, 10));
        grid.setVgap(8);
        grid.setHgap(10);

        //Name Label - constrains use (child, column, row)
        Label nameLabel = new Label("Username:");
        GridPane.setConstraints(nameLabel, 0, 0);

        //Name Input
        TextField nameInput = new TextField("Bucky");
        GridPane.setConstraints(nameInput, 1, 0);

        //Password Label
        Label passLabel = new Label("Password:");
        GridPane.setConstraints(passLabel, 0, 1);

        //Password Input
        TextField passInput = new TextField();
        passInput.setPromptText("password");
        GridPane.setConstraints(passInput, 1, 1);

        //Login
        Button loginButton = new Button("Log In");
        GridPane.setConstraints(loginButton, 1, 2);

        //Add everything to grid
        grid.getChildren().addAll(nameLabel, nameInput, passLabel, passInput, loginButton);

        Scene scene = new Scene(grid, 300, 200);
        window.setScene(scene);
        window.show();
    }
}

Extract And Validate Input

In the above section we saw how to take input from users using a good looking layout. Now let take that input and apply validation checks.

Replace Main.java with:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {

    Stage window;
    Scene scene;
    Button button;

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        window = primaryStage;
        window.setTitle("TutorialsFace");

        //Form
        TextField ageInput = new TextField();

        button = new Button("Click me");
        button.setOnAction( e -> isInt(ageInput, ageInput.getText()) );

        //Layout
        VBox layout = new VBox(10);
        layout.setPadding(new Insets(20, 20, 20, 20));
        layout.getChildren().addAll(ageInput, button);

        scene = new Scene(layout, 300, 250);
        window.setScene(scene);
        window.show();
    }

    //Validate age
    private boolean isInt(TextField input, String message){
        try{
            int age = Integer.parseInt(input.getText());
            System.out.println("User is: " + age);
            return true;
        }catch(NumberFormatException e){
            System.out.println("Error: " + message + " is not a number");
            return false;
        }
    }
}

In the above code we have made a very basic validation test of whether a given input is number of not.

CheckBoxes

Let integrate CheckBoxes in the application. Although checkboxes look similar to radio buttons, they cannot be combined into toggle groups to enable the selection of many options at one time. See the Radio Button and Toggle Button chapters for more information.

Replace Main.Java with:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {

    Stage window;
    Scene scene;
    Button button;

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        window = primaryStage;
        window.setTitle("Bucky's Meat Subs");

        //Checkboxes
        CheckBox box1 = new CheckBox();
        CheckBox box2 = new CheckBox("Tuna");
        box2.setSelected(true);

        //Button
        button = new Button("Order Now!");
        button.setOnAction(e -> handleOptions(box1, box2));

        //Layout
        VBox layout = new VBox(10);
        layout.setPadding(new Insets(20, 20, 20, 20));
        layout.getChildren().addAll(box1, box2, button);

        scene = new Scene(layout, 300, 250);
        window.setScene(scene);
        window.show();
    }

    //Handle checkbox options
    private void handleOptions(CheckBox box1, CheckBox box2){
        String message = "Users order:\n";

        if(box1.isSelected())
            message += "Bacon\n";

        if(box2.isSelected())
            message += "Tuna\n";

        System.out.println(message);
    }
}

ChoiceBox DropDown List

Choice Boxes are the UI controls that provide support for quickly selecting between a few options.

Replace Main.Java with the following:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ChoiceBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {

    Stage window;
    Scene scene;
    Button button;

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        window = primaryStage;
        window.setTitle("ChoiceBox Demo");
        button = new Button("Click me");

        ChoiceBox<String> choiceBox = new ChoiceBox<>();

        //getItems returns the ObservableList object which you can add items to
        choiceBox.getItems().add("Apples");
        choiceBox.getItems().add("Bananas");
        choiceBox.getItems().addAll("Bacon", "Ham", "Meatballs");

        //Set a default value
        choiceBox.setValue("Apples");

        button.setOnAction(e -> getChoice(choiceBox));

        VBox layout = new VBox(10);
        layout.setPadding(new Insets(20, 20, 20, 20));
        layout.getChildren().addAll(choiceBox, button);

        scene = new Scene(layout, 300, 250);
        window.setScene(scene);
        window.show();
    }

    //To get the value of the selected item
    private void getChoice(ChoiceBox<String> choiceBox){
        String food = choiceBox.getValue();
        System.out.println(food);
    }


}

Look at the screenshot above. It shows how the choice boxes can be used for adding Drop Down lists.

We will see remaining sections in next part.

5,688 total views, no views today

In the previous part, we saw a very basic template for the desktop application using JavaFX. Lets go ahead with the following sections today in this part :

• Handle User Events
• Anonymous Inner Classes And Lambda Expressions
• Switching Scenes
• Creating Alert Boxes

Handle User Events

We have seen previously how to create a button on the scene. But it did nothing when we clicked it. Lets add a functionality to it by handling the click event on the button.

Replace the previous Main.Java with the following:

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application implements EventHandler<ActionEvent> {

    Button button;

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

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Title of Window");
        button = new Button();
        button.setText("Hey baby");

        //This class will handle the button events
        button.setOnAction(this);

        StackPane layout = new StackPane();
        layout.getChildren().add(button);
        Scene scene = new Scene(layout, 300, 250);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    //When button is clicked, handle() gets called
    //Button click is an ActionEvent (also MouseEvents, TouchEvents, etc...)
    @Override
    public void handle(ActionEvent event) {
        if (event.getSource() == button) 
            System.out.println("Hey Charlie!");
    }

}

We have implemented EventHandler interface in the Main.java this time. So this class can simply handle all the events for the scene.

We need to override the hande() method of the EventHandler interface in Main class. This method handles all type of events for the application. So we need to check which on which layout has the current event occured.  So we added a check for the button  in the handle() method for all the events called on buttons.

Now run the Main.Java file as Java Application and click on the button. You will see ‘Hey Charlie!’ printed on the console.

Thus we have handled click events for the button.

Anonymous Inner Classes And Lambda Expressions

The above example we saw for event handling had too much work to be done for just a single event.  Lets look at a different implementation for the same task as before using Lambda Expressions

Replace the Main.Java file with the following:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

	Button button;

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

	@Override
	public void start(Stage primaryStage) {
		primaryStage.setTitle("Title of Window");
		button = new Button();
		button.setText("Click Me");

		button.setOnAction(e -> {
			System.out.println("dsa dsa dsa !");
			System.out.println("Lambda expressions are awesome!");
		});

		/*
		 * button.setOnAction(new EventHandler<ActionEvent>() {
		 * 
		 * @Override public void handle(ActionEvent event) {
		 * System.out.println("Handle event using anonymous inner classes"); }
		 * });
		 */

		StackPane layout = new StackPane();
		layout.getChildren().add(button);
		Scene scene = new Scene(layout, 300, 250);
		primaryStage.setScene(scene);
		primaryStage.show();
	}

}

Look at the commented section of the code above. The commented section is another way of doing the same EventHandling using anonymous class. You might be already familiar with that method.
The uncommented setOnAction() method which has been called uses Lambda Expressions for quickly handling the event. This feature has been added in JDK8 only.  So you might face syntax errors if you are using lower versions of JDK.

Switching Scenes

Now lets learn about changing the scene i.e whole layout of the stage of our application. Its similar to switching fragments in an Android Application.

For example : You click a button to go to next page or previous page.

Now Replace the Main.Java with:

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.control.*;

public class Main extends Application {

    Stage window;
    Scene scene1, scene2;

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

    @Override
    public void start(Stage primaryStage) {
        window = primaryStage;

        //Button 1
        Label label1 = new Label("Welcome to the first scene!");
        Button button1 = new Button("Go to scene 2");
        button1.setOnAction(e -> window.setScene(scene2));

        //Layout 1 - children laid out in vertical column
        VBox layout1 = new VBox(20);
        layout1.getChildren().addAll(label1, button1);
        scene1 = new Scene(layout1, 200, 200);


        //Button 2
        Button button2 = new Button("This sucks, go back to scene 1");
        button2.setOnAction(e -> window.setScene(scene1));

        //Layout 2
        StackPane layout2 = new StackPane();
        layout2.getChildren().add(button2);
        scene2 = new Scene(layout2, 600, 300);

        //Display scene 1 at first
        window.setScene(scene1);
        window.setTitle("Title Here");
        window.show();
    }

}

VBox is another type of layout similar to Stackpane. VBox stands for Vertical Box. HBox stands for Horizontal Box. VBox adds Layouts in vertically stacked manner while HBox adds layout in horizontal way.

Look at the above two screenshots for the scenes. You can also change the resolution of the scene when switching.

Creating Alert Boxes

Lets create alert box in our applicaton.

• Alert Boxes are used for showing a warning dialog.
• Opening settings window and so on..

Alert box in JavaFX is simply another window similar to our original window of the application itself.

Create a new Class named AlertBox.java :

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.geometry.*;

public class AlertBox {

    public static void display(String title, String message) {
        Stage window = new Stage();

        //Block events to other windows
        window.initModality(Modality.APPLICATION_MODAL);
        window.setTitle(title);
        window.setMinWidth(250);

        Label label = new Label();
        label.setText(message);
        Button closeButton = new Button("Close this window");
        closeButton.setOnAction(e -> window.close());

        VBox layout = new VBox(10);
        layout.getChildren().addAll(label, closeButton);
        layout.setAlignment(Pos.CENTER);

        //Display window and wait for it to be closed before returning
        Scene scene = new Scene(layout);
        window.setScene(scene);
        window.showAndWait();
    }

}
1

This class can simply be used whenever and wherever you need an alertBox to be shown.
Lets show the alert Box in Main.java:
1
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

    Stage window;
    Button button;

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

    @Override
    public void start(Stage primaryStage) {
        window = primaryStage;
        window.setTitle("Tutorials Face");
        button = new Button("Click Me");

        button.setOnAction(e -> AlertBox.display("Title of Window", "Wow this alert box is awesome!"));

        StackPane layout = new StackPane();
        layout.getChildren().add(button);
        Scene scene = new Scene(layout, 300, 250);
        window.setScene(scene);
        window.show();
    }

}

We have simply called the static method defined in AlertBox.java to show a new window.

Look at the above screenshot how the alertBox is displayed as a new window.
The layout can always be made beautiful :p

We will see the remains topics in the next part.

9,957 total views, 8 views today

Today  we will use Java for developing cross-platform applications/softwares which can be run on Windows, Mac os, Linux etc.  You need to install Java Runtime Environment in the Operating System where you want to run your java based software application.

PreRequisite:

• Basic knowledge of Java Programming.
• Basic understanding of Object Oriented Programming.
• JDK8 installed on working Operating System. Download if not from here.
• Eclipse IDE

As you are already familiar with Java/ C++ Programming, you might have seen that those applications run in a console that looks like cmd / terminal etc. But now we will see how to develop an application which has a graphical user interface using Java.

All the programming goes same as the normal console app which you might have been already familiar with except for the GUI part. We will use JavaFX for integrating graphical UI in our java based software.

What is JavaFX?

JavaFX is a java library which provides APIs used for developing UI elements in a java application similar to Swing API. JavaFX is the latest library which has solved the problem of bad looking applications or say which has replaced the old windows 98 style look of java based softwares with a highly advanced client rich application’s look and feel. The apps developed using JavaFX can be given beautiful interface with as ease as building a website. It also supports CSS!  You can visit this for more information about JavaFX.

Table of Contents

• Creating A Simple Window
• Handle User Events
• Anonymous Inner Classes And Lambda Expressions
• Switching Scenes
• Creating Alert Boxes
• Communicating Between Windows
• GridPane
• Extract And Validate Input
• CheckBoxes
• ChoiceBox DropDown List
• ComboBox
• ListViews
• TreeView
• TableView
• TableView Adding And Deleting
• Menus
• CSS
• Properties
• Binding
• Fxml

Lets Begin..

Creating A Simple Window

We will be using eclipse IDE for this tutorial. So create a new Java Project in eclipse and name it anything.

Please note that in the JRE section of New Java Project Window, you have to set JAVA SE 8 or above as specified in the above screenshot.

Now go to the src folder of your project and create a new class named Main.Java with the following content :

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

    Stage window;
    Button button;

    public static void main(String[] args) {
        launch(args); // It calls start method defined bellow...
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        window = primaryStage;
        window.setTitle(" TutorialsFace - JavaFX");
        // Creating a simple UI button
        button = new Button("Click me");
        // StackPane is a type of layout which we will look at later..
        StackPane layout = new StackPane();
     
        //Adding the button to the layout
        layout.getChildren().add(button);

        // Create scene with resolution of 300x250 and add layout to it...
        Scene scene = new Scene(layout, 300, 250);

        // Add scene to the stage i.e to the window
        window.setScene(scene);
        window.show();
    }
}

Now right click on the Main.java and run as Java Application.

The Scene and Stage can be understood in the screenshot above.

So this is the very basic application with a Graphic User Interface which does nothing :p

We will see the rest tutorial in the next part.

28,696 total views, 27 views today