13.16 Slider Control

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Let’s continue our study of the controls and examine the "slider control" which is the "cursor control". So, cursor control is used when we want the user to provide a numeric value. It therefore consists of a track and an inch that the user can drag. So let’s add one to our Grid to see what it looks like. So we need a fair amount of horizontal space for that. So, slider there will be a line = 2 and a column = 2 and a GridPane.columnSpane = 4 "ColumnSpane", it is the number of columns that the child’s layout area extends horizontally. We also want to define a scope. We will let the user provide a value of 0 to 100. We specify the range by typing Min = 0 which will be our starting range the max we set to 100. If we do that, then we can execute it. So you can see that it works and it’s quite long, but there’s no indication of the value of the scope. So it’s not really very useful, so the user may want to see what staves actually mean and what the numbers are. So let’s add some labels to the slide up. And we do that by setting the "show text label" property to true. Now, if we run that again, we should see the range of numbers. Now you can see a visual representation. So that’s good, but what happens if the user wants to set the value to 60, it’s really hard to see how to proceed at the moment. So let’s add some markers to the cursor to help guide the user, as we really need to make it a little easier. So we can set the "show tick marks" property to true. Let’s see what it looks like. It’s obviously better now. We actually have small features here, as you can see. But it’s still not really useful if you want to know how to set the value exactly to 60. So let’s show more tick marks by defining the minor tick property. Now, this cursor control property allows us to specify the number of tick marks we want between 2 major ticks. We can see that there are only 3 minor ticks between each major tick, these are the 3 here as you can see between these main ones that obviously have a number in this tick and then there are 3 sub ticks. So let’s change this to 4 because the major tick marks are defined in increments of 25. So we want to divide the area between the major tick marks into 5 pieces. So the small strokes. We will come here and type Minor Tick Count = 4 So we do this instead of 3 minor ticks, we do 4. If we execute this. We can see that we have an extra check mark, we know that there will now be 60, so we could actually specify now that we have the right number of ticks. But there’s still a little problem in there. When we drag it, are we exactly on 60 where was it 61 or 59, how do we really know. Well, we can offer the user even more help by setting the snap to ticks property. When we set this to true, the thumb will always align with the most recent tick, no matter where the user has let the thumb go. If we run the program. So this slider can be very useful for numerical values, as I mentioned. That’s all for this video I admit that it was a little more complicated to understand. In the next video, we will see the spinner I tell you next time.