13.4 GridPane Layout

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

Hello everyone, let’s now talk about the layout Now, with JavaFX the "layout" layouts in English allow us to add controls that are user interface components to a container without having to write the code needed for positioning management as well as the resizing behavior of these controls. Now the layout will handle all that for us which is pretty cool. . JavaFX has 8 layouts. You don’t need to remember this, but the 8 layouts are called GridPane AnchorPane StackPane hbox vbox FlowPane TilePane and also the BorderPane. Now before I start making the layouts, I just want to discuss what the preferred size. So "preferred size" in English for JavaFX controls. Because the preferred size is actually an important concept. Thus, each control calculates its size according to its content. I mean the width and height of the control when it is displayed. For example, JavaFX has a control of the buttons. So if we worked with a button, the control of the button would size so that its border fits around that text. So I’ll start a new project and choose JavaFx and I’ll call it Layouts. We have our files You can see at line 14 for the moment it is set to 320, . and 240 and if we run our program to confirm what he’s doing. There is a small window and a button for now, no need for this button we can delete it so that’s fine, but let’s give ourselves a little more space to work. So I’m going to change 320 to 500. You can see the window is wider because we told him to increase the width from 320 to 500. Let’s do this is to look at one of the layouts that is GridPane. The GridPane container allows to place the child components in a flexible grid "arrangement in rows and columns" a bit like an HTML table So I’m going to go down here inside GridPane and create 5 buttons." Button one" I copy and then paste it 4 times so, "Button two" "Button three" "Button four" and "Button five" So if I launch the application. So you can see what happened, the buttons are stacked on top of each other, and that’s why we didn’t specify a row and a column for each button. So I’m gonna come here. and type Gridpane. rowIndex = 0 and GridPane.ColumnIndex = 0 So what I’m going to do is just copy this and put it in the other buttons. The second will have a 1 column the 3rd will have 1 line the 4th 1 line and 1 column And finally the 5th will have 2 lines and we restart the program. Now we can well see our five buttons that was all for this first video. Go ahead I tell you next time.