Build the State Change Events

One of the things that's important to gather up at this beginning phase 0:00 is to determine what makes the state of our application change. 0:03 So there's a couple of things from the mockup that change the state. 0:07 Now obviously, there are buttons, right? 0:10 Play, Pause and Resume. 0:12 Now clicking Start will begin a new attempt and 0:14 change the color of the screen and start the timer. 0:17 Let's take a look at the board, and see if we can't see anything else. 0:20 Okay, so let's pick up the story here. 0:24 As a user, I should always know what state I am in, focus, break or 0:26 pause, so that I'm not distracted. 0:29 So, let's pull that over into the doing column and 0:31 let's talk about that a little bit. 0:34 So that was where we wanted to just change the color of the screen, right, 0:35 so the way that we solved that with a mock ups was the screen color changes, right? 0:40 Focus is one color, break is another color and when it's paused, 0:44 the pause button shows up. 0:48 In addition to changing the color of the screen, 0:51 we also wanted to set the title of the page of what's happening. 0:52 Let's go set that up in our controller. 0:55 So, in addition to changing the color of the screen, 0:58 we also wanted to set that title, remember it's at focus time or break time. 1:00 So, we need to set up our controller. 1:04 Cuz we don't have one currently. 1:06 So let's go to this home.fxml. 1:07 I used home as the name there for like the home screen. 1:10 Make sense, 1:14 because we don't have any other screens here so this was the home, the main one. 1:14 All right so one quick way to set up the controller is you can just define it. 1:19 Doesn't have to exist yet. 1:24 Com.teamtreehouse.pomodoro. 1:25 Even a package, right? 1:28 Controllers, let's drop it in a controllers package. 1:31 And let's call it home. 1:33 And if I come over here it's gonna say create the class. 1:36 Yeah, that's what we want. 1:39 Cool. 1:41 And now we have, under our controller package we have home. 1:41 Awesome. 1:45 So, we know that we want to know what the current attempt is that's 1:46 happening, right? 1:50 So let's go ahead and let's make that a private variable. 1:51 It's gonna ask and yep, that's what we mean, okay. 1:59 First things first. 2:05 Let's set up a method that starts a new attempt. 2:06 We'll use this for all of our attempt kinds. 2:09 So it should take an attempt kind. 2:11 Right. So let's keep it private. 2:13 Nobody needs to know about it yet. 2:15 Nobody on the outside, that is. 2:18 We can use this internally all we want. 2:20 So we'll say prepareAttempt and it takes an AttemptKind, We'll just call it kind. 2:21 Okay, and let's go ahead and we'll build a brand new attempt for 2:32 each time this method gets called. 2:35 So we're gonna set our CurrentAttempt = new Attempt and it takes a kind. 2:37 And we don't yet have what that message is, so let's leave it blank for now. 2:45 A common approach to handling design changes is to add and remove a CSS class. 2:49 Now we can do that here, right? 2:55 Let's add a class for the kind. 2:56 Then we can put whatever styles we want in that class definition. 2:59 Right? Does that make sense? 3:02 So, let's do that. 3:03 But first, let's make sure that we have a handle on the root node, 3:06 which is what we want. 3:10 Let's look at what's over there. 3:11 So, here, fx:id="container". 3:12 So, remember, in your controller, there is that FXML annotation. 3:14 And, we want to bring in a private VBox and its name is container. 3:22 Perfect, awesome. 3:29 If you click this, over here, it flips to right where the thing is. 3:33 It's kind of handy. 3:36 It flips back. 3:37 Does not. 3:39 Okay, and now let's make our method, column method that we haven't yet created. 3:41 We'll call it add attempt style, that makes sense right? 3:46 That's what we're going to do, we're going to have the style of what this attempt is, 3:50 so we'll say addAttemptStyle and let's have that take a kind. 3:52 Okay so, a method doesn't exist yet. 3:59 Let's go ahead, and 4:02 let's use this intention action to create the method for us. 4:02 Okay? 4:05 Awesome. 4:07 All right, so we have a handle on our container, 4:10 and containers have things that are called get style class. 4:16 Now, that sounds like that returns one, but 4:20 actually what happens is it returns a list. 4:24 It's a little weird of language, maybe get style classes would have been better, 4:25 but it is what it is. 4:30 It's called StyleClass on the other side, right. 4:31 It's not StyleClasses even though there could be multiple ones. 4:33 So, it returns a list, and because it's a list, we can just add to it, right. 4:36 So we're going to .add and let's push in the name of the kind. 4:42 And we already have the name, right? 4:48 That was the word in all caps that we wrote out before. 4:51 But let's make the class a little bit quieter, right? 4:54 So, we'll say kind. 4:56 If you do toString, it will use that name that we gave it. 4:57 And then, we'll do toLowerCase. 5:02 Now I remember in the notes from what 5:06 Susan gave me when I transferred something over, I actually already made this for us. 5:09 So let's take a look in the CSS that we're using here. 5:13 And if we scroll down here into the state based selectors. 5:16 Down here, so look, here's focus, that was the name of the focus. 5:21 And what's gonna happen is it's gonna change the background color to this. 5:24 And break will change the background color to that, whatever that is. 5:28 Oh look, it's a bug. 5:31 I'll fix that. 5:32 Okay, so let's think this through. 5:34 Let's walk back through this. 5:36 So it's gonna come in, we're gonna call prepareAttempt, and 5:37 it's gonna set the CurrentAttempt to a new one, which is totally cool. 5:40 And it's gonna add an AttemptStyle. 5:42 So let's say that we pushed in one that was focus. 5:43 It's gonna come through, it will add focus and 5:46 let's say that we push one in that's break. 5:49 Oh, it's gonna add two. 5:51 We don't want that, we don't want it to say focus and break. 5:53 Cuz then what's gonna happen? 5:55 Both of those classes are gonna be there and both of those are gonna apply, and 5:56 the last one defined will apply. 6:00 So it will always be that color break. 6:01 We don't wanna do that. 6:03 So, we wanna remove them too, right? 6:04 So let's do that. 6:06 You can, let's make something for exactly what we're trying to do. 6:08 We gonna say private and then it'll be a void, let's make a clearAttemptStyles. 6:12 What we can do here is we can loop through everything that's in that enum, and 6:17 just remove it, just pop it off. 6:21 Right. So for AttemptKind kind, and 6:23 if you say on an enum attempt kind dot values, 6:27 it will loop through each one of the values that are in the enum. 6:31 Now again, that's a list. 6:38 So get style class is a list, and lists have a thing 6:40 that's handy called remove, which it will pop the object off, should it exist. 6:46 It won't give you an error if it doesn't, 6:50 so let's just loop through all of them and pop off what's on there. 6:52 Probably a little cleaner way to do this, but it'll work for 6:58 now and because we've put it in our own method we can fix this however we want. 7:02 As long as it does that. 7:07 As long as it clears the attempt styles we can change this however we want, right? 7:08 So I'm gonna put that right at the top of the prepare attempt, right? 7:12 Let's start with a clean slate. 7:15 So we'll say clear attempt styles. 7:16 And then we'll add the attempt style. 7:19 Okay, and so the next thing that we wanna do, is we wanna 7:21 set the text label with the name of the kind of attempt that's going on. 7:23 So let's get a handle to the title in our controller. 7:28 So, what was that? 7:31 That was title, so let's get a handle over here. 7:32 We'll say @FXML private it was 7:34 label and it's called title. 7:39 And we want gamma Java FX version of that. 7:46 You can have this on the same line or below. 7:51 Sometimes it auto corrects to that. 7:55 So I like to at least have it in the same style, whatever that's going on the file, 7:56 keep it the same way. 7:59 It's really up to your team on a style decision for that sort of thing. 7:59 And this prepare attempt, we could set the title, right. 8:05 We could do this title.setText and we could just set it to the kind, and 8:08 we could get the two string version of that. 8:12 But that's not really what we want, right. 8:15 Like what if we changed the word from being focused? 8:18 And it's in all caps, too. 8:20 We don't want to have to play around with stuff. 8:22 So we want a display name. 8:23 And why don't we just set that as a constant as part of the enum. 8:26 Let's do that, so 8:30 we'll say get DisplayName, that sounds like a good function, right? 8:30 We're wanna say, how do we display this? 8:35 So we'll save that and I am going to click here. 8:38 Let's use the intention action and we'll create a method, getDisplayName. 8:42 There we go. 8:49 And let's do a private 8:49 String m DisplayName. 8:54 Didn't work out exactly the way that I wanted it to. 9:00 [LAUGH] And we'll pop it in the constructor here, too. 9:01 So, let's do displayName and 9:05 we'll say mDisplayName = displayName and 9:10 of course that's a string. 9:17 Okay so now these are complaining obviously, and so 9:23 we want this to be called Focus time, and we want this to be called Break time. 9:25 Now of course, if that changes, if the way that these words change, 9:31 what's nice is this focus could, we could have something totally, 9:34 concentration time over here, right. 9:40 But we could still call it focus in our code, whenever we use focus and 9:42 then this could kind of change. 9:45 So that helps keep things dynamic. 9:46 I'm really liking this enum usage. 9:49 I mean, imagine if we had to go through a big if else switch here. 9:50 Since everything else is already defined, we can just use it, right. 9:54 So we're using this kind.getDisplayName, perfect. 9:57 All right, I'm ready to see if this is working. 10:00 But how do we do that? 10:03 One trick that I like to use is I like to drop in, right at the top here, 10:05 let's just add a Button. 10:09 And this works really well in 10:12 things where you don't have much control of when input comes in. 10:15 Because this program will just run and it will be sitting there. 10:19 So let's give this an ID, and I like to use all caps so I don't forget about it. 10:21 And we'll say onAction DEBUG, all right? 10:27 And, of course, debug doesn't exist cuz we just made that up. 10:33 So we will create a method over here. 10:38 Void DEBUG, and we'll just make it do something silly. 10:41 All right, so now if we kick off things in debugger mode 10:48 Something is wrong. 10:59 Oh, I forgot to close the tag. 11:01 That's what it's angry about. 11:02 So let's try that again, let's run in debug mode. 11:05 Okay, so there is a button there that I forgot to label Debug. 11:11 Let's do that really quick. 11:16 So you can. 11:19 See that. 11:23 And I will close main there. 11:24 Let's do that again. 11:28 Let's run DEBUG. 11:29 There we go, there's the DEBUG button. 11:33 Got some weird styling that it's inherited, but that's all right. 11:35 And if I click it and say hi mom, we don't necessarily want that. 11:38 We want to put a break point on where it says hi mom, right? 11:43 So now, if we do debug. 11:49 There's our app. 11:52 When we click it, we're going to pause. 11:53 And now we can use that trick that we learned before with 11:57 this Evaluate Expression. 11:59 And I can say prepareAttempt(AttemptKind), and we'll do FOCUS first, 12:03 (AttemptKind.FOCUS). 12:06 What that should do, is it should. 12:08 So it returned void, but it should have, as we continue our app. 12:17 Now if we look at our app, it should be, There we go. 12:23 So it says Focus time, and it's changed its color. 12:27 Awesome. Let's make sure that it also works for 12:31 Break time. 12:33 So, here we are, broken again. 12:35 And we'll say run, Evaluate Expression, 12:36 prepare attempt, we'll do attempt kind, break. 12:41 Evaluate. 12:48 And we close that. 12:53 And we can continue running. 12:54 Now, if we look at our app. 12:57 There we go, Break time blue. 12:59 Beautiful, it's working. 13:01 Great, we got most of our states all set up. 13:03 But I left an important one out. 13:07 We need to start the timer with the appropriate time. 13:09 I wanted to explore another way to do things. 13:12 We just saw how to essentially bring the reference of the node into the controller 13:15 from the FXML. 13:20 But I wanna show you things the other way. 13:22 The FXML can actually bind to a property on the controller. 13:24 Let's explore the binding way of doing things right after this break. 13:28