Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Java Spring with Hibernate Data-Driven Application Design Testing Our Service and DAO

Karrtik Iyer
Karrtik Iyer
3,738 Points

ThymeLeaf Template, when to use | vs + operator

In this video we learnt to read the color code and adding to the th:style variable the category.colorCode, we could have done this using + operator like below, which also works, th:style="'background-color:'+ ${cat.colorCode}" instead in video we were taught the | operator which is something like below: th:style="|background-color:${cat.colorCode}|" What's the difference between both and when to use what? Please advise.

Karrtik Iyer
Karrtik Iyer
3,738 Points

Chris Ramacciotti , can you please help answer this question?

2 Answers

Chris Ramacciotti
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Chris Ramacciotti
Treehouse Guest Teacher

Great question! Thymeleaf offers string concatenation with the '+' operator, and literal substitution with the '|' character. Whatever you can do with literal substitution, you can do with concatenation. But, substitution with the '|' tends to be simpler syntax, so that is the preferred approach.

However, the one case in which you'd need to use concatenation is if you wanted something like a conditional expression as a concatenated value. When using substitution, only variables can be used inside the ${...}. For example, in Giflib, you couldn't do the equivalent of the following, using a literal substitution instead:

th:class="(${gif.favorite}? 'un' : '') + 'mark favorite'"

This is because it involves a conditional (ternary) expression that is invalid in a literal substitution. Now, if you computed this value in the controller, and made it available as a model attribute, you could get around this. Essentially you'd be moving this logic to the controller. But, if it's for the sole purpose of presentation (like a CSS class), you want to keep that in the view, not the controller.

Karrtik Iyer
Karrtik Iyer
3,738 Points

Thanks Chris Ramacciotti for the great explanation with example, one more question, like thymeleaf do we have other template engines available as alternatives, which are the ones widely used in industry as of today?

Chris Ramacciotti
seal-mask
.a{fill-rule:evenodd;}techdegree
Chris Ramacciotti
Treehouse Guest Teacher

Yes, there are definitely others. Template engines like Velocity, Freemarker, and Handlebars are popular. If you're interested in using those, do a quick web search with Spring and [template engine of choice]. You should see a bunch of guidance offered. You'd be well-served to play with some other template engines!

As a starting point, you can check out how Craig Dennis uses Handlebars in his course, Intro to Java Web Development with Spark.