Java Reference
In-Depth Information
Button
{id:"btnGo" text:"Get Image"
action:function(){loadImg()}
}
]
}
}
When the variables
imgView
and
addrBar
are placed on the scene and the application is
executed, you will get the results as shown in the following screenshot:
The image shown in this screenshot is licensed under creative common. For additional
information and licensing details, go to
http://www.flickr.com/photos/
motleypixel/2905493571/sizes/m/
.
How it works...
Loading and displaying images in JavaFX involves two classes,
Image
and
ImageView
. While
class
Image
is responsible for accessing and managing the binary stream of the image,
ImageView
, on the other hand, is of the type
Node
and is responsible for displaying the loaded
image on the scene. The code presented in this recipe lets the user enter a URL for an image
and loads the image on the screen. Let's take a closer look at the code and how it works:
F
The ImageView
—the first significant item to notice is the declaration of an
ImageView
instance assigned to the variable
imgView
. This is the component that
will display the image on the scene when it is fully loaded. We specify the properties
fitWidth
,
fitHeight
, and
preserveRatio
. These properties will cause
imgView
to stretch (if the image is smaller than specified) or shrink (if the image is
larger than specified) while preserving the aspect ratio of the image.
F
Image URL bar
—the form that captures the URL of the image to load is grouped in
the
Group
instance variable
addrBar
. The form consists of a
Label
, a
TextBox
,
and a
Button
instance. The
TextBox
instance has several properties set, including
id="addr"
, which allows us to find a reference to it in the code. Both the
TextBox
and the
Button
instances have their action properties defined as a function that
invokes function
loadImg()
. Therefore, when the
TextBox
has focus and the
Enter
key is pressed, or when the
Button
instance is clicked on, the image will be loaded.
