Search code examples
javascriptjavaspringthymeleafzk

How to make complex form design in Thymeleaf and Spring Boot (ZK Experienced User)

I had developed it on the ZK Web Framework (https://www.zkoss.org/) for so many years. I can use MVC using the "apply = MyClass" tag to a window, or reusing the entire window using the "use = MyWindowClass" tag. All variables and components can be dynamically added, updated, and removed from the Java class without reloading the page (Ajax enterily) from the java code of my Window class. I do a Zul page, conect to a MyClassWindow class and i can do everithing in there.

Now... I did some curses on Thymeleaf + Spring Boot, and my question is... How can i make complex design with thymeleaf without make me crazy? Because i had seen a lot of examples on internet but all required a lot of javascript develop, jquery, and a lot of pice of code of HTML. And none let me control the interface like i can do with my MyClassWindow... I know that maybe the Zk framework do all of thing in my backwards (i am not sure)... But i want to ask to you... The people that know more than me, how does this is soppose to be solve in the real apps world using thymeleaf+Spring? learn javascript + jquery is the way to go? apply a framework and forget the fight? Maybe Thymeleaf is not the tool that i need for this? maybe my aproach is wrong and i must addapt to thymeleaf ways?

For example: For doing This layout in the picture: in the up i has some filters with a "search" buttons. When it is press it load the left list with a onClick method WITHOUT RELOADING THE PAGE. Then i select the items from the left and press the middle buttons to do some action with 4 methods WITHOUT RELOADING THE PAGE. And in the end i select some properties from the right and when i press "change state" button that is when i reload the page.

example

Thank a lot for your time!

Solution

  • On the official website thymeleaf compares itself to jsp. So using both technologies you'll get a server side rendered html page - thymeleaf offering a fresh approach and several benefits in contrast to the long term grown standard JSP. In order to change the page in the browser you'll need some kind of additional client side JS implementation. Jquery is a widely used library - even if not the latests new "thing" - worth being aware about, which can help for smaller scale dynamic pages.

    There are a few extensions mentioned on the thymleaf-ecosystem page, which sound like extending the templating engine to the client side.

    ZK does several more things compared to thymeleaf, especially it handles the JS part (using jquery internally) and the AJAX communication to the server. So thymeleaf by itself is not a full replacement for ZK, and additional or alternative techniques are required.

    To build a fully dynamic web application, you might also consider one of the big popular JS frameworks (React, Angular, Vue, Svelte ...) in combination with a Spring REST () back end to provide the dynamic data, to update your pages without having to reload. Doing so you can even skip the jquery-era.

    (BTW: in case you want to/have to migrate your existing ZK application to spring boot, there is zk-springboot)