WEBVTT 1 00:00:00.640 --> 00:00:02.130 Let's go ahead and get started. 2 00:00:02.130 --> 00:00:03.710 So the first thing we're going to do is create 3 00:00:03.710 --> 00:00:06.313 a project at the Spring Initializer website. 4 00:00:08.070 --> 00:00:10.783 So I'll go to that start.spring.io. 5 00:00:12.760 --> 00:00:14.330 Okay, so we're at the website. 6 00:00:14.330 --> 00:00:15.670 The one thing I want to do is update 7 00:00:15.670 --> 00:00:18.393 the project metadata for group and artifact. 8 00:00:21.660 --> 00:00:24.363 So for the group, I'll give com.luv2code.springboot. 9 00:00:30.390 --> 00:00:33.423 For the artifact ID, I'll give thymeleafdemo. 10 00:00:39.464 --> 00:00:41.060 I'll move over here for dependencies. 11 00:00:41.060 --> 00:00:43.483 I'll start off by giving the web dependency. 12 00:00:49.240 --> 00:00:51.550 I'll also give the Thymeleaf dependency 13 00:00:55.882 --> 00:00:58.460 and I'll also put in DevTools, just so I can 14 00:00:58.460 --> 00:01:00.853 take advantage of that automatic restart. 15 00:01:05.960 --> 00:01:08.713 Okay, so make sure these appear here on your screen. 16 00:01:13.000 --> 00:01:15.550 From there, just go ahead and generate the project. 17 00:01:20.420 --> 00:01:22.870 So I'll just kind of move over to my file system. 18 00:01:31.080 --> 00:01:33.450 I'll move into my downloads directory here 19 00:01:36.050 --> 00:01:37.893 and I'll simply unzip the file. 20 00:01:39.500 --> 00:01:40.990 I'll also copy this folder and 21 00:01:40.990 --> 00:01:42.840 I'll move it to a different location. 22 00:01:45.450 --> 00:01:47.150 Just swing over to my left co-directory. 23 00:01:47.150 --> 00:01:49.210 I'll just drop it in here in the dev-spring-boot. 24 00:01:49.210 --> 00:01:50.850 Again, you can place it anywhere 25 00:01:50.850 --> 00:01:52.360 you'd like in your file system 26 00:01:52.360 --> 00:01:53.960 and I'll just paste this folder. 27 00:01:58.270 --> 00:02:01.110 Excellent, so that's the file that was generated 28 00:02:01.110 --> 00:02:03.863 by the Spring Initializer website, cool. 29 00:02:08.836 --> 00:02:11.680 So let's go ahead and move into Eclipse 30 00:02:11.680 --> 00:02:13.310 and I'll do the normal housekeeping work, right? 31 00:02:13.310 --> 00:02:14.730 I'll stop all apps that are running 32 00:02:14.730 --> 00:02:17.003 and also close all windows. 33 00:02:18.680 --> 00:02:19.980 Now we'll go ahead and import 34 00:02:19.980 --> 00:02:22.263 that Maven project into our ID. 35 00:02:27.064 --> 00:02:29.064 I'll select file import. 36 00:02:30.380 --> 00:02:32.430 In this wizard here, I'll just type Maven, 37 00:02:32.430 --> 00:02:34.940 the filter on those Maven wizards 38 00:02:34.940 --> 00:02:37.583 and I'll choose the existing Maven projects. 39 00:02:42.150 --> 00:02:44.170 I'll just browse over to that directory 40 00:02:44.170 --> 00:02:45.940 of where that project is located 41 00:02:49.010 --> 00:02:51.510 and I'll choose my dev-spring-boot Thymeleaf demo. 42 00:03:02.090 --> 00:03:04.507 Okay, that looks pretty good. 43 00:03:08.830 --> 00:03:10.180 Great, so there's our new project 44 00:03:10.180 --> 00:03:12.233 that we just imported, Thymeleaf demo. 45 00:03:13.840 --> 00:03:15.750 Alrighty, so our project's open. 46 00:03:15.750 --> 00:03:19.310 But we need to add work around for the Eclipse bug. 47 00:03:19.310 --> 00:03:22.310 So let's go ahead and open up our pom.xml file 48 00:03:23.570 --> 00:03:24.760 and you know the drill, right? 49 00:03:24.760 --> 00:03:27.040 We just move down to this properties section 50 00:03:27.040 --> 00:03:31.143 and then we add support for the maven-jar-plugin.version. 51 00:03:44.227 --> 00:03:45.140 Alrighty, that's in place so we 52 00:03:45.140 --> 00:03:46.430 can go ahead and save this file. 53 00:03:46.430 --> 00:03:49.360 Going to get rid of the error message here in the pom.xml. 54 00:03:49.360 --> 00:03:50.660 And then also we can simply go over 55 00:03:50.660 --> 00:03:54.470 to our project and simply do a Maven update project 56 00:03:54.470 --> 00:03:55.920 and then we'll be good to go. 57 00:04:11.450 --> 00:04:12.690 The first thing I want to do actually 58 00:04:12.690 --> 00:04:14.670 is just rename the project and give 59 00:04:14.670 --> 00:04:17.133 it a more descriptive name. 60 00:04:20.720 --> 00:04:24.653 I'll call it 30-thymeleafdemo-helloworld. 61 00:04:33.950 --> 00:04:35.630 Awesome, so there's my new project 62 00:04:35.630 --> 00:04:36.843 that was just renamed. 63 00:04:40.000 --> 00:04:41.970 So the first thing I want to do is verify 64 00:04:41.970 --> 00:04:43.870 some information in the pom.xml file. 65 00:04:43.870 --> 00:04:45.770 So I'll go ahead and open up this file 66 00:04:47.151 --> 00:04:48.501 and I'll expand the window. 67 00:04:49.670 --> 00:04:51.460 I'll move down here and I'll just verify 68 00:04:51.460 --> 00:04:53.283 the dependencies that were added. 69 00:04:54.490 --> 00:04:55.920 Okay, so in this section, we can 70 00:04:55.920 --> 00:04:58.000 see that they've added the Thymeleaf support 71 00:04:58.000 --> 00:04:59.920 using that spring-boot-starter-thymeleaf. 72 00:04:59.920 --> 00:05:02.070 This is great, we're kind of good to go here. 73 00:05:08.500 --> 00:05:11.200 Now I'll go through and actually create a new package. 74 00:05:20.100 --> 00:05:22.753 I'll use this new package to add my controllers. 75 00:05:26.180 --> 00:05:28.383 I'll call this package .controller. 76 00:05:34.740 --> 00:05:36.300 Okay, there's my new package. 77 00:05:36.300 --> 00:05:37.730 In step two, I'm actually going to develop 78 00:05:37.730 --> 00:05:40.973 a Spring MVC controller and I'll place it in this package. 79 00:05:46.090 --> 00:05:48.940 The name of this controller, I'll call it DemoController. 80 00:05:59.080 --> 00:06:00.930 Alrighty, I'll expand the window here. 81 00:06:00.930 --> 00:06:02.740 This is my demo controller. 82 00:06:02.740 --> 00:06:04.790 I'll write some quick comments to myself. 83 00:06:09.810 --> 00:06:12.240 Basically we just created mapping for /hello. 84 00:06:12.240 --> 00:06:14.863 So on top, I'll give the annotation for @Controller. 85 00:06:28.640 --> 00:06:30.220 And then I'll set up a GetMapping 86 00:06:30.220 --> 00:06:32.483 at the bottom here for /hello. 87 00:06:39.320 --> 00:06:41.040 I'll create a method here called sayHello 88 00:06:41.040 --> 00:06:42.263 that takes a Model. 89 00:06:51.000 --> 00:06:53.273 I'll simply add an attribute to the model. 90 00:06:57.860 --> 00:06:59.780 The name of the attribute is theDate 91 00:06:59.780 --> 00:07:03.023 and I'll pass in a new Java Date instance. 92 00:07:05.790 --> 00:07:08.760 And then finally, I simply return helloworld. 93 00:07:15.270 --> 00:07:17.040 Remember, since we have the Thymeleaf dependency 94 00:07:17.040 --> 00:07:18.610 in the Maven POM file, Spring Boot 95 00:07:18.610 --> 00:07:21.600 will auto-configure to use Thymeleaf. 96 00:07:21.600 --> 00:07:23.370 When we return helloworld, it's going 97 00:07:23.370 --> 00:07:27.080 to look in src/main/resources/templates/helloworld.html. 98 00:07:34.730 --> 00:07:36.240 Okay, so that's taken care of. 99 00:07:36.240 --> 00:07:37.530 So in step three, we're going to create 100 00:07:37.530 --> 00:07:38.943 a Thymeleaf template. 101 00:07:40.250 --> 00:07:42.703 Be sure to create it in the templates directory. 102 00:07:51.960 --> 00:07:53.070 So the name of this file, we'll 103 00:07:53.070 --> 00:07:54.867 call it helloworld.html. 104 00:08:02.480 --> 00:08:05.363 I'll expand this window and I'll start out 105 00:08:09.290 --> 00:08:11.893 by just creating a very basic html file. 106 00:08:16.680 --> 00:08:17.930 And the one thing that's important 107 00:08:17.930 --> 00:08:20.540 when using Thymeleaf is to setup the XML namespace 108 00:08:20.540 --> 00:08:23.663 for :th and we give the appropriate reference here. 109 00:08:30.430 --> 00:08:32.100 So by setting up this namespace, 110 00:08:32.100 --> 00:08:35.573 this will allow us to use Thymeleaf expressions in our page. 111 00:08:44.921 --> 00:08:48.504 I'll set up a very basic head with a title. 112 00:09:00.410 --> 00:09:01.930 And then I'll create this paragraph tag 113 00:09:01.930 --> 00:09:04.800 and I'll make this a Thymeleaf expression th:text. 114 00:09:04.800 --> 00:09:06.473 It's actually outputs and text. 115 00:09:13.040 --> 00:09:15.440 I'll say Time on the server is 116 00:09:15.440 --> 00:09:18.351 and this make this a + to do catenation 117 00:09:18.351 --> 00:09:21.580 and then I reference theDate and it's 118 00:09:21.580 --> 00:09:23.733 the date that we pull from theModel. 119 00:09:24.770 --> 00:09:25.890 And remember in the controller, 120 00:09:25.890 --> 00:09:29.040 we added data to the attribute so the time 121 00:09:29.040 --> 00:09:31.450 the template can actually access the date 122 00:09:31.450 --> 00:09:33.400 from that Spring MVC Model. 123 00:09:33.400 --> 00:09:35.170 And then based on this information, 124 00:09:35.170 --> 00:09:38.283 that's how we get the generated output for this page. 125 00:09:44.750 --> 00:09:47.573 Okay, so let's go ahead and run this application. 126 00:09:55.580 --> 00:09:56.650 The app is up and running. 127 00:09:56.650 --> 00:09:59.110 Let's go ahead and swing over to our web browser 128 00:10:00.340 --> 00:10:03.483 and we'll go to localhost:8080/hello. 129 00:10:07.640 --> 00:10:09.730 And, all right, good job. 130 00:10:09.730 --> 00:10:12.460 We get our desired output, so time on the server is 131 00:10:12.460 --> 00:10:14.930 and they simply plugin that information, all right? 132 00:10:14.930 --> 00:10:16.750 So remember, we get this by making use 133 00:10:16.750 --> 00:10:18.600 of the Thymeleaf expressions based 134 00:10:18.600 --> 00:10:20.953 on data that's placed in the model. 135 00:10:21.850 --> 00:10:23.470 We can actually view the Page Source 136 00:10:23.470 --> 00:10:26.003 just to see what the generated page looks like. 137 00:10:27.430 --> 00:10:29.950 So there's our normal html, our body, 138 00:10:29.950 --> 00:10:31.890 the paragraph and then notice how 139 00:10:31.890 --> 00:10:34.630 all this information's been generated dynamically 140 00:10:34.630 --> 00:10:36.330 by making use of Thymeleaf. 141 00:10:36.330 --> 00:10:38.030 So this is pretty cool, I like it. 142 00:10:41.868 --> 00:10:43.220 All right, so that was a nice little example 143 00:10:43.220 --> 00:10:45.000 of building a Spring Boot application 144 00:10:45.000 --> 00:10:46.660 that makes use of Thymeleaf, along 145 00:10:46.660 --> 00:10:48.350 with those Thymeleaf expressions. 146 00:10:48.350 --> 00:10:50.163 So I'd like to say good job.