Feeding Data to Our Thymeleaf Templates9:59 with Chris Ramacciotti
The power of Thymeleaf lies in its ability to combine static HTML with dynamic data. During this video, we'll talk about how to feed the data stored in POJOs, into our Thymeleaf templates.
In the last video you designed a pojo, 0:00 a plain old java object to hold our gif data. 0:02 It's a pretty classic class too. 0:05 It had four fields, getters and setters for each field, and a constructor. 0:08 There was nothing about the functionality of this class that couldn't be used 0:13 outside of a spring application, or really outside of any framework. 0:16 This is what made it truly a plain, old Java object. 0:20 Now what should we do with these objects once we create them? 0:25 Well, the whole goal of this application is to present the GIFs, and 0:29 associated data, in a nice way to our users. 0:32 To accomplish this, we want to store our GIF data into GIF objects, 0:36 feed them to our timely templates, then use the spring expression language 0:40 in those templates to access that data, such as names and dates uploaded. 0:44 We'll display all of this stuff with HTML. 0:50 Since we've coded the GIF model class, let's create a GIF object and display it. 0:54 The first step I'll take is to create another method in the GifController class 0:59 that will handle a single Gif's detail page. 1:02 So I'll go into my controller package, and open GifController. 1:04 You may already have a method like this from your practice earlier. 1:09 If so, you can replace that one with what we're doing here. 1:12 I'll start by creating the method. 1:15 Called public string and gifDetails is what I'll name mine. 1:17 At the top what I'm going to do, is request a mapping to the gif URI/gif, 1:24 and then the name of the view we'll be returning, is called gif-details. 1:34 So as a string, I'll return gif-details. 1:38 This template is what will be rendered 1:41 when the gif-details controller method is called. 1:46 You may have noticed the timely template that I gave you in the templates 1:49 directory, called gif-details.html. 1:52 There it is right there. 1:55 Before we return the name of the view, 1:57 let's create a GIF object here that we can make available to the view. 1:59 So to do that I'll create a new GIF object, I'll call it GIF. 2:03 New GIF, and the name is going to be compiler-bot. 2:09 The data was uploaded is going to be local date. 2:17 We can create a new date, by using the of method, 2:22 which is static in the local date class. 2:24 I'll say it was uploaded in 2015 February 13th. 2:27 The next value is going to be the username, or the user who uploaded it. 2:35 I'm just going to drop in my name. 2:39 And finally, is it a favorite or not? 2:42 I will mark it as a favorite. 2:44 Now it looks like we need to import our Gif model class. 2:47 I'm gonna hit Option + Enter here to take IntelliJ's first suggestion. 2:51 Cool, we've got out GIF object created in our controller method. 2:58 Now what you'll notice here, is the name that I specified for the GIF is 3:01 one that lines up with the name of the GIF file I gave you under the GIFs directory. 3:05 So if I go under static, gifs, there it is right there, compiler-bot. 3:10 We've got a bunch of others that we'll be adding eventually, 3:16 that you can check out if you'd like. 3:19 Now that our object is constructed, 3:21 we need to make it available to the gif-details view. 3:23 The way we do this in Spring, is to add this to what we call model map. 3:26 This is done by including a model map parameter in the controller method. 3:30 So I'll add that into the controller method. 3:35 I'll hit enter, it comes from the Spring framework right there. 3:37 I'll call it model map. 3:41 When the Spring framework calls our controller method as a result of a user 3:42 requesting the gif path, 3:46 Spring will pass in an instance of a model map into this parameter. 3:49 Then, all we have to do on our code inside the method, is add it to the map. 3:54 Just like we would to a hash map. 3:58 With strings as keys. 4:01 In fact, if you look at the inheritance chain of a Spring model map, 4:03 you'll find that it actually is a model map. 4:08 So, inside the method after we created the gif object, 4:11 let's go ahead and add it to our model map. 4:14 Using the familiar put method. 4:17 I will give it the string key gif, and 4:20 I will use as its value the gif object I just created. 4:23 There's no need to include the model map in our return value, 4:28 as the Spring Framework will do the work of making our model map 4:32 available to the templating engine, which in our case is Thymeleaf. 4:35 Speaking of which, let's head over to the gif details template now. 4:39 Let me collapse. 4:42 Gifs here, and open gifs details. 4:45 Let's scroll down to the div with the class name of gif detail, 4:50 which is where we'll focus our work. 4:53 So if you scroll down eventually, 4:55 you will come upon this div that has a class name of gif detail. 4:57 This is where we'll be doing our work. 5:02 The first thing we're interested in is displaying the image. 5:05 To do this, we need to get the url correct in the image tag 5:08 that appears in the source attribute. 5:11 Looking at the source attribute, 5:14 we first need to prefix it with the th name space that you're now familiar with. 5:16 Now, inside of the url expression, we can use what's called a variable expression 5:22 to get at our gif object's field values. 5:27 This expression is part of the Spring expression language. 5:30 What we're interested in right now is the URL that goes to the gifs right here, 5:33 slash the name of the gif and then .gif. 5:40 Currently I have a static value, or hard coded value entered here. 5:46 We like to replace this with the value that comes from our gift object 5:51 that we added to the model map. 5:55 So what I have highlighted here, 5:57 is the thing that we want to replace with a Spring variable expression, 5:59 which will allow us to get at name field value of our GIF object. 6:03 In Java, we can catonate these values with the plus operator. 6:09 Conveniently, we can also do that in Thymeleaf templates. 6:13 Let me go ahead and type what is going to take and then I'll explain it briefly. 6:17 So I'm going to delete this, and these two pieces right here, this slash GIFs. 6:21 Are the unchanging pieces of this concatenated string that we want to 6:29 leave in here. 6:33 So, I'll leave them as string literals. 6:34 In between here, what I want to concatenate is the name 6:37 property of the gif object. 6:42 I will use what's call a Spring variable expression. 6:45 Gif.name. 6:47 The entire expression I just typed is called a standard expression in Thymeleaf. 6:50 It includes a couple string literals, the things I put in single quotes here, 6:58 the last and the first, 7:02 as well as a variable expression that I have highlighted right here. 7:03 That's the thing that starts with a dollar sign, and is enclosed in curly braces. 7:07 This syntax is used to access objects that we've 7:12 added to the model map from our controller. 7:14 Remember in the gif controller how we added an attribute named gif? 7:17 The value being a gif object. 7:21 Well, back in the template, 7:23 we can access model map values with these variable expressions, 7:25 which start with a dollar sign and, again, are enclosed by curly braces. 7:30 In this expression, I'm saying I'd like to access the name field 7:34 of the attribute named gif that has been added to our model map. 7:40 This might lead you to believe that the Thymeleaf templating engine is directing 7:45 accessing our private field we called name. 7:49 This isn't actually true though. 7:52 It turns out that Thymeleaf is just calling what it assumes to be the name of 7:54 the gitter git name, and returning that value. 7:58 If you haven't used the standard naming convention of get, followed by the field 8:02 name, for the getter, or is followed by the field name for 8:05 a Boolean getter, or if you've omitted the getter altogether, 8:09 you'll get an error when this template is rendered. 8:14 With these changes made, I'm going to save my file And 8:17 I'm going to stop my boot run task, 8:21 if you have it running at the moment, and I will rerun the boot run task. 8:23 And after it is finished deploying the application and 8:32 starting the web server, I'll switch back to a browser. 8:36 And I'll navigate to the slash gif resource. 8:42 Sweet. 8:47 There's our gif detail page with the image source coming from the gif object we 8:48 added to the model, and made available to the template. 8:52 If that's not convincing, since this is the same gif that we were displaying 8:55 before, then you can switch it up to include a different gif. 8:59 Using any one of the gifs that I have given you here. 9:03 So if you wanna see the Android explosion. 9:06 If you go over to gif controller and change compiler box to 9:08 android-explosion, and as long as the name 9:12 that you specify here matches exactly what comes before the gif extension here. 9:17 When you stop and reboot your server 9:23 and then go back to your browser and refresh, you should see, oops. 9:29 It looks like I got an error here. 9:35 And I think what happened is I tried to rerun my server too soon. 9:39 So I'll go ahead and click boot run again, and let's see what happens. 9:43 Let's see if I get rid of those errors. 9:47 It looks like it worked there, so I'll switch back to my browser, hit refresh and 9:49 there it is. 9:54 An android explosion gif 9:55
You need to sign up for Treehouse in order to download course files.Sign up