One of the things that's important to gather up at this beginning phase

is to determine what makes the state of our application change.

So there's a couple of things from the mockup that change the state.

Now obviously, there are buttons, right?

Play, Pause and Resume.

Now clicking Start will begin a new attempt and

change the color of the screen and start the timer.

Let's take a look at the board, and see if we can't see anything else.

Okay, so let's pick up the story here.

As a user, I should always know what state I am in, focus, break or

pause, so that I'm not distracted.

So, let's pull that over into the doing column and

let's talk about that a little bit.

So that was where we wanted to just change the color of the screen, right,

so the way that we solved that with a mock ups was the screen color changes, right?

Focus is one color, break is another color and when it's paused,

the pause button shows up.

In addition to changing the color of the screen,

we also wanted to set the title of the page of what's happening.

Let's go set that up in our controller.

So, in addition to changing the color of the screen,

we also wanted to set that title, remember it's at focus time or break time.

So, we need to set up our controller.

Cuz we don't have one currently.

So let's go to this home.fxml.

I used home as the name there for like the home screen.

Make sense,

because we don't have any other screens here so this was the home, the main one.

All right so one quick way to set up the controller is you can just define it.

Doesn't have to exist yet.

Com.teamtreehouse.pomodoro.

Even a package, right?

Controllers, let's drop it in a controllers package.

And let's call it home.

And if I come over here it's gonna say create the class.

Yeah, that's what we want.

Cool.

And now we have, under our controller package we have home.

Awesome.

So, we know that we want to know what the current attempt is that's

happening, right?

So let's go ahead and let's make that a private variable.

It's gonna ask and yep, that's what we mean, okay.

First things first.

Let's set up a method that starts a new attempt.

We'll use this for all of our attempt kinds.

So it should take an attempt kind.

Right. So let's keep it private.

Nobody needs to know about it yet.

Nobody on the outside, that is.

We can use this internally all we want.

So we'll say prepareAttempt and it takes an AttemptKind, We'll just call it kind.

Okay, and let's go ahead and we'll build a brand new attempt for

each time this method gets called.

So we're gonna set our CurrentAttempt = new Attempt and it takes a kind.

And we don't yet have what that message is, so let's leave it blank for now.

A common approach to handling design changes is to add and remove a CSS class.

Now we can do that here, right?

Let's add a class for the kind.

Then we can put whatever styles we want in that class definition.

Right? Does that make sense?

So, let's do that.

But first, let's make sure that we have a handle on the root node,

which is what we want.

Let's look at what's over there.

So, here, fx:id="container".

So, remember, in your controller, there is that FXML annotation.

And, we want to bring in a private VBox and its name is container.

Perfect, awesome.

If you click this, over here, it flips to right where the thing is.

It's kind of handy.

It flips back.

Does not.

Okay, and now let's make our method, column method that we haven't yet created.

We'll call it add attempt style, that makes sense right?

That's what we're going to do, we're going to have the style of what this attempt is,

so we'll say addAttemptStyle and let's have that take a kind.

Okay so, a method doesn't exist yet.

Let's go ahead, and

let's use this intention action to create the method for us.

Okay?

Awesome.

All right, so we have a handle on our container,

and containers have things that are called get style class.

Now, that sounds like that returns one, but

actually what happens is it returns a list.

It's a little weird of language, maybe get style classes would have been better,

but it is what it is.

It's called StyleClass on the other side, right.

It's not StyleClasses even though there could be multiple ones.

So, it returns a list, and because it's a list, we can just add to it, right.

So we're going to .add and let's push in the name of the kind.

And we already have the name, right?

That was the word in all caps that we wrote out before.

But let's make the class a little bit quieter, right?

So, we'll say kind.

If you do toString, it will use that name that we gave it.

And then, we'll do toLowerCase.

Now I remember in the notes from what

Susan gave me when I transferred something over, I actually already made this for us.

So let's take a look in the CSS that we're using here.

And if we scroll down here into the state based selectors.

Down here, so look, here's focus, that was the name of the focus.

And what's gonna happen is it's gonna change the background color to this.

And break will change the background color to that, whatever that is.

Oh look, it's a bug.

I'll fix that.

Okay, so let's think this through.

Let's walk back through this.

So it's gonna come in, we're gonna call prepareAttempt, and

it's gonna set the CurrentAttempt to a new one, which is totally cool.

And it's gonna add an AttemptStyle.

So let's say that we pushed in one that was focus.

It's gonna come through, it will add focus and

let's say that we push one in that's break.

Oh, it's gonna add two.

We don't want that, we don't want it to say focus and break.

Cuz then what's gonna happen?

Both of those classes are gonna be there and both of those are gonna apply, and

the last one defined will apply.

So it will always be that color break.

We don't wanna do that.

So, we wanna remove them too, right?

So let's do that.

You can, let's make something for exactly what we're trying to do.

We gonna say private and then it'll be a void, let's make a clearAttemptStyles.

What we can do here is we can loop through everything that's in that enum, and

just remove it, just pop it off.

Right. So for AttemptKind kind, and

if you say on an enum attempt kind dot values,

it will loop through each one of the values that are in the enum.

Now again, that's a list.

So get style class is a list, and lists have a thing

that's handy called remove, which it will pop the object off, should it exist.

It won't give you an error if it doesn't,

so let's just loop through all of them and pop off what's on there.

Probably a little cleaner way to do this, but it'll work for

now and because we've put it in our own method we can fix this however we want.

As long as it does that.

As long as it clears the attempt styles we can change this however we want, right?

So I'm gonna put that right at the top of the prepare attempt, right?

Let's start with a clean slate.

So we'll say clear attempt styles.

And then we'll add the attempt style.

Okay, and so the next thing that we wanna do, is we wanna

set the text label with the name of the kind of attempt that's going on.

So let's get a handle to the title in our controller.

So, what was that?

That was title, so let's get a handle over here.

We'll say @FXML private it was

label and it's called title.

And we want gamma Java FX version of that.

You can have this on the same line or below.

Sometimes it auto corrects to that.

So I like to at least have it in the same style, whatever that's going on the file,

keep it the same way.

It's really up to your team on a style decision for that sort of thing.

And this prepare attempt, we could set the title, right.

We could do this title.setText and we could just set it to the kind, and

we could get the two string version of that.

But that's not really what we want, right.

Like what if we changed the word from being focused?

And it's in all caps, too.

We don't want to have to play around with stuff.

So we want a display name.

And why don't we just set that as a constant as part of the enum.

Let's do that, so

we'll say get DisplayName, that sounds like a good function, right?

We're wanna say, how do we display this?

So we'll save that and I am going to click here.

Let's use the intention action and we'll create a method, getDisplayName.

There we go.

And let's do a private

String m DisplayName.

Didn't work out exactly the way that I wanted it to.

[LAUGH] And we'll pop it in the constructor here, too.

So, let's do displayName and

we'll say mDisplayName = displayName and

of course that's a string.

Okay so now these are complaining obviously, and so

we want this to be called Focus time, and we want this to be called Break time.

Now of course, if that changes, if the way that these words change,

what's nice is this focus could, we could have something totally,

concentration time over here, right.

But we could still call it focus in our code, whenever we use focus and

then this could kind of change.

So that helps keep things dynamic.

I'm really liking this enum usage.

I mean, imagine if we had to go through a big if else switch here.

Since everything else is already defined, we can just use it, right.

So we're using this kind.getDisplayName, perfect.

All right, I'm ready to see if this is working.

But how do we do that?

One trick that I like to use is I like to drop in, right at the top here,

let's just add a Button.

And this works really well in

things where you don't have much control of when input comes in.

Because this program will just run and it will be sitting there.

So let's give this an ID, and I like to use all caps so I don't forget about it.

And we'll say onAction DEBUG, all right?

And, of course, debug doesn't exist cuz we just made that up.

So we will create a method over here.

Void DEBUG, and we'll just make it do something silly.

All right, so now if we kick off things in debugger mode

Something is wrong.

Oh, I forgot to close the tag.

That's what it's angry about.

So let's try that again, let's run in debug mode.

Okay, so there is a button there that I forgot to label Debug.

Let's do that really quick.

So you can.

See that.

And I will close main there.

Let's do that again.

Let's run DEBUG.

There we go, there's the DEBUG button.

Got some weird styling that it's inherited, but that's all right.

And if I click it and say hi mom, we don't necessarily want that.

We want to put a break point on where it says hi mom, right?

So now, if we do debug.

There's our app.

When we click it, we're going to pause.

And now we can use that trick that we learned before with

this Evaluate Expression.

And I can say prepareAttempt(AttemptKind), and we'll do FOCUS first,

(AttemptKind.FOCUS).

What that should do, is it should.

So it returned void, but it should have, as we continue our app.

Now if we look at our app, it should be, There we go.

So it says Focus time, and it's changed its color.

Awesome. Let's make sure that it also works for

Break time.

So, here we are, broken again.

And we'll say run, Evaluate Expression,

prepare attempt, we'll do attempt kind, break.

Evaluate.

And we close that.

And we can continue running.

Now, if we look at our app.

There we go, Break time blue.

Beautiful, it's working.

Great, we got most of our states all set up.

But I left an important one out.

We need to start the timer with the appropriate time.

I wanted to explore another way to do things.

We just saw how to essentially bring the reference of the node into the controller

from the FXML.

But I wanna show you things the other way.

The FXML can actually bind to a property on the controller.

Let's explore the binding way of doing things right after this break.