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