Vaadin alternative for heavily loaded UI

问题:

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).

回答1:

I completely agree with all your mentioned minuses and can not say very much against. Because I'm quite new in GWT I can only share my little experience I have collected other last 2 months.

• Separation of presentation with event/action handlers.

I think UiBinder with annotation @UiHandler("closeButton") @UiField in GWT 2.0 and later is exactly for separation HTML form code and handlers. Also MVP pattern with event bus is perfect answer from GWT team.

• Short learning curve for Java developer is a plus.

I'm not naive and I don't think that it's possible to get quality result only with java knowledge without understanding WEB technologies.

Most of GWT UI frameworks I have reviewed and read about, introduces more problems than solutions. They somehow manages to and one or few benefits and restrict you from other features which comes in the new releases of GWT. I have chosen not to use vaadin because I felt like It will force me to do webapp development in their way, which I agree is fast easy to understand, but somehow limited. I like to have some freedom by choosing classic GWT without fancy controls.

Also I also feel that GWT UI Components are limited and there is no quality alternatives. Something is wrong here. I think google team have to do something on this part.

Regards RemisB

回答2:

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

回答3:

If you ever find yourself putting hundreds of components on web page in Vaadin, you probably should reconsider your application structure. Why not implement a custom widget for the part of the UI that requires such huge number of widgets? It is just GWT and thus fairly easy. Then you can have the best of the both worlds - simplicity of Vaadin with full control of HTML5 on the client side.