so let's continue on with our study of controls and look at the slider
control and the slider control is used when we want to user to provide a numeric
value and it's perfect for that so it consists of a tract and a thumb that the
user can drag so let's have add one to our grid to see what it looks like so we
need a fair amount of horizontal space for this so gonna moved into the second row
gonna set the grid pane column span property to 4 so I'll go ahead and do
that so....
....
.....
....
...
....
...if we do that see if we can run that so it does work and it's quite long then
it's good but there's no indication of the value range so that is not really very
helpful so the user might want to see what the ranges is actually mean what
the numbers are so let's add some labels to the slider and close it down and we do
that by setting the show ticks label property to true so we just type...
...and we run again we should see the range of numbers you can see now
a visual representation so they got some idea of the actual number that
they are actually selecting this time so that's good but what if the use wanted to set the
value to sixty is really difficult to see how to do that right now
so let's add some marks to the slider to help guide the user because really we
need that to make a little bit easy so we can set the show tick marks property
to true
obviously we set show labels we can also do show...see what that looks like
and that's obviously better now we actually got ticks here as you can see so it's getting
better but still not really helpful if you wanted to set the value to exactly 60
so which one we would actually select here to make it sixty and the problem is that
sixty doesn't fall on one of those tick marks mark so let's show some more tick marks
by setting the minor tick properly or tick count property and this property of
the slider control allows us to specify how many tick marks that we want between
any two major ticks right now we can see just three minor ticks
between each major ticks that's these three here you can see between these major
ones which are obviously have got a number in that tick and their are 3 sub ticks on each sections
so lets change that
to 4 because the major to the tick marks are set in increments of 25 so we wanted to divide
that area between major tick marks into five pieces so the way we do that
is we come down here and change that to minor tick count...
...so we do that instead of 3 minor ticks we are making it 4 if we run that you can see
that is going to be there that would actually be sixty so we could actually
specify that now that we've got the right number of ticks there but there's still a
little bit of an issue in that when we dragged their we don't know if we are exactly at 61 or 59 how do
we actually know well we can often use even more help by sending the snap to
ticks properly when we set that the true the thumbs is always gonna snap to the nearest
tick mark no matter where the user left thumb go so if we close it down and change that
to....
...and run that and now we specify you can see
how its snapping now so I can go their but as soon as I let go it snaps back to whatever its the closest tick one
before or one after it that way we now know a much more precise now so that slider it can be
useful for numeric values as I mentioned and just as a final note before we move
on the slider can also be displayed vertically by setting its orientation
property to vertical so moving on now the next one is our next controller we want to
look at is the spinner now the spinner is a new control that was just added to java
8u40 sort of sub version Java 8 and if you're running an earlier
version of Java you won't have the spinner control so 8u40 or higher is the
one that you will be running and just as a refresher if you're not sure which
version you've got you can just right click here
open module settings and we have a look here under the project sdk that
would normally tell you and in this case I've got 1.8.0_73
so the version would be 40 it would be something like 8u40 or something like that
or in this case it's the 73 so 73 is obviously much newer version than 40 so I'll be
able to use the spinner if you've got an older version running java 1.8 prior to
40 its not going to work so make sure you do update its free to update and its
recommended anyway so we have determine that I have got it and we can use that so
how do we go about using the spinner well we just star with typing in the name
which is spinner and let's put on row index as well 2 so....
...because on line
91 we set the slider to use a column span of 4 so lets use column 0 to 3 so...
....
...in the spinner we can set a maximum and minimum range as well
and if I type this in and we run it you will see why we want to use this as an alternative to
the slider so.....and if we run this you can see here now
with the spinner they can actually specify a range we can be pretty precise and if I hold this
down all the way up to a hundred if you wanted to my finger is going to be worn out before
we get there but obviously the advantage of this is as far more precise
so if you wanted to enter a specific value their is hundreds as the maximum because we used the
minimum and the maximum there and it shows in then shown as a range so obviously
if we wanted a value like 92 you couldn't really do that with the slider
because we need some more precision so this is the spinner is just a way to be
more precise to enable you to do it but you notice at the moment I can't type
in their we could if I actually type a number if we knew what the number we can do that and the way to
do that is to just set the property editable to be true so....
....
we can go and type a number in there so here 57 and its now got a number and we can't type a number
like...you can see what happened when I press enter their we got it to crash and that's because we chose
a number that was too large
cancel and run it again
and obviously type a value that is a valid number and it will work nicely and notice when I type a number
that's beyond the maximum its only gonna select the maximum but where we ran into
difficulties before was typing a number that was too large for the computer to
handle and that's why it actually crash like that but we talking more about
that later and we can trap rather those exceptions and do some
processing to confirm rather than just crashing ungracefully like we did their but we'll
talk about that later the point here is that we have given the user the option to
type in the number as well as using the upper and lower range if they wanted to
and again just a confirmation that you need to press enter the user needs
to press enter to actually sort of confirm that value if they want if they don't do that this
spinner is still going to be set to the previous value and as an example if the spinner was
display some sort of a dialog and the user change the value then
press the ok button in the dialogue but they did't press enter in the spinner then
the application code wouldn't see that the spinner value change and so it is important if you see
editable to true for the user perspective they've got to press enter to sort of see that change
one other thing that we can do with the spinner is we can set the initial values
so it can be quite handy in that case if your setting a minimum and maximum range to set an
initial value say halfway just to save having to do all the clicking like I did initially so we put....
....and run that
...we now see we got a default value start of being 50 and what I was saying here was if you type in a new value and I click away the
value still hasn't been updated that is until I press Enter
that's what when its been updated you can see that more if you put something
invalid moved away from it nothing's changed but if I comeback and press enter
you can see that's been processed and in this case because we specified the maximum range of a
hundred its gone back to a 100 so that's one thing to keep in mind if you are editing from a user
perspective if you setting editable to true you got to press enter for the change to be
updated so moving on that's the spinners lets actually have a look at something
completely different and this is the color picker so in terms of setting that up
we're going to type color picker......and go to the new row index so....
....
...and when we run it will see the color picker in operation you see we get a drop
down here we can actually specify the color we want so if we click on the color and that is the hex code equivalent
you can click on custom color and we can move it around you probably see these controls
in other applications and it's a little bit different depending on the platform
your running on click on use and the hex code is updated and
pretty cool depending which color you pick the color picker is going to display
the color name or the web color the hash and followed by six hex digits and the reason
for that is if we just pick a general one this is just the standard colors but we can sort of
override that you get a specific one with the hex digits as I mentioned so does really
depend on which color you pick as to which one you get
and you saw me when I clicked on custom color before you get another dialogue so pop
up there we got different options to choose a different
particular shade or whatever being a really precise with the color we actually want
and the hex code gets updated on the screen and the other thing I didn't show you was just
is that you can also type in the codes you can click on these if you want to
put it in a different shade their do it that way web and just type in the code if you want to do
it that way and obviously you can just change here and we got a quite detail
options to really choose the color and be really quite precise and how you go about it
one thing to remember though if you do click Save if you do that now now we have
save that next time we open the dialog we should see its save on the custom
color selection and those save colors will stick around for the life of the application
and then be thrown away unless you save and restore them between application runs so
that's another good thing that you can actually do you notice the custom color
here now as well that's because I've actually clicked on the save button well that is pretty
cool how it does that automatically
and let's do one more control now before we end this video and I'm gonna show you
something you probably will use a lot more than the color picker that's the
date picker very handy for calendars and any applications that use date so....
...
so click on run...
and their is our date picker and it is quite flexible its come up we can go back
to different months and notice when I went back to January it went back to the previous
year to 2014 choosing a particularly date and it puts the date on the field automatically this
may look a little bit different depending on how your dates are in your
part of the world
Australia we always use day first and month and year that you have a different one
depending on how you set your date on your computer and we are gonna use this date
picker in the later lectures so you can find out more about it then but you can see how that once
you've selected the date it is updated and puts it in the date picker so I'm going to finish this video
here now in the next video
we are gonna continue on we got a few more controls to go through yet and will do
that in the next video