JavaFX is a set of graphics and a media package that enables developers to design, create, test, debug, and deploy rich client applications that operate consistently across diverse platforms, in one bundle, without the need for many separate libraries, frameworks, and APIs to achieve the same goal. These separate libraries include media, UI controls, WebView, 3D, and 2D APIs.

The original GUI framework in Java was the AWT ( Abstract Window Toolkit). Because of its several limitations, it was soon followed by Swing, which offered a far superior approach in creating GUIs. Swing was so successful that it has remained the primary Java GUI framework for nearly two decades. However, Swing was designed when the enterprise application dominated software development. Today, consumer applications and especially mobile apps, are taking over the scene, and this kind of applications often demand a GUI that is more visual and that it has more eye appealing visual characteristics. Also, no matter the type of application, the trend is toward more exciting visual effects. To better handle this types of GUIs, a new approach was needed, and this lead to the creation of JavaFX. JavaFX is Javas next-generation client platform and GUI framework, that is designed as a replacement for Swing. JavaFX provides a powerful, streamlined, flexible framework that simplifies the creation of modern, visually exciting GUIs.

JavaFX Basic Concepts

In general, The JavaFX framework has all of the good features of Swing. For example, JavaFX is lightweight. It can support an MVC architecture. Much if what you already know about creating GUIs using Swing is conceptually applicable to JavaFX.

Not everything is similar between JavaFX and Swing by the way. From a programmers point of view, the first differences you notice between JavaFX and Swing are the organization of the framework and the relationship of the main components. Simply put, JavaFX offers a more streamlined, easier-to-use, updated approach. JavaFX greatly simplifies the rendering of objects because it handles repainting automatically. It is no longer necessary for your program to handle this task manually. Simply put JavaFX facilitates a more visually dynamic approach to GUIs.

JavaFX features

The following features are included in JavaFX 8 and later releases as per JavaFX’s official documentation:

  1. Java APIs: JavaFX is a Java library that consists of classes and interfaces that are written in Java code.

  2. FXML and Scene Builder: This is an XML-based declarative markup language for constructing a JavaFX application user interface. You can code in FXML or use JavaFX Scene Builder to interactively design the GUI. Scene Builder generates FXML markup that can be ported to an IDE, where you can add the business logic. Moreover, the FXML file that is generated can be used directly inside the JavaFX application.

  3. WebView: This is a web component that uses WebKit, an HTML render engine technology, to make it possible to embed web pages within a JavaFX application. JavaScript running in WebView can call Java APIs and vice-versa.

  4. Swing/SWT interoperability: The existing Swing and SWT applications can benefit from JavaFX features such as rich graphics, media playback, and embedded web content.

  5. Built-in UI controls and CSS: JavaFX provides all the major UI controls, and some extra uncommon controls like charts, pagination, and accordion that are required to develop a full-featured application. Components can be skinned with standard web technologies such as CSS.

  6. 3D graphics features: Support for the 3D graphics library is included.

  7. Canvas API: You can draw directly inside a JavaFX scene area using the Canvas API, which consists of one graphical element (node).

  8. Multi-touch support: Multi-touch operations are supported based on the capabilities of the underlying platform.

  9. Hardware-accelerated graphics pipeline: JavaFX graphics are based on the graphics-rendering pipeline, Prism. The Prism engine smoothly and quickly renders JavaFX graphics when used with a supported graphics card or graphics processing unit (GPU). If a system does not feature one of them, then Prism defaults to the software-rendering stack.

  10. High-performance media engine: This engine provides a stable, low-latency media framework that is based on the GStreamer multimedia framework. The playback of web multimedia content is supported with the media pipeline.

  11. Self-contained deployment model: Self-contained application packages have all of the application resources and a private copy of the Java and JavaFX run-times.

The JavaFX Packages

The JavaFX elements are contained in packages that begin with the javafx prefix. There are more than 30 packages in its API library. Here are four examples: javafx.aplication, javafx.stage, javafx.scene and javafx.scene.layout. You will see a simple use of these packages in the „Hello World“ App we will be making.

JavaFX offers a wide array of functionality. Beginning with JDK 9, the JavaFX packages are organized into modules, such as javafx.base, javafx.graphics and javafx.controls.

Hello world application (HelloJavaFX.java)

Here is the code of the basic Hello world application (HelloJavaFX.java):

How it works

Here are the important things to know about the basic structure of a JavaFX application: The main class for a JavaFX application should extend the javafx.application.Application class. The start() method is the main entry point for all JavaFX applications.

A JavaFX application defines the user interface container by means of a stage and a scene. Loosely speaking, a stage defines a space and a scene defines what goes on that space. Or, put another way, a stage is a container for scenes and a scene is a container for the items that comprise the scene. As a result, all JavaFX applications have at least one stage and one scene. This elements are encapsulated in the JavaFX API by the Stage and Scene classes. To create a JavaFX application, you will at minimum, add at least one Scene object to a Stage.

Stage is a top-level container. All JavaFX applications automatically have access to one Stage, called the primary stage. The primary stage is supplied by the run-time system when a JavaFX application is started. Although you can create other stages, for many applications, the primary stage will be the only one required. As mentioned, Scene is a container for the items that comprise the scene. These can consist of controls, such as push buttons and check boxes, text and graphics. To create a scene, you will add those elements to an instance of Scene. The following code snippet creates a stage and scene and makes the scene visible in a given pixel size – new Scene(root, 300, 250).

In JavaFX, the content of the scene is represented as a hierarchical scene graph of nodes. What does that mean? The individual elements of a scene are called nodes. For example a push button is a node. However, nodes can also consist of groups of nodes. Furthermore a node can have a child node. In this case a node with a child is called a parent node or branch node. Nodes without children are terminal nodes and are called leaves. The collection of all nodes in a scene creates what is referred to as a scene graph, which comprises a tree. There is one special type of node in the scene graph, called the root node. This is the top-level node and is the only node in the scene graph that does not have a parent. Thus, with the exception of the root node, all other nodes have parents, and all nodes either directly or indirectly descend from the root node.

The base class for all nodes is Node. There are several other classes that are, either directly or indirectly, sub-classes of Node. These include Parent, Group, Region and Control, to name a few.

In this example, the root node is a VBox layout object, which is a re-sizable layout node. This means that the root node’s size tracks the scene’s size and changes when a user resizes the stage. The VBox is used here as the container that arranges its content nodes vertically in a single column with multiple rows. We have added the button btn control to the first row in the column, then the text message control to the second row on the same column, with vertical space of 10 pixels, as in the following code snippet:

VBox root = new VBox(10,btn,message);

root.setAlignment(CENTER);

We set the button control with text, plus an event handler to set the message text control to Hello World! JavaFX style when the button is clicked on. We are using a Lambda expression for event handling.

Source and also recommended material for further reading:

  • JavaFX Essentials by Mohamed Taman (2015)
  • Java. The Complete Reference. Tenth Edition by Herbert Schildt –  2017

Also for beginners I would recommend this this video lessons on YouTube by thenewboston

 

Spread the love

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *