Using Dandelion with Spring Boot and Thymeleaf

This post began as a look at handling a Java Date value across the various application layers of NixMash Spring v0.1.5, with Dandelion being part of the mix. Then I felt it better to look at Dandelion separately to get the party started. The Contact Update form with the Date field in which Dandelion plays a part is shown below.

You might not have heard of Dandelion. I only recently discovered it myself. Dandelion is a framework that handles static and dynamic web assets like JavaScript and CSS files. What I like about Dandelion is that you can define asset “bundles” to be loaded dynamically when needed. Something else that’s great about Dandelion is that you can retrieve those assets from Webjars, making it very efficient all around. Add to that Dandelion’s tight integration with Thymeleaf and this probably won’t be the last post you’ll be reading about Dandelion on NixMash.

Let’s begin by looking at the Dandelion dependencies in our Gradle build.gradle file. (Last two compile entries.)

Dandelion is currently at 1.0.1, but if you look at the two com.github.dandelion entries above you’ll notice I’m using 0.10.1. Dandelion configuration is different in 1.x.x, and I wish I could give you the details on setting up the latest and greatest Dandelion in Spring Boot. Unfortunately, after 4 hours or so of inexplicable 500 Internal Server errors using various 1.0.1 configurations I threw in the towel and went back to 0.10.1. I’ll try again after a couple more Dandelion releases and get back to you.

The datatables-thymeleaf library is all we need to get started, but we’ll be retrieving our JS and CSS assets from Webjars, so we need the dandelion-webjars library as well. Displayed above our Dandelion dependencies are two new Webjars: jQuery-UI and jQuery-UI-Themes. Dandelion is going to retrieve assets from those webjars to generate our form’s Contact BirthDate Calendar.

Below is a simple DandelionConfig Spring @Configuration file where we create the Dandelion Beans for the Servlet, its Filter and Dialect.

I mentioned Dandelion’s tight integration with Thymeleaf, so to enjoy that integration we need to add the DandelionDialect bean to our SpringTemplateEngine bean.

To Thymeleaf

Now that our beans are wired we can go to our Thymeleaf HTML file. We add our Dandelion XML namespace so we can use a Dandelion bundle to produce the Birth Date Calendar. Notice the .datepicker({ dateFormat: ‘mm/dd/yy’ }) javascript function on the birthDate field on the <body /> tag. The datepicker function is in the jQuery-UI JS library we’ll be loading with our Dandelion Asset Bundle.

Dandelion Asset Bundles

As I said a couple of times now, one of the cool features of Dandelion is its use of Asset Bundles. Still in the Thymeleaf HTML file, here’s the Contact BirthDate field where we load up the jquery-ui-overcast bundle.

The Bundle

Our Asset Bundle is a JSON Resource file as you see in the Project Window layout.

The Dandelion Asset Bundle file defines the bundle, lists any dependencies and then lists the assets to be loaded. We’re using the jQuery-UI JS file and the jQuery-UI Overcast Theme CSS file. Again, both from their respective Webjars, so very cool stuff.

That pretty much wraps up getting started with Dandelion in Spring. Next time we’ll look at handling that pesky BirthDate value. Don’t worry, with Spring MVC and Hibernate annotations it’ll be a cinch!