6 Implementing a Swing Application in JavaFX

Analyzing the Converter Application Developed in Swing

For more information about the implementation of this example in the Java programming language, see How to Use Panels and Using Models trails in the Swing tutorial. In particular, the graphical user interface (GUI) is discussed in the trail about the panels.

To learn the code of the Converter application, download its NetBeans project or the source files available at the example index.

Swing components use models. If you look at the contents of the project, you notice the ConverterRangeModel and FollowerRangeModel classes that define models for the Converter application.

The Converter application consists of the following files:

• ConversionPanel.java — contains a custom JPanel subclass to hold components

• Converter.java — contains the main application class

• ConverterRangeModel.java — defines the top slider's model

• FollowerRangeModel.java — defines the bottom slider's model

• Units.java — creates Unit objects

Note that the synchronization between each text field and its slider is implemented by event handlers that listen for changes in values.

Planning the Converter Application in JavaFX

The Converter application contains two similar panels that hold components such as a text field, slider, and combo box. The panels have titles. The TitlePane class from the javafx.scene.control package ideally suits the GUI of the Converter application.

In what follows, you will implement the ConversionPanel class and add two instances of this class to the graphical scene of the Converter application.

First, note that the components within a single ConversionPanel object should be synchronized as follows. Whenever you move the knob on the slider, you must update the value in the text field and vice versa: Whenever you change the value in the text field, you must adjust the position of the knob on the slider.

As soon as you choose another value from the combo box, you must update the value of the text field and, hence, the position of the knob on the slider.

Second, note that both ConversionPanel objects should be synchronized. As soon as changes happen on one panel, the corresponding components on another panel must be updated.

It is suggested that you implement synchronization between the panels using the DoubleProperty object, called meters, and listen to changes in the properties of the text fields and combo boxes by creating and registering two InvalidationListener objects: fromMeters and toMeters. Whenever the property of the text field on one panel changes, the invalidated method of the attached InvalidationListener object is called, which updates the meters property. Because the meters property changes, the invalidated method of the InvalidationListener object, attached to the meters property, is called, which updates the corresponding text field on another panel.

Similarly, whenever the property of the combo box on one panel changes, the invalidated method of the attached InvalidationListener object is called, which updates the text field on this panel.

To provide synchronization between the value of the slider and the value of the meters object, use bidirectional binding.

For more information about JavaFX properties and binding, see Using JavaFX Properties and Binding.

Creating the Converter Application in JavaFX

Create a new JavaFX project in NetBeans IDE and name it Converter. Copy the Unit.java file from the Swing application to the Converter project. Add a new java class to this project and name it ConversionPanel.java.

public class Converter { 
    private void initAndShowGUI() {
        ...
    }
    public static void main(String[] args) { 
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                initAndShowGUI();
            }
        });
    }
}

import javafx.application.Application;
import javafx.stage.Stage;

public class Converter extends Application {
    @Override
    public void start(Stage t) {
        ...
    }
    public static void main(String[] args) {
        launch(args);
    }
}

import javafx.scene.control.TitledPane;

public class ConversionPanel extends TitledPane {

}

import java.text.NumberFormat;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Slider;
import javafx.scene.control.TextField;

private ComboBox<Unit> comboBox;
private Slider slider;
private TextField textField;

import javafx.beans.property.DoubleProperty;

private DoubleProperty meters;
provate numberFormat;

import javafx.collections.ObservableList;


public ConversionPanel(String title, ObservableList<Unit> units, 
DoubleProperty meters) {
    setText(title);
    setCollapsible(false);

    numberFormat = NumberFormat.getNumberInstance();
    numberFormat.setMaximumFractionDigits(2);

    textField = new TextField();
    slider = new Slider(0, MAX, 0);
    comboBox = new ComboBox(units);
    comboBox.setConverter(new StringConverter<Unit>() {
        
        @Override
        public String toString(Unit t) {
            return t.description;
        }
        
        @Override
        public Unit fromString(String string) {
            throw new UnsupportedOperationException("Not supported yet.");
        }
    })
    VBox vbox = new VBox(textField, slider);
    HBox hbox = new HBox(vbox, comboBox);
    setContent(hbox);
    this.meters = meters;
    
    comboBox.getSelectionModel().select(0);
}

import javafx.beans.InvalidationListener;

private InvalidationListener fromMeters = t -> {
    if (!textField.isFocused()) {
        textField.setText(numberFormat.format(meters.get() / getMultiplier()));
    }
};

private InvalidationListener toMeters = t -> {
    if (!textField.isFocused()) {
        return;
    try {
        meters.set(numberFormat.parse(textField.getText()).doubleValue() *
getMultiplier());
    } catch (ParseException | Error | RuntimeException ignored) {
    }
};

meters.addListener(fromMeters);
comboBox.valueProperty().addListener(fromMeters);
textField.textProperty().addListener(toMeters);
fromMeters.invalidated(null);

slider.valueProperty().bindBidirectional(meters);

Creating the Converter Class

Open the Converter.java file that was automatically generated by the NetBeans IDE and remove all of the code except for the main method. Then, press Ctrl (or Cmd)+Shift+I to correct the import statements.

Defining Instance Variables

Add import statements for the ObservableList, DoubleProperty, and SimpleDoubleProperty classes and create metricDistances, usaDistances, and meters variables of the appropriate types as shown in Example 6-10.

Example 6-10

import javafx.beans.property.DoubleProperty;
import javafx.collections.ObservableList;
import javafx.beans.property.SimpleDoubleProperty;

private ObservableList<Unit> metricDistances;
private ObservableList<Unit> usaDistances;
private DoubleProperty meters = new SimpleDoubleProperty(1);

Creating the Constructor for the Converter Class

In the constructor for the Converter class, create Unit objects for the metric and the U.S. distances as shown in Example 6-11. Add the import statement for the FXCollections class. Later, you will instantiate two ConversionPanel objects with these units.

Example 6-11

import javafx.collections.FXCollections;

public Converter() {
metricDistances = FXCollections.observableArrayList(
        new Unit("Centimeters", 0.01),
        new Unit("Meters", 1.0),
        new Unit("Kilometers", 1000.0));

usaDistances = FXCollections.observableArrayList(
        new Unit("Inches", 0.0254),
        new Unit("Feet", 0.305),
        new Unit("Yards", 0.914),
        new Unit("Miles", 1613.0));
}

Creating the Graphical Scene

Override the start method to create the graphical scene for your Converter application. Add two ConversionPanel objects to the graphical scene and lay out them vertically. Note that two ConversionPanel objects are instantiated with the same meters object. Use the VBox class as a root container for the graphical scene. Instantiate two ConversionPanel objects as shown in Example 6-12.

Example 6-12

@Override
public void start(Stage stage) {
    VBox vbox = new VBox(
            new ConversionPanel(
                    "Metric System", metricDistances, meters),
            new ConversionPanel(
                    "U.S. System", usaDistances, meters));
    Scene scene = new Scene(vbox);
    
    stage.setTitle("Converter");
    stage.setScene(scene);
    stage.show();
}

You can view the source code and download the NetBeans project of the Converter application in JavaFX using the links at the bottom of this document.

The Converter application in JavaFX is shown in Figure 6-2.

Figure 6-2 Converter Application in JavaFX

Description of "Figure 6-2 Converter Application in JavaFX"

Compare the two applications with the same functionality implemented using the Swing library and JavaFX.

Not only does the application in JavaFX contain three files as compared with five files of the Swing application, but the code in JavaFX is cleaner. The applications also differ in look and feel.

Application Files

Source Code 

• Converter.java

• ConversionPanel.java

NetBeans Projects 

• Converter.zip