Vaadin替代重負載UI

Question

目前我正在編程基於Vaadin的Web應用程序。我對學習週期以及如何設計簡單UI的方式感到非常滿意。

在Vaadin的一般長處是：

• 「原生」 的用戶界面的Java用戶（組件層次/事件監聽器/拖&滴/驗證）的編程。
• 開箱即用的好組件（樹/表/列表/ ...）。

的短處是：

• 大而複雜的HTML輸出。這會減慢瀏覽器的響應時間（也提到了here和there），並導致瀏覽器和瀏覽器呈現一些渲染特性。
• 處理大量組件時遇到困難（請參閱Can CustomLayout handle 5000 components?）。
• 如果您使用第三方組件，則需要重新編譯小部件集。

我對社會問題是：

什麼Web框架最適合下列要求：與事件/動作處理程序演示的

• 分離。
• 開箱常用組件（具有高級功能，如表欄拖動&拖放，延遲加載）。
• 佈局支持（沒有填充和組件對齊的頭痛）。
• 事件傳播到服務器端和服務器端事件處理。
• 可以生成您的HTML（如果框架不是基於HTML的）並且捕獲它的事件（例如鼠標點擊）。
• 可以註冊關鍵stoke回調（例如Ctrl-S）。
• Java開發人員的學習曲線很短。

合理的方法組合也適合。請提供「Hello World」應用程序的鏈接，根據您建議的框架實施。我正在考慮Apache Wicket/Echo2/Tapestry/Click/GWT，但很難做出選擇而不打幾個月（希望沒有太大的失望）。

Answer 1

我完全同意你所提到的所有缺點，不能說非常反對。因爲我在GWT方面很新，所以我只能分享我過去兩個月收集的其他經驗。

• 分離與事件/動作處理程序的介紹。

我認爲UiBinder的與註釋@UiHandler（ 「closeButton」）@UiField在GWT 2.0和更高是完全分離的HTML表單代碼和處理程序。此外，事件總線MVP模式是GWT團隊的完美回答。

• 對Java開發人員來說，學習曲線很短。

我不懂事，我不認爲這是有可能獲得高質量的結果只用java知識不理解Web技術。

我已閱讀和閱讀的大多數GWT UI框架引入了比解決方案更多的問題。它們以某種方式管理着一個或幾個優點，並限制你從新版本的GWT中引入的其他功能。我選擇不使用vaadin，因爲我覺得它會迫使我以他們的方式進行webapp開發，我同意這很容易理解，但不知何故受到限制。我喜歡通過選擇沒有花哨控件的經典GWT來獲得一些自由。

另外我也覺得GWT UI組件是有限的，沒有質量的選擇。這裏不對勁。我認爲谷歌團隊必須在這方面做點什麼。

問候RemisB

Answer 2

可以使用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; 

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

有了一些風格的變化，結果會是這個樣子：

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

Answer 3

如果你發現自己把數百個組件的Vaadin網頁上，你或許應該重新考慮你的應用結構。爲什麼不實現一個自定義小部件的UI部分需要這麼多的小部件？這只是GWT，因此很容易。然後，您可以擁有兩全其美的優勢 - 在客戶端完全控制HTML5的Vaadin的簡單性。