JavaFX: Building rich client applications using Java

A Java library called JavaFX is used to create Rich Internet Applications (RIA). Developers may design, build, test, debug, and deploy rich client apps that work reliably across several platforms because of the graphics and media packages they offer.

JavaFX provides a solid graphical user interface. The framework and APIs of JavaFX support animation, 2D and 3D geometry, charts, special effects, color gradients, graphical controls, and basic media manipulation. Deep dive into JavaFX concepts with best practices by enrolling in our Java Training in Chennai at SLA Institute.

Key Features of JavaFX

• Cross-platform compatibility: The top desktop operating systems include JavaFX (Windows, Linux, and Mac OS X).
• Java library: The classes and interfaces in the JavaFX library were created using native Java code.
• FXML: FXML is an XML-based declarative markup language used to specify the layout of the JavaFX application’s user interface.
• WebView: WebView is a web component that incorporates HTML content into JavaFX applications using WebKitHTML technology. Both Java APIs and JavaScript running in WebView can call each other.
• Interoperability with Swing: JavaFX capabilities like embedded web content and rich graphical media can be added to already-existing Swing applications. JavaFX makes it simpler to develop rich content than Swing does.
• Integrated UI controls: JavaFX comes with all the key UI controls needed to create a fully functional application.
• Web Tools: JavaFX can be styled similarly to CSS using common Web tools. It offers a style similar to CSS to enhance the appearance of our application.
• JavaFX API for canvas Drawing directly within a JavaFX scene region with just one graphical element is possible thanks to Canvas API.
• Support for Multitouch Operation: Depending on the capabilities of the underlying platform, JavaFX offers support for multitouch operations.
• A 2D and 3D graphics library integrated into JavaFX is available.
• GPU: The hardware-accelerated graphics rendering pipeline known as Prism is supported by JavaFX for graphics. It provides fluid graphics when utilized with a compatible graphics card or GPU. Prism falls back to the software rendering stack if the system is unable to support a graphic card.

Self-contained application deployment model: Self-contained application packages include a private copy of the Java and JavaFX runtimes in addition to all of the application’s resources. They are made available as natively installable packages and offer the same installation and launch processes as the operating system’s native programs.

Application Structure of JavaFX

JavaFX models the graphics application using the metaphor of a theater.

Stage

The highest-level container or window is represented by a stage. It includes all of a JavaFX application’s objects. The JavaFX.stage defines it.

Stage class 

By sending the stage’s dimensions, the size of the stage can be determined (height and width).

Stage content and decorations are separated (title bar and borders).

Scene

The tangible components of a JavaFX application are represented by scenes. Each control or component is present.

The JavaFX.scene establishes its parameters.

scene class

There may be multiple scenes in an application, but only one scene can ever be seen on stage at once.

By including its measurements (height and width) in addition to the root node in its function Object() { [native code] }, the size of the scene may be determined.

Scene Graph

A scene graph is a tree-like (hierarchical) data structure that represents a scene’s elements. Controls, layouts, and other visual elements are all included in the scene graph.

To be exhibited, scene graph components need to be attached to a scene, and that scene needs to be attached to a stage such that the entire scene is visible.

Nodes

A node is an illustrative or graphic component of a scene graph.

The JavaFX.scene file defines the nodes of the scene graph.

Node class

A node could consist of:

pictorial or geometric objects: Button, CheckBox, ChoiceBox, TextArea, and other 2D and 3D UI elements.

Panes that serve as containers or layouts: FlowPane, GridPane, and so forth.

Audio, video, and image objects are media elements.

The types of nodes include:

The scene graph’s root node is the first node.

The node that serves as a branch or parent and has child nodes such as Group, Region, StackPane, etc.

Leaf nodes, such as Rectangle, Ellipse, Box, ImageView, MediaView, etc., are nodes without child nodes.

Components for JavaFX

A wide variety of built-in GUI elements, including buttons, text fields, tables, trees, menus, charts, and much more, are included with JavaFX. Therewith, Java becomes the sought-after skill for creating data science applications. 

The following are some of the key elements of JavaFX:

Controls

They are JavaFX components that offer a certain type of control capability inside a JavaFX application.

A control needs to be associated with some scene object’s scene graph to be displayed.

Controls are typically nestled inside a JavaFX layout component that regulates how the controls are laid out concerning one another.

• Button 
• CheckBox
• Label 
• Menu 
• RadioButton 
• TableView 
• TextField 
• TreeView, etc. 

are a few examples of JavaFX controls.

Layouts In JavaFX

Layouts are components that house further components. The layout component in Java controls how the components it contains are laid out.

Because they include child components and are subclasses of the JavaFX class javafx.scene, JavaFX layout components are also frequently referred to as parent components.

Parent.

To be visible, a layout component needs to be connected to the scene graph of some scene object.

Layout elements can be nested inside of other layout elements. This might help you create a particular layout.

JavaFX layouts include Group, Pane, HBox, VBox, BorderPane, StackPane, GridPane, etc. as examples.

Charts

To save you from having to code a simple chart from scratch every time you need one, Charts JavaFX includes a set of built-in, ready-to-use chart components.

Graphics, 2D/3D

JavaFX has tools that make drawing 2D and 3D images on the screen simple.

Audio

The tools that JavaFX offers make it simple to play audio in JavaFX applications. Typically, games or instructional applications can benefit from this.

Video

Features in JavaFX make it simple to play videos in JavaFX applications. This is frequently helpful in gaming, educational, or streaming applications.

WebView

A WebView component in JavaFX may display web pages created with HTML and CSS. WebKitHTML is the foundation of the JavaFX WebView component.

Create a GUI program for JavaFX usage

As demonstrated in the movie, we are making a straightforward JavaFX application here. A loading GIF, a loading text, a cross button control, and a background make up this program. Check out basic Java programs and work out on your own.

Example source code for JavaFX application

package com.knoldus.javafx;

import javafx.application.Application;

import javafx.event.ActionEvent;

import javafx.event.EventHandler;

import javafx.geometry.Insets;

import javafx.geometry.Pos;

import javafx.scene.Group;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.image.Image;

import javafx.scene.image.ImageView;

import javafx.scene.input.MouseEvent;

import javafx.scene.layout.*;

import javafx.scene.paint.Color;

import javafx.scene.text.Font;

import javafx.scene.text.FontWeight;

import javafx.scene.text.Text;

import javafx.scene.text.TextAlignment;

import javafx.stage.Stage;

import javafx.stage.StageStyle;

public class JavaFXSeeder extends Application {

    public final static String ID = “seeder”;

    public static final String SEEDER_CONTAINER_ID = “seeder-container-id”;

    public final static String SEEDER_BACKGROUND_ID = “seeder-background-id”;

    public final static String SEEDER_CONTENT_ID = “seeder-content-id”;

    public final static String SEEDER_CONTROLS_ID = “seeder-controls-id”;

    public final static String SEEDER_LOGO_ID = “seeder-logo-id”;

    public final static String SEEDER_STATUS_ID = “seeder-status-id”;

    public final static String SEEDER_CLOSE_BUTTON_ID = “seeder-close-button-id”;

    public final static String IMAGES = “file:src/main/resources/img”;

    public final static String SEEDER_BACKGROUND = IMAGES + “/seeder-background.jpg”;

    public final static String SEEDER_LOGO = IMAGES + “/seeder-logo.gif”;

    public final static String SEEDER_ICON = IMAGES + “/seeder-icon.jpg”;

    public final static String SEEDER_CLOSE_BUTTON = IMAGES + “/seeder-close-button.png”;

    public final static String SEEDER_CLOSE_BUTTON_HOVERED = IMAGES + “/seeder-close-button-hovered.png”;

    public final static String SEEDER_STAGE_TITLE = “Loader”;

    public final static String SEEDER_STATUS = “Loading”;

    public final static double SEEDER_CLOSE_BUTTON_SIZE = 24;

    private static final double SEEDER_WIDTH = 768;

    private static final double SEEDER_HEIGHT = 464;

    private static final double SEEDER_LOGO_SIZE = 200;

    private static double xOffset = 0;

    private static double yOffset = 0;

    private final double SEEDER_STATUS_FONT_SIZE = 24;

    private final String SEEDER_STATUS_FONT_FAMILY = “Roboto Medium”;

    private final Color SEEDER_STATUS_COLOR = Color.rgb(25, 25, 25, 1);

    private final Font SEEDER_STATUS_FONT = Font.font(SEEDER_STATUS_FONT_FAMILY, FontWeight.BOLD, SEEDER_STATUS_FONT_SIZE);

    private final StackPane m_seederContainer = new StackPane();

    private final VBox m_seederContent = new VBox();

    private final HBox m_seederControls = new HBox();

    private final ImageView m_seederBackground = new ImageView();

    private final ImageView m_seederLogo = new ImageView();

    private final ImageView m_seederCloseButtonImage = new ImageView();

    private final Text m_seederStatus = new Text();

    private final Button m_seederCloseButton = new Button();

    private final Group m_root = new Group();

    private final Stage m_stage = new Stage();

    private Image m_image;

    public static void main(String[] args) {

        launch(args);

    }

    @Override

    public void start(Stage stage) {

        initialize();

        showSeederWindow();

    }

    private void initialize() {

        Scene scene = new Scene(m_root, SEEDER_WIDTH, SEEDER_HEIGHT);

        m_stage.setScene(scene);

        m_stage.setTitle(JavaFXSeeder.SEEDER_STAGE_TITLE);

        m_stage.setHeight(SEEDER_HEIGHT);

        m_stage.setWidth(SEEDER_WIDTH);

        m_stage.initStyle(StageStyle.TRANSPARENT);

        m_stage.getIcons().addAll(new Image(SEEDER_ICON));

        m_stage.setOnCloseRequest(windowEvent ->

        {

            windowEvent.consume();

            handleCloseEvent();

        });

        m_root.setId(ID);

        StackPane.setAlignment(m_seederContainer, Pos.CENTER);

        m_seederContainer.setId(SEEDER_CONTAINER_ID);

        m_seederContainer.setMaxSize(SEEDER_WIDTH, SEEDER_HEIGHT);

        initializeSeederBackground();

        initializeSeederContent();

        initializeSeederControls();

        m_seederContainer.getChildren().addAll(m_seederBackground, m_seederContent, m_seederControls);

        m_root.getChildren().add(m_seederContainer);

        dragSeeder();

    }

    public void initializeSeederBackground() {

        m_image = new Image(SEEDER_BACKGROUND);

        m_seederBackground.setId(SEEDER_BACKGROUND_ID);

        m_seederBackground.setImage(m_image);

        m_seederBackground.setFitWidth(SEEDER_WIDTH);

        m_seederBackground.setFitHeight(SEEDER_HEIGHT);

    }

    public void initializeSeederContent() {

        initializeSeederLogo();

        initializeSeederStatus();

        m_seederContent.getChildren().addAll(m_seederLogo, m_seederStatus);

        m_seederContent.setId(SEEDER_CONTENT_ID);

        m_seederContent.setSpacing(10);

        m_seederContent.setAlignment(Pos.CENTER);

    }

    public void initializeSeederLogo() {

        m_image = new Image(SEEDER_LOGO);

        m_seederLogo.setId(SEEDER_LOGO_ID);

        m_seederLogo.setImage(m_image);

        m_seederLogo.setFitWidth(SEEDER_LOGO_SIZE);

        m_seederLogo.setFitHeight(SEEDER_LOGO_SIZE);

    }

    public void initializeSeederStatus() {

        m_seederStatus.setText(SEEDER_STATUS);

        m_seederStatus.setId(SEEDER_STATUS_ID);

        m_seederStatus.setFill(SEEDER_STATUS_COLOR);

        m_seederStatus.setFont(SEEDER_STATUS_FONT);

        m_seederStatus.setTextAlignment(TextAlignment.CENTER);

    }

    public void initializeSeederControls() {

        initializeSeederCloseButton();

        m_seederControls.getChildren().addAll(m_seederCloseButton);

        m_seederControls.setId(SEEDER_CONTROLS_ID);

        m_seederControls.setAlignment(Pos.TOP_RIGHT);

    }

    public void initializeSeederCloseButton() {

        m_image = new Image(SEEDER_CLOSE_BUTTON);

        m_seederCloseButtonImage.setImage(m_image);

        m_seederCloseButtonImage.setFitWidth(SEEDER_CLOSE_BUTTON_SIZE);

        m_seederCloseButtonImage.setFitHeight(SEEDER_CLOSE_BUTTON_SIZE);

        m_seederCloseButton.setId(SEEDER_CLOSE_BUTTON_ID);

        m_seederCloseButton.setGraphic(m_seederCloseButtonImage);

        m_seederCloseButton.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));

        m_seederCloseButton.setOnAction(handleCloseEvent());

        m_seederCloseButton.addEventHandler(MouseEvent.ANY, seederCloseButtonMouseEvent());

    }

    private EventHandler seederCloseButtonMouseEvent() {

        return (EventHandler) event ->

        {

            if (event.getEventType() == MouseEvent.MOUSE_ENTERED) {

                m_image = new Image(SEEDER_CLOSE_BUTTON_HOVERED);

                m_seederCloseButtonImage.setImage(m_image);

            } else if (event.getEventType() == MouseEvent.MOUSE_EXITED) {

                m_image = new Image(SEEDER_CLOSE_BUTTON);

                m_seederCloseButtonImage.setImage(m_image);

            }

        };

    }

    public void showSeederWindow() {

        m_stage.show();

        m_stage.toFront();

        m_stage.setAlwaysOnTop(true);

    }

    private EventHandler handleCloseEvent() {

        return event -> System.exit(0);

    }

    private void dragSeeder() {

        m_seederContainer.setOnMousePressed(event ->

        {

            xOffset = event.getSceneX();

            yOffset = event.getSceneY();

        });

        m_seederContainer.setOnMouseDragged(event ->

        {

            m_stage.setX(event.getScreenX() – xOffset);

            m_stage.setY(event.getScreenY() – yOffset);

        });

    }

}

Let’s examine the procedures for making this JavaFX application:

Set a point of entry:

• An extension of javafx.application is a javafx.application.Application.
• It serves as the JavaFX application’s entry point.

Describe the start method:

• The JavaFXSeeder class implements the start() abstract method of the Application class.
• We will create the full JavaFX graphics code using this way.

Set scene:

• Create javafx.scene.Scene to set the scene. Scene by mentioning the scene graph’s root, where the root is of the javafx.scene.Group.
• Moreover, we can pass two double-type parameters that represent the scene’s height and width.

Set stage:

• Next, we set the javafx.stage.Stage element. Set the stage’s title using the setTitle() method. Use the setScene() function to attach the scene to the stage.
• Use the show() method to display the scene’s contents.
• The scene class’s start method receives the stage object primaryStage as an argument. The platform itself constructs the main stage.
• The stage’s width, height, taskbar icon, and StageStyle can all be customized.
• By calling setAlwaysOnTop() on the stage object, we can also put our application on top of other applications.

Set Outer-Layout

• Here, JavaFX.scene.layout.StackPane serves as the top-level layout node and arranges its children back-to-front.
• We can give this StackPane a special ID and dimensions.
• By using the setOnMousePressed() and setOnMouseDragged() event handlers, we can additionally add mouse-drag events to the outside layout.
• With setAlignment(), position the layout on the screen.

Set inner-layout: 

• The Image, javafx.scene.layout.HBox, and javafx.scene.layout.VBox nodes are the three child nodes of the outer layout node.
• HBox distributes its content nodes horizontally in a single row. VBox’s content nodes are placed in a single column vertically.
• With getChildren(), we may add() nodes to a layout control.
• add() and getChildren() for a single node.
• For numerous nodes, use addAll().

Set controls: 

• The package javafx.scene.control of JavaFX has a considerable number of controls (or components).
• Build a button control and set it in the window’s upper right corner. By using the setOnAction() function, bind a javafx.event.EventHandler<ActionEvent> to the Button.
• The JavaFX.scene.shape can be embedded.
• By launching this class, text can be inserted into a JavaFX scene. The text’s font, color, position, etc., can all be customized.
• By creating an instance of the javafx.scene.image.Image class, we may load an image in JavaFX.
• Image. By creating an instance of the ImageView class and sending the picture to its function Object() { [native code] } once the image has been loaded, we may set the image’s view.

Launch the application: 

• Using the launch() method, the application must be launched in the main() method.
• Internally, this method invokes the Application class’s start() method.

Quick Recap

We discussed JavaFX and its amazing potential in this essay. We were aware of JavaFX’s main selling points. We looked at the JavaFX application structure and how a graphics application may be modeled using the scene, stage, scene graph, and nodes. We learned that JavaFX offers a substantial number of integrated GUI components. Next, we developed a JavaFX application and investigated how it operated. Get top niche JavaFX skills at SLA, the Best Java Training Institute in Chennai.