0

我计划用以下领域设计我的应用程序：

  • 工具栏区域（固定大小）
  • 工作区标题（对于某些信息或过滤条件，无固定大小）
  • 工作区区域（应该使用所有可用的屏幕空间）
  • 状态栏区域（固定大小）

另请参阅随附的屏幕截图。

应用布局

要使用根据屏幕大小自动调整大小的数据网格，我已经读过最好的方法是使用 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。我应该改用哪个类？我想在空骨架类中使用 css 填充，因为如果我替换此占位符的小部件，它应该自动使用父级 (slpWorkspaceHeaderPlaceholder) 的 css。我不想为 slpWorkspaceHeaderPlaceholder 的每个孩子设置填充。

  • “其他详细信息”的披露面板不起作用。原因是 DockLayoutPanel 对 North 有一个固定大小。我测试了一个解决方案，如果我打开 Disclosure Pane 但动画不起作用，我只需更改 North 大小。

  • 这是设计我的应用程序的正确途径还是我应该使用不同的面板？

  • 我应该尝试仅使用布局面板（更好的标准模式支持）还是其他面板有特殊情况？

4

2 回答 2

2

尝试使用尽可能少的小部件类型，以最小化编译代码大小、加快编译速度并提高性能。您的设计只需要 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;
于 2012-09-21T19:23:58.953 回答
-1

HTML 对“让这个组件根据需要占用尽可能多的空间，然后让这个组件占用其余空间”的支持非常糟糕。据我所知，在 GWT 中执行所需操作的最佳方法是使用所有 LayoutPanel，覆盖 onResize，然后自己进行数学布局计算：

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

workspace.setHeight(heightOfEntireCenter - heightOfToolbar);

您将不得不做大量的工作，寻找神秘的布局错误，在尺寸变化时对延迟感到恼火，等等。HTML 在这方面很糟糕。

如果您可以修复工具栏的大小，您将拥有更轻松的时间。我什至不是说工具栏不能改变大小——我只是说你必须计算并设置它。然后工作空间可以更自然地填充空间的其余部分。LayoutPanels 也是正确的选择。

于 2012-09-21T18:40:26.597 回答