- [Voiceover] Images are always a great way
to convey a message
or enhance the look and feel of your application.
Images are graphical elements,
such as photos, icons, shapes, et cetera.
Images can have text attached as a label.
This text can be formatted with
special fonts, color and style.
We can also control the layout and size
of the image and text.
The image and ImageView classes work together.
Since the Image class does not derive from the
note class, we cannot add it directly
to the scene grab.
Instead, we must use an ImageView object.
The Image class loads an image from either
the input stream, URL,
or you can specify a path to the image file.
When an image is added,
we can scale the image
using the width and height parameters.
Along with those, we need to specify
a boo-lee invariable for whether or not
the image should maintain it's aspect ratio
and whether or not we want it to use high quality.
Let's switch over to NetBeans and add an image.
I'm going to create a new project.
File, new project.
And I'll just call it add image.
The first thing I need to do
is to delete my template code.
Let me scroll down a little bit.
I'm gonna delete starting on line 24 down to line 35.
For this window, I'm going to use a border pane.
At the top, I'll put a title
and in the center, I'll put my image.
So I need to create a border pane UI layout.
I'll create a text variable to hold my title.
And I'm gonna put the title of this as California.
And finally, I'll change the fill color.
It looks like we need to import several libraries.
So, I'm gonna use the Control + Shift + I.
Make sure everything has a JavaFX.
They all look good and I'm gonna click okay.
You can left click on the light bulb
and import them individually.
Alright.
Now what I need to do is add an image to my folder.
You can find some sample images
in the exercise files folder for this chapter.
We can choose any of these images.
I'll choose the desert to sea logo.
I'm gonna right click on it and copy.
I'm gonna go back to NetBeans
and I'm gonna right click the package and say paste.
Okay.
Now, I have an image that I can put into my window.
So, let's add an image object.
I'll call it CA pic for California picture.
Equals a new image.
And I need to specify the location.
I'm gonna use the path option.
So I want it to go to add image slash
and look for the image called
desert to sea
space logo.gif
Be very careful because Java is case sensitive
so make sure the case matches what you see
in the left hand folder for projects.
Let's import the image library,
by left clicking on the light bulb
and saying add, import
for JavaFX.seen.image.image.
Now that we have the image created,
we need to create an image view
and add this image to the view.
Again, we need to import the image view library.
And now, let's add the title and image to the border.
For the scene, we wanna add the border pane.
Let's make it a little bigger.
Let's make it 300 by 400.
And change the title of the stage.
Okay, I think we're ready to give it a try.
There it is.
There is the title at the top for the border.
It says California.
We have our image in the middle.
Just remember in order to add an image,
you need to create the image
and add that image to an ImageView
before you can add it to your scene.