A Bootstrap Carousel with Spring MVC and Thymeleaf

This is the third post looking at the new Posts feature on NixMash Spring. Posts will stream bits of code, links and application notes relevant to the app and to fellow Spring developers.

After introducing the feature we looked at the role of Jsoup in generating the Page Preview for Links. Today we're going to look at the role of Spring MVC and Thymeleaf in creating the Page Preview Image Carousel. Yeah, we'll see a little JavaScript, too.

Here's the Add Link form you've seen before with the Image Carousel at the bottom.

The functionality of the Page Preview with Carousel was based on the Embedly plugin. How Links are added on Google+ is another example. Here's the Embedly plugin with the thumbnail selector.

We decided to build a better Carousel with Spring MVC, Thymeleaf, and the Bootstrap 3 Carousel.

Passing Down the Page Preview Images

In the Controller method we populate the Add Link form with a PostDTO object to be passed back to the form {POST} action. Our images will be in our PagePreviewDTO container.

Nothing special here. We need to save the PagePreviewDTO in session if needed on a result.error(), but otherwise we add it along with PostDTO in the Model (1).

HTML and Thymeleaf

You'll see there's very little HTML required when we can iterate over the PagePreview.Images() with Thymeleaf. We check the PostDTO *{hasImages} property (1), display the PageView.Images() (2), and generate the LEFT/RIGHT Bootstrap Carousel controls (3).

One minor but interesting point is that for the Bootstrap Carousel to function one of images must contain an “active” class. We can do that simply with the Thymeleaf Index value and th:classappend (2).

The JavaScript

I warned you there'd be some JavaScript. The bulk of the operational JavaScript is in bootstrap.min.js, but we do have to add a bit ourselves.

We lead off by making this a smart block of JavaScript by adding Thymeleaf inline logic. We don't want automatic image sliding so we disable it (1). The remaining JavaScript sets our Image Index on LEFT/RIGHT sliding, with additional logic to handle sliding left from the first image and right from the last image. Thymeleaf gives us the PagePreview List<Image> size (2) to reset the ImageIndex to 0 or the last image element in the List<Image> (3) as needed.

Hidden Fields

Hidden Fields play a role in storing the PostDTO.ImageIndex property. We set the ImageIndex value in our JavaScript logic and since ImageIndex is a property of PostDTO it is handled like any other Model property on form {POST}.

Back to the Spring MVC Controller

We'll complete the process by showing you how the ImageIndex is processed in the MVC Controller on form {POST}. If the Link contains an image (not a PostDisplayType.LINK) we use the ImageIndex value to obtain the src property from its base JsoupImage object.

Source Code Notes for this Post

All source code discussed in this post can be found in my NixMash Spring GitHub repo and viewed online here.

Posted June 10, 2016 06:09 PM EDT

More Like This Post