7

目前我正在编写基于Vaadin的 Web 应用程序。我对学习周期和 UI 设计的简单方式感到非常满意。

一般来说，Vaadin 的优点是：

  • 面向 Java 用户的“本机”UI 编程（组件层次结构/事件侦听器/拖放/验证）。
  • 开箱即用的组件集合（树/表/列表/...）。

缺点是：

  • 大而复杂的 HTML 输出。这会减慢浏览器的响应时间（这里和那里也提到过），并导致浏览器之间出现一些渲染特性。
  • 处理大量组件的困难（请参阅能否 CustomLayout 处理 5000 个组件？）。
  • 如果您使用 3rd 方组件，则需要重新编译小部件集。

我对社区的问题是：

什么 Web 框架最适合以下要求：

  • 演示与事件/动作处理程序的分离。
  • 开箱即用的常用组件（具有表格列拖放、延迟加载等高级功能）。
  • 布局支持（不用担心组件的填充和对齐）。
  • 事件传播到服务器和服务器端事件处理。
  • 生成 HTML 的可能性（如果框架不是基于 HTML 的）并为它捕获事件（例如鼠标点击）。
  • 注册按键回调（例如 Ctrl-S）的可能性是一个加号。
  • Java 开发人员的学习曲线短是一个加分项。

方法的合理组合也很合适。请提供基于您建议的框架实现的“Hello World”应用程序的链接。我正在考虑使用Apache Wicket / Echo2 / Tapestry / Click / GWT，但如果不玩几个月就很难做出选择（希望不会让你失望）。

4

5 回答 5

3

您可以使用 Vaadin Table 来解决原始问题，或多或少像这样。诀窍是创建一个 Vaadin 容器并将组件作为数据放入其中。在文本方面，在 VerticalLayout 中包装一个标签，然后添加一个点击侦听器。这产生了显示 XHTML 文本的“段落”、使用相对位置检测对它们的点击以及仍然能够处理大量段落的能力。

您可能需要修改您的styles.css 以允许在表格行内换行，因此您会得到参差不齐的行。

package com.soletta.clickytable;

import com.vaadin.Application;
import com.vaadin.data.util.IndexedContainer;
import com.vaadin.event.LayoutEvents.LayoutClickEvent;
import com.vaadin.event.LayoutEvents.LayoutClickListener;
import com.vaadin.terminal.Sizeable;
import com.vaadin.terminal.gwt.server.WebApplicationContext;
import com.vaadin.ui.Button;
import com.vaadin.ui.Label;
import com.vaadin.ui.Table;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
import com.vaadin.ui.Window.CloseEvent;
import com.vaadin.ui.Window.CloseListener;

public class ClickytableApplication extends Application {
    @Override
    public void init() {
        Window mainWindow = new Window("Clickytable 2 Application");
        setMainWindow(mainWindow);
        mainWindow.addListener(new CloseListener(){
            public void windowClose(CloseEvent e) {
                WebApplicationContext context = (WebApplicationContext) getContext();
                context.getHttpSession().invalidate();
                close();
            }});

        IndexedContainer container = new IndexedContainer();
        container.addContainerProperty("text", VerticalLayout.class, new VerticalLayout());
        container.addContainerProperty("edit", Button.class, new Button("Edit"));

        for (int i = 0; i < 10; i++) {
            final int index = i;
            Object item = container.addItem();
            Label lbl = new Label("Text Content " + i);
            VerticalLayout vl = new VerticalLayout();
            vl.setWidth(100, Sizeable.UNITS_PERCENTAGE);
            vl.addComponent(lbl);
            vl.addListener(new LayoutClickListener() {
                public void layoutClick(LayoutClickEvent event) {
                    System.out.println(String.format("Clicked on text %,d at client(%,d,%,d), relative(%,d %,d)\n", index, event.getClientX(), event.getClientY(), event.getRelativeX(), event.getRelativeY()));
                }
            });

            container.getItem(item).getItemProperty("text").setValue(vl);
            container.getItem(item).getItemProperty("edit").setValue(new Button("Button " + i));
        }

        Table table = new Table("ClickyTable 2", container);
        table.setColumnExpandRatio("text", 1);
                table.setColumnExpandRatio("edit", 0);
        table.setSizeFull();

        VerticalLayout fl = new VerticalLayout();
        fl.setSizeFull();
        fl.addComponent(table);

        mainWindow.setContent(fl);
    }
}

进行一些样式更改后，结果可能如下所示：

ClickTable 屏幕截图 http://www.soletta.com/images/ClickyTable.PNG

于 2012-01-06T14:58:06.347 回答
3

我完全同意你提到的所有缺点，不能说太多反对。因为我是 GWT 的新手，所以我只能分享我在过去 2 个月收集的一些小经验。

  • 演示与事件/动作处理程序的分离。

我认为在 GWT 2.0 及更高版本中带有注释 @UiHandler("closeButton") @UiField 的 UiBinder 正是用于分离 HTML 表单代码和处理程序。带有事件总线的 MVP 模式也是 GWT 团队的完美答案。

  • Java 开发人员的学习曲线短是一个加分项。

我并不天真，我认为在不了解 WEB 技术的情况下，仅使用 java 知识就不可能获得高质量的结果。

我回顾和阅读过的大多数 GWT UI 框架引入的问题多于解决方案。它们以某种方式设法获得一个或几个好处，并限制您使用 GWT 新版本中的其他功能。我选择不使用 vaadin，因为我觉得它会迫使我以他们的方式进行 webapp 开发，我同意这很容易理解，但在某种程度上是有限的。我喜欢通过选择没有花哨控件的经典 GWT 来获得一些自由。

另外我也觉得 GWT UI 组件是有限的，没有质量的替代品。这里不对劲。我认为谷歌团队必须在这方面做点什么。

问候 RemisB

于 2012-01-05T18:13:49.723 回答
1

如果您发现自己在 Vaadin 的网页上放置了数百个组件，您可能应该重新考虑您的应用程序结构。为什么不为需要大量小部件的 UI 部分实现自定义小部件？它只是 GWT，因此相当容易。然后，您可以两全其美 - Vaadin 的简单性和客户端对 HTML5 的完全控制。

于 2012-01-06T23:26:40.880 回答
1

瓦丁流

Vaadin 的标志

您一定一直在使用上一代Vaadin版本 6、7 和 8。

由于早期浏览器的限制和不兼容，产生CSS 3和早于HTML5的长时间延迟，Vaadin 确实生成了大而复杂的页面。鉴于当时 JavaScript 运行时的性能相对较差，一些复杂的 Web 应用程序的性能可能不如你所愿。

Web 组件与GWT

Web 组件的标志

自从您的问题发布以来，现在快进了几年。Vaadin Flow已经到来。版本 10 及更高版本基于GWT更长。相反，他们使用已经出现的开放标准，统称为Web 组件。

CSS 3

CSS 3终于到来并成熟了。除了之前的Float之外，浏览器现在还提供了带有Flexbox和Grid的内置复杂页面布局。因此，不再需要页面布局与滥用和疯狂分类&标签汤一起被破解。现在可以使用简短、简单和干净的代码来构建页面布局。tabledivspan

现代浏览器

其他现代进步包括：

  • HTML5 专为构建 Web 应用程序而设计（与 Web 文档相反）
  • 浏览器引擎的整合（基本上只剩下两个：WebKit / Chromium & Quantum/Gecko）
  • JavaScript 运行时性能的显着进步，以及 JavaScript 6 的重要新特性
  • 浏览器制造商之间的密切合作，以更一致的行为编写和实施 Web 标准
  • 现代浏览器的“常青”快速发布模式

所有这些加在一起意味着 Vaadin 提供高质量、一致的 Web 应用程序体验的负担已大大减轻。您应该会看到更短、更简单、更快的页面代码。

HTML5、CSS3 和 JavaScript6 的徽章

试一试。

有关更多讨论，请参阅我对问题的回答，了解 Vaadin 流程/Vaadin 10。

缺点是：

大而复杂的 HTML 输出。这会减慢浏览器的响应时间（也在这里和那里提到）并导致浏览器之间的一些渲染特性。

不再像上面所讨论的那样庞大而复杂，因为现代网络技术进步了很多。

处理大量组件的困难（请参阅能否 CustomLayout 处理 5000 个组件？）。

Web Components 是一个开放标准，由四个规范组成。

在过去几年中构建了许多组件，现在可供您在 Vaadin Flow 网络应用程序中使用。

  • 您在 Vaadin 6/7/8 中了解的大多数 UI 小部件都已重新构建为 Web 组件（请参阅比较矩阵）。这意味着这些 Vaadin 组件可以在没有 Vaadin Flow 服务器端 Java 绑定的情况下用于其他 Web 项目。
  • 您可以轻松地包装基于 Web 组件构建的其他非 Vaadin 特定组件，以供您在服务器端 Vaadin Flow 框架上运行的 Java 代码中使用。请参阅集成 Web 组件。为了让你开始，这里有几千个可供选择。
  • 您可以创建自己的组件。

如果您使用 3rd 方组件，则需要重新编译小部件集。

Vaadin Flow 中不再有WidgetSet，因为不再有 GWT 小部件。由上面讨论的 Web 组件取代。

什么 Web 框架最适合以下要求：

Vaadin Flow 勾选了您在问题中列出的所有框：事件处理程序、具有高级功能的通用组件、复杂的页面布局、从客户端传播到服务器的用户事件（以及通过内置推送技术的另一个方向）、键盘快捷键和Java 程序员的简短学习曲线。

此外，您现在可以从服务器端调用浏览器上的 JavaScript 片段。今年春天的 Vaadin 15在 TypeScript 中引入了客户端编码，同时仍与在 Vaadin Flow 中运行服务器端的 Java 代码集成。

于 2020-01-30T22:01:16.170 回答
0

网络公司框架是最好的选择。它是 Apache License 2.0 下的开源 Java 框架。我还必须在我的应用程序中加载繁重的组件，这个框架很顺利。

它就像所有 HTML5 标记和属性的 java 类的集合。使用这些类，我们可以像使用纯 HTML 一样构建 UI。它可以处理繁重的 HTML，因为从服务器到客户端的数据就像通过 websocket 的流，例如：-

//creates table
Table tableObj = new Table(null,
        new Style("width:100%")).give(table -> {
    new TBody(table);
});

//finding tbody object in the table
TBody tBody = TagRepository.findOneTagAssignableToTag(TBody.class, tableObj);

for (int i = 0; i < 10; i++) {
    int count = i;
    Tr trObj = new Tr(null).give(tr -> {
        new Th(tr).give(th -> {
            new NoTag(th, "Firstname " + count);
        });

        new Th(tr).give(th1 -> {
            new NoTag(th1, "Lastname " + count);
        });

        new Th(tr).give(th2 -> {
            new NoTag(th2, "Age " + count);
        });
    });

//appending tr in the table
    tBody.appendChild(trObj);
}

每当trObj附加它时，它将立即在 UI 中可用，它不会等待完成 for 循环。检查他们的演示应用程序，其中包含一个流式传输 1000 行的按钮。

我们可以毫不费力地处理事件，例如：

处理按钮的点击事件

//This will create a button in the UI.
new Button(null, new Type(Type.BUTTON), new OnClick((data, ev) -> {
    System.out.println("Button clicked");
 return null;
}));

在这个 git repo中，你可以找到它的示例项目。

我们也可以试试这个工具将 HTML5 转换为 Java/Kotlin 代码。该视频和开发人员指南将有助于更好地理解它。

于 2020-01-30T20:32:38.847 回答