13.12 Radio button

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

Hello, in this video, we will see the control of the radio button. Now, a radio button can be selected or deselected. We don’t normally use a single radio button alone. When we want the user to choose only one of several options, we group the radio button together so that when the user selects a radio button, the others are automatically deselected. So let’s go ahead and start working on this by adding a radio button to our GridPane. So I’m going to go down to the end of the label and add a radio button. So Radion button GridPane. rowIndex = " 0" and GridPane.columnIndex= "2" Text = "Red" Again, a single radio button is not very interesting. And as I mentioned, we would never really use one, so let’s add two more from the same row. So I’ll copy the radio button and paste it twice. The 2nd will have a column = 3 and the text will be blue.The 3rd will have a column of 4 and the text will be green. So these are our three radio buttons. So for now, we can click on it and you can see that they are all clickable, they are not deselected based on a click of another button they can simply be enabled or disabled. So, in other words, they are all operating independently and not how we would normally like them to work, that they work when you click on one and the others are automatically deselected. And that’s because the purpose of a radio button is not usually to give the user a certain number of choices, but to allow them to select a single option, which is really why we use a radio button. Now, to get the behavior we want, we need to group the radio buttons together, and we’ll add them to what’s called a "toggle group". Now, the class of radio buttons descends from the class of "toggle button". The toggle button class does not descend from the node and therefore cannot be added to a scene graph as such. Because of this we have to use the "fx define" element in the fxml to use this toggle group. Let’s go and type some code, we’ll also give it an identifier and then we’ll see how it works and see how we actually add the radio buttons to our toggle group. Above the radio buttons I will add Fx:define and then inside we will add a toggle group. So we have to accept the import and make sure it’s JavaFX, which it is. Then let’s put fx:id which is equal colorToggleGroup. And the reason we use an identifier is because we’re going to assign it to the radio button. So in the radio buttons, let’s add a toogleGroup that is equal $colorToggleGroup that is the id at the top. And just to be clear when we refer to an fx:id value, the value of something we’ve defined here, we put a dollar in front of it. So, if we execute this, we should see that now only one button can be clicked and when we do that, the others are automatically deselected, because they are all part of the group, only one can be selected at a time. And for a button to be automatically selected by default, we must put a property that is equal to true. So for example The blue I’ll put "Selected" equals True If we execute this, you can now see that the blue was automatically selected when we started It was for this video In the next video, we’ll go to the "CheckBox" Go! I’ll see you soon!