Detailed Notes
We are continuing a series of tutorials focused on Spring Boot. The crux of the project is to convert/migrate an old JSP/Tomcat application to a modern Spring Boot application and Java 7/8 to a current version. This episode covers some minor changes that require logic structures (if) in Thymeleaf and we review buttons and alerts in Bootstrap 5 to make it easy to add color to your site.
You can learn more through our online classes at https://school.develpreneur.com and register for free. Registration will add you to our email list, and you will periodically receive coupons for courses and notifications of the latest releases.
Transcript Text
[Music] well hello and welcome back we are continuing our application conversion from Apache Tom Cat and JSP pages to Spring Boot and a more modern uh deployment of our Java application and one of the things we're doing is we're also upgrading to bootstrap 5 give ourselves a nice responsive interface sort of like I think this one set up let's see how close it is so sort of like this so responsive if you shrink it down you're going see that it still sort of looks halfway decent and then of course as you expand it out and that's all a responsive design if you haven't been exposed to that and we're also using time Leaf as the front end for the the tag library on that page and those are the two things we're going to focus on this episode because I'm going to look at this this login form there's a couple of things that we're going to get out of this is we're going to look at if statements and time which time Leaf which allows us to display or not this and for example if we look at that we've got that but if we log out then we get a nice little green one so it's we get a different response there we're also going to look at these buttons cuz it's actually all sort of related to this uh Alert in the uh bootstrap world now the ifs are super super simple so if we go to uh let's go to my login and you may have forgotten but we had two messages we had an invalid email or password message which is let's do it this way just to be grammatically and spelling we'll just keep that so that's like completely correct and we also have whether you're logged out or not not sure why I put a space there but let's go ahead and keep that on both now the if statement super super simple in this case is we're just saying hey if pam. error then so if we send it an error then we're going to give it an invalid email or address if there's a log out then we're going to say you've been logged out and you can actually see here if you go look up if you look up here you can see where I just sent it log out so if I do log in uh I'm sorry it was error I think was the name of it then it's not going to take that one oh it's probably because uh yeah I need it to be equal so yeah so those are depends on what we've got there is how it's going to pick up this Pam um and that is part of the built-in login stuff now this would be easier if I go to like for example if I log in and I wanted to do something here that I could say if it's uh you know if this is my name then I can do something special or not and then I can get a little and you can just like everything else you can get pretty complicated in your if statements because you you don't have to do just a true you know it's just any Boolean expression so I could say you know if the day is Monday and sky is blue or something like that I could put those things there I could put a nice complicated if statement and then use that whether I'm going to display things or not so it gives us a way to to do like for example uh messages you know error messages of or informational messages but also there could be things like we may want to do that log out so log out only appears if you're logged in of course here we don't uh do we have a oh we do yeah so I could put something like up here to say hey that log out button only appears when you're logged in otherwise it doesn't really make sense and maybe that changes and we see that a lot you'll see a a menu item that will change to log in if you're logged out and log out if you're logged in and so we use time quite a bit time leavs ifs quite a bit for that kind of stuff if you want to do some conditional displays and really that's you can get more complicated if you want but that gives you at least a way to you know display or not display things another example may be like up at the top on our homepage you know we have something like a um hello somebody somebody or not on our home page yeah I think it is on our homepage okay it's not on our homepage it's on our dashboard uh user dashboard is we've got this and so you know we could have some if around that and just say hey if they don't have a last name then only display their first name or you know things like that so there's a lot of little logical stuff you can do that will help you as you go as you go through things now you could also do just a straight up you know something like this where the message just could be empty so if I go to dashboard and I think if I I think I can just do this I'm hoping I've got it right so if I do message equals one two3 H it's not picking it up oh because messages I'm sorry that's not parameter that's actually a a value that's sent across so that actually comes from when you go to the dashboard and the the hello world or I'm sorry the hello uh controller that we've got there yeah so there's the dashboard and see I don't even send a message right now but I could do an attribute and say something like message uh what do I want to do uh we'll just say this could be we'll do something like this it's just like uh please check your email for an important notice let's say and I can do that and now I'm going to check it whether if this thing exists or not right now you see there's nothing there but if I run this through probably make me log in again yes it does and now I get to see like my little notice here and that's all just based on so I didn't even have to do you know notice before I didn't really have to do anything with it it just would display wherever that was in dashboard um where did it go where did it go there we go user dashboard um here I'm just going in there and I'm just displaying in font red you know very simple I'm just saying hey I have this text if I don't then it's just not going to display at all but if you want something more complicated for example if you wanted like on your homepage like log out maybe if you're already logged in maybe this stuff doesn't exist or you know register you may want to move some stuff around here based on this page so there's some things like that that you can look into uh as far as your uh logic now the other thing I wanted to talk about was the bootstrap world and if we go to login because these are a couple really powerful things that I think we you know some people Overlook um and that is uh let me go to the login form there's two things in here actually I want and they're very similar and it is alerts which is what we see when we see if I do let me just do this which is this so this nice you know built-in box it is a style it's a class actually so I can do an alert and then I can also give it there's several different types of alerts that exist in the uh bootstrap world and here's an example of them let me blow this up a little bit and these are really nice to know so they've got by default they've got all of these different colors like we use uh danger alert which is just alert and then it's Dash the name so we do alert D danger to get our red one we do alert - success to get our green one when we log out and then there's some others we can use all all over the place uh info might be used fairly regularly or your warnings um there's a primary and the key to this which actually goes to our buttons work the same way is we have here this is a a this is a danger uh alert but we could come out here these happen to be the buttons you can do the same thing so you can do alert and then and the button you can do a BTN so right now I have the just primary but if I made that danger then I'm going to see my red right there so I have the same thing and the nice thing about the buttons it this makes it look like a button act like a button everything about it seems to be a button even if like in this case register I don't know if you can see that but that's a here we go whoops if you do it you can see up there that it's a a it's an a. button. primary that's a that's just a link that's not an actual button button so we can fairly easily customize with a series of stuff we can customize our alerts real easy and you can do those separately of course with your CSS but also your buttons which becomes really powerful because you can say hey I'm going to set up my site with here's all my primary buttons and then here's all of my uh info type buttons or maybe I've got secondaries so for example you've got your main stuff your main buttons here and let's actually log in I'll show you where you could play around with that is uh I think this one I have buttons uh these aren't so here I have got all these links and I may look at it and say ah that doesn't make sense so what I want to do is if I go to my opportunities I can say view on site I got view on site I've got delete and I've got details so let's say I want to do this this is going to be a button and it's going to be button uh warning uh let's make it button error wait what did I want uh what did they call it again danger I'm sorry I always forget those names so you probably want to keep up uh keep them so now I have those link if I can type right let's do that again so I'm going to take I'm going to actually change up so now the uh Delete is going to be danger details will be info and view on site will be let's pick one let's make it success and so I could make these secondaries so I could make like view onite I could make it well I'm not going to mess with that right now yeah I well I know I'm going back and forth on this so I'll make that a secondary and we could do that with our entire site so that for example a lot of times you will see uh maybe some main buttons up here these would be your primaries or if there's like down here maybe there's a save and a discard and then on your list you may have some secondaries and it's an easy way for you to quickly you know stylize your your site and make it look distinctly different uh like in this case so if you look at this page now now let's go back out let's see if we relog in and go o i missed something I did something wrong uh what did I not do oops I put that in the wrong place that's my problem I can't put that on the slash a so let's see so there's button secondary for view on site Danger oh I just put that in two different places for some reason oh it built that for me that okay that I didn't want to do for some reason it auto filled that out okay now let's try it so now wait for the server to come up log in what did I do this time I missed one um here we go so it is in incomplete structure a okay oh let's look at that so okay so I've got an A and A SL a an a and a slash a let's do this so I can put it see on the same a and a SL a okay if you haven't noticed it does get a little bit picky if you don't get your uh tags all you know balanced properly and things like that which is probably good so you need to have your properly formatted uh HTML and tag so now let's see if I come in here there we go so now I see all these nice these look as like buttons instead of lengths so I didn't have to do much to change this up quite a bit and so now I've got and they're also like very distinct so I'm probably not as likely to accidentally you know hit a delete button um and of course we've got you know there's some other things particularly because we could have although the link is right there we may not want to call it that um we may want to move that into our action there's some things we can do that's minor stuff but now what we've done is we've been able to with very simple in again in the the world of bootstrap the two things that we got out of this are we have a BTN and that automatically makes a button regardless of what uh wait let me jump back over here and I'll show you so this button if I get rid of the secondary part then it's still going to be a button you can't really see it here because there's not much because the way it's you sort of its default is oh is it's going to be uh transparent and there's not much I can do here but I could do the background color um I can make it anything else so let's just make it black uh let's make it white yeah so I can make it anywhere there but the button by default is just clear so it's just going to be you're not going to really see anything but um let's see if I do this and let me say let me take that then you still will see well you're not going to see much to it because it doesn't have too much to it uh but you do get a little bit of like you know some the the primary one the default one you get nothing but you can stylize it pretty easily alert is the same way so I could come into any one of these and add row alert and I don't know which row I'm on let's just do alert uh info it may not pick that one up uh row alert alert info which one is it that one oh it's this one oh that's here that's this display there we go I'm sorry so here I can do that or I can get just the default is a clear so you're not going to get anything if you do just that uh but you do get some bonuses there if I do just Alert info though it's not going to look quite the same it's going to give me that background but notice here that alert does have a little extra styling you're going to see this pop a little yeah see alert actually puts it puts a little bit of border around that so that's some built-in stuff that's really nice to have just to do some nice little styling and stuff like that within your site using bootstrap and also then with time Le to time Leaf to give yourself some ifs and a little bit of logic so these are just some quick ones I want to throw out there if you haven't messed around with them they're good to know uh and there's some things that I started to use here as we were starting to clean some things up so that we have uh for example instead of just lengths we you know now these are all button and we just use if you look at them I think it's button yeah primary so we just used our which is wh here so we just made all our buttons primary there now we could make them all gray if we want to make them secondary we can also go in and CSS stylize them and make them all you know black and white whatever we want to do so good things to know good things to help you out uh if you have any questions shoot me an email info@ developing order.com and we're going to come back like next time we're just going to keep chugging Right Along on getting some of these pieces put together go out there and have yourself a great day a great week and we will talk to you next time hello this is Rob with develop andur also known as building better developers wanted to announce that we have school. develop or.com feel free to check it out if you like any of this information any of the content that we've sent and you would like to see more you can come out you can enroll for free we have free courses we've got places for you to get better at just learning a technology or how to you can work on your business skills we can help you with becoming a better developer as in coding and things like that a lot of the stuff you've seen on YouTube we also have out at school. develop andur we just have it in a little more of a uh educational format and a way for you to track your progress as you move forward becoming a better developer
Transcript Segments
[Music]
well hello and welcome back we are
continuing our application conversion
from Apache Tom Cat and JSP pages to
Spring Boot and a more modern uh
deployment of our Java application and
one of the things we're doing is we're
also upgrading to bootstrap 5 give
ourselves a nice responsive interface
sort of like I think this one set up
let's see how close it is so sort of
like this so responsive if you shrink it
down you're going see that it still sort
of looks halfway decent
and then of course as you expand it out
and that's all a responsive design if
you haven't been exposed to that and
we're also using time Leaf as the front
end for the the tag library on that page
and those are the two things we're going
to focus on this episode because I'm
going to look at this this login
form there's a couple of things that
we're going to get out of this is we're
going to look at if statements and time
which time Leaf which allows us to
display or not this and for
example if we look at that we've got
that but if we log out then we get a
nice little green one so it's we get a
different response there we're also
going to look at these buttons cuz it's
actually all sort of related to this uh
Alert in the uh bootstrap world now the
ifs are super super
simple so if we go to uh let's go to my
login and you may have forgotten but we
had two messages we had an invalid email
or password message which
is let's do it this way just to
be
grammatically and
spelling we'll just keep that so that's
like completely correct and we also have
whether you're logged out or
not not sure why I put a space there but
let's go ahead and keep that on both now
the if statement super super simple in
this case is we're just saying hey if
pam. error then so if we send it an
error then we're going to give it an
invalid email or address if there's a
log out then we're going to say you've
been logged out and you can actually see
here if you go look up if you look up
here you can see where I just sent it
log
out so if I do log
in uh I'm sorry it was error I think was
the name of it then it's not going to
take that
one oh it's probably
because
uh yeah I need it to be equal
so yeah so those are depends on what
we've got there is how it's going to
pick up this
Pam um and that is part of the built-in
login stuff now this would be easier if
I go to like for example if I log
in and I wanted to do something here
that I could
say if it's uh you know if this is my
name then I can do something special or
not and then I can get a little and you
can just like everything else you can
get pretty complicated in your if
statements because you you don't have to
do just a true you know it's just any
Boolean expression so I could say you
know if the day is Monday and sky is
blue or something like that I could put
those things there I could put a nice
complicated if statement and then use
that whether I'm going to display things
or not so it gives us a way to to do
like for example uh messages you know
error messages of or informational
messages but also there could be things
like we may want to do that log out so
log out only appears if you're logged in
of course here we don't uh do we have a
oh we
do yeah so I could put something like up
here to say hey that log out button only
appears when you're logged in otherwise
it doesn't really make sense and maybe
that changes and we see that a lot
you'll see a a menu item that will
change to log in if you're logged out
and log out if you're logged
in and so we use time quite a bit time
leavs ifs quite a bit for that kind of
stuff if you want to do some conditional
displays and really that's you can get
more complicated if you want but that
gives you at least a way to you know
display or not display things another
example may be like up at the top on our
homepage you know we have something like
a um hello somebody somebody or not on
our home page yeah I think it is on our
homepage okay it's not on our homepage
it's on our
dashboard uh user dashboard is we've got
this and so you know we could have some
if around that and just say hey if they
don't have a last name then only display
their first name or you know things like
that so there's a lot of little logical
stuff you can do that will help you as
you
go as you go through things now you
could also do just a straight up you
know something like this where the
message just could be empty so if I go
to
dashboard and I think if I I think I can
just do this I'm hoping I've got it
right so if I do message equals one
two3 H it's not picking it up oh because
messages I'm sorry that's not parameter
that's actually a a value that's sent
across so that actually comes from when
you go to the dashboard and the the
hello world or I'm sorry the hello uh
controller that we've
got
there yeah so there's the
dashboard and see I don't even send a
message right
now but I could do an attribute and say
something
like message uh what do I want to do uh
we'll just say this could be we'll do
something like this it's just like uh
please
check your email
for an important
notice let's say and I can do that and
now I'm going to check it whether if
this thing exists or not right now you
see there's nothing there but
if I run this
through probably make me log in again
yes it
does and now I get to see like my little
notice here and that's all just based on
so I didn't even have to do you know
notice before I didn't really have to do
anything with it it just would display
wherever that was in dashboard
um where did it go where did it go there
we go user dashboard um here I'm just
going in there and I'm just displaying
in font red you know very simple I'm
just saying hey I have this text if I
don't then it's just not going to
display at all but if you want something
more complicated for example if you
wanted like on your
homepage like log out maybe if you're
already logged in maybe this stuff
doesn't exist or you know register you
may want to move some stuff around here
based on this page so there's some
things like that that you can look into
uh as far as your uh logic now the other
thing I wanted to talk about was the
bootstrap world and if we go to login
because these are a couple really
powerful things that I think we you know
some people
Overlook um and that is uh let me go to
the login
form there's two things in here actually
I want and they're very similar and it
is
alerts which is what we see when
we see if I
do let me just do
this which is this so this nice you know
built-in box it is a style it's a class
actually so I can do an alert and then I
can also give it there's several
different types of alerts that exist in
the uh bootstrap
world and here's an example of them let
me blow this up a little
bit and these are really nice to know so
they've got by default they've got all
of these different colors like we use uh
danger alert which is just alert and
then it's Dash the name so we do alert D
danger to get our red one we do alert -
success to get our green one when we log
out and then there's some others we can
use all all over the place uh info might
be used fairly regularly or your
warnings um there's a
primary and the key to this which
actually goes to our buttons work the
same way is we have here this is a a
this is a
danger uh alert but we could come out
here these happen to be the buttons you
can do the same thing so you can do
alert and then and the button you can do
a BTN so right now I have the just
primary but if I made that
danger then I'm going to see my red
right
there so I have the same thing and the
nice thing about the buttons it this
makes it look like a button act like a
button everything about it seems to be a
button even if like in this case
register I don't know if you can see
that but that's a here we go whoops if
you do it you can see up there that it's
a a it's an a. button. primary that's a
that's just a link that's not an actual
button button so we can fairly easily
customize with a series of stuff we can
customize our alerts real easy and you
can do those separately of course with
your CSS but also your buttons which
becomes really powerful because you can
say hey I'm going to set up my site with
here's all my primary buttons and then
here's all of my uh info type buttons or
maybe I've got secondaries so for
example you've got your main stuff your
main buttons here and let's actually log
in I'll show you
where you could play around with
that
is uh I think this one I have buttons uh
these aren't so here I have got all
these links and I may look at it and say
ah that doesn't make sense so what I
want to do is if I go to my
opportunities I can say view on site I
got view on site I've got delete and
I've got details so let's say I want to
do
this this is going to be a
button and it's going to be button uh
warning uh let's make it
button
error wait what did I want uh what did
they call it again danger I'm sorry I
always forget those names so you
probably want to keep up uh keep them so
now I have those link if I can type
right let's do that again so I'm going
to
take I'm going to actually change up so
now the uh Delete is going to be danger
details will be
info and view on site will be let's pick
one let's make it
success and so I could make these
secondaries so I could make like view
onite I could make it well I'm not going
to mess with that right now yeah I well
I know I'm going back and forth on this
so I'll make that a secondary
and we could do that with our entire
site so that for example a lot of times
you will see uh maybe some main buttons
up here these would be your primaries or
if there's like down here maybe there's
a save and a discard and then on your
list you may have some secondaries and
it's an easy way for you to quickly you
know stylize your your site and make it
look distinctly different uh like in
this case so if you look at this page
now now let's go back out let's see if
we relog in
and
go o i missed something I did something
wrong uh what did I not
do oops I put that in the wrong
place that's my problem I can't put that
on the slash a so let's see so there's
button secondary for view on
site
Danger
oh I just put that in two different
places for some
reason oh it built that for me that okay
that I didn't want to do for some reason
it auto filled that out okay now let's
try
it so now wait for the server to come up
log
in what did I do this
time I missed one
um
here we go so it is in incomplete
structure a okay
oh let's look at that so okay so I've
got an A and A SL a an a and a slash a
let's do this so I can put it see on the
same a and a SL a
okay if you haven't noticed it does get
a little bit picky if you don't get your
uh tags all you know balanced properly
and things like that which is probably
good so you need to have your properly
formatted
uh HTML and tag so now let's see if I
come in here there we go so now I see
all these nice these look as like
buttons instead of lengths so I didn't
have to do much to change this up quite
a
bit and so now I've got and they're also
like very distinct so I'm probably not
as likely to accidentally you know hit a
delete button um and of course we've got
you know there's some other things
particularly because we could have
although the link is right there we may
not want to call it that um we may want
to move that into our action there's
some things we can do that's minor stuff
but now what we've done is we've been
able to with very simple in again in the
the world of bootstrap the two things
that we got out of this
are we have a BTN and that automatically
makes a button regardless of what uh
wait let me jump back over here and I'll
show you so this
button if I get rid of the secondary
part
then it's still going to be a button you
can't really see it here because there's
not much because the way it's you sort
of its default is oh is it's going to be
uh
transparent and there's not much I can
do here but I could do the background
color um I can make it anything else so
let's just make it black uh let's make
it white yeah so I can make it anywhere
there but the button by default is just
clear so it's just going to be you're
not going to really see anything but
um let's see if I do
this and let me say let me take
that then you still will see well you're
not going to see much to it because it
doesn't have too much to it uh but you
do get a little bit of like you know
some the the primary one the default one
you get nothing but you can stylize it
pretty easily alert is the same way so I
could come
into
any one of these and
add
row alert and I don't know which row I'm
on let's just do
alert uh
info it may not pick that one up uh row
alert alert info which one is it that
one oh it's this
one oh that's here that's this display
there we go I'm sorry so here
I can do that or I can get just the
default is a clear so you're not going
to get anything if you do just that uh
but you do get some bonuses there if I
do just Alert info
though it's not going to look quite the
same it's going to give me that
background but notice
here that alert does have a little extra
styling you're going to see this pop a
little yeah see alert actually puts it
puts a little bit of border around that
so that's some built-in stuff that's
really nice to have just to do some nice
little styling and stuff like that
within your site using
bootstrap and also then with time Le to
time Leaf to give yourself some ifs and
a little bit of logic so these are just
some quick ones I want to throw out
there if you haven't messed around with
them they're good to know uh and there's
some things that I started to use here
as we were starting to clean some things
up so that we have uh for example
instead of just lengths we you know now
these are all button and we just use if
you look at them I think it's button
yeah primary so we just used our which
is wh here so we just made all our
buttons primary there now we could make
them all gray if we want to make them
secondary we can also go in and CSS
stylize them and make them all you know
black and white whatever we want to do
so good things to know good things to
help you out uh if you have any
questions shoot me an email info@
developing order.com and we're going to
come back like next time we're just
going to keep chugging Right Along on
getting some of these pieces put
together go out there and have yourself
a great day a great week and we will
talk to you next time hello this is Rob
with develop andur also known as
building better developers wanted to
announce that we have school. develop
or.com feel free to check it out if you
like any of this information any of the
content that we've sent and you would
like to see more you can come out you
can enroll for free we have free courses
we've got places for you to get better
at just learning a technology or how to
you can work on your business skills we
can help you with becoming a better
developer as in coding and things like
that a lot of the stuff you've seen on
YouTube we also have out at school.
develop andur we just have it in a
little more of a uh educational format
and a way for you to track your progress
as you move forward becoming a better
developer