13.10 Other layouts 2

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

Hello, here’s the second part of the other layouts. So, let’s start by changing Vbox to TilePane. The TilePane layout places the components in a grid fed either horizontally (per line, from left to right) or vertically (per column, from top to bottom). And if we execute it, you will notice that each cell has been given the same width. There are differences between the buttons because some buttons are not large enough to occupy the width of their cell, moreover, the buttons are centered in each cell. When we resize the window, we will see the buttons are packed and unpacked as with the FlowPane. So finally, now we come to the last layout which is the StackPane The StackPane layout stacks the child components one above the other in the order of insertion: the first "at the bottom", the last "above". I will copy the TilePane then paste it at the top and then comment on the TilePane at the bottom. And change the TilePane title that is at the top of StackPane Now, let’s first add a button the text of the button is equal to the "button one" And also a label The text of the label will be "label text" If we execute it. You can see that the button and label are superimposed. The button at the top of the label where the label is at the top of the button. So to see this, let’s change the background of the button color to red and the label to green. Let’s put the label on top and run the program. Now you see that the button is above the label in fact we can’t see the label. So let’s add another label after the button and that will have as blue color just to see what happens. I’ll copy the first label and paste it here and then change its color. So I relaunch the program and now we can see that the second label is now above the button. Thus, the order in which we add the controls to the fxml will determine the order in which the controls are added to the StackPane. So, the first control will be at the bottom of the Stack and the last control we add will be at the top of the Stack Now you may be wondering why you would use the StackPane layout as it seems to create a mess. In our example, of course, it’s true that it’s quite messy. But suppose we added an image of the Stack, and then we put the label on top of it and we ended up with an image with imposed text, we could also stylize the text so that it’s surrounded by a border, etc. So if you are familiar with layers in Photoshop for example or similar software, the concept is the same here. So that’s why you would use a StackPane.