This course will be retired on January 8, 2022.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Now that we've added the necessary code for the controller, service and DAO to handle the saving of a new category, we turn our attention now to the HTML form used for display to users. In particular, we'll use object binding in Thymeleaf to ensure that a form is rendered in the browser such that when submitted, will contain data that our application will recognize and be able to use effectively.
Now that we have our code in place to
process the adding of a new category.
0:00
We need to make sure we have everything
in place to render the form to
0:03
the user sending it as an HTTP response
to be displayed to the user s that he or
0:07
she can enter data and submit.
0:11
Let's pop open the category form now.
0:14
You'll find that in source,
main, resources and
0:16
in templates is where you'll find
all the Thymeleaf templates.
0:20
And I have them separated into
directories according to the entity that
0:23
they describe.
0:27
So here's the category form.
0:28
Let's recall the basic
components of an HTML form.
0:32
First, there is a form tag,
here it is for us right here.
0:35
But you'll notice that the form's opening
tag is missing two important attributes,
0:39
the action and the method attributes.
0:44
Let's add those now using
Thymeleaf attributes.
0:47
We'll say th:action= and then in quotes
we'll have Thymeleaf process the URL here,
0:50
/categories and
then the method is going to be post.
0:57
Again, as usual I'm having Thymeleaf
process and generate the URL
1:04
right here for form submission
using @ followed by curly braces.
1:08
The next important component of
a form would be its data elements.
1:14
In our case, a text input right here and
1:17
a select element that renders
as a drop down right here.
1:20
Recall from HTTP Basics, as well as
any experience you have with HTML,
1:25
that these data elements need name
attributes in order to be included
1:30
in the request payload for
our post form submission.
1:34
We'll return to those name
attributes in just a moment.
1:37
The last component of a form we're
concerned about here is a way to submit.
1:40
And in our case, it's a submit button,
which if you scroll down,
1:44
you'll see that we already have in
place right here, button type= submit.
1:49
Now, back to that input and
select element.
1:56
We could decide to add
name attributes ourselves.
2:00
But actually, Thymeleaf has
a better alternative for you.
2:04
Thymeleaf offers what's called object
binding in which you take an object that's
2:07
been included as a model
attribute from the controller and
2:12
bind it to an HTML element.
2:16
Then, any of the HTML elements, Child
elements can easily access its properties.
2:18
Let me show you an example here and as
you gain more experience with Thymeleaf,
2:24
you'll learn more about its capabilities.
2:28
We'll start by binding a category
object to the form element using the th
2:31
object attribute, and
here is how that looks.
2:35
Th colon object equals dollar sign and
2:38
curly braces we are going to put category.
2:42
Now, this means that a model attribute
named category will have had to been
2:47
added to the model map by the controller
method that renders this view.
2:52
Let's do that now.
2:57
I will flip to CategoryController.
2:58
If I scroll up in this controller here,
I'll see the formNewCategory method which
3:02
is the one that handles the rendering of
the view we're concerned with right now.
3:09
So under that comment for adding model
attributes needed for a new form,
3:12
I'll add a new category
object model.addAttribute.
3:17
I'll call it category, cuz that's
the name I reference in the template and
3:23
I will add a new category object.
3:27
Notice that i'm not specifying any
field values of the category object
3:32
since this will be a brand new category.
3:36
Well, at least this approach
will suffice for now.
3:38
So we're good to go here.
3:41
Now, back to the form.
3:42
With our object bound to the form element,
we can now use the th field attribute for
3:45
our data elements, as follows.
3:50
I'm going to go down to this text
input and use the th field elements.
3:52
In here instead of starting with a dollar
sign, I will start with an asterisk and
3:58
in the curly braces.
4:02
I will use the name property and
4:03
then I'll do something similar for
the select element.
4:06
I'll use thfield and as the attribute
value I'll use an asterisk and
4:10
in curly braces,
I will refer to the color code property.
4:17
Notice that when you're referencing
a field name, you use the asterisk and
4:22
you indicate only the name of
the property of the bound object.
4:26
Instead of using the object name
which is in our case category.
4:29
Category.colorcode with object binding,
you only use the property name here.
4:33
And the asterisk tells Thymeleaf that this
4:40
is in reference to the bound
object of a parent element.
4:43
In our case, bound object is on the form
element, TH object equals category.
4:46
That's the object whose
properties we are referencing
4:52
in here with the asterisk in curly braces.
4:55
Now this Thymeleaf object binding
actually gives us several benefits and
4:59
i'll mention a couple here.
5:03
One benefit is that in binding the object
and using these TH field attributes if
5:05
that category object happens to have any
property values for a name and color code.
5:10
Those will be dropped in as
value attributes by Thymeleaf.
5:17
In addition, name attributes for
each of these fields but
5:21
the input in the select, will be
included and I referenced those earlier.
5:26
Those name attributes will need
to be present in order for
5:30
the form submission to include
those values in its request.
5:34
Payload, Thymeleaf will take care of
that because we've used object binding.
5:39
And the second benefit I wanna highlight
is that object binding will allow us to
5:45
easily use the same HTML template for
editing an existing category.
5:49
Here, we're using it for
adding a new category.
5:54
We can reuse this same file for
editing an existing category.
5:57
And for redirecting back here, should a
user try to submit this form with invalid
6:01
or missing data which we will
cover in the next stage.
6:05
Okay, one more thing
before we test this app.
6:10
Currently, our color code select
element has only one option here, and
6:13
that is Aqua.
6:18
But we actually have a color enum in the
web package offering a handful of options.
6:21
To remind you, that is right here.
6:25
We have six colors at our disposal here.
6:28
So I'd like Thymeleaf to populate this
select element with those six options.
6:32
And we just need to do two things
in order to make that happen.
6:38
First, we need to add the colors to
the model from the controller method.
6:41
And second, will need to tell Thymeleaf
to iterate over those colors in this
6:45
template and generate option elements for
each one of those colors.
6:49
And since we're already in
the Thymeleaf template,
6:53
let's take care of that part first.
6:55
So, to generate an option element for
6:57
each of the colors,
we'll include a th each element.
6:59
So I'll leave this first option intact
that will be what is displayed when no
7:05
color is selected and to the second
option I'll include a th each attribute.
7:09
And the name I'll give to each object
that we integrate over, will be color and
7:15
that will come from an attribute that has
been added to the model map called colors.
7:19
Then, we'll need to specify the options
value with the th value attribute, so
7:26
let's do that here.
7:30
The th value attribute will have
the value coming from that color object.
7:31
Specifically, coming from the color
object's hex code property.
7:37
So that will be the value that's passed
along with the request payload when
7:43
the form is submitted.
7:46
But the text I'd like to
display comes from the text.
7:48
The th text attribute so
let's add that as well and
7:52
this line is getting quite long
let me scroll over a little bit.
7:55
And the value is also going to
come from that color object.
7:59
Specifically, from its name property.
8:03
And finally, much like we did
with the category index page,
8:06
let's change this style attribute.
8:10
It's hidden now, but if we click on it,
IntelliJ will display that.
8:12
Let's change this to match
the current colors hexCode.
8:17
So like we did in the index, let's
trigger some Thymeleaf concatenation.
8:22
So I'm going to surround that with
vertical bars an d then in place of this
8:29
static Hex value I am going
to drop color.hexCode.
8:34
Now this is all great but in order for
Thymeleaf to process this attribute,
8:42
we better prefix this
attribute name with th colon.
8:45
There we go.
8:50
Now everything I just did here
with colors all depends on this
8:51
colors entry right here,
so I forgot the s here.
8:56
This colors entry being
present in the model map that
9:00
has to have been added by the controller
method that will render this view.
9:04
Let's switch back to category
controller and do that now.
9:09
So we'll add that model attribute here,
9:14
model.addAttribute we said
we want to call it colors.
9:16
And fortunately,
9:20
there is a built in values method to the
Java enum returns an array of in our case,
9:21
color objects in the way that looks it's
a static method on the enum Color.values.
9:27
And we'll just need to make
sure that we import that enum.
9:36
So make sure you import that
enum from this project and
9:40
not something that's from another library.
9:44
That's our first one right here.
9:46
Beautiful, now that was some
crazy coding and bouncing around.
9:48
Shall we reboot this thing and
test our category add?
9:52
Let's do it.
9:55
Now the first thing I wanna do is I wanna
make sure that I have a database server
9:57
up and running.
10:01
So in my terminal,
as we've done in previous videos.
10:01
I'm actually gonna arrow
up to a previous command.
10:04
There it is right there,
that starts the server.
10:08
Someone hit Enter,
that should pop open the web console.
10:10
There it is.
10:13
And what you should see here is
the JDBC URL that you last used.
10:14
And in this case, mine looks right.
10:20
I'm gonna click Connect.
10:21
I'll close my old one right there and
I'll switch back to IntelliJ.
10:23
Now, with my database server running,
10:27
I'm going to run the boot run task,
which is my last run task.
10:30
So I'm gonna click Rerun.
10:34
Looks like everything compiled.
10:38
Our application is now booting.
10:40
And wonderful.
10:44
Our application successfully started.
10:45
So let's switch to Chrome,
and let's see what we have.
10:48
I'm gonna go back to my categories page.
10:52
I'll hit Refresh to make sure
the category index is still working fine.
10:54
Looks great and now I'm going to
click on this plus link right here,
10:58
which will actually take us to that
category add form and now let's see here.
11:02
Let's enter, Yoga for the category
name and let's drop this down,
11:08
[SOUND] all of our colors
made it in there wonderful.
11:11
I'll choose Purple here and
I will click, Add.
11:14
And great, there is our new category,
looks like it worked.
11:19
We're really rock and roll and now!
11:24
Hey, great work on getting
that category add to work!
11:26
Before moving on to
the features of updating and
11:29
deleting categories,
as well as crowd operations for GIFs.
11:32
We'll wanna make sure we're able to detect
invalid data when making any changes and
11:35
in this case, adding a category.
11:40
So up next, data validation.
11:42
You need to sign up for Treehouse in order to download course files.
Sign up