Grids5:56 with Craig Dennis
Grids provide a way to align elements in rows and columns. Let's use them to clean up our app.
- Hgap - Short for horizontal gap
- Grid Lines - A helpful debugging tool that you can turn on using setGridLinesVisible(true).
- [That blue person reference](https://en.wikipedia.org/wiki/Avatar_(2009_film%29)
[MUSIC] 0:00 Our up and coming app is in a bit of weird state. 0:04 We have a floating unlabeled text field that we're expecting our users to 0:07 enter their name into. 0:11 How are they gonna know what to enter in that field? 0:12 A common solution is to label form fields using a table-like solution. 0:16 The first column contains the definition of what is expected, or the label, and 0:20 the second column contains the field to accept the input. 0:24 This can be achieved in JavaFX using a built-in 0:28 layout we talked about earlier, a grid pane. 0:31 Let's add one and get our form under control. 0:34 Okay, so first things first. 0:37 There is a data type called Label. 0:39 Let's add one of those. 0:41 So, we'll come here and we'll say Label. 0:43 We'll just call it label = new Label, and it takes a parameter. 0:45 And it's the text that you want to be in the label. 0:51 So, we'll say Name, and we'll put a colon there. 0:53 There's multiple choices, and we want to have this one, the javafx one. 0:57 All right, so next what we want to create is a grid pane. 1:01 Okay, so that is, so GridPane, and 1:05 we'll call it grid = new GridPane. 1:10 Again, it must have known what that was. 1:15 Yep, layout.GridPane. 1:19 Okay, so to populate your grid, you just add elements, right? 1:22 So, we're gonna say grid.add, and first, we're gonna add the label, okay? 1:26 And the next parameter is the column, and they're zero based. 1:32 So, the first column is at 0, and we want the first row, which is 0, okay. 1:36 So, next to that label, what we're going to add is the field. 1:42 So we're gonna say grid.add, and we'll do nameFld. 1:46 And we want it to be in the second column, so we'll do a 1, 1:51 and the first row so that we want it next to it. 1:56 So much like a spreadsheet, each one of these locations is called a cell. 2:00 All right, so let's see what that looks like. 2:04 Oh, looks like I forgot to add that to the box, so let's go ahead and close that. 2:08 So let's add the grid pane. 2:11 So we don't need the name field here anymore, we'll add grid. 2:13 Great, so let's see what that looks like. 2:18 Ooh, that's a little squished together. 2:22 Now, you can deal with that area between cells with properties called, gap. 2:24 So let's set a higher Hgap, or horizontal gap, between those cells. 2:28 So we can say, grid.setHgap. 2:33 Oops, that's a lowercase g. 2:40 setHgap, and we're going to set that to 20. 2:41 Let's take a look and see what that looks like. 2:45 Much better. 2:48 That button seems a little off now though, doesn't it? 2:50 And it's on a row of its own. 2:52 Let's go ahead and let's add the button. 2:54 Let's add the button to the second. 2:56 Let's add a new row, and we'll add the button to it. 2:59 So, we'll say grid.add, btn. 3:01 And, we'll put it in the second column, and the second row. 3:05 And just going to move this down below the declaration there. 3:12 Good, and we can remove from adding the button. 3:19 There, okay. 3:23 There, so now we see it's in the second row of that. 3:27 And now that we have a grid set up, it will get more and 3:30 more tempting to align things using it. 3:33 Now sometimes you might be confused as to what your current grid looks like. 3:36 So to help, you can turn on a debugging featured called GridLines on. 3:39 So let's do that, we'll say grid.setGridLinesVisible(true). 3:43 Let's run that. 3:51 Here you go, and now you can see here's the spacing that we had. 3:54 And here's the different grids there, cool. 3:56 So, let's set a specific font on the title. 4:00 And now you can do that like so. 4:03 So let's go ahead. 4:06 I'm gonna comment this GridLines out just for now. 4:08 And let's set a font. 4:12 So let's say text.setFont. 4:16 And, let's use that font that those blue folks use on those USB ported horses. 4:19 Remember that movie? 4:26 Let's do that. So, new font Papyrus, 4:27 that is that old timey, ancient font. 4:30 It's kind of like comic sans nouveau. 4:39 Okay, so let's go ahead and run that. 4:42 There we go. 4:46 Look at that. 4:47 So this is the size, and that's the font name. 4:48 But you know what? 4:52 In order to make all of those look the same, 4:53 I'd have to set the font on every single one of those nodes. 4:56 This is starting to feel wrong, isn't it? 4:59 It sure feels a lot like we're repeating ourselves, doesn't it? 5:02 We can take care of this, but first, we have bigger fish to fry. 5:06 Other thing that is getting hard for me, and I'm assuming you, 5:09 too, is picturing what this layout looks like, right? 5:12 Imagine looking at this code with fresh eyes. 5:15 Would you know what it is? 5:19 I don't think I would. 5:20 I definitely wouldn't feel comfortable moving things around. 5:22 So, now we have a nice grid, and we have things lining up really well. 5:26 But, it's starting to get a little difficult to visualize through 5:29 just looking at that Java code, isn't it? 5:32 There comes a time in building any decent size graphical application where you'll 5:35 need to separate the layout from the logic. 5:39 JavaFX offers us the ability to do that. 5:42 It's called FXML. 5:44 It will help us more easily visualize the layout 5:47 instead of having it all written out in Java. 5:49 Let's learn more about how to separate our layout right after this break. 5:52
You need to sign up for Treehouse in order to download course files.Sign up