JavaFX — Overview with Hands-on
Build Rich Internet GUI Application Using JavaFX
Join the DZone community and get the full member experience.Join For Free
JavaFX is a Java library used to build Rich Internet Applications (RIA). It provides a set of graphics and media packages that enables developers to design, create, test, debug, and deploy rich client applications that operate consistently across diverse platforms.
JavaFX provides a rich graphical user interface. JavaFX has the structure and APIs specifically for animation, 2D and 3D geometry, charts, special effects, color gradients, graphical controls, and easy manipulation of media, including audio, video, and images.
2. JavaFX Key Features
- Cross-platform compatibility: JavaFX is available on the leading desktop operating systems (Windows, Linux, and Mac OS X).
- Java library: JavaFX is a Java library that consists of classes and interfaces that are written in native Java code.
- FXML: FXML is an XML-based declarative markup language to define the structure of the user interface of the JavaFX application.
- Swing interoperability: Existing Swing applications can be updated with JavaFX features like embedded web content and rich graphics media. We can create rich content a whole lot easier using JavaFX than with Swing.
- Built-in UI controls: JavaFX provides all the major UI controls required to develop a full-featured application.
- CSS-like Styling: JavaFX can be skinned with standard Web technologies such as CSS. It provides a CSS-like styling to improve the design of our application.
- Canvas API: JavaFX Canvas API enables drawing directly within an area of the JavaFX scene that consists of one graphical element.
- Multitouch Support: JavaFX provides support for multitouch operations, based on the capabilities of the underlying platform.
- Integrated Graphics library: JavaFX provides classes for 2D and 3D graphics.
- Graphics pipeline: JavaFX supports graphics based on the hardware-accelerated graphics rendering pipeline known as Prism. When used with a supported Graphic Card or GPU it offers smooth graphics. In case the system does not support a graphic card then prism defaults to the software rendering stack.
- Self-contained application deployment model: Self-contained application packages have all of the application resources and a private copy of the Java and JavaFX runtimes. They are distributed as native installable packages and provide the same installation and launch experience as native applications for that operating system.
3. JavaFX Application Structure
JavaFX uses the metaphor of a theater to model the graphics application.
- A stage represents the top-level container or window. It contains all the objects of a JavaFX application.
- It is defined by the
- The size of the stage can be specified by passing its dimensions (
- The stage is divided into content-area and decorations (title bar and borders).
- A scene represents the physical contents of a JavaFX application. It contains all the individual controls or components.
- It is defined by the
- An application can have more than one scene, but only one of the scenes can be displayed on the stage at any given time.
- The size of the scene can be specified by passing its dimensions (
width) along with the root node to its constructor.
- A scene graph is a tree-like data structure (hierarchical) representing the contents of a scene. All visual components (controls, layouts, etc.) are part of the scene graph.
- Scene graph components must be attached to a scene to be displayed, and that scene must be attached to a stage for the whole scene to be visible.
- A node is a visual/graphical object of a scene graph.
- Nodes of scene graph are defined by
- A node may include:
Geometrical or graphical objects: 2D, 3D
Containers or layout panes:
- Nodes are of the following types:
Root node: First node of the scene graph.
Branch/Parent node: Node with child nodes like —
Leaf Node − Node without child nodes like —
4. JavaFX Components
JavaFX comes with a large set of built-in GUI components, like buttons, text fields, tables, trees, menus, charts, and much more.
Some of the major components in JavaFX are:
- JavaFX controls are JavaFX components that provide some kind of control functionality inside a JavaFX application.
- For a control to be visible it must be attached to the scene graph of some scene object.
- Controls are usually nested inside some JavaFX layout component that manages the layout of controls relative to each other.
- Some of the examples of JavaFX controls are —
- JavaFX layouts are components that contain other components inside them. The layout component manages the layout of the components nested inside it.
- JavaFX layout components are also sometimes called parent components because they contain child components and because layout components are subclasses of the JavaFX class
- A layout component must be attached to the scene graph of some scene object to be visible.
- It is possible to nest layout components inside other layout components. This can be useful to achieve a specific layout.
- Some of the examples of JavaFX layouts are —
JavaFX comes with a set of built-in ready-to-use chart components to avoid coding charts from scratch every time you need a basic chart.
JavaFX contains features that make it easy to draw 2D/3D graphics on the screen.
JavaFX provides features that make it easy to play audio in JavaFX applications. This is typically useful in games or educational applications.
JavaFX contains features that make it easy to play video in JavaFX applications. This is typically useful in streaming applications, games, or educational applications.
JavaFX contains a WebView component that is capable of showing web pages using HTML and CSS. The JavaFX WebView component is based on WebKitHTML technology.
5. Build GUI Application Using JavaFX
Here, we are creating a simple JavaFX application as shown in the video. This application consists of a loading GIF, a loading text, a cross button control, and a background.
Let’s have a look at the source code of this JavaFX application:
Let’s understand the steps of building this JavaFX application:
- A JavaFX GUI program extends from
- It is the entry point of the application in JavaFX.
Define start method:
JavaFXSeederclass inherits the
Applicationclass and implements its abstract method
- In this method, we will write the entire code for the JavaFX graphics.
javafx.scene.Sceneby specifying the root of the scene graph, where the root is of type
- We can also pass two parameters of double type representing the
widthof the scene.
- We then set the
javafx.stage.Stageobject. Set the title for the stage using the method
setTitle(). Attach the scene to the stage using the
- Display the contents of the scene using the
primaryStageis a stage object which is passed to the start method of the scene class, as a parameter. The primary stage is created by the platform itself.
- We can also set the
height, taskbar icon, and
StageStyleof the stage.
- We can also set our application on top of other applications by invoking
setAlwaysOnTop()on the stage object.
- Here we use
javafx.scene.layout.StackPaneas top-level layout node, which layouts its children in a back-to-front stack.
- We can assign a unique ID and dimensions to this
- We can also add mouse-drag events on the outer layout using
- Set the position of the layout on the screen using
- The outer layout node has three children nodes, which is the
HBoxarranges its content nodes horizontally in a single row.
VBoxarranges its content nodes vertically in a single column.
- We can add nodes to a layout control with
getChildren().add()for a single node and
getChildren().addAll()for multiple nodes.
- JavaFX provides a huge set of controls (or components) in package
- Construct a
Buttoncontrol and place it in the top-right corner of the window. Attach a
Button, via method
- We can embed
javafx.scene.shape.Textinto a JavaFX scene by instantiating this class. We can set the font, color, position, etc. of the text.
- We can load an image in JavaFX by instantiating the class
javafx.scene.image.Image. After loading the image, we can set the view for the image by instantiating the
ImageViewclass and passing the image to its constructor.
- In the
main()method, we have to launch the application using the
- This method internally calls the
start()method of the
In this article, we talked about JavaFX and its tremendous capabilities. We learned about the major key features provided by JavaFX. We studied JavaFX application structure and how the scene, stage, scene graph, and nodes can be modeled into a graphics application. We read about a large set of built-in GUI components provided by JavaFX. Then we created a JavaFX application and studied its working.
From interpreted JavaFX to a full-blown GUI library, the growth of JavaFX is commendable.
Published at DZone with permission of Mansi Babbar. See the original article here.
Opinions expressed by DZone contributors are their own.