13.5 Hbox Layout

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

Hello, in this video, we will see another layout which is the HBox. The HBox layout places the components on a horizontal line. The components are added after each other (from left to right). We will remove all that and change GridPane to HBox. As you can see, it was imported directly. And now you see that hgap and vgap don’t really exist for Hbox. So we have to remove them as well. So now that we’ve done that, let’s change the center from "alignment" to top_center Let’s add 3 buttons, 3 simple buttons which is "Okay", "Cancel" and "help" Now, if we execute this, To see the 3 buttons at the center 3 placed horizontally at the top in the center of the window. . There is no space between the 3 buttons because the fill height of the HBox property is set to So to see that the HBox has stretched to fill any excess. And I will do this using CSS, which we will cover in more detail in a later lesson. But for now, just type these commands and we’ll see a border around it.I’ll add to the HBox line that will add the CSS to the Hbox -fx-border- The first color we want is the color: red; that will be our color. The next one will be border width, -fx -border-width we will set it to 3. And the last one will be the style of the -fx-border-style edger: dashed So now, if we execute this, we can see that the hbox occupies all the width and height of its parent. So, adding a border around the layouts is a great way to visualize how much space was given to the child. So let’s change the alignment now at the bottom right because that’s where the buttons often appear. So we will change top_center bottom_right and if we retry. And we’ll also add a gap now between the buttons by setting the spacing property to 10. So, in our hbox, we’re going to type spacing = 10 C'était tout pour cette vidéo J'espère que vous avez compris à peu quoi c'est le HBox. Come on, I’ll see you next time!