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. We are working on a complex form for entering data. We dig into another setup of forms and migrating controller code. This is part 1 of a brief, 2-part series.
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 journey of converting our application last time around we got our overhead item page actually displaying ran through a couple little uh variable issues now let's see if we can actually do anything with it let's see where we're at because we probably have got a couple buttons to connect up and um you know some things of that nature so let's just do um it's going to be test item one and let's go take a look at it it's going to be documentation it's going to be average uh it's generating values for that's pretty good and we're just going to say uh wh doesn't look is it oh description is not readable so there's first thing we've got is that's not let's try to do a save and update uh it does but uh oh type was right documentation average did we get that right let's go back see see if our cancel works it does so we're in pretty good shape let's go back and what we're going to want to do is we need to figure out how we do our oh two things yeah CU it's not bringing across our name it's not populating that uh it is populating these this probably needs to get calculated uh so that it's actually doing that we'll have to see let's see is that based off of yeah it's based off of a change or something like that so okay so we got a couple things to work on let's start with uh let's look at our description and notes field on our overhead form so if we go down there description notes uh oh it's doing its path so that was still grabbing a path and it's not going to be formed text area it is going to be uh input type equals text area no just text always forget which is which with these so we're going to do that uh it's a form control description we've got that let's look at our name uh name is also see it's the same thing we've got that so it should be uh it should be a th field I believe is what we want actually so th field I wonder if we have that here so if we've got ours estimated uh we don't really have to worry about that I don't know if that's coming in that's interesting so since it's read only we may have to may not have to worry about it we will find out in a minute uh let's see th field th field that's a path and so that's that's good our indexes were looking pretty good let's go fix our delete real quick if we have one because we had that before yeah delete this item okay so first we got to get fix our path and we want this to be a div if you remember if it's a button it's going to process through the form submit we don't really want to do it in this case we're just going to we've just got this one wired up to be an on click instead of doing some sort of a submit and let's give this a shot and see what happened wh did I just no save that and let's see if we've got our page working and as you see that's a nice thing about I objectoriented and so many other things is once you get going there's a lot of similarities and we can get going pretty quick oh I have an issue here so something it's either type name or something like that uh name is not valid okay so wh and it's going to tell me it's in overhead form line 60 that was very nice of it so we can go to line 60 and oh just because I did not properly do that let's see is there anywhere else that I have th field th field I probably did I do that down here yes I did so let's make sure we're grabbing this right that one would would have been a problem let's see if we go look here yep uh oh this needs to be a th on click I think to make sure that we get its value right so let's go run that and see if these look right so now jumping in here here we go uh oops well we can just just add one let's do this let's walk through the whole thing so let's add is going to be item one and let's make him uh that's a build he's going to be trivial and this is just going to be test text one if we save he's there and so we're going to add another one and he's going to be uh project management complex item to I wonder if these are not calculating right that's interesting maybe that we missed something there so this is just be test text two project management complex project management complex oh it's because we don't have any uh that's what it is is we need probably like an overall let's create a task this is just going to be uh task one uh let's do 10 in instances of building a page we probably have somewhere in here like a uh here we go screen page uh for UI that's going to be average uh so we estimate 20 hours we're just going to call this a placeholder and now if we do it here and now you can see it's actually cuz these are based off of we didn't really go into this but these calculations are based off of Total oh so let's go in here and let's change the text and let's see if uh if we leave it if this if it still does our calculations it does it didn't change that and so now let's uh delete item two uh let's cancel yep that comes back and let's try to delete it and it blew up probably because let's look at what it was trying to do it did delete overhead and it didn't bring the value right so let's go look at that form uh I wonder if that was supposed oh uh that maybe is supposed to be a star let's go check because we've done it before let's go look over at our uh our other for task form where we did delete Ah that's right because it's that's what we want is we want to do it with the brackets otherwise it doesn't like that overhead form that's so let's keep him clean we'll do with that semicolon just cuz because sometimes JavaScript likes that now that's our delete so now if we run it and reset so we've got the oh let's go back to that other one uh we don't have a cancel here interesting okay uh but we'll go take this one and we're going to delete that and it did delete so now we've got this working uh if we go back to our let's do save update if we come back now save update is actually going to our projects instead of the current project so let's fix that when we do oh that was here I'm sorry that's project Administration so if we go to a task we can cancel if we go here it just goes back to our list of projects so that's okay so we're getting pretty close uh we've got like a we can go to a project we can click on it we can create a new task we can cancel we can add an overhead we can cancel let's try delete delete probably shouldn't work yep so let's say delete let's go ahead and fix that one let's fix that little bug real quick so we're going to conditionally display that delete and we're going to say here uh let's do uh no this is going to be uh it's going to be style I believe uh actually I think we can just do here we can just do hidden uh what am I looking at this is the overhead form so let's start with that uh actually let's just do it here if I take a task and I change this to Hidden I'm pretty sure one of those nice little things um and then hidden uh oh it doesn't H it didn't accept it live so okay so we're going to conditionally do it so first to hide that button cuz we don't want to you know which that's the easiest way to do it so we're on overhead form so let's go look at that and if we come here and log in and let's just pick one overhead should not have delete it does not so that's what we want and what we want here is this just going to be our little if so we're going to do our little thf and what we want is on the delete uh let's see we want to do actually we can do it this way I guess we can actually just wrap that whole thing so we don't even have to that doesn't need to be we could make it a hidden but I think we can just as easily do it here and this is going to be uh it's going be project ID no uh ID is greater than zero then it will display otherwise it will not let's see did we get that right not quite so okay like that so this is on let's do that on both of these that's overhead let's go ahead and get our task form and just knock that out at the same time like that there we go let's just run those two and see what happens we could wrap stuff around that hidden but it's like hey why not make it a div and let's see what that does for us uh let's do this here let's do this here and so now when we do a new there we go and if we do an edit it is there now the interesting thing is because we did it within the div now we have that in a different div um so we've got a couple things we can do we probably let's see if we can do we're going to do one more thing and we're going to do within this uh let's see I think we had let's see how do we want to do this let's see if we can do that uh I'm not sure if we can do that within oh we did before because we do it with the drop down so we do it with uh if we go back to our project form is we can do this is I think we can do let's do th hidden and let's see what happens let's see if that's going to give it so if we do that here and instead we do within this one and let's do th hidden and it's going to be based B off of ID greater than zero and it's either going to be nothing or it's going to be hidden and let's see what that does oops let's do this here so we do need it because if we do a div then it sort of throws off our display we could do we can work with that but let's do it this way so uh test form and now let's run over here and by run I mean we'll change gears to this page Log In what did I say task form so if we do task form in general he is gone and if I do a new task he is gone so in either case it's probably because it's going to be so this is the created a task if we go down in here create a task form uh wrong one oh I want it here this row a [Music] container so see he is hidden equals hidden hidden equals false I wonder if we can do that nope so we're going to have to do something a little bit fun key here let's oh let's do it this way instead of a div uh let's go back and let's just make it uh wait where was it there let's make it a span and then we don't have to worry about it so we're going to cheat that way but it was worth taking a look at it uh if I go to overhead form go over here because a div is going to give me sometimes a different section span's going to say hey I'm in line so it shouldn't mess us up and let's see if we can do that so we got a couple little lessons we've learned here theoretically okay there delete that task if it's new we can't delete the task so now we've gotten pretty far into this we've got all our buttons working we've taken a couple exceptions let's see what project report does it blows up and so that is where we're going to start next episode we're going to get that one going going probably going to have some nice little query things to work with and a couple little uh you know styling kind of things much as we've dealt with there so we you we looked at the difference again we've seen this before difference between span and Dev we have connected up some of our things make sure that we're properly using our fields and accessing them you know timely versus just a maybe a regular value or something like that making sure we get our uh case sensitivity correct and uh we'll just come back next time and keep going so until then go out there and have yourself a great day a great week and we will talk to you next [Music] time
Transcript Segments
[Music]
well hello and welcome back we are
continuing our journey of converting our
application last time around we got our
overhead item page actually displaying
ran through a couple little uh variable
issues now let's see if we can actually
do anything with it let's see where
we're at because we probably have got a
couple buttons to connect up and um you
know some things of that nature so let's
just do um it's going to be test item
one and let's go take a look at it it's
going to be documentation it's going to
be average uh it's generating values for
that's pretty good and we're just going
to say uh wh doesn't look is it oh
description is not readable so there's
first thing we've got is that's not
let's try to do a save and update uh it
does
but uh oh type was right documentation
average did we get that right let's go
back see see if our cancel works it does
so we're in pretty good shape let's go
back and what we're going to want to do
is we need to figure out how we do our
oh two
things yeah CU it's not bringing across
our name it's not populating that uh it
is populating these this probably needs
to get
calculated uh so that it's actually
doing that we'll have to see let's see
is that based off of
yeah it's based off of a change or
something like that so okay so we got a
couple things to work on let's start
with uh let's look at our description
and notes field on our overhead
form so if we go down there description
notes uh oh it's doing its
path so that was still grabbing a
path and it's not going to be formed
text area it is going to
be uh input type
equals text
area no just text always forget which is
which with these so we're going to do
that uh it's a form control description
we've got
that let's look at our name uh name is
also see it's the same thing we've got
that so it should
be uh it should be a th field I believe
is what we want
actually so th
field I wonder if we have that here so
if we've got ours
estimated uh we don't really have to
worry about that I don't know if that's
coming in that's interesting so since
it's read only we may have to may not
have to worry about it we will find out
in a minute uh let's see th field th
field that's a
path and so that's that's good our
indexes were looking pretty good let's
go fix our delete real quick if we have
one because we had that before yeah
delete this item okay so first we got to
get fix our
path and we want this to be a div if you
remember if it's a button it's going to
process through the form submit we don't
really want to do it in this case we're
just going to we've just got this one
wired up to be an on click instead of
doing some sort of a
submit and
let's give this a shot and see what
happened wh did I just no save that and
let's see if we've got our page
working and as you see that's a nice
thing about I objectoriented and so many
other things is once you get going
there's a lot of similarities and we can
get going pretty quick oh I have an
issue here so something it's either type
name or something like that uh name is
not valid
okay so wh and it's going to tell me
it's in overhead form line 60 that was
very nice of it so we can go to line
60 and oh just because I did
not properly do
that let's see is there anywhere else
that I have th field th field I probably
did I do that down here yes I
did so let's make sure we're grabbing
this right that one would would have
been a problem let's see if we go look
here yep
uh oh this needs to be a th on click I
think to make sure that we get its value
right so let's go run that and see if
these look
right so
now jumping in
here here we go uh oops well we can just
just add one let's do this let's walk
through the whole thing so let's add is
going to be item one and let's make him
uh that's a build he's going to be
trivial and this is just going to be
test text one if we
save he's there and so we're going to
add another one and he's going to be uh
project
management
complex item to I wonder if these are
not calculating right that's interesting
maybe that we missed something there so
this is just be test text
two project management complex project
management
complex oh it's because we don't have
any uh that's what it is is we need
probably like an overall let's create a
task this is just going to be uh task
one uh let's do 10 in instances of
building a page we probably have
somewhere in here like
a uh here we go screen
page uh for
UI that's going to be
average uh so we estimate 20
hours we're just going to call this a
placeholder and now if we do it here and
now you can see it's actually cuz these
are based off of we didn't really go
into this but these calculations are
based off of Total
oh so let's go in here and let's change
the text and let's see if uh if we leave
it if this if it still does our
calculations it does it didn't change
that and so now let's uh delete item two
uh let's cancel yep that comes back and
let's try to delete it and it blew up
probably because let's look at what it
was trying to do it did delete overhead
and it didn't bring the value right
so let's go look at that form
uh I wonder if that was supposed oh uh
that maybe is supposed to be a star
let's go check because we've done it
before let's go look over at our uh our
other for task form where we did delete
Ah that's right because it's that's what
we want is we want to do it with the
brackets otherwise it doesn't like that
overhead form that's so let's keep him
clean we'll do with that semicolon just
cuz because sometimes JavaScript likes
that now that's our delete so now if we
run
it and
reset so we've got the oh let's go back
to that other one uh we don't have a
cancel here interesting okay uh but
we'll go take this one and we're going
to delete
that and it did delete so now we've got
this working uh if we go back to our
let's do save update if we come back now
save update is actually going to our
projects instead of the current project
so let's fix that when we do oh that was
here I'm sorry that's project
Administration so if we go to a
task we can cancel if we go here it just
goes back to our list of projects so
that's okay so we're getting pretty
close uh we've got like a we can go to a
project we can click on it we can create
a new task we can cancel we can add an
overhead we can cancel let's try delete
delete probably shouldn't work yep so
let's say
delete let's go ahead and fix that one
let's fix that little bug real quick so
we're going to conditionally
display that
delete and we're going to say
here uh let's do
uh no this is going to be uh it's going
to be
style I
believe uh actually I think we can just
do here we can just do hidden
uh what am I looking at this is the
overhead form so let's start with that
uh actually let's just do it here if I
take a task and I change this to Hidden
I'm pretty
sure one of those nice little things
um and then
hidden uh oh it
doesn't H it didn't accept it live so
okay so we're going to conditionally do
it so first to hide that button cuz we
don't want to you know which that's the
easiest way to do it so we're on
overhead form so let's go look at
that and if we come
here and log
in and let's just pick one overhead
should not have delete it does not so
that's what we want and what we want
here is this just going to be our little
if so we're going to do our little
thf and what we want is on
the
delete uh let's see we want to do
actually we can do it this way I
guess we can actually just wrap that
whole thing so we don't even have to
that doesn't need to
be
we could make it a hidden but I think we
can just as easily do it
here and this is going to be uh it's
going be project ID no uh
ID is greater than
zero then it will display otherwise it
will not let's see did we get that right
not quite so okay like that
so this is
on let's do that on both of these that's
overhead let's go ahead and get our task
form and just knock that out at the same
time like
that there we go let's just run those
two and see what
happens we could wrap stuff around that
hidden but it's like hey why not make it
a div and let's see what that does for
us uh let's do this
here let's do this
here and so now when we do a new there
we go and if we do an edit it is there
now the interesting thing is because we
did it within the div now we have that
in a different div um so we've got a
couple things we can do we
probably let's see if we can do we're
going to do one more thing and we're
going to do within this uh let's see I
think we
had let's see how do we want to do this
let's see if we can do
that uh I'm not sure if we can do that
within oh we did before because we do it
with the drop down so we do it with uh
if we go back to our project
form
is we can do this is I think we can
do let's do th hidden and let's see what
happens let's see if that's going to
give it so if we do that here and
instead we do
within this
one and let's do
th
hidden and it's going to be based B off
of ID greater than
zero and it's either going to be
nothing or it's going to be
hidden and let's see what that does oops
let's do this
here so we do need it because if we do a
div then it sort of throws off our
display we could do we can work with
that but let's do it this way so uh test
form and now let's run over here and by
run I mean we'll change gears to this
page Log In what did I say task form so
if we do task form in
general he is gone and if I do a new
task he is gone so in either
case it's probably because it's going to
be so this is the created a task if we
go down in here create a
task
form
uh wrong one oh I want it here this
row a
[Music]
container so see he is hidden equals
hidden hidden equals false I wonder if
we can do
that
nope so we're going to have to do
something a little bit fun key here
let's oh let's do it this way instead of
a
div uh let's go back and let's just make
it uh wait where was
it there let's make it a
span and then we don't have to worry
about it so we're going to cheat that
way but it was worth taking a look at it
uh if I go to overhead
form go over here because a div is going
to give me sometimes a different section
span's going to say hey I'm in line so
it shouldn't mess us
up and let's see if we can do that so we
got a couple little lessons we've
learned here theoretically okay there
delete that task if it's new we can't
delete the task so now we've gotten
pretty far into this we've got all our
buttons working we've taken a couple
exceptions let's see what project report
does it blows up and so that is where
we're going to start next episode we're
going to get that one going going
probably going to have some nice little
query things to work with and a couple
little uh you know styling kind of
things much as we've dealt with there so
we you we looked at the difference again
we've seen this before difference
between span and Dev we have connected
up some of our things make sure that
we're properly using our fields and
accessing them you know timely versus
just a maybe a regular value or
something like that making sure we get
our uh case sensitivity correct and uh
we'll just come back next time and keep
going so until then go out there and
have yourself a great day a great week
and we will talk to you next
[Music]
time