so just before we go on with textView I just want to show you one other
quick thing that we can do with radio buttons now we set up a v box
and a h box for the check boxes and toggle buttons we can all put radio
buttons in our boxes as well so I'm gonna put the radio buttons in the v box now it often can be
convenient to do that because we only set up the row index and column index
once instead having to set up for each radio button so I'm gonna go ahead and do
that so create a v box..... set the row index 0....and column index
I'm gonna set to 2 now I'm just gonna put these three radio buttons in the v box and I'm gonna get rid of
the grid pane row index and column index which is no not needed for each
individual radio button and consequently now that we've done that we
can we now need to change the column index so I'm gonna make the check box column
index 3 because the column index for line 39 is so we need to make it
three and for the h box for the toggle buttons I'm gonna make that 4 and if we
run that we should still get the identical results we had in the previous video other than the
fact that these are now vertical and the weren't vertical before they were going left to right across in a column
situation obviously everything else is still working like it was before and
obviously the group is still working as you can see there can't a radio button
of now because one has to be selected at all times as we put it in a toggle group ok so
theirs that so close it down now so let's continue on now and we're going to
look at a text field now text field as I mentioned towards the end of the last
video gives the ability for the user to type
information in so that we can actually then interpret those results and perform
some action with that data
now a text field won't be long usually they are a few words because this is
a single line field so lets just go ahead and add 1 to our group we are gonna start
on a new row and put a text field into that first column so I would start with the text
field.....
...so that's the basic form of a text field
and when we run this we would be able to type something in that field and theirs
our text field......and obviously that's working accepting input just
fine so that's good we can also initialize the field with text by
setting the text properly but that can often be irritating unless we also add the
code to remove the text as soon as the user places the cursor in the text field
otherwise the users has to delete whatever is in the field before they start typing
now the text field class also contains a copy cut paste and select all methods
that let us copy its contents to the clipboard delete and copy its content to the
clipboard and paste it from the clipboard and lastly of course the select
contents that's the select all method so that's a text field there's also a
password field and this could control the same as you might imagine directly
from the text field control the only visual difference between the two is
that a password field masks whatever has been type into and I'm sure you've seen a
password field before and also its copy and cut methods don't do anything so you
can't copy and paste into a password field after all there's no point masking its contents
if they can be copied to the clipboard so lets add 1 to our group in the second
column of the second row so...
...and we run that we should see that it operates just like a
regular text field so there is the regular one and I type same thing in the
password field we get the stars or the little circles to indicate that it's a
password and we can't see what's being type and again its pretty well identical to a
text field other than the fact that it's masking what we're typing and of
course it looks pretty well identical which isn't surprising because text fields is its
parent class ok so moving on the next one controller we want to look at is the combo
box now the combo box is another way to offer the user a choice of several options where they
can only choose one we saw that in the previous video with radio buttons if we
want to offer say the user 10 options
radio buttons wouldn't be the best choice because it probably take up too much
room on your screen
but a combo box takes up about the same room as a text field until the uses
wants to interact with it
of course at that point they can revealed the list of options by clicking on it
so lets add one to our grid in the third column of the second row just to see what they look
so.....
.....
now to populate this we need to add a list of items obviously each one of these will be separate
selectable option so the way we do that is we type.....and within their what
we need to do is add the following code so we type...
....so obviously the ArrayList is
what we are building here a list of options
know what we need to do is we need to do an import and IntelliJ doesn't always
automatically add this so I'm gonna go ahead and do it
so if your getting some weird results just come up here and actually add them so what I'm gonna do is
do an import.....
....just to make sure that it's
imported again it may do that but just in case it doesn't its a good one to
add just to make sure that it's actually doing the right thing
...and will also import the string because it on the next line about
to start typing strings so...
and that is essentially what these are going to be the entries for each item that's
selectable from the combo box so they may be imported but if by chance they are not then
you need to type them in and obviously that's greyed out because we haven't
actually used it but I'm gonna go down here you can see fx collections is now
working correctly where it was red a minute ago and to add the options we just type
string..... which should now work because we imported and...
....
.....
....
...ok so its given us five options for a combo box and I haven't talked about
it yet but we introduce new classes and attributes here so fx collections
fx:factory which you saw this on line 65 fx value which you see in
use on line 66 through 70 and also the observable array list which is also
defined on line 65 now we are gonna go over those in detail in the later lecture but for now just
understand what we're trying to do here is we are populating the combo box with a list of
strings now when we run and click on the combo box we should see a pull down
list of options so lets go and have a look
and see if it actually works so their is our drop down list there and if we click on that you can see we got our
options so move this so you can see it and also see FXML and notice how we got our
various options there which correspond to the ones we added on lines 66 through 70
and we can select one and once we select once it operates just like a normal combo box would and
that it closes down and selects that particular option and getting to the stage if
for something like that you might find it a little bit too small and you can't sort of
unnecessarily read all the options and what we can do is we can extend this
column to make sure it fits but to see the problem better lets just make this little
bit wider longer
rather each option so we can see a potential problem and I'll show you how to fix that so....and run it again....you can see it automatically expanded
it for us which is pretty handy but if we had a smaller window and we find
that they wouldn't necessarily fit properly we can select that and it does expand
it and show the whole thing but it doesn't actually show at all in the
column so what we can do is we can actually increase the column span by using the
gridPane.columnspan command to make sure that it goes over 2 columns so we can sort
of sure to see what it looks like even after we have selected the options so to do that we just come back up
to the combo box and.....so now if we run that again
.....making this a bit smaller
..ok just make it a bit bigger take it to the 3 a span of 3 lets just make this a really one so that you can see what
the problem is it does depend on the size of the window etc as to how much
of this will show......so now if we run this again now we can see the results now because
we've got wider entries we can see that this is expanded a bit better and I can take this back and
put it back to a column span of 2 run it again you can still see we've got enough space now to fit
it so this was actually problem I was trying to show you before so notice how that has been cut off
and its not actually showing the whole combo box and because I made it so long I need to go to the
column span of 3 if we do that now we can actually see the full results
after we've selected it where we couldn't before until we've done that so depending on the
length of the text is too how much space you want to assign how many column spans you
wanna go over obviously I made this super long for this example just to work by
default it probably would have fitted ok just with the short relatively short
string selections that I had for each item
betting that column span is the way to actually get it to expand it so that you can see what the
selection was now sometimes in relation to his combo box you might want to set one of the
options as the default option and that's so that the combo box is empty when it
first displays and this could also be if you've gotten some sort of application
and you're saving the defaults setting you might want to set those up every time the program
runs for example so let's go through and set up the fourth option and make that
the default option so that its automatically selected every time the programs run so to
do that after the items come down here we put....
.....
....
...and that's going to be our default option.....run that...you can see its automatically option 4 was
selected but when we actually run this now the other thing that you can
find with the combo box or you can set rather is you can actually set it so that its editable
this is not a common use case and it really can be quite confusing for users
but if you want to you can just set it's eligible property to true so come
back here to combo box.....
and once we do that and run it notice how the default options is no longer working but we can
select that and notice how then we can all also actually type some text in here
again its not something you would ordinarily do but if that is something you want in
your application you can do that and I'm going to actually remove the editable
and we don't want to make this one editable for now and run it again just to confirms it works and we're back to the
default now working and I select an option and is no longer editable
now closely related to the combo box is another control called the choice box so
let's add 1 to our grid right after the combo box just so we can sort of see what
it does and what I'm going to do is just make this a bit smaller again and go back
to a column span of 2......
.....so this all fits and
lets go and create a choice box so....
.....
....
......
....again we'll be
talking about these in later videos and we type in the value....
....
.....so pretty well looking at that that's identical to what we had for the
combo box other than obviously the the values different values and we're not
using a column span so if we run this there is actually a distinct difference if we
select it
and noticed the tick here so its like a combo box the user can only select one
item so you might notice that the space in front of each choice in the pull
down and that is that little tick here as you can see when we select a choice and open the
pull down again we can see that the check mark was select cb2 and cb2 is actually
tick again and the check mark is being placed next to the item we selected apart from
that there isn't really much of a difference in how the user interacts
with the a combo box and check box but there are implementation differences
so according to one of the JavaFx developers the choice box control is
more suited to a smaller number of items a combobox can handle a large a list
of items also we can use what's called a cell factory with a combo box and will
cover these cell factories in a later lecture but to be honest many
developers had wondered you know why both controls exist combo box can be used
with a small number of items as well so what I would personally suggest you do
is stick with a combo box and only use a choice box because you have a small
number of options in if you don't like the tick and i don't think its really needed but it's
obviously personal preference
alright so I'm going to finish the video here now in the next video we're going to
continue on looking through controls we are gonna look at the slider control
and tick labels and a few other controls along those lines
so we'll talk about that in the next video