FX

In this tech tip you will learn a few techniques with the JavaFX 1.2 SDK to enhance the user experience with the UI.

The application in this tech tip presents UI controls in an application similar to the one presented in Powerful UI Capabilities With Node-Based Controls, but it contains the following enhancements:

• There is a custom, semi-transparent window title box
• The window has a scroll bar
• The scene includes the ListView control.

Figure 1: UI Controls

This tech tip will show you how to create the scrolling bar and the semi-transparent window title box.

A Custom Class to Enable Scrolling

The source code in ScrollPane.fx contains a custom ScrollPane class, which supports a mouse wheel. This custom class provides a resizable panel with vertical and horizontal scrollbars. The size of the panel is bound to the size of the application window. The values of the boundsInParent variable defined in the embedded Node object are compared to the panel size in order to determine whether scrollbars should be visible.

Enhancing the Look and Functionality of Application Windows

The application framework, implemented in the custom Application class in Application.fx, creates the application window by using semitransparent custom windows, thus avoiding the system look-and-feel limitations. Additionally, the application framework performs some specific actions required for each model of application deployment. These actions include enabling window resize, enabling full-screen mode, and dragging the applet from a browser. All of the possible actions are implemented in the Application class. The application not only looks and works identically on mobile devices and in the full-screen mode, but it also enables dragging the applet from a browser without pressing the Alt key. The Application class also provides custom window controls and varies the header's size depending on the platform where the application is run.

Once the Application class is defined, the custom Controls class, the main class of the application, consists of the following simple code.

Application {
  title: "JavaFX Controls"
  header: ImageView { ... }
  background: LinearGradient { ... }
  content: ScrollPane {
    background: Color.WHITE
    border: 10
    content: ...
  }
}

To modify the color scheme of the application, set the alternative background value for the Application object. The following figure shows the green theme of the application window.

Figure 2: Alternative Color Scheme of the Application Window

Try It

Modify the Application class so that the custom window buttons are rectangular, not circular. For more information, see the JavaFX API Documentation.

Related Links

• API: JavaFX 1.2 API documentation
• Tutorial: Quick JavaFX GUI Overview
• Article: Powerful UI Capabilities With Node-Based Controls

We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.