Question

我正在开发GWT来制作Web应用程序，但现在我需要在响应式设计中创建我的Web应用程序，但GWT不支持响应式设计，请帮助我。

Answer 1

GWT支持响应式设计，就像任何其他小部件工具包一样（好吧，这不完全正确，可能有更好的小工具工具包）：使用HTMLPanel，FlowPanel，{进行布局{1}}和响应式CSS，或者使用布局面板进行活动布局路径并在代码中（或在自定义布局面板中）进行计算。

Answer 2

您可以使用CSS媒体查询来响应布局。

例如，要使对话框占用屏幕大小高达640px的设备上可用水平空间的90％，可以将样式包装在@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资源：

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

Answer 3

除了托马斯所说的你可以研究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 4

SELECT  "model".* FROM "mdole" WHERE "model"."column_data" = '{1,3}' LIMIT $1  [["LIMIT", 11]]

公共类视图扩展了VerticalPanel {

/*The best way to do responsive web with is to use Timer class and Window class in GWT as Gwt does not responsive web at the moment. I have been searching on the web for about a week now and it was a waist of my time, even Google does not know how to do that. I came out with a very straight  forward solution by using Window class and Timer class and it works like a magic.*/

GWT响应式设计解决方案

4 个答案: