Alternativa de Vaadin para UI con mucha carga

Question

Actualmente estoy programando la aplicación web basada en Vaadin. Estoy muy contento con el ciclo de aprendizaje y la forma en que se puede diseñar la IU fácil.

En ventajas generales de Vaadin son:

• "nativo" de programación de interfaz de usuario para los usuarios de Java (jerarquía de componentes/detectores de eventos/arrastre & gota/validación).
• Out-of-box buena colección de componentes (árbol/tabla/lista/...).

Las desventajas son:

• grande y complejo salida HTML. Eso ralentiza el tiempo de respuesta del navegador (también se menciona here y there) y conduce a algunas peculiaridades de representación del navegador al navegador.
• Dificultades para manejar un gran número de componentes (consulte Can CustomLayout handle 5000 components?).
• La necesidad de recompilar el conjunto de widgets si usa componentes de terceros.

Mi pregunta a la comunidad es:

qué marco Web encaja mejor con los siguientes requisitos:

• Separación de presentación con los manipuladores de evento/acción.
• Componentes comunes salidos de la caja (con funciones avanzadas como la columna de la tabla arrastre & soltar, cargar de forma diferida).
• Soporte de diseño (sin dolor de cabeza con relleno y alineación de componentes).
• Propagación de eventos al servidor y al procesamiento de eventos del lado del servidor.
• Posibilidad de generar su HTML (si el marco no está basado en HTML) y también capturar eventos para él (por ejemplo, clics del mouse).
• La posibilidad de registrar devoluciones de llamadas de Stoke clave (por ejemplo, Ctrl-S) es un plus.
• Curva de aprendizaje corta para el desarrollador de Java es una ventaja.

La combinación sensata de enfoques cabría también. Proporcione el enlace para la aplicación "Hello World", implementado en función del marco que sugiera. Estoy considerando Apache Wicket/Echo2/Tapestry/Click/GWT, pero es difícil hacer una elección sin jugar durante un par de meses (con suerte sin una profunda decepción).

Answer 1

Estoy completamente de acuerdo con todos sus contras mencionados y no puedo decir mucho en contra. Como soy bastante nuevo en GWT, solo puedo compartir mi pequeña experiencia que he recopilado durante los últimos 2 meses.

• Separación de presentación con los manipuladores de evento/acción.

creo UiBinder con @UiHandler anotación ("closeButton") @UiField en GWT 2.0 y posterior es exactamente para el código de formulario HTML separación y manipuladores. También el patrón de MVP con el bus de eventos es la respuesta perfecta del equipo de GWT.

• curva de aprendizaje corta para desarrolladores de Java es un plus.

no soy ingenuo y no creo que es posible obtener un resultado de calidad sólo con el conocimiento de Java sin comprender las tecnologías web.

La mayoría de los marcos de IU de GWT que he revisado y leído, presentan más problemas que soluciones. De alguna manera se las arreglan para obtener uno o pocos beneficios y lo limitan de otras funciones que vienen en las nuevas versiones de GWT. He elegido no usar vaadin porque me dio la sensación de que me obligaría a hacer el desarrollo de la aplicación de la web en su camino, lo que acepto es fácil de entender, pero de alguna manera limitado. Me gusta tener un poco de libertad eligiendo el GWT clásico sin controles sofisticados.

También creo que los componentes de la interfaz de usuario de GWT son limitados y no hay alternativas de calidad. Algo está mal aquí. Creo que el equipo de google tiene que hacer algo en esta parte.

Saludos RemisB

Answer 2

Usted puede utilizar una tabla Vaadin para resolver el problema original, más o menos así. El truco es crear un Vaadin Container y poner componentes en él, como datos. Del lado del texto, ajuste una etiqueta en VerticalLayout y luego agregue un oyente de clic. Esto proporciona la capacidad de mostrar "párrafos" de texto XHTML, detectar clics en ellos con ubicaciones relativas y aún así poder manejar una gran cantidad de párrafos.

Puede que necesite modificar su styles.css para permitir el ajuste del texto dentro de una fila de la tabla, por lo que obtendrá filas desordenadas.

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); 
    } 
} 

Con algunos cambios de estilo en su lugar, el resultado puede ser algo como esto:

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

Answer 3

Si alguna vez se encuentra poniendo cientos de componentes en la página web en la Vaadin, probablemente debería reconsiderar la estructura de tu aplicación ¿Por qué no implementar un widget personalizado para la parte de la interfaz de usuario que requiere una gran cantidad de widgets? Es solo GWT y por lo tanto bastante fácil. Entonces puede tener lo mejor de ambos mundos: la simplicidad de Vaadin con control total de HTML5 en el lado del cliente.