so continuing on we saw previously we can change the color of the text by
setting the text field property I'm talking about the label here starting on
line 17 and we can also set the font by setting this font property so you may want
to change the color because we want to display errors in red or you know we want
all text to be certain color because when using particular color scheme or
theme for example for our application now like sea colors or nature colors
so what we gonna do is we are gonna set the labels color to blue and the font to
Times New Roman size twelve italic and we will run the application and
see the changes I wanna come up here
on line 17 and I'm going to add the text field so....
and we also want to assign a font as well to do that we can actually put
that in here..... again cases is important here will just allow
the import and we're gonna call it...
...and we run it....so that's good but sometimes when we're doing this we
might want the text to wrap so there may not be enough room for example for the
text to display in one line because of the user interface layout or perhaps
it could be important that the full-text remain visible when the user makes a
window smaller now by default label text doesn't wrap but if we want to wrap we set the wrap text
property to true but before you try this out we are gonna make our label text longer and change
font size to 40 just to confirm the functionality normally happens so we
are gonna make the label longer
that should be enough and we change the font size to what was 12 to 40 and run that clearly that's now
not fitting its actually cut off towards the end just towards the last
word label there so now if we change this to wrap the text come back up here text blue after
the text is blue we're going to add......and if we run that we
should see that the texts is now going to wrap for us this is a label this is a lablel this is a
label you can see now its wrap through rather than being cut off and notice how that is changing
automatically as we make the window larger and smaller it will automatically resizes
the label to fit now before we move on let's remove the strenuous text and set
our font size back to 12 so I'm going to do that
so we got the single their and change the font to 12 again but we can leave the wrapped text
properly their for now so next we are gonna look at the radio button control now a
radio button can be selected or deselected we normally don't use a
single radio button control alone when we want the user to choose only one of
several options
we group radio button controls together so that when the user selects one radio button
the others are automatically de selected now this type of control is called a
radio button because all radios used to have a set of preset stations and we actually
select the station by pressing the button corresponding to that station
now radio can only be tuned into one station at a time so only one of the
radio buttons could be in a pressed position at the time so in a similar
fashion only one radio button in a group can be selected at a time so that's really
the functionality behind the radio button so let's go ahead and start work on that by
adding a radio button to our grid pane so come down to the end of the label and add
a radio button so...
.....
...now again one radio buttons is not very
interesting and we know we've really used one alone so let's add two
more the same row right after the red one will actually set the radio button text to blue and
set the
text for the third button to green lets add those......so they are all gonna be on row index 0 but the column
we're gonna put 3 and 4 for the second and third radio buttons and the texts is going to be
blue and green
respectively
so lets just run so theirs our three radio buttons and at the moment we can click them and you can see
that their all clickable the aren't being deselected based on a click from
another button they can just be selected on or selected off so in other
words they're all operating independently and not how we would normally
want it to operate where you click one and the others were automatically de-selected and
that's because the purpose of a radio button is usually to give the user a
number of choices but to allow them to select one option that's really why we're
using a radio button now to get the behavior we want then what we need to do
is we need to group the radio buttons together will add them to what's called a toggle
group now the radio button class descends from the toggle button class the toggle
buttons can be added to a toggle group but right now radio button is the only
control that extends from toggle button but who knows there might be more in the
future when oracle release them the toggle group class doesn't descend
from node and therefore can't br added to a scene graph as such because of that we
have to use the fx define element in the fxml to use this toggle
group
and we use fx define when we need to add something in the fxml that isn't part of
the scene graph lets go ahead and actually type some code in will assign and ID to it
as well and then we'll see how this works and see how we actually add the
radio buttons to our toggle group
close down the program and the run window and above the radio buttons I'm gonna add....
....
....and the reason
we are using an ID will become apparent shortly because we're going to be assigning that to the radio
button so lets go ahead and do that now.....so to use that toggle group and to basically linked
the radio buttons together we type....
...and notice when I typed that IntelliJ automatically finds
the definition that we defined on line 33 we'll do the same for the others
....
...and just to be clear when we're actually referring to an fx ID
value for something we've defined here we put a dollar in front of it and
that tells IntelliJ to look for an fx definition with the ID of whatever we typed after the
dollar sign so just to be clear the fx define element we need to add that because
the toggle group doesn't descend from node and can't be added directly to the
scene graph so this is the way of getting that functionality to work so if we run
this now you should find that now only one button can be clicked and when we do
that the others are automatically deselected so you click on Red notice how red got
deselected and likewise for green because they are all part of the group only one can be selected at a time
and when we click on one the other 2 are automatically deselected
that's cool that's working now typically when we display a group of radio buttons
we want one radio button to be automatically selected in the defaults
selection in other words so to make our radio button for blue our default
selection we need to select or need to set the selected property to true so
let's do that for blue and to do that to make that the default one we put...
selected that is the property equals true and that make sure that's one gonna be selected by
default so keep in mind when you use a selected properly you don't need to set
the other ones to false the toggle groups smart enough to know that if one
button is selected then the others aren't selected and so consequently just select
the one that you want true and that all went nicely so if you run that
you can see now that blue was automatically selected when we first started and the processing still works as
it did before and that one is being deselected if we click on another one so
that's good so all working nicely so let's go ahead now and add a checkbox before we
finished the video so using a check box when there's only two choices or state for
example sometimes when we buy something online were asked if we'd also like to
subscribe to newsletter we can subscribe by clicking the box if we don't want to
subscribe then we leave the box unchecked so let's add a checkbox to our grid to see this in
action so we are gonna add the check box to the fourth column of our row so close the run window again
come down here after the radio buttons and do....
.....
...ok so if you run if you click that you can see
that its selected and the tick box comes on when tick it again it
turns if off so its on off on off now the JavaFX control
actually allows for three states but you have to turn on the third state because it's
off by default now this third state is known as the indeterminate state now when the
indeterminate state has turned on the check box will initially contained a
dash and once the user click the checkbox there isn't a way to get the dash
back by clicking the control so let's turn this state on by adding the
indeterminate property into a check box and setting it to true come down here and we'll
put......
and if we run this you can see we got the little dash now basically once you click it its on or off at that point so I can't
actually think of our real practical use for this and it's really not what users
expect from a check box so I would you normally suggest you leave this turned
off but just wanted to show this to you to let you know that
it does exist if for some reason or you can think of a reason to actually use it
ok so now sometimes we need a single check box but other times we
might want to use checkboxes instead of radio buttons so a group of radio buttons
allows a user to select one choice from several options which we saw what now what if we
wanted to use it to be able to select more than one choice then there's
usually there's a few ways to do this but one common way is to use checkboxes
instead of radio buttons now we can't group check boxes together under a
toggle group because checkbox doesn't descend from the toggle button class
but what we can do is group the check box together visually just as we did with
the radio buttons so let's place a checkbox into a vbox and add 2 more
check boxes too it so we go up here and add a v box and add a bit of space so we can see what we are
doing so add a v box.....actually what I didn't do either just out of interest I didn't assign the row index so just to show you what I
probably should have done I should have defined that row index 0 and obviously I
I didn't do that I only assign the pane that's pretty bad coding on my part so if we run that again
and we got an error their and of course I type row index twice so its meant to be column index ok that's what I was trying to do run it again
clearly we put that in the wrong elements that should have been in the next
one along and that should all along be in the next one so I'm going to add that
....so that's what I've been trying to do it along and obviously I set it on the wrong one and I didn't set the row properties so consequently skipped it to the next line that's what I've been trying to do all along but
obviously it still works like it did before and indeterminate initially then
check box either on or off
ok so getting back to where I was doing before I want to change this now and put the
checkboxes in to a v box so type....
....
...and if we run this now
we got three selections in their now because it's a vertical a v box its going from
top to bottom and click on and we can select more than one option at the same time so quite
happily so I mention that radio buttons decent from the toggle button class so
toggle button is a JavaFX control in its own right and toggle buttons looks like a
regular button but when we pressed it stays down when we press it again it pops back up
so lets add one to our grid quickly to see how that works before ending the video so close this
down
...and the way we do that is we do.....
....
...and if we run that you notice when I
tick it that's now down click it again and it comes up so down and up again so its basically a
toggle on or off in a sense of being press and not pressed and to add more
toggle buttons well we can do something similar to the v box we can use h box for that so
we could do...
...and let's put it on the same rows as we currently had it so....
.....
...ok so if we run that now you can press all 3 toggle buttons as you can see their and they all remain selected and if we only one toggle button to be
selected a time then would put them in a toggle group like we did earlier up for
the radio buttons and that would enable only one to be selected at a time
so I'm gonna end this video here now and the next video we are gonna move on and start
looking at the text field control which is a controlled to allow users to type
information into from their keyboard that we can then process so see you
in the next video