This course will be retired on June 1, 2025.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Build a JavaFX Application

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Controller

4: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.

Learn More

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up