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. Thymeleaf is an important piece of Spring Boot applications and we start a deeper dive into it with this episode.
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 continu do where we're converting our old JSP uh Tom Cat application to a new fine awesome shiny whiter better smaller all that good stuff spring boot application and what we're going to talk about this time we going to get a little bit into the display now last time around we were able to list we basically just did a nice little list page so we came through and we were listing essentially each of the columns out of our table and we were doing that uh not the rest controller if I can go back to my controller we're using that by basically coming in we had set up jdbc and we're walking through we just basically built a results or a list um list by user and we grab the results and all we do is we just throw the results in and then if you remember we go to opportunity list and we did this little thing here and that's what I want to talk about is I want to talk about time Leaf this time uh because this is something we're going to be doing for the next couple little uh episodes essentially we're going to do a little bit of pulling in some of our pieces so we just used it last time we just had it and then we did an include here or basically just did xmlns I want to step back a little bit if you go to time Leaf I've I'm going I'm at which is t h y m that kind of time l e a.org G if you go there you can see uh there's a nice tutorial there's a bunch of stuff to get that but the key is that you get a nice little little tutorial and it does give you an idea of what it does if you've worked with just about any um any application framework web application framework you have the idea of being able to access things from the server and that's what time Lea gives us now what it does oops I want to go to the source code is it basically does it through this we just do a th colon and then in this case like we're going to do th text and that's going to set our div now what I want to talk about this time is let's go ahead and turn this into which we saw here this little thing so this piece is really what we were kicking out but now there's some structure around it and the way we do that is thing called fragments and so here is where essentially if I take this out oh if I do this I take that out me restart it because you have to restart it so it'll load all your stuff right then this is what we see so really nothing there I mean it's like it's a very simple bunch of divs things like that now what we did is we had formatting and all kinds of other stuff came from this one thing now it's not because this is super magical it's because I'll show you that file the key here is we're going to have a fragment and fragments go in the resources fragments folder and this one is actually going to be called header so if I have header. HTML which is what it's looking for and if I go look at that now this came over for an older application I pulled whoops a bunch of information over uh a lot of this stuff like The Meta tags doesn't really matter um actually let's go fill that out just because not sure why I didn't have those I'm not sure why I didn't have this set but uh so I've got like a title now here is a key too that we're going to look at in a minute but okay so in here let me start with the fragment side what we do is we're going to come in and we're going to create an HTML file and we're going to have a fragment and we're going to give it a name which is here and then down here is the end of that div so I could actually see this because it is HTML uh but I don't really need to now if we look at this fragment name Main and I go to opportunity list we can see here that it's going to go look for in the fragments header and it's going to pull in the main section let me go ahead and at the bottom let me do the same thing and I'm going to show you what a footer looks like so let me do a footer and I'm going to call it footer and it's going to be the main and I'm going to take my footer here I'm going to rename it uh to footer. HTML so we're going to create a fragment on the Fly here wh uh did I not get it right footer dot HTML there we go and what I'm going to want to do much as I did in the header is I'm going to have a main fragment so if I go here I'm just going to do it right at the top this is something I used in the past but all I'm going to do here is do that so now I've got a big Li div and this is my fragment now now I do have some stuff here I need to change over which we're going to see uh let's see I want to make sure I can get it all uh should be okay until I get to this because I was using some stuff I don't need to so now uh and I'm also going to this is going to be a this JS that stuff let's see that's still going to be probably okay but this is because it's coming from local I'll show you how to pull that in uh and so uh where' I go to if I go to uh no if I go to header now one of the things I've got here is I've got fragments and so that's where I'm going to put my fragment so it's going to look for in that folder now the other thing I've got is static and within um and that's also within the resource so I've got fragments folder I've got a stag static folder within that I have dropped in bootstrap 502 which is right here and then I've just got a couple of CSS files that I threw in there now notice here if I do this at uh squiggly bracket and then do that for that file name it's going to pull it from the static folder so I can fairly easily that just sort of tells me where I'm going to put stuff so if I take the same thing let's go look here uh what I want to do is I want wanted to pull the bootstrap in so that's going to look like this uh bootstrap let's see this bootstrap yeah and that should work uh and then if I close that I think let's see that other one came from there so I think I'm good I don't think I need to grab anything else and so now if I take that that and so this is just uh this is main on the footer did I set that up right footer main so let's see what happens and so now if I look at it I'm going to see somewhere down here not a footer it did not pull it in on me so let's go look at that again oh let's see so that is let's make sure we got it right so it's in fragment footer let's do this let's make it a straight up wh am I in the right place yeah uh wait did I lose my oh I'm in the wrong header there okay I don't know why I had an extra header oops I've got him in the wrong place okay so that footer needs to be oh sorry not in fragments and templates I think let's see yeah so he's there I'm sorry this is in templates so I want to take let's do this uh let's get rid of this header and let's take this footer and put it in templates so I don't need fragments because I've already defined this as a fragment my mistake so now let's see is that the right footer yes so now now I have a footer down here and I've got my main thing and we've been and we've pulled in of course here we can see um we can go see on here oh I did have something that I didn't like uh oh I've got an extra character somewhere for the JS so if I go look here uh let's go look at that real quick is it where's header make sure I got it right so I probably got oh I think I got a character wrong and so let's see oh my mistake I think that's what I want is I want th Source bootstrap blah blah blah that should work hopefully that works let's see what happens and that's really the challenge is making sure there we go well it's there we go and now it's come through so we didn't get our error and we have our Pages coming through of course if we do this oh it does try to go somewhere oh because those are actually not on the server so it's going to go hit some stuff that's out uh so those actually work even though got a couple other things that don't so what we've put together is just a very basic uh framework essentially for our Pages we have a header which is up here and we have a who and we have a footer which is down here and the header footer we're not going to need to do a whole lot with it uh we'll go ahead and change this to 23 just because actually it's going to be 24 by the time we get done with this so we'll just to 24 so we're not going to need that anymore the header we really probably won't need except oh we will need uh we're going to need to get our navbar stuff straightened out because we're not seeing it right now we're getting this to toggle navigation we're getting Navar header so we'd have this not set up right now one of the things that probably is incorrect uh let's see uh one of the things that's incorrect is it this was built initially with bootstrap three and now we've moved to bootstrap four five so we're going to do some migration essentially of our bootstrap stuff as well to make sure that we can get this set up as a proper uh nav bar but that is the the simplest thing we can do to start pulling our stuff over is for example and let's do one real quick let's take um let's go look from our old stuff and let's go look at our pages that are in here somewhere uh see is it there I think main resources web app web views so let's see that was projects let's see or opportunity let's get a different list let's do the um let's do the regist ation so let's take the registration and we're going to bring it over here we can save our header and registration is now going to be a HTML page and we'll give you a walkthr on this this is going to be non-trivial because what we're going to do we've got as we can see here we've got some of this core and the function stuff that do we don't want so what we're going to do come in here and we're going to need our time Leaf stuff and we're going to need our [Music] header uh so that is here our header it's going to go there and now we've got a whole bunch of little logic here so this is actually going to get to be maybe a little complex but let's see what we can do let's see if we can do this in a simple way and then we'll come back and add some functionality so we want to throw our footer on it and let's go with just that for now let's see what happens so if we take just that and we look at registration I don't think we had anything in the past that was anything super interesting on it so let's go look if we look at uh whoops up in the controller I'm going to say that's a user let's go find registration okay so register user we're just going to was register user let's go look at him real quick oh so basically he's just got a lot of text that gets turned in here so let's look at how we're going to take this so if we want to take this so we called it register users so we're going to come up here and we'll do it in our hello controller and let's see what this looks like if we're going to change it so we're going to take our git mapping let me close that because that's annoying is actually now going to be register user and let's just I wonder if it'll keep that I don't know if it'll keep that or not but we're going to find out in a minute uh let's see so it's going to be uh this is going to be register user he probably doesn't need anything in particular we'll come back to that for right now we won't use it uh let's see so we need really let's see I don't know we're going to need too much so let's just do it this way we're going to simplify this sucker all the way down so for here all we're going to do is return for now uh what did we call that registration right is that what that is make sure that makes sense whoops oh those are two different things my mistake so let's bring him over here oh wait no uh registration where'd he go registration okay so we're good so now we're just going to do registration so now let's see what happens if we pull the page it'll be a very ugly page probably but let's go whoops we have errors somewhere oh we don't need that oh we don't need those either uh we'll keep that for now because we're going probably come back to that at some point but let's run it and then go to register user and see what happens okay if we go here and we go register user then we've got a page and now it's got some errors it's got some annoying stuff but it's like hey we got a page and we spun that around fairly quickly from the other uh from the other application now of course we're going to see some stuff here cuz everything showing up you can see where we have some function names and stuff like that so we can actually do some stuff if we want to with this um but we'll talk about that in a later episode for now I want to just go with hey we've got a page we're starting to put some stuff together we are starting to use time leaf and we're going to continue to do that in the next episode and uh we're going to start integrating that on a regular basis but I wanted to make sure that you guys knew that that's out there again t h y m l EF L ahf.org and you can get everything you need and there's a ton of stuff there some of which quite a bit actually we're going to be going through so hopefully uh this will get you going that being said let's get out there so have a great day a great week and we will talk to you next time hello this is Rob with develop or also known as building better developers wanted to announce that we have school. developer.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 toos 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 [Music]
Transcript Segments
[Music]
well hello and welcome back we are
continu do where we're converting our
old
JSP uh Tom Cat application to a new
fine awesome shiny whiter better smaller
all that good stuff spring boot
application and what we're going to talk
about this time we going to get a little
bit into the display now last time
around we were able to list we basically
just did a nice little list page so we
came through and we were
listing essentially each of the columns
out of our table and we were doing that
uh not the rest controller if I can go
back to my
controller we're using that by basically
coming in we had set up
jdbc and we're walking through we just
basically built a results or a list um
list by user and we grab the results and
all we do is we just throw the results
in and then if you remember we go to
opportunity list and we did this little
thing here and that's what I want to
talk about is I want to talk about time
Leaf this time
uh because this is something we're going
to be doing for the next couple little
uh episodes essentially we're going to
do a little bit of pulling in some of
our pieces so we just used it last time
we just had it and then we did an
include here or basically just did
xmlns I want to step back a little
bit if you go to time Leaf I've I'm
going I'm at which is t h y m that kind
of time l e a.org G if you go there you
can see uh there's a nice tutorial
there's a bunch of stuff to get that but
the key is that you get a nice little
little tutorial and it does give you an
idea of what it does if you've worked
with just about any um any application
framework web application framework you
have the idea of being able to access
things from the server and that's what
time Lea gives us now what it does oops
I want to go to the source code is it
basically does it through this we just
do a th colon and then in this case like
we're going to do th text and that's
going to set our div now what I want to
talk about this time is let's go ahead
and turn this into which we saw here
this little thing so this piece is
really what we were kicking out but now
there's some structure around it and the
way we do
that is thing called
fragments and so here is where
essentially if I take this
out oh if I do this I take that
out me restart it because you have to
restart it so it'll load all your stuff
right then this is what we see so really
nothing there I mean it's like it's a
very simple bunch of divs things like
that now what we did is we had
formatting and all kinds of other stuff
came from this one thing now it's not
because this is super magical it's
because I'll show you that file the key
here is we're going to have a fragment
and fragments go in the resources
fragments folder and this one is
actually going to be called header so if
I have header. HTML which is what it's
looking for and if I go look at that now
this came over for an older application
I pulled whoops a bunch of information
over uh a lot of this stuff like The
Meta tags doesn't really matter um
actually let's go fill that out just
because not sure why I didn't have
those I'm not sure why I didn't have
this set but uh so I've got like a title
now here is a key
too that we're going to look at in a
minute but okay so in here let me start
with the fragment side what we do is
we're going to come in and we're going
to create an HTML file and we're going
to have a fragment and we're going to
give it a name which is here and then
down here is the end of that div so I
could actually see this because it is
HTML uh but I don't really need to now
if we look at this fragment name Main
and I go to opportunity list we can see
here that it's going to go look for in
the fragments header and it's going to
pull in the main section let me go ahead
and at the
bottom let me do the same thing and I'm
going to show you what a footer looks
like so let me do a
footer and I'm going to call it footer
and it's going to be the main and I'm
going to take my footer here I'm going
to rename
it uh to footer. HTML so we're going to
create a fragment on the Fly
here wh
uh did I not get it right footer
dot HTML there we
go and what I'm going to want to do much
as I did in the header is I'm going to
have a main
fragment so if I go here I'm just going
to do it right at the
top this is something I used in the past
but all I'm going to do
here is do that so now I've got a big Li
div and this is my fragment now now I do
have some stuff here I need to change
over which we're going to
see uh let's see I want to make sure I
can get it
all uh should be okay until I get to
this because I was using some stuff I
don't need to so
now uh and I'm also going to this is
going to be a this JS that stuff let's
see that's still going to be probably
okay but this is because it's coming
from local I'll show you how to pull
that in uh and
so uh where' I go to if I go to uh no if
I go to header now one of the things
I've got here is I've got fragments and
so that's where I'm going to put my
fragment so it's going to look for in
that folder now the other thing I've got
is
static and
within um and that's also within the
resource so I've got fragments folder
I've got a stag static folder
within that I have dropped in bootstrap
502 which is right
here and then I've just got a couple of
CSS files that I threw in there now
notice here if I do this at uh squiggly
bracket and then do that for that file
name it's going to pull it from the
static folder so I can fairly easily
that just sort of tells me where I'm
going to put stuff so if I take the same
thing let's go look here uh what I want
to do is I want wanted to pull the
bootstrap in so that's going to look
like
this uh bootstrap let's see this
bootstrap yeah and that should
work uh and then if I close
that I think let's see that other one
came from there so I think I'm good I
don't think I need to grab anything
else and so now if I take that that and
so this is just uh this is main on the
footer did I set that up right footer
main so let's see what
happens and so now if I look at it I'm
going to see somewhere down here not a
footer it did not pull it in on me so
let's go look at that
again oh let's see so that is let's make
sure we got it right so it's in
fragment
footer let's do this let's make it a
straight
up wh am I in the right place
yeah
uh wait did I lose my oh I'm in the
wrong header there
okay I don't know why I had an extra
header
oops I've got him in the wrong place
okay so that footer needs to
be oh sorry not in fragments and
templates I think let's
see yeah so he's there I'm sorry this is
in templates so I want to
take let's do this uh let's get rid of
this
header and let's take this footer and
put it in
templates so I don't need fragments
because I've already defined this as a
fragment my mistake so now let's see is
that the right footer yes so
now now I have a footer down
here and I've got my main thing and
we've been and we've pulled in of course
here we can
see um we can go see on here oh I did
have something that I didn't
like uh oh I've got an extra character
somewhere for the JS so if I go look
here uh let's go look at that real quick
is
it where's
header make sure I got it right so I
probably got oh I think I got a
character wrong and so let's
see oh my
mistake I think that's what I want is I
want th Source bootstrap blah blah blah
that should work hopefully that
works let's see what
happens and that's really the challenge
is making sure there we go
well it's there we go and now it's come
through so
we didn't get our error and we have our
Pages coming through of course if we do
this oh it does try to go
somewhere oh because those are actually
not on the server
so it's going to go hit some stuff
that's
out uh so those actually work even
though got a couple other things that
don't
so what we've put together is just a
very basic uh framework essentially for
our Pages we have a header which is up
here and we have a who and we have a
footer which is down
here and the header footer we're not
going to need to do a whole lot with it
uh we'll go ahead and change this to 23
just because actually it's going to be
24 by the time we get done with this so
we'll
just to
24 so we're not going to need that
anymore the header we really probably
won't need except oh we will
need uh we're going to need to get our
navbar stuff straightened
out because we're not seeing it right
now we're getting this to toggle
navigation we're getting Navar
header so we'd have this not set up
right now one of the things that
probably is
incorrect uh let's
see uh one of the things that's
incorrect is it this was built initially
with bootstrap three and now we've moved
to bootstrap four five so we're going to
do some migration essentially of our
bootstrap stuff as well to make sure
that we can get this set up as a proper
uh nav
bar but that is the the simplest thing
we can do to start pulling our stuff
over is for example and let's do one
real quick let's take
um let's go look from our old
stuff and let's go look at our pages
that are in here
somewhere
uh see is it there I
think main
resources web
app web views so let's see that was
projects let's see or opportunity let's
get a different list let's do
the
um let's do the regist
ation so let's take the registration and
we're going to bring it over
here we can save our header and
registration is now going to be
a HTML
page and we'll give you a walkthr on
this this is going to be non-trivial
because what we're going to do we've got
as we can see here we've got some of
this core and the function stuff that do
we don't want so what we're going to do
come in here
and we're going to need our time Leaf
stuff and we're going to need our
[Music]
header uh so that
is
here our
header it's going to go
there and now we've got a whole bunch of
little logic here so this is actually
going to get to be maybe a little
complex but let's see what we can do
let's see if we can do this in a
simple way and then we'll come back and
add some functionality so we want to
throw our footer on
it and let's go with just that for now
let's see what happens so if we take
just that and we look at registration I
don't think we had anything in the past
that was anything super interesting on
it so let's go look if we look at uh
whoops up in the
controller I'm going to say that's a
user let's go find
registration okay so register user we're
just going to was register
user let's go look at him real
quick oh so basically he's just got a
lot of text that gets turned in here so
let's look at how we're going to take
this so if we want to take this so we
called it register users so we're going
to come up here and we'll do it in our
hello controller
and let's see what this looks like if
we're going to change it so we're going
to take our git
mapping let me close that because that's
annoying is actually now going to
be register
user and let's just I wonder if it'll
keep
that
I don't know if it'll keep that or not
but we're going to find out in a minute
uh let's see so it's going to
be uh this is going to be register
user he probably doesn't need anything
in particular we'll come back to that
for right now we won't use
it uh let's see so we
need really let's see
I don't know we're going to need too
much so let's just do it this way we're
going to simplify this sucker all the
way
down so for here all we're going to do
is return for
now uh what did we call that
registration right is that what that is
make sure that makes
sense
whoops oh those are two different things
my mistake so let's bring him over
here oh wait no uh
registration where'd he go registration
okay so we're good so now we're just
going to do
registration so now let's see what
happens if we pull the page it'll be a
very ugly page probably
but let's go
whoops we have errors somewhere
oh we don't need that oh we don't need
those
either uh we'll keep that for now
because we're going probably come back
to that at some point but let's run it
and then go to register user and see
what
happens
okay if we go here and we go register
user then we've got a page and now it's
got some errors it's got some annoying
stuff but it's like hey we got a page
and we spun that around fairly quickly
from the other uh from the other
application now of course we're going to
see some stuff here cuz everything
showing up you can see where we have
some function names and stuff like that
so we can
actually do some stuff if we want to
with this
um but we'll talk about that in a later
episode for now I want to just go with
hey we've got a page we're starting to
put some stuff together we are starting
to use time leaf and we're going to
continue to do that in the next episode
and uh we're going to start integrating
that on a regular basis but I wanted to
make sure that you guys knew that that's
out there again t h y m l EF L ahf.org
and you can get everything you need and
there's a ton of stuff there some of
which quite a bit actually we're going
to be going through so hopefully uh this
will get you going that being said let's
get out there so have a great day a
great week and we will talk to you next
time hello this is Rob with develop or
also known as building better developers
wanted to announce that we have school.
developer.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 toos 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
[Music]