13.6 BorderPane

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

Hello, in this video we will now look at the layout which is the BorderPane The BorderPane container allows to place the child components in five zones: Top, Bottom, Left, Right and Center. So here’s a diagram from the BorderPane documentation. I’ll just bring it to the screen there, you can see now. Thus, the layout works well for a client application, an application in which you will have a menu and a toolbar at the top, a type of tree structure or list on the left and a central area that displays data or allows the user to enter data. Sometimes an information board or something on the right side. Now, BorderPane’s sizing and resizing behavior generally matches what we expect. Thus, children in the upper and lower positions will have their heights and extend the width of the BorderPane Now, children in the left and right positions will have their preferences widths and will extend the entire height between the upper and lower positions. And the central position will get all the remaining space and fill all that space. So we’re going to keep our HBox layout and we’re going to surround it with a BorderPane. Then we have to delete some things in the HBox because they’re already in our BorderPane, so it’s going to be "fx:controller" xmlns fx and alignment and we’re going to delete the style as well, so if we execute it now, we’ll get an error. You can see that this is the "alignment" property So, the thing to remember is when using the BorderPane, we specify where the controls should go by placing them in one of the five positions of the BorderPanes I mentioned earlier in this video. The BorderPane does not support the alignment property. But we will see later, we can align the BorderPane children in their position, in the BorderPane itself. Then let’s remove the alignment property and run the application again. You can see that we now have something really weird happening with the buttons of our HBox They are positioned at the top left of the window as you can see. So the reason we get this behavior is because we haven’t defined the position of the hbox in the BorderPane. And therefore, the layout doesn’t know what to do with it. So let’s put our hbox down. So, if we run it again we now have our buttons on the screen, like you That was it for the first part of BorderPane I’ll tell you next.