Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
What do you do when your micro-framework doesn't provide a feature you need? You build it!
Flash message CSS
#flash-message{
background-color: #2c89ba;
border-radius: 5px;
color: #fff;
display: block;
font-size: 14px;
padding: 10px 20px;
}
Explore
One way you to get around the duplication is by taking advantage of the request.attributes and creating a model object in a global before filter. That would allow you to do whatever injecting of the model that was common to all requests. In the controller you just then pull out request.attributes[“model”] and add specific information, but it would have the flash message.
-
0:00
Okay, so now let's develop our flash messages.
-
0:04
So again, not having all the tools at your disposal
-
0:07
doesn't mean that we can't build our own.
-
0:09
So one thing we haven't talked about yet, and
-
0:10
we're gonna lean on this pretty heavy, are these things called sessions.
-
0:15
So web sessions are a key value data store that are available in most frameworks.
-
0:19
They're specific to the client or the website and
-
0:21
it's kinda like a pocket that you can stuff things into.
-
0:25
Spark offers one and you can access it right off the request.
-
0:28
So the way that Spark uniquely identifies a session,
-
0:32
it does it by sending out a uniquely identified cookie.
-
0:34
We'll take a look at that here in a bit.
-
0:37
But the server then uses that cookie to maintain a data store for
-
0:41
each client who asks for one of these sessions or packets.
-
0:44
Let's start by using it and I'll show you how it works.
-
0:47
Let's build a simple way to set a single flash message.
-
0:51
So first let's attack the messaging around voting.
-
0:54
So add voter, we made it so that it returns a boolean, but
-
0:57
we're not doing anything here with it yet, so let's catch it.
-
0:59
So let's say boolean added, and let's let them know that their vote counted, right?
-
1:04
Otherwise it's kinda confusing.
-
1:05
You vote and get redirected and might see it there in the list, but
-
1:09
let's make sure that they see it.
-
1:10
So we'll say if added, and we'll call a message that we have
-
1:15
not written yet, so we'll say set flash message.
-
1:21
Thanks for your vote.
-
1:27
Now what's nice about writing the message name before it exist is,
-
1:31
IntelliJ is gonna build this for us.
-
1:33
So we'll say, create method set flash message.
-
1:36
And now it knew that we are in the static context, right?
-
1:41
And it knew that it didn't return anything cuz we didn't ask it to return anything.
-
1:44
And it popped in the request and the string for us.
-
1:46
I'm gonna clean this up a little bit here.
-
1:48
It's not quite right.
-
1:49
So we're gonna say the string is the message.
-
1:53
The request has a method named session on it.
-
1:57
So if we say req.session and you see there, there's two options.
-
2:04
We have one here that says create or something with no parameters.
-
2:10
So, by default, it will create one.
-
2:13
And this is okay in this case cuz we're saying set the flash method,
-
2:17
but we don't want it to always create it.
-
2:19
So, when we go to check this in a bit we wanna remember that we don't wanna
-
2:23
create a session if we don't need it, right?
-
2:24
Because that's just expensive and wasteful.
-
2:27
But we're gonna set a message, and
-
2:28
if we don't have one of these web sessions to do, we need to have it right, so.
-
2:33
So we're gonna say req that session and
-
2:36
the way you set key values is with a thing called attribute.
-
2:39
So we're gonna say attribute and attribute we want is we wanna set a flash message.
-
2:45
So this is the key the name and
-
2:47
there we're gonna pass in what came across which is message there.
-
2:53
We're probably gonna use this string here a lot to get them out as well.
-
2:57
So this is a place where we should store it once and then use it many times.
-
3:01
So let's go ahead, and I'm gonna do, I'm just gonna say flash message key.
-
3:06
And this is a good place for a constant.
-
3:08
And remember those are all capitals.
-
3:09
So we'll say FLASH_MESSAGE_KEY.
-
3:11
And of course that's not defined yet, but
-
3:13
let's go ahead and have IntelliJ help us out.
-
3:15
So we'll create a constant field FLASH_MESSAGE_KEY.
-
3:18
Exactly what we want.
-
3:20
So there it is,
-
3:21
it blew out java.lang.String completely for some reason.
-
3:24
We don't need that.
-
3:26
FLASH_MESSAGE_KEY.
-
3:27
And we're gonna set to be flash message.
-
3:31
We could then change that to whatever we want in the future,
-
3:34
should that have some sort of namespace closure.
-
3:36
But this is all up here and
-
3:37
remember it's static because we're accessing inside of a static method.
-
3:41
Awesome.
-
3:42
So, what good is our setter if we don't have a getter, right?
-
3:47
So let's go ahead and let's add our getter.
-
3:50
Now this one is gonna be a little bit trickier.
-
3:53
So it's also gonna be private.
-
3:55
It's static, cuz we're gonna access from inside.
-
3:57
I'm gonna say getFlashMessage.
-
4:03
It's gonna require a request object,
-
4:05
because that's how we're gonna get to the session.
-
4:10
Okay so like I was saying before one thing I wanna make sure is that we
-
4:14
don't create these sessions if we're not gonna use them.
-
4:17
You don't wanna check and accidentally create one.
-
4:19
Totally wasteful.
-
4:21
So what you can do is pass a false through there.
-
4:23
So if you say req.session and
-
4:26
you pass a false which this should just create if it doesn't exist.
-
4:30
So we're gonna say false.
-
4:32
If that doesn't exist, then there's no flash message to get,
-
4:37
so we should just return null, right?
-
4:41
So we're gonna shortcut this function.
-
4:43
There's no need to keep going.
-
4:45
And I'm sorry. It's not void.
-
4:46
We wanna return a string.
-
4:50
Okay.
-
4:50
So, if the session already exists, maybe somebody else created it.
-
4:55
So we wanna make sure that our key exists, okay?
-
4:58
So we're gonna say if req.session, and now we know that it already exists.
-
5:05
Because if it did, the session wouldn't [INAUDIBLE].
-
5:08
So if req.session.attributes, this is a way you can get all of them,
-
5:11
contains FLASH_MESSAGE_KEY.
-
5:17
Okay, so what we're gonna say here is actually if it doesn't
-
5:21
let's get out too, we return null.
-
5:28
And then finally, if it does exist, we can pop it out.
-
5:32
Now here's the thing, we need the cast.
-
5:34
Remember we needed a type cast because what goes in there are, it's,
-
5:39
the key is a string but the value is an object.
-
5:43
So we're going to get the session, we know that it exists.
-
5:46
We're going to pull out the attribute.
-
5:47
FLASH_MESSAGE_KEY.
-
5:51
Cool.
-
5:52
So now we can get and set our messages, let's make a way to display them.
-
5:57
Now this really could be on any page, so
-
5:58
first let's set up our base.hbs with a flash message area.
-
6:03
So let's go into base and
-
6:07
right in here inside the page, let's make it the first thing inside the page.
-
6:11
So, one thing that we haven't done yet is we have not pushed a model in.
-
6:17
So this could be on any page so let's go ahead and
-
6:19
let's say any model that has a thing called flash message.
-
6:25
We will just write out p and
-
6:29
I'm going to give it an HTML id, so we can really specifically target this.
-
6:34
So we'll say flash-message and
-
6:37
we will write out here the value of flashMessage should it exist.
-
6:41
Now one thing that's really nice about Handlebars is see that if there.
-
6:46
This if even if it doesn't exist, if this doesn't exist,
-
6:49
it somehow is going to say it's okay it doesn't exist in the model,
-
6:54
I don't care that you're talking about a variable that doesn't exist.
-
6:57
In Java that would kinda throw up.
-
6:58
It would say that this doesn't work, this can't compile,
-
7:01
I don't know what you're talking about.
-
7:02
But here in Handlebars it's kinda wrapped in a notion of something that's kinda
-
7:07
falsey, right?
-
7:09
Okay, so Sully is always thinking ahead, our designer friend.
-
7:13
He sent me some CSS already.
-
7:14
He said, if you ever wanna show them some flash messages, why don't you use this?
-
7:17
Which is great because I would not know how to style this or
-
7:21
even think about styling it, so let's pop into our main CSS and
-
7:26
I'm just gonna add this here at the bottom.
-
7:28
We'll add this flash message.
-
7:31
Cool. Thank you, Sully, once again.
-
7:34
He's so good.
-
7:36
So let's go show this on our list of ideas.
-
7:40
When we're showing the ideas here, we're now going to add to our model.
-
7:43
We'll say model.put and let's put in a flashMessage,
-
7:48
right, that was the model variable that we're looking for.
-
7:50
And we'll say getFlashMessage and we'll pass on the request.
-
7:56
Cool, and that therefore, if it exists it will push it across.
-
7:59
If not, it will be null and it will not show our flashMessage.
-
8:02
So let's go ahead and let's open this up and
-
8:07
reboot the server and I'm gonna come over and
-
8:13
let's refresh the page here let's get back to the ideas list
-
8:22
let's put in Spark Testing and suggest that.
-
8:27
Okay, now let's go ahead and look first at these resources.
-
8:30
And we'll look at our cookies.
-
8:34
And you'll see that I only have this username of myself here.
-
8:38
But when I vote, you should create the session and set that message
-
8:44
that we successfully voted into it, which will therefore, first create a session.
-
8:48
Okay, so let's click vote.
-
8:50
Boom. Here's our flash message, and
-
8:52
look, here is our cookie, and
-
8:54
this is the way that we're being uniquely identified from Spark.
-
8:57
So the name of it is this, and this is the value, some long value over there,
-
9:03
but that's how it's knowing what session we're talking about.
-
9:08
So, we have a session.
-
9:10
So, let's see, if I refresh this page, hmm.
-
9:16
That message stays there because the flash message is there.
-
9:21
One thing most flash messaging systems do is make sure that
-
9:24
after the user has seen the message once, they don't see it again.
-
9:27
So, let's make ours a little bit smarter.
-
9:28
We wanna leave the gitting in place in case they don't want this specific
-
9:32
functionality but, in this case, I think it makes sense.
-
9:34
So, let's go over, back to our main method.
-
9:37
And let's add, let's add a new method called
-
9:41
captureFlashMessage, it will be much like this.
-
9:49
So I'm gonna copy it and instead of get let's say captureFlashMessage.
-
9:59
And let's pull that out, let's pull the message up,
-
10:02
string message equals get flash message and pass on the request.
-
10:07
Okay, so if the message isn't empty, if we've got something, right?
-
10:15
Then we have a session, so we should remove that key completely.
-
10:20
So the way that you do that is remove attribute, and
-
10:23
we're gonna remove the FLASH_MESSAGE_KEY.
-
10:25
So therefore, this is going to see if it exists,
-
10:27
if it does, we are going to get rid of it.
-
10:33
You're going to pop that off of the session.
-
10:36
Cool.
-
10:37
So now we come back to where we were using getFlashMessage.
-
10:44
Which is in our listing of our ideas up here, somewhere, here it is,
-
10:52
so, we're saying getFlashMessage, we're going to say captureFlashMessage.
-
10:56
So this time it will show it once, and then it will disappear.
-
10:59
So let's add an else to where that voter call was, right?
-
11:04
So else, so it wasn't added, so we're gonna say setFlashMessage,
-
11:11
and we'll say request, you already voted.
-
11:16
Now see how easy it was now that we have all the functionality in place to add
-
11:20
a brand new message, it's pretty easy now.
-
11:23
So while we're here, let's go ahead and let's check our to do's.
-
11:26
So we have this one about sending a message about a redirect somehow.
-
11:29
So before they try to get to the ideas page, if they are not logged in,
-
11:34
we redirect them.
-
11:35
So let's go ahead and let's get rid of that to do and let's add a flash message.
-
11:44
We'll say whoops, please sign
-
11:49
in first and it will redirect.
-
11:57
Here's the other thing.
-
11:58
For the splash page, we need to make sure that we also
-
12:01
capture the flash messages and add them to the model.
-
12:05
This is starting to feel a little duplicated isn't it.
-
12:09
Check the teacher's notes if you're interested in how we might be able to
-
12:12
wrap this up.
-
12:15
So it's a captureFlashMessage(req).
-
12:22
So for now it's in only two of these calls but
-
12:24
if we do this we're gonna have to do this everywhere.
-
12:27
So you wanna make some way to make that generic,
-
12:29
but again check the teacher's notes.
-
12:31
So let's go ahead and let's pop over and we'll wipe both of our cookies away.
-
12:39
Let's get rid of the username too.
-
12:41
We will try to refresh the ideas page, okay?
-
12:46
So what's gonna happen is it should tell us that we need to log in.
-
12:49
So we're redirected, face palm, I forgot to restart the server.
-
12:56
Do not forget to restart the server.
-
12:59
So frustrating, right?
-
13:01
Okay.
-
13:05
What did I do wrong?
-
13:07
So it says, I forgot to pass in the request.
-
13:13
Okay, so let's run that again.
-
13:16
We're not logged in, we're going to go to /ideas.
-
13:19
Now this is going to create a flash message for
-
13:21
us cause or create a session for us because it's going to set a flash message.
-
13:26
There. So it says whoops, please sign in first.
-
13:27
Now that redirect makes more sense, doesn't it?
-
13:30
And there is out session idea that got created.
-
13:32
So now let's log in and if we go to view all course ideas.
-
13:40
And we'll say Spark Testing.
-
13:45
I'll vote for it once and it'll say, thanks for your vote.
-
13:47
And if I come and I refresh this page, see how the message has gone away.
-
13:54
But if I try to vote again, it'll say, you already voted.
-
13:57
Awesome.
-
13:59
That was an excellent micro-implementation of flash messages using web sessions.
-
14:04
Wow. You built that
-
14:05
messaging system in a flash!
You need to sign up for Treehouse in order to download course files.
Sign up