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 short shows us hiding rows and deleting data in a smooth view to the user.
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 walking through our project we were converting an old uh JSP Tomcat application to a new fangled spring Boot and uh using that to get our application going we've worked through some CSS and cleaned some stuff a little bit up a little bit here and there we're going to continue doing some of that kind of work this time not CSS actually what I want to do is uh we're going to do some some quick uh re like quick function type things now what we would see one of the things we end up doing is if we come over here to Opportunities one of the things we want to do is we want to be able to like click on one besides just deleting it or looking at the details we want to be able to basically take one and say hey I'm going to copy it over it's going to basically now be a project it basically and it would make sense I have a proposal I'm G to go ahead and fire off that proposal so I want to store that as a project but right now first uh one I'm going to fix this thing whoop that um has these things unlined weird and uh also what we're going to do is we're going to put a button here this is going to allow us instead of having to step into our project and set it to uh like here let's say lost or cancelled and doing a save update we're going to have a couple buttons and probably it's going to be something along the lines of uh let's just say lost we'll do a lost button here uh we probably could do within that uh we might do a one as well or a cancel but let's do one and loss those probably the quickest ones that would make sense if I'm going through projects that I'm going to say Hey you know I want it or I lost it um lost is probably first so what we want to do is we're going to go to each of these now we are going to have a bit of an issue CU When we click on it we've already got that div so that it's jumping out there so so we're going to have to change some stuff around a little bit here in order to make our button work otherwise we'll click on this when we click on the button it's going to take it as this click and we're probably going to get into some weird stuff so what we're also going to do is we're going to change this to an edit so let's go back over to our code and what we want to do is we want to go find the uh this going to be list projects I do believe uh it's probably projects and if we look there yeah so we have name status uh here we go maintain overhead oh is that yeah maintain overhead maintain difficulty uh these I think we still have to hook up at some point we'll get to those and so in here here's the first thing we have uh here we have this onclick and it's going to do select project so what we need to do instead is we're going to need to change this so that this on click is actually going to be a button and so we probably want to do is we've got all these we've got this fix created so we're going to do is we're going to do actions and we're going to call it that let's see 2 4 6 7 10 so we can just let's go ahead and fill this out because we've got space out here uh this is oh that's where our problem is is that we've got uh name name status and label are a two but then our fixed is a two there instead of a one so if we do that we make our created three and then we're going to have our buttons here and that's going to be a two and what we want to do here is we're going to have two buttons and so the first one uh let's go ahead and we're just going to make them a div cuz we're going to keep it that simple uh and then it's going to do an onclick here and so that's our first one oh the class is going to be uh button and what did we have those other buttons those were a button primary so let's keep those uh let's I think we had a different let's do like button info button name button info if you can remember from our bootstrap uh work and so for this uh there's my class I'm going to select the project I'm using the project ID I want to get rid of this because I don't want to click on the div and I'm going to say edit and so let's take a look at what that looks like so if we come in here we restart this let's just start with that and what this should do now now is when I log in when I log [Music] in then it's not showing it okay so did I get the right page that could be the problem there it is okay so I am on the projects edit uh the homepage is a little different so we'll have to fix that one when we get to it so we go in here and it's an edit but it doesn't like to treat that as a button uh so if I look here oh well first let's make sure if I click on it it's not editing if I click here oh it's probably because of it's background if I click on that now it comes in so let's make it do I have a different well let's just look at it real quick because we can we can come in here and that button info instead let's make it uh what did we say before that was so let's make it button primary if we do that doesn't really work oh probably oh that's going to be interesting button primary let's make it button secondary doesn't like that either oh because I didn't say class funny how when you do it like there we go typos will do that to you uh what did I say button default is what I originally [Music] had um not a big fan of default necessarily on that uh what's that button uh let's just say button info info probably works okay uh it's not super awesome though because of where it's at so let's play with that just a tad so what we're going to do is that has to be a class and let's go ahead and put this inside a container cuz I think that may wrap those buttons up a little bit this is where we're getting a little bit clui and how we're doing stuff we could actually clean up those buttons but I'm not going to right now because then the other thing I'm going to do is I'm going to have and I'm just going to put a spa I'm going to put two spaces between it let's do that mbsp and mbsp which is a space so there's two spaces and then this one's going to be um I'm going to say lost and and we're just going to say lost project and it's going to be the project ID and so up here where we do uh we do select we're going to change this around a little bit because what we want to do here is what we'll probably cover in the next episode because we're going to get go into part two of this what we're going to want to do here is we're not going to want to just go out and then come back what we're going to want to do is we're going to call something and we'll call it um let's just say lost project and it's going to have an ID so we're going to have to create this but we want to do instead of window location and actually changing our URL we're going to come in and we're going to use an Ajax call and so we're just going to fire that off and then one of the things we're going to have to do so we're going to say here there will be uh Ajax call to Mark lost and then we're going to have something that is going to be uh hide the row and so because we're going to hide the row and actually let's start with that right now instead of making it lost what we're going to do is we're going to go in here and does this have a that does not have an ID so we can say uh let's do I wonder if we can do that let's do th name uh let's do th ID equals and let's see if it'll do that oh that's within what we want to do is we want to take that so it's going to be uh that's going to be the project. ID let's do that and let's see if that will work I haven't actually tried that with the uh let's see oh let's do double quotes and let's see if that will generate that because then what I'm going to want to do is I'm going to come up here and I'm going to do something to make sure that I know which row I'm on which is basically going to be uh document. getet element there we go uh by ID and we're going to give it the ID which is going to be the same as the ID that we passed in it's the project ID and then we're going to do doc uh oops that's going to be uh let's just say control equals that and then we're going to do control. [Music] display equals none and I think it'll work like that and we're going to find out in a minute so I think if we do it like that that'll give us to us but let's check a couple of these things out and let's see what we did with our buttons did we clean that up a little bit if we go here whoops there we go if we log in and we go to our projects let me close this out so now we have okay so we have edit and lost and look so those look a little bit better there if we do lost it does nothing because uh let's go look at that so if it says on CL click okay so uh where's our row so if we go up to that's our button here's our header wait uh there we go so it does give us our ID so that's cool so we got our ID coming in and then if we go to lost and and we say lost uh lost project it didn't like it because oh control display is none and that's probably not the way to do it uh actually I think it is called style let me go check that real quick I'm back and it is dot do style. display and then it is lowercase so now if we do that that we have if we come in here we now should have that we have taken our single click rows and now we've got buttons on them and if we click on row it doesn't do anything if we click on the edit it edits and if we click on lost it does nothing and so let's see what that complains about uh let's see evaluating control style uh null is not an object oh so let's see on click uh the ID is let's do it like this um because I may not like that number let's make our ID equal to uh let's call it row underscore I think it'll work like that I think we'll just uh actually no it's going to we need to push that together a little bit so we want to do uh we want to do it like this I believe we just want to do row underscore and then here when we do by ID Oh shoot that's why it's going to be row underscore plus ID let's try that probably would have worked the way we had it but when you put comments uh quotes in the wrong places those things happen so let's take a look at it come back over here let's go fire it up let's Lo log in let's go to our projects let's try to hit lost and there now stuff disappears but it's not doing anything else so I can come in here and I can go lost and lose all of them but if I reset it if I refresh it boom it comes back so next thing we want to do is we're going to create our little uh endpoint essentially our function that we're going to be able to call and it's going to go in it's basically going to take that project it's going to edit it uh its status and then it's going to go ahead and disappear it so that is what we're going to come back to next time uh as always if you have any questions shoot us an email at info developer.com we're just looking for ways to you know sort of share what we've learned and help you guys get developers get to be better developers and we're more than happy to uh have some suggestions and recommendations from you as well that being said go out there and have yourself a great day a great week and we will talk to you next time three two one hello this is Rob with develop andur also known as building better developers wanted to announce that we have school. developin 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 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 andure we just have it in a little more of a 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 walking through our project
we were converting an old uh JSP Tomcat
application to a new fangled spring Boot
and uh
using that to get our application going
we've worked through some CSS and
cleaned some stuff a little bit up a
little bit here and there we're going to
continue doing some of that kind of work
this time not CSS actually what I want
to do is uh we're going to do some some
quick uh re like quick function type
things now what we would see one of the
things we end up
doing is if we come over here to
Opportunities one of the things we want
to do is we want to be able to like
click on one besides just deleting it or
looking at the
details we want to be able to basically
take one and say hey I'm going to copy
it over it's going to basically now be a
project it basically and it would make
sense I have a proposal I'm G to go
ahead and fire off that proposal so I
want to store that as a project but
right now first uh one I'm going to fix
this thing whoop that um has these
things unlined weird and uh also what
we're going to do is we're going to put
a button here this is going to allow us
instead of having to step into our
project and set it to uh like here let's
say lost or cancelled and doing a save
update we're going to have a couple
buttons and probably it's going to be
something along the lines of
uh let's just say lost we'll do a lost
button here uh we probably could do
within that uh we might do a one as well
or a cancel but let's do one and loss
those probably the quickest ones that
would make sense if I'm going through
projects that I'm going to say Hey you
know I want it or I lost it um lost is
probably first so what we want to do is
we're going to go to each of these now
we are going to have a bit of an issue
CU When we click on it we've already got
that div so that it's jumping out there
so so we're going to have to change some
stuff around a little bit here in order
to make our button work otherwise we'll
click on this when we click on the
button it's going to take it as this
click and we're probably going to get
into some weird stuff so what we're also
going to do is we're going to change
this to an edit so let's go back over to
our
code and what we want to do is we want
to go find the uh this going to be list
projects I do
believe uh it's probably projects and if
we look there yeah so we have name
status uh here we go maintain overhead
oh is that yeah maintain overhead
maintain difficulty uh these I think we
still have to hook up at some point
we'll get to those and so in
here here's the first thing we have uh
here we have this onclick and it's going
to do select project so what we need to
do
instead is we're going to need to change
this so that this on click is actually
going to be a button and so we probably
want to do is we've got all these we've
got this fix created so we're going to
do is we're going to do
actions and we're going to call it that
let's see 2 4 6 7 10 so we can just
let's go ahead and fill this out because
we've got space out
here uh this is oh that's where our
problem is is that we've got uh name
name status and label are a two but then
our fixed is a two there instead of a
one so if we do that we make our created
three and then we're going to have our
buttons
here and that's going to be a
two and what we want to do
here is we're going to have two buttons
and so the first one uh let's go ahead
and we're just going to make them a div
cuz we're going to keep it that simple
uh and then it's going to do an onclick
here and so that's our first one oh the
class is going to be uh
button and what did we have those other
buttons those were a button primary so
let's keep
those uh let's I think we had a
different let's do like button info
button name button info if you can
remember from our bootstrap uh
work and so for this uh there's my class
I'm going to select the project I'm
using the project ID I want to get rid
of this because I don't want to click on
the
div and I'm going to say
edit and so let's take a look at what
that looks like so if we come in here we
restart this let's just start with
that and what this should do now now is
when I log
in when I log
[Music]
in then it's not showing it okay so did
I get the right page that could be the
problem there it is okay so I am on the
projects edit uh the homepage is a
little different so we'll have to fix
that one when we get to it so we go in
here and it's an edit but it doesn't
like to treat that as a
button uh so if I look here oh well
first let's make sure if I click on it
it's not editing if I click here oh it's
probably because of it's background if I
click on that now it comes in so let's
make it do I have a
different well let's just look at it
real quick because we can we can come in
here and that button info instead let's
make it uh what did we say before that
was so let's make it button
primary if we do that doesn't really
work oh probably oh that's going to be
interesting button primary let's make it
button
secondary doesn't like that
either oh because I didn't say class
funny how when you do it like there we
go typos will do that to you uh what did
I say button default is what I
originally
[Music]
had um not a big fan of default
necessarily on that
uh what's that
button uh let's just say
button
info info probably works okay uh it's
not super awesome though because of
where it's at so let's play with that
just a tad so what we're going to do is
that has to be a class and let's go
ahead and put this
inside a
container cuz I think that may wrap
those buttons up a little bit this is
where we're getting a little bit clui
and how we're doing stuff we could
actually clean up those buttons but I'm
not going to right now because then the
other thing I'm going to
do is I'm going to
have and I'm just going to put a spa I'm
going to put two spaces between it let's
do that
mbsp and mbsp which is a space so
there's two spaces and then this one's
going to be um I'm going to say lost and
and we're just going to say lost
project and it's going to be the project
ID and so up here where we do uh we do
select we're going to change this around
a little bit because what we want to do
here is what we'll probably cover in the
next episode because we're going to get
go into part two of this what we're
going to want to do here is we're not
going to want to just go out and then
come back what we're going to want to do
is we're going to call something and
we'll call it um
let's just say lost project and it's
going to have an ID so we're going to
have to create this but we want to do
instead of window location and actually
changing our URL we're going to come in
and we're going to use an Ajax call and
so we're just going to fire that off and
then one of the things we're going to
have to do so we're going to say here
there will be uh Ajax call to Mark lost
and then we're going to have something
that is going to be uh hide the
row
and so because we're going to hide the
row and actually let's start with that
right now instead of making it
lost what we're going to
do is we're going to go in
here and does this have a that does not
have an
ID so we can
say uh let's do I wonder if we can do
that let's do th name uh let's do th ID
equals and let's see if it'll do that oh
that's
within what we want to do is we want to
take that so it's going to be uh that's
going to be the project. ID let's do
that and let's see if that will work I
haven't actually tried that with
the uh let's see oh let's do double
quotes and let's see if that will
generate that because then what I'm
going to want to do is I'm going to come
up here and I'm going to do something to
make sure that I know which row I'm on
which is basically going to be uh
document. getet
element there we go uh by ID and we're
going to give it the ID which is going
to be the same as the ID that we passed
in it's the project
ID and then we're going to do doc uh
oops that's going to be uh let's just
say control equals
that and then we're going to do
control.
[Music]
display
equals
none and I think it'll work like that
and we're going to find out in a
minute so I think if we do it like that
that'll give us to us but let's check a
couple of these things out and let's see
what we did with our buttons did we
clean that up a little
bit if we go here
whoops there we go if we log
in and we go to our projects let me
close this out so now we have okay so we
have edit and lost and look so those
look a little bit better there if we do
lost it does nothing
because uh let's go look at that so if
it says on CL click okay so uh where's
our
row so if we go up to that's our
button here's our header wait uh there
we go so it does give us our ID so
that's cool so we got our ID coming in
and then if we go to lost and and we say
lost uh lost project it didn't like it
because oh control display is none and
that's probably not the way to do
it uh actually I think it is called
style let me go check that real quick
I'm back and it is dot do style.
display and then it is lowercase so now
if we do that
that we have if we come in
here we now should have that we have
taken
our single click rows and now we've got
buttons on
them and if we click on row it doesn't
do anything if we click on the edit it
edits and if we click on lost it does
nothing and so let's see what that
complains
about uh let's see evaluating control
style uh null is not an object oh so
let's see on
click uh the ID is let's do it like this
um because I may not like that number
let's make our ID equal to uh let's call
it row
underscore I think it'll work like that
I think we'll just uh actually no it's
going to we need to push that together a
little bit so we want to
do uh we want to do it like this I
believe we just want to do row
underscore and then here when we do by
ID Oh shoot that's why it's going to be
row
underscore plus ID let's try that
probably would have worked the way we
had it but when you put comments uh
quotes in the wrong places those things
happen so let's take a look at
it come back over here let's go fire it
up let's Lo log in let's go to our
projects let's try to hit lost and there
now stuff disappears but it's not doing
anything else so I can come in here and
I can go lost and lose all of them but
if I reset it if I refresh it boom it
comes back so next thing we want to do
is we're going to create our little uh
endpoint essentially our function that
we're going to be able to call and it's
going to go in it's basically going to
take that project it's going to edit it
uh its status and then it's going to go
ahead and disappear it so that is what
we're going to come back to next time uh
as always if you have any questions
shoot us an email at info developer.com
we're just looking for ways to you know
sort of share what we've learned and
help you guys get developers get to be
better developers and we're more than
happy to uh have some suggestions and
recommendations from you as well that
being said go out there and have
yourself a great day a great week and we
will talk to you next
time
three
two one hello this is Rob with develop
andur also known as building better
developers wanted to announce that we
have school. developin 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 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 andure we just have it in a
little more of a educational format and
a way for you to track your progress as
you move forward becoming a better
developer