JavaFX Short Projects: Select an Image

Introduction

JavaFX is a powerful platform for creating desktop applications with a graphical user interface. One of the many features of JavaFX is the ability to use image components, such as ImageView, to display images in your application. In this article, we will create a simple JavaFX application that allows users to select from a list of images using a ListView and see the image description as Label after clicking the image. We will also use CSS to style the look and feel of our application.

The Code

The ListView in this application is populated with three ImageView objects, each containing a different image of a cat, a cup of hot chocolate with marshmallows, and a snowman. These images are loaded from the files “cat.png”, “hot_choco.png”, and “snowman.png”, respectively, using the Image class.

ListView<ImageView> listView = new ListView<>();
listView.setPrefSize(WIDTH, HEIGHT);
listView.setOrientation(Orientation.HORIZONTAL);
listView.getItems().addAll(catImageView, hotChocoView, snowmanView);

When the user selects one of the images in the ListView, the corresponding image name is displayed in a Label object below the ListView. This is achieved by registering a listener with the selectedItemProperty() of the ListView, which updates the outputLabel with the name of the selected photo.

listView.getSelectionModel().selectedItemProperty().addListener(event ->
{
	int index = listView.getSelectionModel().getSelectedIndex();
			
	outputLabel.setText(photoNames[index]);
});

Finally, the application UI is defined using a VBox layout that contains the ListView and Label objects, along with appropriate styling using a CSS file named “select_image.css”. The font used in the application is specified using the @font-face rule, and the root node is styled with a background color and font size. The ListView and Label are styled with white text color and a larger font size than the root node.

@font-face 
{
    src: url("NanumGothicCoding-Regular.ttf");
}

.root
{
    -fx-font-family:'NanumGothicCoding';
    -fx-font-size: 12pt;
    -fx-background-color: #326985;
    -fx-color: white;
}

.list-view, .label
{
    -fx-text-fill: white;
    -fx-font-size: 16pt;
}

See the Codes

Java: Java_Short_Projects/SelectImage.java at main · michellealzola/Java_Short_Projects (github.com)

CSS: Java_Short_Projects/select_image.css at main · michellealzola/Java_Short_Projects (github.com)

See the App in Action

Challenges

1. Missing image files: If the image files referenced in the Image constructor are not present in the specified location, the application will not be able to display the images. The image files in this project are located in the root directory.
2. CSS file not found: If the CSS file specified in the scene.getStylesheets().add() method is not present in the specified location, the application will not be able to apply the styles defined in the file. The CSS files in this project are located in the src folder.
3. Incorrect font file path: If the file path specified in the @font-face rule is incorrect, the application will not be able to render the correct font. In this application, we used “NanumGothicCoding” as the font family. Note the absence of spaces between the words, this is important so that the application will be able to display the correct font. The fonts are located in the src folder.
4. Image sizing issues: If the images do not fit properly within the ListView, there may be a need to adjust the setFitHeight() and setPreserveRatio() methods of the ImageView objects. Additionally, if the images are very large or very small, they may need to be resized using an image editor or a JavaFX ImageView method like setFitWidth().
5. Styling issues: If the styles defined in the CSS file are not being applied correctly, check that the CSS selectors are correct and that the styles are specified in the correct order of specificity. Additionally, if the Label or ListView objects are not styled as expected, use more specific CSS selectors or override the default JavaFX styles with !important declarations.

Summary

In this JavaFX application, a ListView is used to display a selection of images, and a Label displays the name of the selected image when it is clicked. The application uses JavaFX layout and control classes like VBox, Label, ListView, and ImageView to create a user interface, and it uses JavaFX events to respond to user actions like clicking on an item in the ListView. A CSS file is also used to define the styles for the application, including font styles, background colors, and text colors. Developers working with this application may encounter challenges related to file paths, image sizing, and CSS styling, and they may need to troubleshoot these issues by adjusting the code or file locations. Overall, this application demonstrates the use of several key JavaFX features and provides a foundation for building more complex user interfaces with JavaFX.

Reference

T. Gaddis and G. Muganda, Starting Out with Java – From Control Structures through Data Structures, 4th Edition, 330 Hudson Street, NY NY 10013: Pearson, 2019.