html - GWT レスポンシブ デザイン ソリューション

Question

私は Web アプリケーションを作成するために GWT に取り組んでいますが、レスポンシブ デザインで Web アプリケーションを作成する必要がありますが、GWT はレスポンシブ デザインをサポートしていません。

Answer 1

GWT は、他のウィジェット ツールキットと同様にレスポンシブ デザインをサポートします (OK、正確にはそうではありません。おそらく、より良い仕事をするウィジェット ツールキットが存在します): 、 、レスポンシブ CSS でレイアウトを行うHTMLPanelかFlowPanel、SimplePanelレイアウトパネルとコード内 (またはカスタム レイアウト パネル内) で計算を行います。

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