13.9 Other layouts

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

Hello, in this video we will see the other layouts. The AnchorPane layout allows you to position (anchor) the child components at a certain distance from the sides of the container (Top, Bottom, Left and Right). Now, for example, we might want to anchor a title at the top of the pane so that when the window is resized, a bunch of space is not added between the title and the total window bar where we could anchor an HBOX containing the buttons at the bottom of the pane. So we’ll look at AnchorPane in detail later. Then we have the FlowPane layout. Now, this layout is very similar to the hbox and vbox layouts.The FlowPane layout places components on a horizontal or vertical line and moves to the next row or column when there is not enough space available. The vbox layout exposes his children vertically. And if there is not enough height to fill them all, then some children will be cut. Now, when using a FlowPane, children will not be cut unless the user resizes the window so that it is not possible to display them all. So, when the FlowPane orientation is set to horizontal and the user resizes the window so that not all children can fit in a single line, the layout will actually wrap the children in the next line. That’s really the difference with FlowPane. Now, if the user then increases the window width, the children will go back to the previous line. The same applies when the FlowPane orientation is set to vertical. If there is not enough height for children to fit in a single column, some children will move into the next column. What we’re going to do is set up a FlowPane with 10 buttons and play around a bit with the orientation just to see how it works. So I’m going to comment on all these codes. At the very top. So we’re going to start with the FlowPane, so it’s going to be. The FlowPane tag and as we can see it was automatically imported. And I will copy this one and then paste it into the FlowPane and an orientation that will be HORIZONTAL. Then, we will add 10 buttons So, it will be button one, two, three...ten So, basically what we did is we set up a FlowPane and we set the orientation to horizontal. We’re running the program. To see if it works So, we have our 10 buttons Buttons 1 to 5 fit in the first row and button 6 to 10 fits in the second row. And that’s because there was enough room to display 5 buttons in the first row, and then the FlowPane rolled the buttons 6 to 10 on the second line. But if we widen the window, you’ll see that they’re all going back to the front row. Let’s try the same thing but with a vertical this time. Now we will change FlowPane to VBox to see that children will be cut if we resize the window too small. We need to remove orientation because it is not part of VBox. But as I go up, notice how much, unlike the FlowPane, the buttons are actually cut because I make it smaller with a VBox. That’s it for the first part of this video. The next video we’re going to see the second part. I’ll see you next time!