Vaadin替代重载UI

时间：2012-01-04 20:23:06

标签： gwt wicket vaadin web-frameworks echo2

目前，我正在基于Vaadin对Web应用程序进行编程。我对学习周期以及如何轻松设计UI感到非常满意。

一般来说，Vaadin的优点是：

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

缺点是：

  • 大而复杂的HTML输出。这会减慢浏览器的响应时间（也提到here和there），并导致浏览器与浏览器之间的某些渲染特性。
  • 处理大量组件的困难（见Can CustomLayout handle 5000 components?）。
  • 如果您使用第三方组件，则需要重新编译窗口小部件集。

我对社区的问题是：

哪种Web框架最符合以下要求：

  • 使用事件/操作处理程序分隔演示文稿。
  • 开箱即用的常用组件（具有高级功能，如表格列拖放，延迟加载）。
  • 布局支持（无需填充和对齐组件）。
  • 事件传播到服务器和服务器端事件处理。
  • 生成HTML的可能性（如果框架不是基于HTML的），也可以为其捕获事件（例如鼠标点击）。
  • 注册密钥加注回调（例如Ctrl-S）的可能性是一个优势。
  • Java开发人员的简短学习曲线是一个优势。

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

5 个答案:

答案 0 :(得分：3)

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

  
      
  • 使用事件/操作处理程序分隔演示文稿。
    •   

我认为带有注释@UiHandler（“closeButton”）的UiBinder在GWT 2.0及更高版本中的@UiField完全适用于分离HTML表单代码和处理程序。此外，MVP模式与事件总线是GWT团队的完美答案。

  
      
  • Java开发人员的简短学习曲线是一个优势。
    •   

我并不天真，我不认为只有掌握java知识而不了解WEB技术才能获得高质量的结果。

我回顾和阅读的大多数GWT UI框架都引入了比解决方案更多的问题。他们以某种方式设法和一个或几个好处，并限制你从GWT的新版本中的其他功能。我选择不使用vaadin，因为我觉得它会迫使我以他们的方式进行webapp开发，我同意这很容易理解，但不知何故有限。我希望通过选择经典的GWT而不需要花哨的控制来获得一些自由。

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

关心RemisB

答案 1 :(得分：3)

您可以使用Vaadin表来解决原始问题，或多或少是这样的。诀窍是创建一个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 Screen Shot http://www.soletta.com/images/ClickyTable.PNG

答案 2 :(得分：1)

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

答案 3 :(得分：0)

Web Firm Framework是最好的选择。它是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;
}));

In this git repo，您可以找到它的示例项目。

我们也可以尝试此tool to convert HTML5 to Java/Kotlin code。 This video和developers guide将有助于更好地理解它。

答案 4 :(得分：0)

Vaadin流

logo for Vaadin

您必须一直使用上一代的 Vaadin 版本6、7和8。

由于早期浏览器的局限性和不兼容性，CSS 3的生产以及HTML5之前的长时间延迟，Vaadin确实生成了庞大而复杂的页面。鉴于当时JavaScript运行时的性能相对较差，某些精致的Web应用程序的性能可能不如您期望的那样。

Web组件与 GWT

logo of Web Components

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

CSS 3

CSS 3终于到了，并且成熟了。除了先前的Flexbox之外，浏览器现在还提供内置Grid和Float的内置复杂页面布局。因此，不再必须将页面布局与table的滥用和div & span标签汤的疯狂分类一起乱砍。现在可以使用简短，简单且干净的代码构建页面布局。

现代浏览器

其他现代进步包括：

  • HTML5专为构建Web应用程序（而不是Web文档）而设计
  • 浏览器引擎中的整合（基本上仅剩2个：WebKit / Chromium和Quantum/Gecko）
  • JavaScript运行时性能的显着提高，以及JavaScript 6的重要新功能
  • 浏览器制造商之间在编写和实施具有更一致行为的Web标准方面紧密合作
  • 现代浏览器的“常绿”快速发布模型

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

badges for HTML5, CSS3, and JavaScript6

Give it a try。

有关更多讨论，请参见问题my Answer的Understanding Vaadin Flow / Vaadin 10。

缺点是：

复杂的HTML输出。这会减慢浏览器的响应时间（在这里和那里也提到），并导致浏览器之间呈现某些特殊性。

如上所述，由于现代Web技术的进步如此之大，因此不再庞大和复杂。

处理大量组件时遇到困难（请参阅CustomLayout可以处理5000个组件吗？）。

Web Components是一个开放标准，由four specifications组成。

在过去的几年中已经构建了许多组件，现在可以在Vaadin Flow Web应用程序中使用它们。

  • 您在Vaadin 6/7/8中知道的大多数UI窗口小部件都已重建为Web组件（请参见Comparison Matrix）。这意味着这些Vaadin组件可以在其他Web项目中使用，而无需Vaadin Flow服务器端Java绑定。
  • 您可以轻松包装在Web组件上构建的其他非Vaadin特定组件，以供在服务器端Vaadin Flow框架上运行的Java代码中使用。参见Integrating a Web Component。要开始使用，请here are a couple thousand进行选择。
  • 您可以create your own components。

如果使用第三方组件，则需要重新编译窗口小部件集。

Vaadin Flow中的

没有更多的 WidgetSet ，因为没有更多的GWT窗口小部件。如上所述由Web组件代替。

哪种Web框架最符合以下要求：

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

此外，您现在可以从服务器端在浏览器上调用JavaScript代码段。今年春天，Vaadin 15带来了client-side coding in TypeScript，同时仍与在Vaadin Flow中运行在服务器端的Java代码集成。

相关问题
最新问题