logo标签列表

理解Vaadin Flow / Vaadin 10

vaadinvaadin10vaadin-flow
6

前言：我是一名高级Vaadin开发者（我使用过6、7，现在所有的项目都迁移到了Vaadin 8）。

我开始学习Vaadin 10 / Flow，但我发现自己遇到了一些困难。

我实际上正在努力理解的是“项目”本身。 我越深入，就越感觉这个框架正在向基于css/html的框架转变，这需要比java更多的css/html知识。 我的意思是，如果你不完全了解css和html的工作原理，你将无法轻松地使用这个框架。

问题在于我不知道我是否完全错过了重点，还是我正在陷入一个小问题中，或者这确实是一个完全不同的框架。 这就是我向您请教意见并进行一些对话的地方。

我发现一些非常好的东西，比如@Router和所有新的导航范例以及新的移动优先组件，但是例如我真的找不到一种快速构建漂亮外观布局的方法，而不需要使用css和html。

在Vaadin 8中容易完成的事情现在对我来说非常难以理解……比如模板：使用Vaadin 10 Designer工作真的非常奇怪。

我希望我只是错过了重点，希望有人可以帮助我澄清我的想法。

2个回答
15

我分享你对Vaadin Flow的关注。以下是我在学习Vaadin 6-14、研究文档、阅读论坛、观看Vaadin Ltd YouTube视频时收集到的印象。虽然我没有为下面的每个点引用技术证明，但这可能有助于你了解Vaadin Flow的目的和新现实。

Web浏览器已经成熟

Logo for the HTML5 project.

开发HTML5的岁月正在付出巨大的回报。 WHATWG领导者的主要目标之一是从程序员实际构建真实浏览器的角度重写规范。因此，现代浏览器具有比以往任何时候都更多的共同行为，且“怪癖”更少。现在的Web应用程序在主要浏览器中表现得更加可预测。
此外，请注意，网络浏览器制造商已经在使用引擎方面进行了整合。每个主要的浏览器都放弃了自己的引擎，而是使用了苹果的WebCore/WebKit或其分支Blink/Chromium。甚至微软也放弃了自己的浏览器引擎Trident/EdgeHTML，并转向Chromium用于他们的Microsoft Edge浏览器系列。因此，Safari、Edge、Chrome、Opera、Brave、Vivaldi等现在都使用相同的引擎，以实现更加接近的行为。只有Mozilla Firefox继续使用自己的网络浏览器引擎Gecko（除了Firefox for iOS，根据苹果政策使用WebKit）。因此，我们现在只剩下两个主要的浏览器引擎：WebKit/Chromium和Gecko。

这意味着对于之前的Vaadin版本6、7和7而言，弥补浏览器行为差异带来的重大负担已经大大减轻。Vaadin的内部设计现在可以更直接地与Web自身的HTML/CSS/DOM模型互动而无需创建自己的干预层。

CSS

Diagram of concentric circles showing the features of CSS 1, 2, and 3.

CSS最近几年有了巨大的改进，CSS3得到了充实和广泛采用。

几十年来，专家们说“不要使用HTML table进行布局”，但除了贫弱的float功能外，他们没有提供CSS页面布局。终于，CSS 3提供了真正的、功能丰富和强大的布局。更令人惊讶的是，浏览器似乎广泛支持这些特性，并提供非常兼容的实现。这些新的布局技术是Flex-box和Grid-layout。

顺便说一下，“CSS 4”将不再存在。包括CSS 3在内的各个功能区域现在都是自己的项目，具有自己的开发和版本控制。这在Jen Simmons在YouTube频道LayoutLand中的一个优秀视频中有很好的解释，尽管我现在找不到它了。

Flexbox

将项目排列在一维水平行或垂直列中。控制伸缩、间距、左中右对齐和相对对齐，包括基线。

请参阅这个优秀的可视化指南和教程。

听起来很熟悉吗？CSS flex-box提供了与Vaadin HorizontalLayout和VerticalLayout类相同类型的功能。事实上，在Vaadin Flow中，这些类已经重建以直接使用此CSS功能，而不是在Vaadin内部重新创建该行为。 Vaadin Flow已更改其术语以匹配CSS标准，例如setExpandRatio变为setFlexGrow。

查看哪些浏览器支持Flexbox的版本。

网格布局

将项目排列在行和列的二维网格中。功能类似于在HTML表格中将数据排列在单元格中。内容可以在单元格内上下或左右对齐。内容可以选择跨越多个单元格。您可以控制间隔间距和对齐方式。

请参阅同样由CSS-Tricks.com网站提供的优秀教程。

听起来很熟悉？CSS网格布局提供了与以前Vaadin版本中的GridLayout相同类型的功能。 GridLayout类不再为Vaadin Flow构建，但是您可以使用Vaadin Div对象和直接的CSS命令获得几乎相同的行为。

查看哪些浏览器支持CSS Grid的版本。

自定义AbsoluteLayout

相关说明，CSS现在提供即时像素定位布局。同样，这似乎在浏览器中以一致的方式得到很好的支持。因此，在Vaadin Flow中，他们决定放弃提供在x-y坐标系统中布置小部件的能力的AbsoluteLayout。

代替AbsoluteLayout，您可以通过扩展新的Div组件来创建自己的简单布局类。在该子类中，对于任何给定的小部件，您都可以提取表示呈现的网页中该小部件的HTML元素的Element对象。有了那个Element，您可以指定要遵守的左侧和顶部（x-y）坐标。

CSS现在可以动态更新，因此您可以在运行时动态更改位置或添加/删除小部件。

有关这种CSS布局子类的示例，请参见Vaadin 10 Flow中Vaadin 8 Framework的AbsoluteLayout替代品？。

Web组件

Logo for the WebComponents.org project

新兴的Web Components技术是一个改变游戏规则的存在，已经取代了GWT。它们允许将网页和Web应用程序组装为一组具有自己的HTML、CSS和DOM的小块。这种封装的作用域使得可以添加一个小块而不影响其余的小块。例如，在CSS类和标识符的命名中没有名称空间冲突。
这意味着Vaadin内部需要进行大量重写。因此我们必须耐心等待（或继续使用Vaadin 8），因为我们在以前的Vaadin中依赖的某些部分正在逐步添加到Flow中。请参阅手册中关于Vaadin 10中的组件的页面，以比较v8与v10/11/12组件。该页面已经更新至最新版本。例如，MenuBar从未计划中的变化现在预计会出现在Vaadin 14中。
不利的一面是，以前Vaadin的一些功能可能不会出现。但是请仔细阅读该页面并进行研究。Vaadin以前创建的某些部分现在直接表示为可靠的HTML或CSS特性。
结论
像你一样，我对Vaadin Flow持有复杂的看法。
Vaadin公司最近提出的“移动优先”让人担忧。这似乎与他们建立严肃企业应用、发票/采购订单/应计应付等企业级应用程序、我所谓的“无聊”软件（并从中谋生）的遗产有些不相关，而与每周一次创业网络应用程序及其严重设计和疯狂界面相对。目前某些对企业业务应用非常重要的部分，例如菜单栏，尚未找到好的解决方法。Web组件技术在行业内相对较新，在接下来的几年中可能会存在一些问题和困难。我以前享受的美好而安全的Vaadin专属气泡现在变得不再完整，应用程序开发可能需要涉及更多CSS或其他Web技术。
另一方面，看起来企业/业务功能可能会出现，无论是来自Vaadin内部还是作为包装成Vaadin对象的Web组件外部。Web组件技术及其各种polyfills并不新鲜，并且已经被许多人认真研究了几年，现在似乎可以使用。至于CSS或其他Web技术泄漏到Vaadin中，我不介意学习更多关于它们的知识，因为它们现在已经非常健壮和设计良好，这意味着更多的文档和稳定性可能随之而来，Vaadin不必在杂乱无章的浏览器中重新创建功能。

在适当的时候和为Vaadin程序员提供便利的情况下，CSS / HTML的一些渗透性可能会被关闭。例如，在Vaadin-12 Releases页面中，我注意到有一个新的Java API可用于选择Lumo或Material主题的任何具有变体的组件的可选内置组件样式，以及用于命名这些变体的方便Java常量定义。例如：primaryButton.addThemeVariants( ButtonVariant.LUMO_PRIMARY ) ;。这减轻了访问内部Element并操纵CSS的需要。

我相信从长远来看，Vaadin的未来是光明的。作为一个能够从（大多数）非Web编程自动生成Web应用程序客户端的服务器端有状态应用程序服务器，使其成为一个处于没有直接竞争的惊人工具的位置（除了使用类似架构的Xojo Web Edition）。

资源

2
很抱歉我只能给你一个赞。这正是我在等待的答案类型。我会深入研究你提供的所有链接和示例，然后再反馈。谢谢！ :) - Leviand
4
嗨，Alejandro， 我已经观看并学习了你的视频，但是视频展示的只是一些“基础”内容，事实上，我已经完全自己复制了你的演示，没有任何问题。但是如果我尝试使用设计师构建一些高级内容呢？ 使用vaadin 8，我无法做任何事情，使用10我也无法使用设计师，因为所有内容都需要css / html知识...你同意还是我错了？ - Leviand
1
嗨。是的，视频中的用户界面非常简单，但您可以使用相同的方法（编写Java代码）来推导出更复杂的用户界面。我认为您不需要太多关于HTML和CSS的知识就可以使用Designer。您可以在不了解HTML的情况下使用拖放功能，并完成相当高级的用户界面。我仍然很好奇您认为Vaadin“需要比Java更多的css/html知识”的原因。您从哪个示例/代码/视频/文档/入门网页中得到这种印象？ - Alejandro Duarte
我一开始尝试使用“项目基础”深入了解V10，那很清楚。然后我尝试了“简单UI应用程序”，那就是我的困惑之处。例如，reviewList类充满了不太清晰（在我看来）的机制，并且完全基于CSS布局。从那里开始，我认为这是使用设计师构建表单的唯一方法。而且我还发现我不能再像以前那样对组件设置样式，例如：btnAccept.setStyleName(Theme.button_friendly)。 - Leviand
1
Lumo主题仍然有各种网络组件，例如按钮。您可以使用类似button.getElement().setAttribute("theme", "contrast primary");的Java设置主题。对于此类常量的创建已进行了一些讨论，例如Lumo.CONTRAST，但我不确定其当前状态。 - Erik Lumme
@Tazavoo，这在Vaadin 12+中可用。例如：button.addThemeVariants(ButtonVariant.LUMO_PRIMARY, ButtonVariant.LUMO_CONTRAST);。 - Alejandro Duarte
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接