Vaadin替代重负载的用户界面

问题描述

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

Vaadin的一般优点是：

• Java用户的NativeUI编程（组件层次结构/事件监听器/拖放和验证）。
  

这些缺点是：

$ b组件（树/表/列表/ ...）
$ b

• 大而复杂的HTML输出。这会降低浏览器响应时间（还提到了和），并导致浏览器到浏览器的一些渲染特性。 在处理大量组件时遇到困难（请参阅）。


• 需要重新编译widget set if您使用第三方组件。

我对社区的问题是：

最适合以下要求的Web框架：

• 使用事件/动作处理程序分离演示文稿


• 常用组件（包含高级功能，如表格列拖动和放置，延迟加载）。
  
• 布局支持（无需填充和对齐组件）。


• 事件传播到服务器和服务器端事件处理。


• 生成HTML的可能性（如果框架不是基于HTML的）并且捕获它的事件。鼠标点击）。


• 注册关键stoke回调（例如Ctrl-S）的可能性是一个加分。


• Java开发人员的短学习曲线是。
  

方法的合理组合也适用。请提供Hello World应用程序的链接，根据您建议的框架实施。我正在考虑 / / / / ，但是如果不打几个月就很难做出选择（希望与没有深深的失望）。

解决方案

您可以使用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; 
 $ b $ 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  final int index = i; 
 Object item = container.addItem（）; 
 Label lbl =新标签（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（在客户端点击文本％，d（％ ，d，％，d），relative（％，d％，d）\\\
，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）; 
 
 
 
 
 $ b $ p 
 $ b 
随着一些风格的变化，结果可以看起来像像这样：
 
 
 
  
 
Currently I am programming the Web Application based on Vaadin. I am quite happy with the learning cycle and the way how easy UI can be designed.

In general pluses of Vaadin are:


"Native" UI programming for Java users (component hierarchy / event listeners / drag & drop / validation).
Out-of-box nice collection of components (tree / table / list / ...).


The minuses are:


Big and complex HTML output. That slows down the browser response time (also mentioned here and there) and leads to some rendering peculiarities from browser to browser.
Difficulties in handling big number of components (see Can CustomLayout handle 5000 components?).
The need to recompile the widget set if you use 3rd party components.


My question to community is:

What Web Framework fits best the following requirements:


Separation of presentation with event/action handlers.
Common components out of box (with advanced features like table column drag&drop, lazy loading).
Layout support (no headache with padding and alignment of components).
Event propagation to server and server-side event processing.
Possibility to generate your HTML (if framework is not HTML-based) and also capture events for it (e.g. mouse clicks).
Possibility to register key stoke callbacks (e.g. Ctrl-S) is a plus.
Short learning curve for Java developer is a plus.


The sensible mix of approaches would fit as well. Please, provide the link for "Hello World" application, implemented based on the framework that you suggest. I am considering Apache Wicket / Echo2 / Tapestry / Click / GWT, but it's difficult to make a choice without playing for couple of months (hopefully with no deep disappointment).
 解决方案 
You can use a Vaadin Table to solve the original problem, more or less like this. The trick is to create a Vaadin Container and put components in it, as data. On the text side, wrap a label in VerticalLayout then add a click listener. This yields the ability to display "paragraphs" of XHTML text, detect clicks on them with relative locations, and still be able to handle large numbers of paragraphs.

You might need to modify your styles.css to allow wrapping of text within a table row, so you'll get ragged rows.
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);
    }
}
With some style changes in place, the result can look something like this:
ClickTable Screen Shot http://www.soletta.com/images/ClickyTable.PNG
                        
这篇关于Vaadin替代重负载的用户界面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！