【Vaadin flow 实战】第2讲-深入理解vaadin flow技术路线原理
vaadin flow技术路线揭秘
什么是flow
Vaadin Flow是一个允许开发人员完全用Java编写Web应用程序的框架。与编写HTML、CSS和JavaScript不同，用户界面是由Java中的UI组件构建的–类似于Swing和JavaFX。HTML代码、CSS样式表和JavaBean仍然存在，并且在需要时可以访问：它们被抽象在一个丰富的Java API后面。
Flow充当浏览器中HTML元素的远程控制。这些HTML元素可以是简单的div元素，也可以是更复杂的元素，如vaadin-grid Web组件。流控制属性、特性及其子项。它甚至可以执行自定义的JavaScript调用。
在服务器端，有开发人员与之交互的相应Java对象。Flow处理服务器端的Java对象和客户端的HTML元素。
flow是如何加载的
从浏览器加载的初始HTML代码只包含一些静态占位符元素沿着Flow的客户端呈现引擎脚本。此脚本获取初始视图的呈现指令。服务器以JSON格式发送指令。客户端呈现引擎解释这些指令，并在浏览器中构建或更新DOM树。
对事件做出反应
当你添加一个带有服务器端点击监听器的Vaadin Button到你的UI中时，Flow会在浏览器中创建一个带有DOM事件监听器的对应的vaadin-button元素。当用户单击该按钮时，Flow从事件中提取相关信息，并在HTTP POST请求中将其发送到服务器。框架的服务器端部分查找相应的Button对象，并调用已添加到其中的所有单击侦听器
更新UI
一旦点击监听器被调用，框架就会收集对服务器端组件所做的所有更改。从那里，它创建了一个新的JSON对象与渲染指令。此JSON对象作为对最初传递单击事件的HTTP POST请求的响应发送。客户端呈现引擎解释这些指令并更新浏览器中的DOM树。
路由导航
当用户单击浏览器中的链接时，Flow的客户端路由器会拦截单击事件，并阻止浏览器执行加载新页面的默认操作。相反，Flow将事件发送到服务器，由Flow的服务器端路由器处理。服务器端路由器查找对应于新视图的Java类，实例化它，并将它添加到服务器端组件树中，以代替先前的视图。由于服务器端组件树随后发生了更改，因此将带有渲染指令的新JSON对象发送回浏览器，客户端渲染引擎在浏览器中更新DOM树。
滚动和延迟加载
不仅点击从浏览器发送到服务器。Vaadin Grid组件支持延迟加载。当用户滚动网格时，会从服务器加载更多的数据。浏览器中有一个JavaScript回调函数，当网格数据用完时会调用它。这个回调向服务器端的Grid对象发送一条消息，该对象又调用其服务器端的数据提供程序来加载更多的项。
这个更新操作不能通过操作DOM树来完成。相反，客户端数据提供程序有一个函数，需要在新数据可用时调用。一旦服务器加载了这些项，它们就被转换为自定义的JavaScript函数调用。此函数调用将成为服务器发送回浏览器的JSON响应中的指令。然后，客户端呈现引擎解释该指令并调用JavaScript函数，让客户端数据提供程序知道有新的项可用。
vaadin flow运行逻辑
Vaadin Flow允许服务器端Java应用程序从Java组件构建用户界面。这些Java组件连接到浏览器中运行的Web组件。流管理用户交互返回到服务器端应用程序的中继，服务器端应用程序可以使用事件侦听器处理用户交互。
应用程序视图及其组件通常用于显示和接受应用程序数据的输入。这些数据通常存储在后端服务中，例如数据库。应用程序逻辑通常使用应用程序框架（如Spring）创建。
一图胜千言，vaadin flow技术架构图如下
vaadin flow的基本特性包括：
- 一个让你专注于UI的架构。不需要考虑客户端和服务器之间的通信。
- 一组高质量的UI组件，专注于最终用户和开发人员的体验。
- 强大的抽象层，可以使用Java或HTML模板构建自己的可重用UI组件。
- 数据绑定API，使用类型安全的Java将UI组件连接到任何后端。
- 路由器API，用于创建分层页面结构供用户导航。
案例:例如，您可以在Java中创建一个UI，如下所示：
// Create an HTML element
Div layout = new Div();
// Use TextField for standard text input
TextField textField = new TextField("Your name");
// Button click listeners can be defined as lambda expressions
Button button = new Button("Say hello",
e -> Notification.show("Hello!"));
// Add the web components to the HTML element
layout.add(textField, button);
使用Flow Java API时，组件控制浏览器中的JavaScript对应组件。您不需要了解任何关于HTML或JavaScript的知识。
在springboot中的效果如下
package com.example.application.views.helloworld;
import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Menu;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import org.vaadin.lineawesome.LineAwesomeIconUrl;
@PageTitle("Hello World")
@Route("hello-world")
@Menu(order = 1, icon = LineAwesomeIconUrl.GLOBE_SOLID)
public class HelloWorldView extends HorizontalLayout {
private TextField name;
private Button sayHello;
public HelloWorldView() {
name = new TextField("Your name");
sayHello = new Button("Say hello");
sayHello.addClickListener(e -> {
Notification.show("Hello " + name.getValue());
});
sayHello.addClickShortcut(Key.ENTER);
setMargin(true);
setVerticalComponentAlignment(Alignment.END, name, sayHello);
add(name, sayHello);
}
}
