so now that we have actually learn about the layouts that we can to create our
user interface lets take a look at some more of the user interface controls
that we can add to these layouts now JavaFx itself has got a wide variety
of controls and your already familiar with two of them namely the button and the label controls so
going to start with those two and then we'll move on to other controls so what
I've done is I've created a new java
fx project I've called mine controls so you want to do the same and just set it up so
the default code is actually added so once you've created that what we gonna do is
make a few changes so firstly we going to just increase the size of our scene so
I'm going to come over here into the main.java code and where we got a size
currently of 300 x 275 let's make that much larger make it 800....
by 500 like so and then go to our sample.fxml file and in there we are
gonna add a button so going to keep the grid pane as it is but we gonna add a button within its so....
....
.....we are adding a button for the grid pane row 0 and index 0 and
column 0 and....
...so lets now run this it should obviously work and its nothing that we haven't
seen before will run it anyway and it's a very simple window their that its working and obviously the
buttons are in the middle and if we do click it at the moment nothing's happening and
the reason is that we need to attach an event to that and we will be looking at
advanced later on we are not going to be doing that right now because we're focusing on controls
but eventually we'll get to the stage where we can actually capture that click
and perform some processing when a click is actually made by the user in this case so
I'm gonna shut this down now
so obviously the property that we've used here is text so we've actually been
able to assign a text some text to the button so that it actually shows up in
the area where it can be clicked but what else can we actually do with
button control now anytime you wanna know what properties you can set on a
given control its a good idea to check the documentation that oracle put
together for that control so you want to make sure your accessing the java 8
documentation so lets go over to google I'm gonna open a browser and I can either give you the full link or you can
often find it easy enough by doing a search so in this case we know that
working with the button class so lets type in....
...so we are gonna do a search for JavaFX 8 as in JDK 8 button class and that
should give us a link and the very first link there that's coming back is the
official documents from oracle you can confirm that its / 8 in the path javafx 8 whicgh is the current version click
on that and we got some basic information here now about the button class
and usually when you do a search like that you usually get the
documentation come up it's the first result which is pretty cool at least
when using Google so as you can see on the screen that right at the top theirs a
class hierarchy for the button control these are all the other classes that
basically the button classes extended from looking at the list you see that one of
the ancestors is the control class this one up here and further up the hierarchy
as we move up there is also node as well and from a previous lecture you
hopefully recalled that the node class is the base class 4 all scene graph nodes
now the control class is the base class for scene graph nodes that the user can
interact with and this tells us that there can be nodes in the scene that aren't user
interface nodes because obviously their are 2 types their but we'll be looking at
those types of nodes in the later lecture for now we're going to focus on
control nodes that obviously can be interacted with so that's the various
classes that collectively make up a button now as you scroll down a little bit
you can see we get to the property summary and in there we can find out what properties
a particular controls got now in the case of the button control you see this property
their for cancel button and default button and basically the cancel button is the
button that receives a keyboard vk_escape press or if no
other node in the scene consumes it and the default button is one that receives
keyboard enter so a bit of a difference their when your defining the type of button but that's the two properties that come
with it but there's also a lot of properties that are inherited from these
other classes that make up the button class so scrolling down just seeing a list
of them you can see that we've got one here for height which is from the region ultimately
is going to be the height of the button if you click on that and scroll up and have
a look you can see height is actually filled that is part of the region class their there's
height of this re-sizable node and going back and another property if we go
down and looking at control there is skin and if we have a look at skin and scroll up again and have a bit of a look
skin is responsible for rendering this control
so lots of properties here that collectively do makeup this button so its quite a complex
set of classes that have been defined by JavaFX just a good thing to keep in mind
is that when you checking out the documentation don't just look at the
properties that are directly relating to the class in this case button you've
also got a lot of inherited properties as well
that collectively add functionality to our button or to whatever control your looking at for that matter now
talking about skin that is belongs to the skinnable interface and if we just
got up to the top again all implemented interfaces skinable is actually one of
these so its an interface that is this button
implements so if we click on skinable you can see that there's also quiet a few classes here
that are actually implement the skinable interface and it's obviously useful also when you
searching documentation to go into an interface to see all the various
controls in this case that actually implement this interface so what this
allows us to do is determine how a controller should be rendered so every javaFx
control provides default implementation of this interface but if
we wanted to we could subclass a control and override the methods in this
interface or we could even create a custom control that implements this
interface but these are really advanced topics that we're not going to cover in
this section but I just wanted to make you aware that we're not limited to a
control's default appearance or do a set of controls that JavaFX offers out of
the box is certainly got that capability of creating new controls or extending
functionality but let's get back to our button so as you've seen controls have lots
of properties and many of them are inherited from classes in their parent
hierarchy so getting back to our code again the Text property well where is that
come from if you go back and have a look at our documentation and do a search for text
eventually will hit text and there it is over here you can see that's part of the labeled
class basically coming out from control.labeled so all controls can have text as
part of the content inherit from this classic label class so right now we can't cover every
property so what we'll do is we'll touch on those that you probably most likely
wanna set now text is obviously one of those and we have seen how to use that or how to
set the buttons text using this particular property but the button can
also have an image
so either in addition to the text or on its own and java has actually got an icon repository
that's pretty old now and shouldn't be using real applications but will
actually use it for our applications because the icons arep free and we've got
permission to use them so to get the icon package I'm gonna copy a link and put
it on the screen and this link will be available in the Resources section as
normal
and i pasted it in there their is the link on the screen if you go to this link now you can see we got a java a look and feel graphics
repository here and there is a download button so click on download and the link we want is the one up here click on
Accept licenses and I'm going to click on this downloads so we can download it and
save this in my case to the desktop just put it somewhere on your computer and then
I'm going to open it I'm going to show it in finder and unzip it so next now I've done that I'm going to
add it to our
projects so go back to the project and click on controls right click open module settings and click on
+ and and select jars on directories I'm going to navigate to the folder where
I've just unzipped that jar file in this case its gonna be on the desktop going to
select the jar file and click on ok and this message will pop up automatically that
Idea can't determine what kind of files so even though their is images in there we're
going to choose classes because really the newest match and the reason that
we are selecting classes here is that its gonna add the jar to the class path which is
what we want so click on that point we have now got access to that
jar file and if you wanted to another way of doing this would be to actually
delete this and ok that and we could instead just right click click on reveal in finder
and it might be on explorer if your on Windows click on that that's going to navigate to the
folder containing these files and then what we could do is we could take the jar
file copy it and paste it into that folder and we are going to the controls
directory where my code is paste it in there and that way the actual jar file
is in the project which might be easier in case you're sort of moving
or you accidentally delete the jar file from the desktop so that's the case do the
same thing though you come back here notice how it appeared automatically there right
click open module Settings
add it jars directory this time i'm going to select it from there because its in our project click ok
choose classes and ultimately click OK and that's now available in the class path
that will be able to actually use it so now that we actually got these icons in our
class path lets actually add 1 to our buttons contents just to see what it
looks like so what we are gonna use is just click over here we can actually go
into their you can sort of see them now so we got toolbar button graphics and their is a general folder
we got all these various images here but the one we are gonna look at is the tip of the
day tip of the day 24 and if I just click that we can see what that is that is that image there
we are going to put that on our button so close it down and obviously that was a light
bulp icon so we are gonna add a graphic child element to the button element and inside that an
ImageView element so that this actually shows up so how do we do well we
come back here to button we need to get rid of this closing tag because we need to add
something in there and I'll actually add the one manually like so and just
move that over because within their now what we need to do is firstly we need to add graphic
like so and then within that we need add an image so......and then
we specify our image so how do we do that we'll put....
....
...and how do we
access these
well we got this in our class path we can just put.....
.....
.......and if we run that
notice how the icon has now appearing to the left of the text which is pretty
cool looks pretty nice so just before we finish this video we added obviously the icon
for the button you can see how we used an actual property to ultimately enable us to
actually put an image so that covers what we mostly commonly do with a
button set its text and graphics its the two main things you
probably use it for so really button can just have text or just a graphic
or both and obviously in this scenario we are showing both on the screen so let's just have a
look at the label control before we finish this video I know we've already seen it
so we're are not gonna spend a lot of time onit but like the button will most often
change the label's text or graphic and I'm we are gonna do it in the same way so we'll add a label...
to the grid
this time we are gonna add a column index one go ahead and do that inside the button so....
.....
..I won't close it off because we're going to put these same
items in the middle their so lets also add an image for that so....
.....
....
.....and again just to be sure in case you're not
following
ampersand / means to go to the root and by specifying toolbar button graphics we are
basically saying to look in the jar file which is in the class path / general is the
sub-folder
and information24.gif if we scroll down we should see the gif their and that's the
little gif that we gonna be actually using for the label ok so I'll run that
you can see that's working ok we got a label and also an image to the left hand side so I'm gonna
finish this video here now in the next view we are gonna come back and we're going to make
a few other changes we are going to change the color and font which we have done before
and play around with a few of the other settings relating to this control
so I'll see you in the next video