GWT響應式設計解決方案

Question

我正在使用GWT來製作web應用程序，但現在我需要在響應式設計中製作我的web應用程序，但GWT不支持響應式設計請幫助我。

Answer 1

GWT支持響應式設計，就像任何其他部件工具箱（OK，這是不完全正確，有可能是部件工具箱是做得更好）：用做你的佈局HTMLPanel，FlowPanel，SimplePanel和響應CSS，還是走有效佈局路由佈局面板並在代碼（或自定義佈局面板）中進行計算。

Answer 2

除了托馬斯說的，你可以看看gwt-bootstrap。他們有一個自定義的DataGrid小部件，可以基於斷點（平板電腦，電話等）顯示或隱藏。
如果你真的想隱藏你延長DataGrid並做一些基於可用的大小顯示列沿着這條線：

ResponsiveDataGrid extends DataGrid<myDTO> { 

     private final Column<myDTO,String> column1; 
     private final Column<myDTO,String> column2; 
     private Boolean isCompact; 


     public ResponsiveDataGrid(int pageSize, Resources resources,ActionCell.Delegate<myDTO> actionDelegate) { 
      super(pageSize, resources,new EntityProxyKeyProvider<myDTO>()); 
      initColumns(); 
     } 


     private void initColumns() { 
      // init your columns 
     } 

     private void updateColumns() { 
      int columnCount = getColumnCount(); 
      for (int i =columnCount-1;i>=0;i--) { 
       removeColumn(i); 
      } 
      removeUnusedColGroups(); 
      if (isCompact) { 
       // show columns for compact size 

      } 
      else { 
       // show all columns 
      } 
     } 

     @Override 
     protected int getRealColumnCount() { 
      return getColumnCount(); 
     } 

     // WORKAROUND for some sizing issues in DataGrid 
     private void removeUnusedColGroups() { 
      int columnCount = getColumnCount(); 
      NodeList<Element> colGroups = getElement().getElementsByTagName("colgroup"); 

      for (int i = 0; i < colGroups.getLength(); i++) { 
       Element colGroupEle = colGroups.getItem(i); 
       NodeList<Element> colList = colGroupEle.getElementsByTagName("col"); 

       for (int j = colList.getLength()-1;j>=0; j--) { 
        colGroupEle.removeChild(colList.getItem(j)); 
       } 
      } 
     } 


     @Override 
     public void onResize() { 
      super.onResize(); 
      if (!isAttached()) { 
       return; 
      } 
      // or whatever breakpoint you want to support 
      boolean isNewCompact = (getOffsetWidth() < 800); 
      if (isCompact == null || isNewCompact != isCompact) { 
       isCompact = isNewCompact; 
       updateColumns(); 
      } 
     } 
    } 

Answer 3

您可以使用CSS媒體查詢佈局響應。

例如，使對話框中佔據90％的可用水平空間上有屏幕尺寸高達640像素的設備，一個可以包裝風格@media塊內是這樣的：

@media all and (max-width: 640px) { 
    .gwt-DialogBox { 
    width: 90%; 
    } 
} 

不幸的是（截至今日）GWT編譯器不支持媒體CSS，因此如果將其與CssResource一起使用，上述代碼將失敗。

解決此問題的一種方法是將您的CSS資源分成兩個文件。 所有默認（桌面）CSS樣式將轉到第一個文件（例如main.css），並且您的所有移動覆蓋都將轉到第二個文件（例如mobile.css）。

請注意，您希望爲移動設備覆蓋的樣式名稱需要在main.css中標記爲@external，以避免由gwt編譯器進行名稱混淆。

的main.css：

@external .mainNorthPanel; 

.mainNorthPanel { 
    position: fixed; 
    top: 0px; 
} 

mobile.css：

@media all and (max-width: 640px) { 
    .mainNorthPanel { 
    position: absolute; 
    top: -3em; 
    } 
} 

在應用程序ClientBundle，使用的main.css用您CssResource界面結合，並定義在移動文件作爲外部資源：

public interface MyBundle extends ClientBundle { 

    public interface MainStyles extends CssResource { 
     String mainNorthPanel(); 
    } 

    @Source("css/main.css") 
    MainStyles css(); 

    @Source("css/mobile.css") 
    TextResource mobile(); 
} 

最後注入你的外部CSS資源一些ERE在模塊初始化：

String mobileCss = myBundle.mobile().getText(); 
StyleInjector.injectAtEnd(mobileCss) 

有關完整工作示例，來看看這個JavaWorld的帖子剛出來近日：

http://www.javaworld.com/article/2842875/java-web-development/responsive-web-design-with-google-web-toolkit.html

它涵蓋了一些基本的概念，基於CSS響應式視圖，對話框和菜單。 並且有概念在github一點證明：

https://github.com/cuppafame/gwt-responsive