gwt - GWT GUI デザイン - レイアウトパネル

Question

次の領域でアプリケーションを設計する予定です。

ツールバーエリア (固定サイズ)
ワークスペースヘッダー (一部の情報またはフィルター条件用、固定サイズなし)
ワークスペースエリア (使用可能なすべての画面スペースを使用する必要があります)
ステータスバー領域 (固定サイズ)

添付のスクリーンショットもご覧ください。

appLayout

画面サイズに合わせて自動的にサイズ変更されるデータグリッドを使用するには、DockLayoutPanel を使用するのが最善の方法であると読みました。次の記事も読みました: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels

この記事では、標準モードのサポートを強化するために、レイアウトパネル (LayoutPanel.class だけでなく、すべてのレイアウトパネル) を使用することもお勧めします。そのため、レイアウトパネルをテストするための非常に簡単な例を作成しました。

これは、アプリケーションを設計しようとした簡単なスクリーンショットの例です。

--- cssファイル --

.test {
    margin: 4px;
    padding: 20px;
    background-color: Lime;
}

package com.test.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.SimplePager;
import com.google.gwt.user.cellview.client.TextColumn;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DisclosurePanel;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.LayoutPanel;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.SimpleLayoutPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.view.client.ListDataProvider;


public class GwtTestDockFilled implements EntryPoint {
    private SimpleLayoutPanel slpToolbarPlaceholder;
    private SimpleLayoutPanel slpWorkspacePlaceholder;
    private SimpleLayoutPanel slpWorkspaceHeaderPlaceholder;
    private SimpleLayoutPanel slpStatusbarPlaceholder;
    private LayoutPanel layoutPanel;
    private FlowPanel flowPanel;
    private Button btnBack;
    private Button btnNew;
    private Label lblName;
    private TextBox txtName;
    private DisclosurePanel disclosurePanel;
    private LayoutPanel layoutPanel_1;
    private Label lblStreet;
    private TextBox txtStreet;
    private DataGrid<Person> dataGrid;
    private TextColumn<Person> colName;
    private TextColumn<Person> colStreet;
    private DockLayoutPanel dockLayoutPanel_1;
    private LayoutPanel layoutPanel_2;
    private SimplePager simplePager;
    private ListDataProvider<Person> dataProvider = new ListDataProvider<GwtTestDockFilled.Person>();

     private static final String[] NAMES = {
          "Mary", "Patricia", "Linda", "Barbara", "Elizabeth", "Jennifer", "Maria",
          "Susan", "Margaret", "Dorothy", "Lisa", "Nancy", "Karen", "Betty",
          "Helen", "Sandra", "Donna", "Carol", "Ruth", "Sharon", "Michelle",
          "Laura", "Sarah", "Kimberly", "Deborah", "Jessica", "Shirley", "Cynthia",
          "Angela", "Melissa", "Brenda", "Amy", "Anna", "Rebecca", "Virginia",
          "Kathleen", "Pamela", "Martha", "Debra", "Amanda", "Stephanie", "Carolyn",
          "Christine", "Marie", "Janet", "Catherine", "Frances", "Ann", "Joyce",
          "Diane", "Alice", "Julie", "Heather", "Teresa", "Doris", "Gloria",
          "Evelyn", "Jean", "Cheryl", "Mildred", "Katherine", "Joan", "Ashley",
          "Judith", "Rose", "Janice", "Kelly", "Nicole", "Judy", "Christina",
          "Kathy", "Theresa", "Beverly", "Denise", "Tammy", "Irene", "Jane", "Lori"};


    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {

        RootLayoutPanel rootLayoutPanel = RootLayoutPanel.get();

        DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.PX);
        rootLayoutPanel.add(dockLayoutPanel);
        dockLayoutPanel.addNorth(getSlpToolbarPlaceholder(), 60.0);
        dockLayoutPanel.addNorth(getSimpleLayoutPanel_2(), 60.0);
        dockLayoutPanel.addSouth(getSimpleLayoutPanel_3(), 60.0);
        dockLayoutPanel.add(getSlpWorkspacePlaceholder());

        fillDataGrid();
    }

    private void fillDataGrid(){        

        for(int i = 0; i < NAMES.length; i++){

            Person p = new Person();
            p.setName(NAMES[i]);
            p.setStreet("Spring Road");
            dataProvider.getList().add(p);
        }
    }

    private SimpleLayoutPanel getSlpToolbarPlaceholder() {
        if (slpToolbarPlaceholder == null) {
            slpToolbarPlaceholder = new SimpleLayoutPanel();
            slpToolbarPlaceholder.setWidget(getFlowPanel());
        }
        return slpToolbarPlaceholder;
    }
    private SimpleLayoutPanel getSlpWorkspacePlaceholder() {
        if (slpWorkspacePlaceholder == null) {
            slpWorkspacePlaceholder = new SimpleLayoutPanel();
            slpWorkspacePlaceholder.setWidget(getDockLayoutPanel_1());
        }
        return slpWorkspacePlaceholder;
    }
    private SimpleLayoutPanel getSimpleLayoutPanel_2() {
        if (slpWorkspaceHeaderPlaceholder == null) {
            slpWorkspaceHeaderPlaceholder = new SimpleLayoutPanel();
            slpWorkspaceHeaderPlaceholder.setStyleName("test");
            slpWorkspaceHeaderPlaceholder.setWidget(getLayoutPanel());
        }
        return slpWorkspaceHeaderPlaceholder;
    }
    private SimpleLayoutPanel getSimpleLayoutPanel_3() {
        if (slpStatusbarPlaceholder == null) {
            slpStatusbarPlaceholder = new SimpleLayoutPanel();
        }
        return slpStatusbarPlaceholder;
    }
    private LayoutPanel getLayoutPanel() {
        if (layoutPanel == null) {
            layoutPanel = new LayoutPanel();
            layoutPanel.add(getLblName());
            layoutPanel.setWidgetLeftWidth(getLblName(), 0.0, Unit.PX, 56.0, Unit.PX);
            layoutPanel.setWidgetTopHeight(getLblName(), 0.0, Unit.PX, 16.0, Unit.PX);
            layoutPanel.add(getTxtName());
            layoutPanel.setWidgetLeftWidth(getTxtName(), 62.0, Unit.PX, 165.0, Unit.PX);
            layoutPanel.setWidgetTopHeight(getTxtName(), 0.0, Unit.PX, 25.0, Unit.PX);
            layoutPanel.add(getDisclosurePanel());
            layoutPanel.setWidgetLeftWidth(getDisclosurePanel(), 0.0, Unit.PX, 250.0, Unit.PX);
            layoutPanel.setWidgetTopHeight(getDisclosurePanel(), 31.0, Unit.PX, 200.0, Unit.PX);
        }
        return layoutPanel;
    }
    private FlowPanel getFlowPanel() {
        if (flowPanel == null) {
            flowPanel = new FlowPanel();
            flowPanel.add(getBtnBack());
            flowPanel.add(getBtnNew());
        }
        return flowPanel;
    }
    private Button getBtnBack() {
        if (btnBack == null) {
            btnBack = new Button("New button");
            btnBack.setText("Back");
            btnBack.setSize("50px", "50px");
        }
        return btnBack;
    }
    private Button getBtnNew() {
        if (btnNew == null) {
            btnNew = new Button("New button");
            btnNew.setSize("50px", "50px");
            btnNew.setText("New");
        }
        return btnNew;
    }
    private Label getLblName() {
        if (lblName == null) {
            lblName = new Label("Name");
        }
        return lblName;
    }
    private TextBox getTxtName() {
        if (txtName == null) {
            txtName = new TextBox();
        }
        return txtName;
    }
    private DisclosurePanel getDisclosurePanel() {
        if (disclosurePanel == null) {
            disclosurePanel = new DisclosurePanel("Additional Details", false);
            disclosurePanel.setAnimationEnabled(true);
            disclosurePanel.setContent(getLayoutPanel_1());
        }
        return disclosurePanel;
    }
    private LayoutPanel getLayoutPanel_1() {
        if (layoutPanel_1 == null) {
            layoutPanel_1 = new LayoutPanel();
            layoutPanel_1.setSize("5cm", "60px");
            layoutPanel_1.add(getTxtStreet());
            layoutPanel_1.setWidgetLeftWidth(getTxtStreet(), 60.0, Unit.PX, 91.0, Unit.PX);
            layoutPanel_1.setWidgetTopHeight(getTxtStreet(), 0.0, Unit.PX, 32.0, Unit.PX);
            layoutPanel_1.add(getLblStreet());
            layoutPanel_1.setWidgetLeftWidth(getLblStreet(), 0.0, Unit.PX, 56.0, Unit.PX);
            layoutPanel_1.setWidgetTopHeight(getLblStreet(), 0.0, Unit.PX, 22.0, Unit.PX);
        }
        return layoutPanel_1;
    }
    private Label getLblStreet() {
        if (lblStreet == null) {
            lblStreet = new Label("Street");
        }
        return lblStreet;
    }
    private TextBox getTxtStreet() {
        if (txtStreet == null) {
            txtStreet = new TextBox();
        }
        return txtStreet;
    }

    private DataGrid<Person> getDataGrid() {
        if (dataGrid == null) {
            dataGrid = new DataGrid<Person>();
            dataProvider.addDataDisplay(dataGrid);
            dataGrid.addColumn(getColName(), "Name");
            dataGrid.addColumn(getColStreet(), "Street");
        }
        return dataGrid;
    }

    private TextColumn<Person> getColName() {
        if (colName == null) {
            colName = new TextColumn<Person>() {
                @Override
                public String getValue(Person object) {
                    return object.getName();
                }
            };
        }
        return colName;
    }

    private TextColumn<Person> getColStreet() {
        if (colStreet == null) {
            colStreet = new TextColumn<Person>() {
                @Override
                public String getValue(Person object) {
                    return object.getStreet();
                }
            };
        }
        return colStreet;
    }
    private DockLayoutPanel getDockLayoutPanel_1() {
        if (dockLayoutPanel_1 == null) {
            dockLayoutPanel_1 = new DockLayoutPanel(Unit.PX);
            dockLayoutPanel_1.addSouth(getLayoutPanel_2(), 40.0);
            dockLayoutPanel_1.add(getDataGrid());
        }
        return dockLayoutPanel_1;
    }
    private LayoutPanel getLayoutPanel_2() {
        if (layoutPanel_2 == null) {
            layoutPanel_2 = new LayoutPanel();
            layoutPanel_2.add(getSimplePager());
            layoutPanel_2.setWidgetLeftWidth(getSimplePager(), 50.0, Unit.PCT, 50.0, Unit.PCT);
        }
        return layoutPanel_2;
    }
    private SimplePager getSimplePager() {
        if (simplePager == null) {
            simplePager = new SimplePager();
            simplePager.setDisplay(getDataGrid());
        }
        return simplePager;
    }

    public class Person{

        private String name;
        private String street;

        public Person(){
        }

        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
        public String getStreet() {
            return street;
        }
        public void setStreet(String street) {
            this.street = street;
        }
    }
}

この例では、いくつかの問題があります。

CSS パディングが SimpleLayoutPanel で機能していません。代わりにどのクラスを使用する必要がありますか? このプレースホルダーのウィジェットを置き換えると、自動的に親 (slpWorkspaceHeaderPlaceholder) の css を使用する必要があるため、空のスケルトンクラスで css パディングを使用したいと考えています。slpWorkspaceHeaderPlaceholder のすべての子にパディングを設定したくありません。
「追加情報」の開示パネルが機能していません。その理由は、DockLayoutPanel には North の固定サイズがあるためです。ディスクロージャーペインを開いた場合に北のサイズを変更するだけのソリューションをテストしましたが、アニメーションが機能しません。
これは私のアプリケーションを設計するための正しい方法ですか、それとも別のパネルを使用する必要がありますか?
レイアウトパネルのみを使用する必要がありますか (標準モードのサポートが向上)、それとも他のパネルには特別なケースがありますか?

score 2 · Accepted Answer

コンパイルされたコードのサイズを最小限に抑え、コンパイルを高速化し、パフォーマンスを向上させるために、使用するウィジェットの種類をできるだけ少なくしてください。デザインに必要なパネルは 3 種類だけです (RootLayoutPanel に加えて)。ツールバーやワークスペースヘッダーに LayoutPanel を使用する必要は絶対にありません。

このようなもの：

FlowPanel toolbar = new FlowPanel();
FlowPanel center = new FlowPanel();

DisclosurePanel workspace = new DisclosurePanel();
workspace.addCloseHandler(new CloseHandler<DisclosurePanel>() {
    @Override
    public void onClose(CloseEvent<DisclosurePanel> event) {
        resize();
    }
});
workspace.addOpenHandler(new OpenHandler<DisclosurePanel>() {
    @Override
    public void onOpen(OpenEvent<DisclosurePanel> event) {
        resize();
    }
});
Window.addResizeHandler(new ResizeHandler() {
    @Override
    public void onResize(ResizeEvent event) {
        resize();
    }
});

DataGrid<Person> dataGrid = new DataGrid<Person>();
FlowPanel statusBar = new FlowPanel();

center.add(workspace);
center.add(dataGrid);

LayoutPanel myPage = new LayoutPanel();
myPage.add(toolbar);
myPage.add(center);
myPage.add(statusBar);

myPage.setWidgetTopHeight(toolbar, 0, Unit.PX, 60, Unit.PX);
myPage.setWidgetTopBottom(center, 60, Unit.PX, 60, Unit.PX);
myPage.setWidgetBottomHeight(statusBar, 0, Unit.PX, 60, Unit.PX);

// add myPage to RootLayoutPanel
resize();

resize() メソッドを作成します。

private void resize() {
    Scheduler.get().scheduleDeferred(new ScheduledCommand() {
        @Override
        public void execute() {
            dataGrid.setHeight(center.getOffsetHeight() - workspace.getOffsetHeight() + "px");
        }
    });
}

次のスタイルでボタンをツールバーウィジェットに直接追加します。

.myToolbarButton {
    width: 50px;
    height: 50px;
    float: left;
    margin: 5px 10px 5px 0;
}

ツールバー (背景色) のスタイルを設定する場合は、そのスタイルに次を追加します。

overflow: hidden;

score -1 · Accepted Answer

HTMLは、「このコンポーネントが必要なだけのスペースを占有し、次にこのコンポーネントが残りのスペースを占有するようにする」というひどいサポートを持っています。私の知る限り、GWTで必要なことを行う最良の方法は、すべてのLayoutPanelを使用し、onResizeをオーバーライドしてから、数学的なレイアウト計算を自分で行うことです。

int heightOfEntireCenter = centerPanel.getClientHeight();
int heightOfToolbar = toolBar.getClientHeight();

workspace.setHeight(heightOfEntireCenter - heightOfToolbar);

たくさんの手間をかけたり、不思議なレイアウトエラーを探したり、サイズが変更されたときのラグに悩まされたりする必要があります。HTMLはこれが苦手です。

ツールバーのサイズを修正できれば、はるかに簡単な時間になります。ツールバーがサイズを変更できないという意味ではありません。つまり、それを計算して設定する必要があるということです。そうすれば、ワークスペースは残りのスペースをより自然に埋めることができます。ここでも、LayoutPanelsが正しい選択です。

gwt - GWT GUI デザイン - レイアウト パネル

2 に答える 2

Related

Reference

gwt - GWT GUI デザイン - レイアウトパネル