Alternativa di Vaadin per UI con carico elevato

Question

Attualmente sto programmando l'applicazione Web basata su Vaadin. Sono abbastanza soddisfatto del ciclo di apprendimento e del modo in cui è facile progettare l'interfaccia utente.

In vantaggi generali del Vaadin sono:

• "Native" Programmazione interfaccia utente per gli utenti di Java (gerarchia dei componenti/ascoltatori di eventi/resistenza & goccia/validazione).
• Bella raccolta di componenti pronti per l'uso (albero/tabella/elenco/...).

I punti negativi sono:

• grande e complesso output HTML. Ciò rallenta il tempo di risposta del browser (anche menzionato here e there) e porta ad alcune peculiarità di rendering da browser a browser.
• Difficoltà nella gestione di un numero elevato di componenti (vedere Can CustomLayout handle 5000 components?).
• La necessità di ricompilare il set di widget se si utilizzano componenti di terze parti.

La mia domanda alla comunità è:

Cosa Web Framework si adatta meglio i seguenti requisiti:

• Separazione di presentazione con i gestori di evento/azione.
• Componenti comuni fuori dalla scatola (con funzionalità avanzate come trascinamento colonna &, caricamento lazy).
• Supporto layout (nessun mal di testa con padding e allineamento dei componenti).
• Propagazione di eventi sull'elaborazione di eventi server e lato server.
• Possibilità di generare il codice HTML (se il framework non è basato su HTML) e anche di acquisire eventi per esso (ad esempio clic del mouse).
• La possibilità di registrare i callback di stoke della chiave (ad esempio Ctrl-S) è un vantaggio.
• La breve curva di apprendimento per gli sviluppatori Java è un vantaggio.

Anche il ragionevole insieme di approcci si adatterebbe. Per favore, fornisci il link per l'applicazione "Hello World", implementata sulla base del framework che suggerisci. Sto considerando Apache Wicket/Echo2/Tapestry/Click/GWT, ma è difficile fare una scelta senza giocare per un paio di mesi (speriamo senza profonde delusioni).

Answer 1

Sono completamente d'accordo con tutti i tuoi aspetti negativi e non posso dire molto contro. Perché sono abbastanza nuovo in GWT, posso solo condividere la mia piccola esperienza che ho raccolto negli ultimi 2 mesi.

• Separazione di presentazione con gestori di eventi/azioni.

penso UiBinder con annotazione @UiHandler ("closeButton") @UiField in GWT 2.0 e versioni successive è esattamente il codice sotto forma di separazione HTML e gestori. Anche il pattern MVP con bus eventi è la risposta perfetta dal team GWT.

• La breve curva di apprendimento per gli sviluppatori Java è un vantaggio.

Io non sono ingenuo e non credo che sia possibile ottenere risultati di qualità solo con la conoscenza di Java senza capire tecnologie web.

La maggior parte dei framework dell'interfaccia utente GWT che ho esaminato e letto, introduce più problemi che soluzioni. In qualche modo riescono a ottenere uno o alcuni benefici e ti restringono dalle altre funzionalità disponibili nelle nuove versioni di GWT. Ho scelto di non usare vaadin perché pensavo che mi costringerebbe a fare lo sviluppo webapp a modo loro, che sono d'accordo è facile da capire, ma in qualche modo limitato. Mi piace avere un po 'di libertà scegliendo il GWT classico senza controlli fantasiosi.

Inoltre, ritengo anche che i componenti dell'interfaccia utente GWT siano limitati e non ci siano alternative di qualità. Qualcosa non va, qui. Penso che il team di Google debba fare qualcosa su questa parte.

saluti RemisB

Answer 2

È possibile utilizzare una tabella Vaadin per risolvere il problema originale, più o meno così. Il trucco è creare un contenitore Vaadin e inserire i componenti in esso, come dati. Sul lato del testo, avvolgere un'etichetta in VerticalLayout, quindi aggiungere un listener di clic. Ciò consente di visualizzare "paragrafi" di testo XHTML, rilevare i clic su di essi con posizioni relative ed essere ancora in grado di gestire un numero elevato di paragrafi.

Potrebbe essere necessario modificare il file styles.css per consentire il wrapping del testo all'interno di una riga della tabella, in modo da ottenere righe irregolari.

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 alcune modifiche di stile in atto, il risultato può essere simile a questa:

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

Answer 3

Se vi trovate mai mettere centinaia di componenti a pagina web in Vaadin, probabilmente dovrebbe riconsiderare la tua struttura applicativa. Perché non implementare un widget personalizzato per la parte dell'interfaccia utente che richiede un numero così grande di widget? È solo GWT e quindi abbastanza facile. Quindi puoi avere il meglio dei due mondi: la semplicità di Vaadin con il pieno controllo di HTML5 sul lato client.