The Controller4:45 with Craig Dennis
Now that we have the layout removed and we are using FXMLLoader to build our Scene Graph, we now need a place to put our code. That place is called a Controller.
So now that we have all of our layout in the FXML file, and it's 0:00 automatically loaded from the FXML loader, we need a place to put our action code. 0:03 Now if you remember before, we set this code using the Set on Action 0:08 on the button, and passing in our lambda function. 0:13 But now, we don't have a direct handle to the button to be able to set our function. 0:15 Well, the good news is that every FXML file 0:21 has the possibility to have code that sits behind it. 0:24 This is called its controller. 0:27 Now, you might have heard of this term before in the concept of model view 0:30 controller, or MVC. 0:33 It's an architectural pattern which is quite common in UI frameworks. 0:35 Now we aren't gonna delve too deep here, but you should know that the controller 0:39 is responsible for handling and setting up our view, the FXML file. 0:43 Let's go wire up our controller and handle our button click. 0:47 So we breezed past this before, but if you look up here in the grid pane, 0:53 there's an attribute called fx namespace named controller. 0:56 And this is using dot notation to point to sample.Controller, 1:01 which is over here, right? 1:04 sample.Controller. 1:05 This file was created for us when it started but 1:07 it's just basically an empty class right now. 1:09 So if we just add an attribute to the button for onAction. 1:12 So, just like everything else, we're gonna say set onAction. 1:16 We put in the name of the method that we want to run. 1:21 So let's make a new method called #handleSaySup. 1:23 [LAUGH] That hashtag's never gonna catch on, is it? 1:28 [LAUGH] JKLOL. 1:31 Okay so see how it's an error? 1:34 Now this is pretty cool. 1:36 The ID is checking for us, it knows the method doesn't exist. 1:37 So let's go ahead and create it using the intention action here. 1:42 And bam, it created it over here in the controller. 1:45 So let's write our little bit of code there, right? 1:48 So we had, let's just make it say Sup first. 1:50 Right? 1:55 Awesome, there it is. 1:58 So, let's run that. 2:00 Just make sure that works. 2:01 Okay, cool, perfect. 2:05 So, we're back there, but we wanted to make this field be filled out and 2:06 put the name in there. 2:10 So how do we do that now? 2:11 We don't have access to that variable in the controller. 2:13 Well the trick is to add an FX name spaced value called ID. 2:18 So let's go over here and on the text field let's go ahead and give this a name. 2:22 Say fx:id =, and we'll call this firstName. 2:27 This will allow us to reference it specifically in the controller. 2:34 So, if we go in over in the controller, and 2:38 here there is an annotation called FXML. 2:40 So if you do @FXML and see it did the import for us. 2:44 What this does is it exposes things, even private things. 2:51 So between the controller and the view. 2:54 So let's say private, and we'll make a TextField. 2:56 Whoops. 3:03 Don't wanna import AWT, right? 3:04 That was the stuff from before. 3:06 It's bigger. 3:08 JavaFX one. 3:12 It's very common to accidentally pick that and 3:14 then try to figure out what's going on. 3:16 Just so you know. 3:17 Glad that that happened by accident. 3:18 And we're gonna give it the same name that we did as that ID. 3:20 Right. So we called it firstName, 3:23 it's firstName here. 3:24 And now, in our event here, if we switch this 3:27 over to being a printf we can do a %s, give it a new line, 3:32 and we can push in firstName.getText(). 3:39 Bam, and now we can access it. 3:44 Now this might seem like a silly application but 3:53 note that this controller here is just a Java file. 3:56 You could very easily pull in the Twitter API and 3:59 make this actually tweet out with just a few additional lines of code. 4:01 But it's still a little ugly right? 4:05 I mean, we have a couple of options, what we could do is we could add a font 4:06 attribute on a bunch of the elements directly, 4:10 but that kind of seems like we would be repeating ourselves, right? 4:12 We live by the mantra DRY, right, don't repeat yourself. 4:15 There is a better way. 4:20 So those are controllers. 4:22 They control the information rendered into the view and 4:24 this information is also known as the model. 4:27 They also control the actions that are performed by the view. 4:29 Controller seems like a pretty good name for it, eh? 4:32 Okay. 4:35 So the best practice for 4:36 styling our application is by employing cascading style sheets, or CSS. 4:37 Let's dive into that right after this challenge. 4:42
You need to sign up for Treehouse in order to download course files.Sign up