Powerful UI Capabilities With Node-Based Controls

From its very beginning, JavaFX technology relied on the underlying Java client technology as much as possible, thus initial versions of the JavaFX Script programming language provided UI controls by including wrappers to the Java platform's GUI components (called Swing). While these components still exist in the javafx.ext.swing package, they offer limited scene graph integration and exist only in the JavaFX desktop profile. To overcome these limitations, JavaFX SDK 1.2 introduces a new set of user-interface (UI) controls which were designed and implemented expressly for the JavaFX Script programming language and platform. These new UI controls are built using nodes in the scene graph, so they are able to take full advantage of the visually rich features of the JavaFX platform, as well as, be portable across profiles (including mobile).

The following application shows the UI controls that reside in the javafx.scene.control package. Look closely at them. Some of the components look like the usual UI elements, while other components are either animated or visually enhanced.

Figure 1: UI Controls

Press the Launch button to explore the application in action.

Note: If this JNLP application fails to run, and if you are on Mac OS 10.5 and using Java SE 5, try using Java SE 6 instead. Check your Java preferences in Applications > Utilities > Java > Preferences, or for the correct update see the System Requirements document.

New Components

The following components are available in the javafx.scene.control package:

• Button
• Label
• CheckBox
• ToggleButton
• RadioButton
• Hyperlink
• ProgressBar
• ProgressIndicator
• Slider
• ScrollBar
• ListView
• TextBox

While some controls are similar to the Swing components, other components are new: Hyperlink, ProgressBar, and ProgressIndicator. For more information about UI controls, see the JavaFX API Documentation. The following code fragment creates two progress bars, two progress indicators, and a button with an icon.

//Progress Bars

//The progress is bound to a slider's value
ProgressBar { progress: bind slider.value / slider.max }

//Indeterminate progress
ProgressBar { progress: -1 }

//ProgressIndicator
//The progress is bound to a slider's value
ProgressIndicator { progress: bind slider.value / slider.max }

//Indeterminate progress
ProgressIndicator { progress: -1 }


//Button
Button {graphic:ImageView{image: Image{url: "{__DIR__}dukewave.jpg"}}}

The progress variable set to -1 means an indeterminate state of progress. This state is often used when an application cannot calculate the particular remaining time of the operation.

Mobile Support

The javafx.scene.control components are available in the common profile, which means, unlike Swing components, they can be used in both desktop and mobile applications. This is how the progress bars look when run on the touch phone emulator.

Figure 2: Progress Bars Run on the Mobile Emulator

With these cross-platform UI controls you can create fully functional applications by using the whole set of JavaFX capabilities. The only limitation that remains is the unavailability of visual effects in the javafx.scene.effect. package. Reflection, shadows, lighting, and other effects are still available only for desktop applications.

Enhanced Rendering

Because UI components from the javafx.scene.control package are constructed from actual nodes in the scene graph (rather than Swing component wrappers) they are able to integrate more cleanly with scene graph rendering and animation.

Consider the simple task of rotating a button by using the indefinite timeline.

...

var angle: Number;
Timeline {
  repeatCount: Timeline.INDEFINITE
  autoReverse: false
  keyFrames: [
    at (0s) {angle => 0.0},
    at (4s) {angle => 360.0}
  ]
}.play();

...

Button {
           text: "OK"
           translateY: 10
           strong: true
           font: Font{size: 10 name: "Tahoma"}
           rotate: bind angle
}

The rotate instance variable of the button is bound to the angle variable, which changes from 0 to 360.

Try It. Try other effects available in the JavaFX API, such as scaling, affine transformations, or shear transformations, and see how well-suited the node-based controls are to using them.

Advanced Layout

The initial releases of JavaFX SDK included very limited APIs for laying out nodes in the scene graph (the HBox and VBox classes). For the 1.2 release, the layout container classes have been expanded to include the following:

• VBox - A single vertical column
• HBox - A single horizontal row
• Flow - Either a horizontal or vertical flow, wrapping at width and height boundaries
• Tile - A grid of uniform-sized tiles
• Stack - A back-to-front stack
• Panel - A container that can be used to create a custom layout

These Container classes differ from the Group class in that they can be explicitly sized to a width and height and will adjust the layout of their children objects to fit within those bounds. The Container classes strive to set the size of any resizable children object to their preferred size, which has important implications when placing the UI controls inside containers. Each UI control class from the javafx.scene.control package has its own notion of its preferred size based on its content and its skin. Hence, if the application explicitly sets the width or height of a UI control and then places it inside a container, then the container will resize the control to its preferred size, losing the application's width or height settings. Therefore, the following construct does not affect the width of the button:

HBox{
 content:  
  Button {   
        width: 150
        graphic:  ImageView{image: Image{url: "{__DIR__}dukewave.jpg"}}
  }             
}

The correct way to override the preferred size of a UI control is to use the layoutInfo variable (available on all nodes). The following code will ensure that the HBox resizes the button to the size preferred by the application, rather than the button's internal notion of its preferred size:

HBox{
 content:  
  Button {   
        layoutInfo: LayoutInfo { width: 150 }
        graphic:  ImageView{image: Image{url: "{__DIR__}dukewave.jpg"}}
  }             
}

Try It.Try to arrange a set of UI controls by using the Tile layout specifying the number of rows and columns.

Charts

One of the most prominent features in JavaFX UI elements is the newly added javafx.scene.chart package. With this package you can create the following custom charts:

• Area chart
• Bar chart
• Bubble chart
• Line chart
• Pie chart
• Scatter chart

import javafx.scene.Scene;
import javafx.scene.layout.LayoutInfo;
import javafx.scene.layout.HBox;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.part.CategoryAxis;
import javafx.scene.chart.part.NumberAxis;
import javafx.stage.Stage;

def values = [
 BarChart.Data { value:  14   category: "Dice" }
 BarChart.Data { value:  19   category: "Bullet Chart" }
 BarChart.Data { value:  14   category: "MIDP to RIA" }
 BarChart.Data { value: 213   category: "Media Player" }
 BarChart.Data { value: 149   category: "Bar Charts" }
 BarChart.Data { value: 306   category: "Line Graph" }
 BarChart.Data { value: 167   category: "JavaFX/JavaScript" }
];

Stage {
 title: "Bar Chart"
 scene: Scene {
   width: 580
   height: 420
   content:
     HBox{
     content:[
         BarChart {
             title: "JavaFX Docs Statistics: Clicks"
             layoutInfo: LayoutInfo {width: 580}
             data: BarChart.Series {
                      name: "Clicks"
                      data: values
             }
             categoryAxis: CategoryAxis {
                     categories: for (value in values) value.category
             }
             valueAxis: NumberAxis {
                     lowerBound: 0
                     upperBound: 340
                     tickUnit: 20
             }
        }
     ]
   }
 }
}

The previous code includes the following:

• A series of data that uses the Series class, in this case, the BarChart.Series class
• A chart created by using the BarChart class
• An HBox container to lay out the chart
• An application scene to visualize the container with the chart

When you run this application, it produces the following window.

Figure 3: Bar Chart

Try It. Create a pie chart to display the total numbers for dzone statistics by using the following data: View = 6050, Clicks = 1230 Votes Up = 54. For more information about the charts, see the JavaFX API Documentation.