13.15 ComboBox et ChoiceBox

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

Hello, in the last video we saw the «TextField» in this video, we will see the Combo box so, the "drop-down list". Now, the drop-down box is another way to give the user a choice of several options when they can only choose one. We saw this in the previous video with radio buttons. If we wanted to offer the user 10 options, radio buttons would not be the best choice as they will probably take up too much space on your screen. But a drop-down box occupies about the same place as a text field until the user wants to interact with it and, of course, at this point, he can reveal the list of options by clicking on it. So let’s add one to our Grid, just to see what they look like. So after the Password, I’ll put combo box ComboBox GridPane.rowIndex = "1" and GridPane.columnIndex = "2". So, the way we do it is to type elements, it’s a tag items. Then, inside, we have to add the following code. So we type fx:collections and then we import it. So obviously, “arraylist” is what we’re really building here, a list of options. And the inside we will put strings that will be the entries for each selectable item in the drop-down box. After, we’ll put "fx:factory " which is equal to "observableArraylist " So, String Then, we import it and which will have an fx:value which is equal to "Option 1" After I will copy this string and paste it 4 times. And I haven’t talked about it yet, but we’ve introduced new classes and attributes here. Fx collections, fx factory, fx value et oservableArrayList, we will detail them later. But for now, just understand what we’re trying to do here is fill in the drop-down box with a list of channels. Now, when we run and click on the drop-down box, we should see a drop-down list of options. So let’s take a look and see if this actually works. So here’s our drop-down list, and if we click on it, you can see that we have our options. Sometimes, for this drop-down box, you may want to set one of the options as the default option. And that’s so that the drop-down box is not empty when it first appears, and that can also be the case if you have some kind of application and you save the default settings, you may want to define them every time the program runs, for example. So let’s review and configure the 4th option and make it the default option, so that it is automatically selected each time the program is executed. So, to do that, after item We’ll put "value". and inside, we’ll put the string. And then we choose the text we want to select, for example option 3. If we execute it. You can see it automatically, option 3 has been selected when we run it. Now we will see the choice box. We’ll add it right after the combo box. Choice box GridPane.rowIndex = "1" GridPane.columnIndex = "3" And inside we have similar options for the choice box, we have items. So we’ll just copy it all into the comboBox and paste it into the choice box. So, we’re reexecuting our program. And we have our pick box if we select it and notice the tick here. So just like the drop-down list, the user can only select one item. There’s really no difference in how the user interacts with a drop-down list and a pick box, but there are implementation differences. So, according to one of the javafx developers, the selection box is more suitable for a smaller number of items, a drop-down list can handle a larger list of items. That was it for that video I’ll tell you next time.