Vaadin替代重负载UI

Question

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

在Vaadin的一般长处是：

• “原生” 的用户界面的Java用户（组件层次/事件监听器/拖&滴/验证）的编程。
• 开箱即用的好组件（树/表/列表/ ...）。

的短处是：

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

我对社会问题是：

什么Web框架最适合下列要求：与事件/动作处理程序演示的

• 分离。
• 开箱常用组件（具有高级功能，如表栏拖动&拖放，延迟加载）。
• 布局支持（没有填充和组件对齐的头痛）。
• 事件传播到服务器端和服务器端事件处理。
• 可以生成您的HTML（如果框架不是基于HTML的）并且捕获它的事件（例如鼠标点击）。
• 可以注册关键stoke回调（例如Ctrl-S）。
• Java开发人员的学习曲线很短。

合理的方法组合也适合。请提供“Hello World”应用程序的链接，根据您建议的框架实施。我正在考虑Apache Wicket/Echo2/Tapestry/Click/GWT，但很难做出选择而不打几个月（希望没有太大的失望）。

Answer 1

我完全同意你所提到的所有缺点，不能说非常反对。因为我在GWT方面很新，所以我只能分享我过去两个月收集的其他经验。

• 分离与事件/动作处理程序的介绍。

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

• 对Java开发人员来说，学习曲线很短。

我不懂事，我不认为这是有可能获得高质量的结果只用java知识不理解Web技术。

我已阅读和阅读的大多数GWT UI框架引入了比解决方案更多的问题。它们以某种方式管理着一个或几个优点，并限制你从新版本的GWT中引入的其他功能。我选择不使用vaadin，因为我觉得它会迫使我以他们的方式进行webapp开发，我同意这很容易理解，但不知何故受到限制。我喜欢通过选择没有花哨控件的经典GWT来获得一些自由。

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

问候RemisB

Answer 2

可以使用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

Answer 3

如果你发现自己把数百个组件的Vaadin网页上，你或许应该重新考虑你的应用结构。为什么不实现一个自定义小部件的UI部分需要这么多的小部件？这只是GWT，因此很容易。然后，您可以拥有两全其美的优势 - 在客户端完全控制HTML5的Vaadin的简单性。