Lesson 1: Quick JavaFX GUI Overview

By Alla Redko

Print-friendly Version    Download tutorial

The JavaFX API enables developers to create UIs that work seamlessly across different devices. The common profile of the JavaFX API includes classes that function on both the desktop and mobile devices. However, you can use additional classes and packages from the desktop profile to take advantage of specific functionality that can enhance desktop applications. The JavaFX SDK contains the variants of the JavaFX Mobile Emulator available on Windows: a mobile phone, a touch phone, and a QWERTY phone simulations. Use the emulator to see how your applications will look on mobile devices. Refer to the SDK Readme file (<SDK-install-directory>/README.html) for more information on the mobile emulator.

• Common Profile
• Desktop Profile

Common Profile

Apply controls that reside in the javafx.scene.control package to create standard elements of the user interface . These controls can be used both for mobile and desktop applications, and leverage visually attractive features of JavaFX technology. Find the complete code of the example in the UIControls.fx file. The screen capture shows the application when run on the Touch Phone emulator.

Figure 1: User Interface Components

UI components are used in the examples from the following lessons: Applying Data Binding to UI Objects and Laying Out GUI Elements.

Prefabricated graphical charts is yet another beneficial functionality of the JavaFX SDK available in the javafx.scene.chart package. The following types of charts are currently supported: area chart, bar chart, bubble, chart, line chart, pie chart, and scatter chart. Chart might contain one or several series of data. The following screens shows different use cases of presenting data in the form of graphical charts.

Figure 2: Area Chart

Figure 3: Bar Chart

Figure 4: Bubble Chart

Figure 5: Line Chart

Figure 6: Pie Chart

Figure 7: Scatter Chart

You can find the source code of these applications in the corresponding files: areaChart.fx, barChart.fx, bubbleChart.fx, lineChart.fx, pieChart.fx, and scatterChart.fx.

The following window is displayed when you run the application code provided in the colors.fx file. This colors application illustrates the color patterns for all constants of the javafx.scene.paint.Color class. Click a color pattern to fill the scene with the corresponding color, such as Color.FORESTGREEN, Color.YELLOW, and Color.YELLOWGREEN.

Figure 8: Color Patterns

Color schemes are employed in the following lessons: Presenting UI Objects in a Graphical Scene, Creating Graphical Objects, Applying Data Binding to UI Objects, Laying Out GUI Elements, Creating Animated Objects, and Bringing Interactivity to GUI Elements.

This screen capture shows basic geometric primitives and shapes you can create using the javafx.scene.shape package.

Figure 9: Basic shapes

Find the complete code of this application in the shapes.fx file. Note that the text captions on the screen capture are not part of the example code.

This application illustrates the basic fill methods available in the javafx.scene.paint package. You can create various filling patterns for the scene and shapes.

Figure 10: Basic filling methods

Find the complete code of this application in the fill.fx file. Note that the text captions on the screen capture are not part of the example code. Geometric shapes and different fill styles are discussed in the following lessons: Using Declarative Syntax, Presenting UI Objects in a Graphical Scene, Creating Graphical Objects, Applying Data Binding to UI Objects, Laying Out GUI Elements, Creating Animated Objects, and Bringing Interactivity to GUI Elements.

When constructing geometric figures you can use different methods to join and end subpaths. The following screen capture shows the basic caps and joins available in the javafx.scene.shape package.

Figure 11: Line Cap and Join Styles

Find the complete code of this application in the line.fx file. Note that the text captions on the screen capture are not part of the example code.

The following window is displayed when you run the application code provided in the text.fx file. This text application displays samples of different formatting styles applied to the same text string.

Figure 12: Text samples

Using text components is discussed in the following lessons: Presenting UI Objects in a Graphical Scene and Laying Out GUI Elements.

The following screen capture demonstrates the basic transformations that can be performed for the graphics, images, or text in JavaFX applications.

Figure 13: Transformations

Find the complete code of this example in the transform.fx file. Transformations are applied to the demo in Presenting UI Objects in a Graphical Scene and Creating Animated Objects.

The following screen capture shows methods of laying out UI elements using the javafx.scene.layout package.

Figure 14: Horizontal Layout

Figure 15: Vertical Layout

Find the complete code of these examples in the hbox.fx and vbox.fx files. Find the detailed description of the layout mechanism in Laying Out GUI Elements.

Desktop Profile

The following window is displayed when you run the compiled code in the effects.fx file. This window shows effects that can be applied to the JavaFX UI elements. Note that the text captions on the screen capture are not part of the example code.

Figure 16: Visual effects

Visual effects are employed in the demos of the following lessons: Creating Graphical Objects, Creating Animated Objects, and Bringing Interactivity to GUI Elements.

The following example introduces different views of the cursor you can apply to any UI element in JavaFX. Compile and run the source code in the cursor.fx file, then move the mouse cursor from one graphical object to another to explore various cursor views. Note that the text captions on the screen capture are not part of the example code.

Figure 17: Cursor Styles

Find more information about how to apply the specific cursor style to a graphical object in Bringing Interactivity to GUI Elements.

This lesson briefly introduced the basic GUI features available through the JavaFX SDK API. Refer to the API documentation for more details about the packages and classes used in the examples. Proceed with the next lessons of the tutorial to explore the JavaFX SDK capabilities in depth.