Vaadin option for heavily loaded user interface

Question

I am currently programming a Vaadin based web application. I am quite pleased with the training cycle and how easy it is to customize the user interface.

In general, the advantages of Vaadin:

• "Individual" user interface programming for Java users (component hierarchy / event listeners / drag and drop / check / check).
• Exceptional collection of components (tree / table / list / ...).

Minuses:

• Large and complex HTML output. This slows down the response time of the browser (also mentioned here and there ) and leads to some display features from the browser to the browser.
• Difficulties in processing a large number of components (see Can CustomLayout process 5000 components? ).
• The need to recompile the widget set if you are using third-party components.

My question for the community:

That the web platform is best suited for the following requirements :

• Sharing a presentation with event / action handlers.
• Common components out of the box (with advanced features such as dragging and dropping a table column and lazy loading).
• Layout support (no headache with filling and alignment of components).
• Distributing events to handle events on the server and server side.
• The ability to generate HTML (if the framework is not based on HTML), as well as capture events for it (for example, mouse clicks).
• The ability to register key callbacks (e.g. Ctrl-S) is a plus.
• A short learning curve for the Java developer is a plus.

A reasonable combination of approaches is also suitable. Please provide a link to the Hello World application, implemented based on the structure you proposed. I review Apache Wicket / Echo2 / Tapestry / Press / GWT , but it's hard to make a choice without playing a couple of months (hopefully with no deep disappointment).

Answer 1

I completely agree with all your minuses and can not say very much. Since I'm brand new to GWT, I can share my little experience that I have gathered over the past 2 months.

• Sharing a presentation with event / action handlers.

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

• A short learning curve for the Java developer is a plus.

I am not naive, and I do not think that you can get a high-quality result only with the help of Java-knowledge without an understanding of WEB-technologies.

Most of the GWT user interfaces that I have reviewed and read represent more problems than solutions. They somehow cope with one or more of the benefits and limit you to other features that are included in new releases of GWT. I decided not to use vaadin because I felt that it would make me develop web maps in their path, which I agree is very easy to understand, but somehow limited. I like freedom, choosing the classic GWT without much control.

I also feel that the components of the GWT UI are limited and there are no quality alternatives. Something is wrong here. I think the google team should do something on this side.

Regards RemisB

Answer 2

You can use the Vaadin table to solve the original problem, more or less similar. The trick is to create a Vaadin container and put components like data in it. On the text side, wrap the label in a VerticalLayout, and then add a click listener. This makes it possible to display “paragraphs” of XHTML text, detect clicks on them with relative locations, and still process a large number of paragraphs.

You may need to modify your styles.css to allow text wrapping inside the table row, so you get torn 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 might look something like this:

ClickTable Screen Shot http://www.soletta.com/images/ClickyTable.PNG

Answer 3

If you ever find yourself putting hundreds of components on a web page in Vaadin, you should probably rethink your application structure. Why not implement a user widget for the part of the user interface that requires such a huge number of widgets? It is simply a GWT and therefore quite easy. Then you can get the best of both worlds - the simplicity of Vaadin with full HTML5 control on the client side.