Adding Interactivity6:26 with Craig Dennis
Our app is really boring at the moment. Let's allow our users to interact with it!
All right, so our sub-app, super boring at the moment, right? 0:00 I mean, it definitely isn't gonna win any awards. 0:04 We should do something about that. 0:07 Let's allow users of our app to take control of the application. 0:09 Let's implement our killer feature. 0:12 Let's give them a button that allows them to say, sup, okay. 0:15 So let's add a button. 0:20 Let's go ahead and add it right below the title node that we had added before. 0:22 So let's give this a go. 0:26 So we'll do Button. 0:27 We'll just call it btn = new Button. 0:28 And it does not know what that is. 0:33 See here again, it's looking at the awt button or javafx. 0:35 Always choose the javafx one. 0:39 Cool, so then we'll set the text on that, right? 0:42 So that's what we want it to read. 0:44 And we're gonna make it say, Say Sup! 0:47 All right, and we are going to 0:49 say root.getChildren and 0:54 we'll do .add(btn). 0:59 Let's move that down here. 1:03 Good. And let's give that a go and 1:10 see what happens. 1:11 Oh weird, the title is showing up below the button. 1:13 Oh, that's because I hard-coded the Y-coordinate setting there. 1:16 Hm, does that mean I should figure out the size of the button and 1:20 do some math to set it below? 1:23 Well I could do that. 1:26 But why don't we try using one of those layouts that we saw? 1:27 So let's see, I want them to be one below the other one, vertically. 1:31 Oh, I know, let's use the V box, it does just that. 1:35 So let's go ahead and stop that. 1:40 So let's make a new, let's put it here. 1:45 Say, new V Box. And we'll call it, box. 1:49 Equals new box. 1:54 Oops, spelled that wrong. 1:58 There we go. Okay and 2:01 then, Lists have an item called add all. 2:02 So we're going to say getChildren, and inside of this we're just 2:06 going to add first the text and then we'll add the button. 2:13 Cool and I'm going to get rid of these. 2:17 Get rid of this one. 2:20 And instead of adding to the root now, we want to add the box, right? 2:21 So the box is there and created and we've added text and the button to it. 2:24 And now we're gonna add, to the root, 2:28 we're gonna add that vertical box that we put. 2:30 So let's save it and we'll run it. 2:34 There we go. 2:37 Much better. 2:38 All right. 2:39 And if we click it. 2:40 Mm, nothing. 2:41 Okay, let's make it do something. 2:44 So when dealing with GUIs, often we are waiting for the users to take action and 2:46 to cause something to happen. 2:50 Well, this something that happens is referred to as an event. 2:52 When a user clicks a button, it is an event. 2:56 So to catch the event and 2:59 run some code based on that event, you can write things known as event handlers. 3:00 Now the javafx EventHandler is a functional interface 3:05 which means it has one method that needs to be implemented. 3:09 And that one method's called, handle. 3:12 Now, the expected function takes an event as an argument. 3:14 So because it's a functional interface, we can use a lambda. 3:18 Now if lambdas are new to you, 3:23 make sure to check the teachers' notes to learn more about these handy tools. 3:24 So let's write an event handler using a lambda for the button click. 3:28 Let's put that up by the definition here. 3:31 So, buttons have a set on action method. 3:34 So we'll say btn.setOnAction. 3:38 And you'll see there it takes an event handler. 3:42 So what we'll write is we'll write the event. 3:44 This is the landis index, right. 3:47 And let's just for right now print out Sup. 3:49 Cool, so then if you look over here, 3:59 it says that it overrides the method in javafx EventHandler, which is handle. 4:01 So if you happened to see a message about lambdas not being allowed at this 4:08 language level just set the language level to 8 using Attention Action. 4:11 All right lets see if we have event handled appropriately. 4:14 Let's run this, 4:19 all right awesome there it goes you see down here it's saying Sup was clicked. 4:20 So we're catching that and riding out so there we go. 4:25 Huh, now what if we wanted to add a way for a user to add their name 4:28 through a text input field and then use that in our event handler. 4:32 Well, let's do just that. 4:35 So there's a UI control. 4:37 Let's stop this first. 4:38 There's a UI control called a text field and we will put this here. 4:41 TextField, and we'll call it nameFld = new TextField. 4:49 So we wanna make sure that we choose the Java effects one. 4:56 Okay, and inside of our action here why don't we use a print, 5:01 and we'll say Sup %s!%n, 5:07 and the %s that we want there. 5:12 We want to make a name field. 5:18 And that nameFld. 5:19 has a property called getText and 5:20 that will get whatever has been entered in the field. 5:22 All right, so let's go ahead, 5:25 we need to add the text field with the name field as well. 5:26 So we want the text, then we want the name field. 5:30 Then we want the button. 5:34 So let's see that and let's run. 5:34 Okay, so here's our text field, so we'll say name in there. 5:38 And you'll see down here it says, Sup Craig. 5:41 It's working, nice. 5:44 Now we have interaction and the user is in clear control of when actions are taken. 5:45 Awesome job! 5:51 By catching that event, we've now done some event driven programming. 5:52 When the user triggered the event, 5:55 we handled it by setting an on action event handler. 5:57 In the handler, 6:01 we were then able to access the current state of the input fields. 6:02 With these two pieces in place, you could probably actually go recreate 6:06 all of the other console projects that we have built in the prerequisites. 6:11 But wait, let me show you how to make 6:14 better use of your new graphical tools first. 6:16 I mean, come on. 6:19 Our app is pretty ugly at the moment. 6:20 We can do so much better on the beauty front. 6:22 Let's get to it right after this break. 6:24
You need to sign up for Treehouse in order to download course files.Sign up