So the next version of JavaFX has been released. I developed an example that shows all the node-based UI controls that had been added to the API to replace the controls based on the Swing library. Note, that new UI controls are available on all platforms including mobile.

The following set of the controls is included in the current API:
TextBox: A control which displays and accepts input of text.
Button: A simple command button control.
ToggleButton: A control that possesses the ability to be selected.
RadioButton: A kind of a toggle button that has another appearance.
CheckBox: A tri-state selection control with a tick mark when checked.
Hyperlink: An HTML like text label that responds to rollovers and clicks.
Slider: A control that enables selecting a value by sliding a knob.
ProgressBar: A component used to show the progress of a task.
ProgressIndicator: A component that displays the progress in a form of a pie chart.
ListView: A simple list of items that can be editable.
ScrollBar: An element that enables the graphical content of a container to be scrolled.

You can learn more about these controls in the Powerful UI Capabilities With Node-Based Controls tutorial. This article discusses some performance aspects of the UI controls implementation and suggests how to employ them in your applications. First, run this example.

ScrollPane and performance

As you may see, the main window does not contain a scroll bar. However, you can see it in action in the ScrollPane class that supports a mouse wheel. The values of the boundsInParent variable defined in the Node class should be used in expressions to lay out the content. Never bind these values directly! The rational is that these values are updated many times per second and regular recalculations of expressions substantially decrease performance of your application. In order to resolve this problem, I created the Bounds class. The coordinates and dimensions are updated only when the corresponding values actually changed. If you compile and run the application by using the Bounds class, you will see that the values with the prefix content are constantly updated, even if the values are not changed. Another recommendation is to remove println, because the debug printing decreases performance as well.

ScalePane

Games often require to show all the graphical content constantly. That's why, I developed the ScalePane class for these purposes. It is constructed similar to the ScrollPane class and preserves the aspect ratio. Try this example to explore it in action. In some rare cases you might want to disable preserving the aspect ratio, however, run this example to ensure that is looks ugly.

Application

Having reviewed a lot of samples, I realized that each model of the application deployment requires specific actions. All the possible actions are implemented in the Application class. The application not only looks and works identically on the mobile device and in the full-screen mode, but additionally, it enables dragging the applet from a browser without pressing the Alt key. The main class of the example is very simple now.

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

Refer to the source code of the Controls class for more infromation.