This recipe uses techniques to load images using the ImageView component that were
covered in Chapter 5 , JavaFX Media . If you are not familiar with the ImageView component,
refer to the recipe Loading and displaying images with ImageView for details on how to embed
images in your JavaFX application. Other topics presented here include use of the Sequence
type to store a list of ImageView objects. Refer to Chapter 1 , Getting Started with JavaFX for
further details on the Sequence type and its uses.
How to do it...
In this recipe, we are going to load 26 images, one for each letter of the alphabet. The code is
presented in an abbreviated form. Refer to ch08/source-code/src/alphabet/Main.fx
for a complete listing of the code and the images used in this recipe.
1. To get started, create one image file for each letter, using your favourite designer tool.
For this recipe, you can use a commercial tool, such as Adobe Photoshop. However, if
you do not have access to Photoshop, you can use an open source alternative such
as GIMP (or anything that can create a PNG file).
2. Save each image as a PNG file, using the naming pattern X.png , where X represents
the letter associated with the file ( A.png , B.png , C.png , and so on). You should end
up with 26 image files. Place all of the images in the same package (or sub-package)
directory as the JavaFX script that will be using them. For our recipe, the images are
placed in the alphabet/images folder, which is a level below where the script
3. Next, we start with the JavaFX script code. In the first portion of the code, we declare
the sequence object, alphabet , representing the letters of the alphabet:
def imgW = 214;
def imgH = 182
// sequence with alphabet
def alphabet = [
"A", "B", "C", "D", "E", "F",
"G", "H", "I", "J", "K", "L",
"M", "N", "O", "P", "Q", "R",
"S", "T", "U", "V", "W", "X",