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. In this episode, we explore iterating over a collection (list) and related variables as well as building strings with Thymeleaf.
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 working on our app that we have moved around uh we moved it over from playing from a patchy Tomcat old school Java server Pages all that kind of good stuff into a modern new fangled bootstrap 5 and spring boot uh Standalone application uh Standalone web application and this episode we're going to look uh we're going to get back into time Leaf a little bit because what we want to do is we want to be able to generate this in time Leaf now uh let me go ahead and log out here and if you remember last time we were playing around with stuff we've got some Basics showing up here as far as our login and registration information we're able to store some stuff but there were some additional things that we needed to do for example here we have a whole list of objects and so what we want to do is want to be able to iterate over the list and using time Leaf uh within there generate this uh the HTML behind this so we're going to have a couple things we're going to look at and I want to start with the the iteration itself so if we do something very simple we can do within a like in this case a div we can do a th for the time Leaf colon each and what it's going to do is it's going to say for this value that I sent across so list projects which if I look at the uh hello controller that is an attribute that I've added so I have list projects and here I'm just using a Dao so I go in I generate a list of these you know just an actual Java list of projects if you look at list current uh and the project Dao implementation let's just go look that real quick and you can see here all we're doing is we're just doing a select and then we're going to return a jdpc template actually within that it's going to take that query it's going to go to the row mapper which if we go to Project row mapper then you can see so for each of these it's just it's going to create a project right here if you see at the top of the line and then we just assign out all the values based on the result set we pass it a result set it gives us out a project for each row and so this is and we've talked about I think this separately we but it's a something we'll go in deeper at another Point as far as using row mappers but it's a pretty straightforward way to get from our our query which basically just says Hey like I've got a column name project I or project ID it's an INT I'm going to set the ID for the project class the project instance and with the r mapper just for each row it's going to go through and do that and then that's going to kick that back out to my list which going to pick kick it out to my controller and I can see here where I'm adding a bunch of different attributes now some of these I think we'd already looked at before so I'm basically just going in here putting a little bit information um actually here the user is USR so I can probably do let me go look at that real quick because that was one of the things I wanted to do if I look at user does he have a get display name he has uh he does not have he has a username let's just do first name so if we go to the dashboard uh one of the things we do is it's dashboard for here but what we really want this to be is uh user we're just going to do th text equals I'll put that there and it's going to be uh what do we call first name I think let's see if that works uh probably if I do it like this okay anyways slight side trip there uh let's go back to our Loop so in our Loop the most basic version is going to be whatever the attribute is and then you're going to sign it a value so what what I've done here which we'll talk about a second so if I if I come here and let me do this let me just get rid of that and here this is most simple thing let me make sure this still works that I didn't break something in my demo so if I log in boom it gives me these uh these entries but it looks like I probably blew something up in [Music] there not sure oh oh no there's that okay well oh it's because of the way it's set up in the diff um so I don't have a lot of information about that oh and that was because here is that where it is uh I think that might be it so let's uh let's see can I get reduce it sorry d g it all right I lost it um well let's do it for here cuz what I want is class equals row so we'll come back to this in a second okay so if I do that and I'll show you in a second what this looks like when it loads there we go so now I've got each of these values on a row but what I want to do is something like this I want to actually give myself like some background and do a couple other things within uh with this data and what we can do there is what I did before is we have a second value which we'll call status and you can name it whatever you want you call it status I've seen it I status and things like that and uh it has did I get rid of that I did oh there it is it has the status itself has a bunch of different properties it's got count size first last odd even and so what we can do is we can actually tweak the class itself and this is a CSS style class so we have to have it you know set up properly but if I have an even and an odd for my rows then what I can do is there's a couple ways I can look at it in this one I'm going to say index oops which is also one I can do the index which says which row number am I on so count tells me the total number of rows and uh so for example I could say h I probably don't want to do it within this yeah I'm not going to do it within this uh but it'll give me but so for my index I can give each row so if I had five if I have five uh result rows in this result set then I've got 1 2 3 4 5 are my indexes or actually I'm sorry 0 1 2 3 4 it starts with zero and basically I'm just doing a mod here which says divide by two and what is the remainder and so the remainder when you divide by two is either going to be zero or one so if it's zero it's an even row and if it's odd it's an odd row so now if I do that what I'm going to get is my little zebra stripe thing boom because now it's going to go and if you look how easy you're going to be able to read this but if you look in here you can see where it says row even row odd it's a little bit small text but there you go so row odd and row even is how it's generating that so now I can get my little stripe now the other thing I want to do is I want to be able to add a click which is fun oh before I do that the way I'm going through is each one of these it goes through projects and assigns it to this project variable so if you note here I can do project do whatever and in this case projects are uh here it is just a straight up pojo so what I got here any one of these as long as it has a get so if I come in here and I look down here like get fixed fixed is a value that I could use here am I using it on here let's find out uh I am so that is the second from last column if we look at it here we go this is the fixed fixed created oh I'm sorry it's up here second to last here is it fixed and then you can see the creative value so all you have to do and what it's going to do is just going to assume that this is a git whatever and you do have uh let me go back to where my project was oh do I have status string I think I do there we go status string so it is um case sensitive and it's going to assume that your format is going to be basically it's going to assume that it's get and set get get and set and then it's going to assume that the next character after the get or the set is going to be a uppercase even though you're going to do it in lowercase so like you can see like get name is actually get name with a capital in however and then if you want additional words within there if it's camel case like here bid amount is get bid capital B amount capital A but if you don't have it like I do here this is not treated as two separate words and you'll see it's going to look for get status capital S string lowercase s and that's because here wherever I put that I don't have the capital S otherwise I need to do that if I capitalize that in one case or other we're going to have a a disconnect so now I can load my values in and let's do one more thing within this playing around with uh some of the values we've got is I can actually add an event and in this case I'm going to do an onclick and I'm going to do it based on the I think I called it project so I'm going to do it based on the project ID if I spell project correctly so I'm just going to do project do ID now there's a couple of ways let me show you this and I'm going to come back to how I just did that so now if we look if we look here we can see that we've got this on click or actually it's a yeah we have the onclick and it does a select project and it gives you the ID which is the project the ID for that project so that that way we can actually click through we have an event now notice that here we've got these old pipes and this is excellent if you're building a string that has within it only uh Boolean or integer values so here this project ID because it is an INT it allows me to just refer to build a hard string which is basically it says because I'm between the pipes use this this string that's right here and then I can go in and I can just do a straight with the uh you know the squiggly brackets dollar squiggly brackets and then the name or the variable name but if I take this and I change it to name which is a string it's going to not like that and there we go and I'm going to get an error because I've got a mapping issue so I want to keep that as an INT and there are a couple of ways that we can put strings together uh this one is going to be probably one of our easier ways there are as far as like if I just want to build like in this case something where I'm sending an an ID if I want to do it with the name itself then I'm going to have to come in and do something like uh let's see I can do oh did I have my user let me rebuild this let me do here uh where is here we go so I can do user first name oh because I did that here so this is oh I bet it's not liking it let's see what did it do let's see what I got here and it may be because it I needed that in because it was part of the uh the JavaScript that I was using which I apologize for if I come in here let's see what does it give me for the dashboard for Rob yes so it does pickup user. first name and I can do I believe it's like this since I'm within uh a pipe uh user. last name and if I rebuild it what does it give me and there we go so it gives me first name last name so I can I can either just do a a straight variable like if we want to do just user first name or I can actually build a string within that base based on those there's a couple other ways we could do stuff if we wanted to build it on a display uh we could do it within the th text and try to make it work that way or we could like you know put a couple spans together or something like that if it's just a simple uh display of a name or you know a string or a series of strings so there's a couple different ways we can uh skin that cat as it were but right now I just wanted to sort of say hey this is like dive in and talk a little bit about the couple more of the uh timely uh things and um I'm just going to get rid of some of my oh that's not going to like that but I need to get rid of my ch's uh okay any or I'm sorry my C colons not my ch's and uh um I wonder if I have some more okay good I got rid of all of those and now since that if's not there when I log in I'm going to see those those fields yep dashboard and then if there's a message it's going to show up but there isn't a message right now so that'll do it for now we will come back and there are some more there are some more things that we can do within time Leaf but I want to get that basic one laid out and and uh we're just going to continue along next episode we will uh continue building out our application and just keep on going until we have something that is functional and have covered most of our pieces to convert our app over if you have any questions shoot us an email at info@ developer.com and otherwise whether you have questions or not I want you to go out there and have yourself a great day a great week and we will talk to you next time [Music]
Transcript Segments
[Music]
well hello and welcome back we are
continuing working on our app that we
have moved around uh we moved it over
from playing from a patchy Tomcat old
school Java server Pages all that kind
of good stuff into a modern new fangled
bootstrap 5 and spring boot uh
Standalone
application uh Standalone web
application and this episode we're going
to look uh we're going to get back into
time Leaf a little bit because what we
want to do is we want to be able to
generate this in time Leaf now uh let me
go ahead and log out here and if you
remember last time we were playing
around with stuff we've got some Basics
showing up here as far as our login and
registration information we're able to
store some stuff but there were some
additional things that we needed to do
for example here we have a whole list of
objects and so what we want to do is
want to be able to iterate over the list
and using time Leaf uh within there
generate this uh the HTML behind this so
we're going to have a couple things
we're going to look
at and I want to start with the the
iteration itself so if we do something
very simple we can do within a like in
this case a div we can do a th for the
time Leaf colon each and what it's going
to do is it's going to say for this
value that I sent across so list
projects which if I look at the uh hello
controller that is an attribute that
I've added so I have list
projects and here I'm just using a Dao
so I go in I generate a list of these
you know just an actual Java list of
projects if you look at list current uh
and the project Dao implementation let's
just go look that real quick and you can
see here all we're doing is we're just
doing a select and then we're going to
return a jdpc template actually within
that it's going to take that query it's
going to go to the row mapper which if
we go to Project row mapper then you can
see so for each of these it's just it's
going to create a project right here if
you see at the top of the
line and then we just assign out all the
values based on the result set we pass
it a result set it gives us out a
project for each row and so this is and
we've talked about I think this
separately we but it's a something we'll
go in deeper at another Point as far as
using row mappers but it's a pretty
straightforward way to get from our our
query which basically just says Hey like
I've got a column name project I or
project ID it's an INT I'm going to set
the ID for the project class the project
instance and with the r mapper just for
each row it's going to go through and do
that and then that's going to kick that
back out to my list which going to pick
kick it out to my
controller and I can see here where I'm
adding a bunch of different
attributes now some of these I think
we'd already looked at before so I'm
basically just going in here putting a
little bit information um actually here
the user is USR so I can probably do let
me go look at that real quick because
that was one of the things I wanted to
do if I look at user does he have a get
display name he
has uh he does not have he has a
username let's just do first name so if
we go to the
dashboard uh one of the things we do is
it's dashboard for here but what we
really want this to
be is uh
user we're just going to do th
text
equals
I'll put that
there and it's going to be uh what do we
call first name I
think let's see if that works uh
probably if I do it like
this okay anyways slight side trip there
uh let's go back to our Loop so in our
Loop the most basic version is going to
be whatever the attribute is and then
you're going to sign it a value so what
what I've done here which we'll talk
about a second so if
I if I come here and let me do this let
me just get rid of
that and here this is most simple thing
let me make sure this still works that I
didn't break something in my
demo so if I log in boom it gives
me these uh these entries but it looks
like I probably blew something up in
[Music]
there not sure
oh oh no there's
that okay well oh it's because of the
way it's set up in the
diff um so I don't have a lot of
information about that oh and that was
because here is that where it
is uh I think that might be it so
let's uh let's see can I get reduce
it
sorry d g it all right I lost it um well
let's do it for here cuz what I want is
class equals
row so we'll come back to this in a
second okay so if I do
that and I'll show you in a second what
this looks like when it loads there we
go so now I've got each of these values
on a row but what I want to do is
something like this I want to actually
give myself like some background and do
a couple other things within uh with
this data and what we can do there is
what I did before is we have a second
value which we'll call status and you
can name it whatever you want you call
it status I've seen it I status and
things like
that and uh it has
did I get rid of that I did oh there it
is it has the status itself has a bunch
of different properties it's got count
size first last odd even and so what we
can do is we can actually tweak the
class itself and this is a CSS style
class so we have to have it you know set
up properly but if I have an even and an
odd for my rows then what I can do
is there's a couple ways I can look at
it in this one I'm going to say index
oops which is also one I can do the
index which says which row number am I
on so count tells me the total number of
rows and uh so for example I could
say h I probably don't want to do it
within
this yeah I'm not going to do it within
this uh but it'll give me but so for my
index I can give each row so if I had
five if I have five uh result rows in
this result set then I've got 1 2 3 4 5
are my indexes or actually I'm sorry 0 1
2 3 4 it starts with zero and basically
I'm just doing a mod here which says
divide by two and what is the remainder
and so the remainder when you divide by
two is either going to be zero or one so
if it's zero it's an even row and if
it's odd it's an odd row so now if I do
that what I'm going to
get is my little zebra stripe thing boom
because now it's going to go and if you
look how easy you're going to be able to
read this but if you look in here you
can see where it says row even row odd
it's a little bit small text but there
you go so row odd and row even is how
it's generating that so now I can get my
little stripe now the other thing I want
to do is I want to be able to add a
click which is fun oh before I do that
the way I'm going through is each one of
these it goes through projects and
assigns it to this project variable so
if you note here I can do project do
whatever and in this case projects
are uh here it is just a straight up
pojo so what I got
here any one of these as long as it has
a get so if I come in here and I look
down here like get
fixed fixed is a value that I could use
here am I using it on here let's find
out uh I am so that is the second from
last column if we look at it here we go
this is the
fixed fixed
created oh I'm sorry it's up here second
to last here is it fixed and then you
can see the creative value so all you
have to do and what it's going to do is
just going to assume that this is a git
whatever and you do have uh let me go
back to where my project
was
oh do I have status string I think I
do there we go status string so it is um
case sensitive and it's going to assume
that your format is going to be
basically it's going to assume that it's
get and set get get and set and then
it's going to assume that the next
character after the get or the set is
going to be a uppercase even though
you're going to do it in lowercase so
like you can see like get name is
actually get name with a capital
in however and then if you want
additional words within there if it's
camel case like here bid amount is get
bid capital B amount capital A but if
you don't have it like I do here this is
not treated as two separate words and
you'll see it's going to look for get
status capital S string lowercase s and
that's because here wherever I put that
I don't have the capital S otherwise I
need to do that if I capitalize that in
one case or other we're going to have a
a disconnect so now I can load my values
in and let's do one more thing within
this playing around with uh some of the
values we've
got is I can actually add an
event and in this case
I'm going to do an
onclick and I'm going to do it based on
the I think I called it project so I'm
going to do it based on the project ID
if I spell project correctly so I'm just
going to do project do ID now there's a
couple of ways let me show you this and
I'm going to come back to how I just did
that so now if we look
if we look
here we can see that we've got this on
click or actually it's a yeah we have
the onclick and it does a select project
and it gives you the ID which is the
project the ID for that project so that
that way we can actually click through
we have an event now notice that here
we've got these old
pipes and this is excellent if you're
building a string that has within it
only uh Boolean or
integer values so here this project ID
because it is an INT it allows me to
just refer to build a hard string which
is basically it says because I'm between
the
pipes use this this string that's right
here and then I can go in and I can just
do a straight with the uh you know the
squiggly brackets dollar squiggly
brackets and then the name or the
variable name but if I take this and I
change it to name which is a
string it's going to not like
that and there we go and I'm going to
get an error because I've got a mapping
issue so I want to keep that as an
INT and there are a couple of ways that
we can put strings together uh this one
is going to be probably one of our
easier ways there are as far as like if
I just want to build like in this case
something where I'm sending an an ID if
I want to do it with the name itself
then I'm going to have to come in and do
something
like uh let's see I can do oh did I have
my user let me rebuild this let me do
here uh where is here we go so I can do
user first name oh because I did that
here so this is
oh I bet it's not liking it let's see
what did it do let's see what I got here
and it may be because it I needed that
in because it was part of the uh the
JavaScript that I was
using which I apologize for if I come in
here let's see what does it give me for
the dashboard for Rob yes so it does
pickup user. first name and I can do I
believe it's like
this since I'm within uh a pipe
uh
user. last
name and if I rebuild
it what does it give
me and there we go so it gives me first
name last name so I can I can either
just do a a straight variable like if we
want to do just user first name or I can
actually build a string within that base
based on those there's a couple other
ways we could do stuff if we wanted to
build it on a display uh we could do it
within the th text and try to make it
work that way or we could like you know
put a couple spans together or something
like that if it's just a simple uh
display of a name or you know a string
or a series of strings so there's a
couple different ways we can uh skin
that cat as it were but right now I just
wanted to sort of say hey this is like
dive in and talk a little bit about
the couple more of the uh timely uh
things and um I'm just going to get rid
of some of my oh that's not going to
like that but I need to get rid of my
ch's
uh okay any or I'm sorry my C colons not
my ch's and uh um I wonder if I have
some
more okay good I got rid of all of
those and now since that if's not
there when I log in I'm going to see
those those
fields yep dashboard and then if there's
a message it's going to show up but
there isn't a message right now so
that'll do it for now we will come back
and there are some more there are some
more things that we can do within time
Leaf but I want to get that basic one
laid out and and uh we're just going to
continue along next episode we will uh
continue building out our application
and just keep on going until we have
something that is functional and have
covered most of our pieces to convert
our app over if you have any questions
shoot us an email at info@ developer.com
and otherwise whether you have questions
or not I want you to go out there and
have yourself a great day a great week
and we will talk to you next
time
[Music]