Separating the Layout11:04 with Craig Dennis
Looking at all that Java code gets difficult to manage. Let's work on a best practice of using FXML.
- Markup Language
- XML - eXtensible Markup Language
- HTML - HyperText Markup Language
- Processing Instructions (PI)
- Tag name - The name given to the element, the first word inside the element.
- Attributes - Key value separated by an equals sign. Such as
- Auto closing - This is used for elements that will not have children. Places the forward slash at the end of the tag. Like so:
- Namespace - Used to declare a new prefix, we saw
fx:used and it will tell the processor of the markup how to ensure the tag is valid.
The problem that we just encountered, with the difficulty of being able to visualize 0:00 the way a screen is laid out through simple linear code, is not a new one. 0:03 There have been many attempts to tackle this problem, and 0:08 some clear winners have emerged. 0:10 And they've become the de facto way to present legible layout. 0:12 When displaying a tree-like system, like we have each element having a parent in 0:16 any number of children, typically, a mark-up language is used. 0:21 A couple of markup languages that you've probably heard of is XML, 0:25 Extensible Markup Language. 0:29 This is used all over the place in our Java world, and 0:31 HTML, HyperText Markup Language, the markup language used to describe webpages. 0:35 JavaFx has a similar markup language and it's called FXML. 0:41 If you're familiar with XML or HTML, this will probably become very easy to you. 0:46 If this is new to you, it's a lot. 0:50 But I promise it will make sense with a little practice. 0:53 Let's go explore how to use it. 0:55 When we started our project, some best practices defaults were all set up for us. 0:58 And I quickly made us comment it out so we could do stuff the hard way. 1:02 So the line that we got rid of uses a static 1:06 method on the FXML Loader class called load. 1:09 And what that does is it takes an FXML file and it brings it to life, and 1:12 as you can see here it returns the parent node. 1:16 It's pretty powerful, let's take a look at it. 1:19 So if we click over here at the sample.FXML. 1:21 This is the file that was generated when we first started on project creation. 1:24 And, you will notice up at the top here, there's these things that are in 1:29 less than question mark and greater than question mark. 1:33 And what these are called, these are processing instructions. 1:36 And we've seen these before. 1:40 These are doing import statements here, 1:41 specifically, just like we do in our Java code. 1:43 What happens is you input the stuff here and then you can use it below. 1:45 Most IDEs in IntelliJ specifically are really great at managing these in your 1:49 Java code and it does the same thing for you in FXML. 1:53 I'm so glad that it does cuz it's so much less typing. 1:57 So after the processing instructions, we have our first element. 2:01 An element is created using the less than and greater than sign. 2:04 Right? 2:08 So this element here, this GridPane, 2:08 there's a less-than and there's a greater-than sign on the other side. 2:09 This word here, GridPane, is a tag name. 2:13 Now elements in FXML are strict XML, which means that you need to close out the tags. 2:16 So you'll see here there's a GridPane, and it says GridPane again. 2:22 But you see the front? 2:25 That's closing out the element. 2:26 So inside of the tag here, there's some things called parameters. 2:29 And these are attributes on the element, okay? 2:32 So the attribute, this is the attribute name, fx:controller, and 2:37 this is the attribute value, sample.Controller. 2:39 And we'll get to controllers here in a moment but 2:41 what I want you to notice here is there's this fx. 2:44 And the fx: is part of a namespace, and it's an XML requirement. 2:47 So what's happening here is, we're declaring a namespace. 2:54 XML ns stands for XML namespace, and it says the fx 2:57 namespace is defined here at fx.com/fxml. 3:01 Now, you don't really need to worry about this cuz it's auto populated for you, but 3:05 basically what this does is allow you to validate anything with the fx prefix. 3:09 So we know that fx controller is valid. 3:14 If I spelled it wrong we would know. 3:17 Right. 3:20 And that's doing that because it's using this here. 3:21 You'll see that there, I didn't want that to be overwhelming. 3:24 If you're interested more in XML and 3:27 its structure, I've included a link in the teacher's notes. 3:29 Okay, so if we continue to walk through our attributes here, 3:32 you'll see some familiar properties. 3:35 So here, here's hgap. 3:37 Remember when we did that? 3:38 We called set hgap on the grid before, and it's setting it to 10. 3:39 And here, the vertical gap is set to 10. 3:44 So this is a default and the alignment is going to be centered. 3:47 These are the defaults that were provided to us when we started the project. 3:49 So, let's go ahead and let's flip back to our main class. 3:53 And let's uncomment the FXML Loader line. 3:57 Now we're gonna have a problem because we had defined earlier we defined groups. 3:59 So I'm gonna go ahead, I'm gonna highlight all of the stuff that we did up until 4:03 where the title gets set. 4:08 And so now we just have this one line, right? 4:14 So it's a. 4:15 It's a root object, gets returned, it's a parent object. 4:17 Huh, that's interesting. 4:20 It's a grid pane, though, but it's coming out as a parent. 4:21 Hm, interesting. 4:25 Let's flip to the definition of grid pane and 4:27 see if we can figure out how that's working. 4:29 So if we look over here at GridPane, much like interfaces, 4:31 we can use a class higher up in the inheritance chain. 4:35 Now since GridPane extends Pane, and it extends Region, 4:38 which extends Parent, it will automatically upcast, right? 4:43 Because GridPane is a parent. 4:49 If that wasn't apparent. 4:54 Sorry. 4:56 So we could actually get to a grid pane if we wanted to by casting. 4:57 Remember when we type cast we can up cast if we wanted to. 5:01 We could say, GridPane. 5:04 Could cast it. 5:09 Right? And that would work. 5:14 And now example has all of the GridPanes done. 5:15 All right. 5:19 But we don't need to do that because root works because all that C needs is a node, 5:24 and parent is a node. 5:30 Cool, right? 5:32 Okay. 5:34 So I'm going to leave this stuff here so that we have this for reference. 5:34 But the first thing that we want to do is we want to add a text node. 5:37 And how do we do that? 5:40 How do we add children in the FXML file? 5:41 Well it's actually pretty simple. 5:43 So, FXML is really great at expressing nesting. 5:45 So, what we're gonna do here is we're gonna add a new text 5:49 field and see it automatically created that for me. 5:53 It created the closing for me now XML allows you to auto-close a tag, right. 6:01 I don't need to have this here. 6:08 I can go like this, and it's basically the same thing. 6:10 I prefer the style. 6:12 I think it's cleaner, and you don't leave the dangling closing tags. 6:14 You have less text on the screen. 6:18 So we have text, so let's make sure that that works. 6:21 Right? So basically it's saying create 6:26 a GridPane, and then create a text element with a text of sub, and 6:27 also set these parameters on there to its children. 6:31 Right? So we're gonna add to the children of 6:35 GridPane, let's take a look and see what happened. 6:37 Perfect. 6:41 Okay, so let's add the remaining bits. 6:44 So the other things that we had on there, we had a label, right? 6:46 So we had Label text="First Name" and again, I'm gonna auto close that. 6:51 And we had a TextField. 7:00 And I will auto-close that. 7:03 Look. It doesn't know what it is, so 7:04 I'm gonna press, just like in the editor, I'm gonna press Alt+Enter, and 7:06 it automatically imported it. 7:09 And we're also gonna add a button and the text of that is Say Sup! 7:12 All right. And we're gonna close that. 7:17 Right. 7:21 Okay, so what we need to do now, if we look back at our code, 7:23 what we did before is we set those grids, right? 7:25 We set the columns and the rows. 7:29 So we need to do the same thing over here. 7:30 The other thing that's a little bit different is the text is 7:32 now actually inside of the GridPane, so let's make it so 7:36 the text has its own row, this first, this header here. 7:38 So let's do that. 7:42 Let's say, we'll put them in the first row. 7:43 GridPane.rowindex. 7:46 We are actually setting properties on the parent here. 7:53 You see what it's doing. 7:55 It's in the parent. 7:56 It's GridPane.rowIndex I think this is actually the only case that we're 7:57 going to do this. 8:00 But this is how you access values about the element here. 8:01 It's a little strange right? 8:06 I'm talking about, I'm saying set the rowIndex for this element on the GridPane. 8:09 Something we didn't talk about is doing a column span. 8:16 A column span, what it allows you to do is go across two columns. 8:20 You can do this in Microsoft Excel if you highlight a thing and you can say, 8:28 span across these two things. 8:31 So this is basically the same thing. 8:32 We're saying span across these two columns. 8:34 If there's gonna be two, and I want you to go across two. 8:35 Okay? 8:39 And then, let's make that center. 8:40 So, H alignment, which is horizontal alignment will make that center. 8:42 No, you can do this with your FXML, if you want to. 8:47 Make things a little bit cleaner, so everything's all on the same page. 8:51 And let's set this label. 8:58 So the label is going to be. 8:59 In the first row or the second row, right? 9:05 The first row is taken up by the zero base and put it in the first column. 9:08 And then we have the text field, and 9:19 it has the grid pane in column index one. 9:23 Sorry, one, and. 9:30 Row index of one as well. 9:39 And last but not least, our button, which is in row index of two. 9:43 And we want to have column index of one. 9:51 And we also, why don't we align that right just so 9:59 that we can show that we want to choose right here. 10:01 See how it had the options there through that? 10:04 That's pretty cool. 10:06 All right, so let's take a look and see how we did. 10:07 Awesome, doesn't look that pretty, but we can fix it. 10:13 Wow! 10:17 I just dropped a lot of knowledge on you. 10:18 And like I said in the beginning, if you were familiar with XML or 10:21 HTML that probably wasn't so bad, but if that was new to you, yikes! 10:24 Sorry about that. 10:28 It's a lot and I promise it will start to make sense. 10:29 I hope you're able to look at our more laborious and 10:32 verbose code base approach in comparison to the new mark up and 10:35 understand how the mark up is much more legible. 10:39 I do highly recommend checking out our awesome courses here on HTML and 10:42 design layout. 10:46 I've linked to a couple of my favorites in the teacher's note. 10:47 All right. 10:50 So next, we have to wire up the action on that button. 10:51 Since we removed the code for main, we need to add the code somewhere. 10:55 Now that somewhere is a concept named controller. 10:58 Let's check it out right after this quick break. 11:02
You need to sign up for Treehouse in order to download course files.Sign up