英文:
How to make complex form design in Thymeleaf and Spring Boot (ZK Experienced User)
问题
我已经在ZK Web Framework(https://www.zkoss.org/)上进行了多年的开发。我可以使用“apply = MyClass”标签将MVC应用于窗口,或者可以使用“use = MyWindowClass”标签重用整个窗口。所有的变量和组件都可以动态地添加、更新和从Java类中删除,而无需从我的Window类的Java代码中重新加载页面(完全使用Ajax)。我创建一个Zul页面,连接到一个MyClassWindow类,在那里我可以做任何事情。
现在...我在Thymeleaf + Spring Boot上进行了一些尝试,我的问题是...如何在不让自己发疯的情况下使用Thymeleaf进行复杂设计?因为我看到了很多互联网上的例子,但所有的例子都需要大量的JavaScript开发、jQuery,以及大量的HTML代码。而且没有一个让我像我可以在我的MyClassWindow中那样控制界面...我知道也许Zk框架在我的背后做了所有的事情(我不确定)...但我想问问你...作为比我更有经验的人,这在真实的应用程序世界中应该如何解决,使用Thymeleaf + Spring?学习JavaScript + jQuery是正确的方法吗?应用一个框架然后忘记这些困扰?也许Thymeleaf不是我需要的工具?也许我的方法是错误的,我必须适应Thymeleaf的方式?
举个例子:要创建图中的布局,上方有一些带有“搜索”按钮的筛选器。当按下按钮时,它会通过onClick方法加载左侧的列表,而无需重新加载页面。然后我从左侧选择项目,并按下中间的按钮,执行4个方法的某些操作,同样也不需要重新加载页面。最后,我从右侧选择一些属性,当我按下“更改状态”按钮时,页面会重新加载。
非常感谢您的时间!
英文:
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.
Thank a lot for your time!
答案1
得分: 1
在官方网站上,Thymeleaf将自己与JSP进行了比较。因此,使用这两种技术,您将获得一个服务器端渲染的HTML页面 - Thymeleaf提供了一种新颖的方法,并相对于长期成熟的标准JSP提供了几个优点。为了在浏览器中更改页面,您需要某种额外的客户端JS实现。Jquery是一个广泛使用的库 - 即使不是最新的新鲜事物 - 值得了解,它可以帮助创建较小规模的动态页面。
Thymeleaf生态系统页面上提到了一些扩展,听起来是将模板引擎扩展到客户端的内容。
与Thymeleaf相比,ZK做了更多的事情,特别是它处理JS部分(内部使用jquery)和与服务器的AJAX通信。因此,单独的Thymeleaf并不能完全替代ZK,需要使用额外的或替代的技术。
要构建完全动态的Web应用程序,您还可以考虑使用其中一个流行的大型JS框架(React、Angular、Vue、Svelte ...),结合Spring REST后端来提供动态数据,以便在无需重新加载的情况下更新页面。这样做甚至可以跳过jquery时代。
(顺便说一下:如果您想要/必须将现有的ZK应用程序迁移到Spring Boot,可以使用zk-springboot)
英文:
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)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论