GWT 在浏览器窗口调整大小时调整组件大小

Question

我在绝对面板中放置了许多小部件，并将绝对面板添加到 RootLayoutPanel 中。但是在浏览器调整大小时，内容没有调整大小......我错过了什么吗？？？

package panelDemo.client;

import com.google.gwt.user.client.ui.AbsolutePanel;

public class AbsolutePanelDemo extends Composite{
  public AbsolutePanelDemo() {

    AbsolutePanel absolutePanel = new AbsolutePanel();
    initWidget(absolutePanel);
    absolutePanel.setSize("1024px", "768px");

    TextBox txtbox = new TextBox();
    txtbox.setReadOnly(true);
    txtbox.setText("Enter Something");
    absolutePanel.add(txtbox);

    Label lblIsValid = new Label("Label:");
    absolutePanel.add(lblIsValid, 192, 10);

    CheckBox chckbxIsValid = new CheckBox("label");
    absolutePanel.add(chckbxIsValid, 244, 10);
    chckbxIsValid.setSize("76px", "19px");

    Label lblAssignedUser = new Label("Assigned User:");
    absolutePanel.add(lblAssignedUser, 362, 13);

    TextBox user = new TextBox();
    user.setReadOnly(true);
    user.setText("xyz");
    absolutePanel.add(user, 457, 1);

    Button btnClickMeText = new Button("Click Me Text");
    absolutePanel.add(btnClickMeText, 646, 1);
    btnClickMeText.setSize("100px", "28px");

    Label lblAlert = new Label("Alert:");
    absolutePanel.add(lblAlert, 113, 48);

    TextBox txtbxAlert = new TextBox();
    txtbxAlert.setText("Alert");
    absolutePanel.add(txtbxAlert, 161, 36);
    txtbxAlert.setSize("140px", "16px");

    Label lblExpires = new Label("Expires:");
    absolutePanel.add(lblExpires, 99, 93);

    DateBox dateBox = new DateBox();
    absolutePanel.add(dateBox, 161, 81);

    Label lblPriority = new Label("Priority:");
    absolutePanel.add(lblPriority, 99, 133);

    ListBox comboBox = new ListBox();
    absolutePanel.add(comboBox, 161, 127);
    comboBox.setSize("150px", "22px");

    Label lblGender = new Label("Gender:");
    absolutePanel.add(lblGender, 405, 48);

    RadioButton rdbtnMale = new RadioButton("new name", "Male");
    absolutePanel.add(rdbtnMale, 457, 45);

    RadioButton rdbtnFemale = new RadioButton("new name", "Female");
    absolutePanel.add(rdbtnFemale, 457, 70);

    Label lblDescription = new Label("Description:");
    absolutePanel.add(lblDescription, 386, 114);

    TextArea txtrThisIsSome = new TextArea();
    txtrThisIsSome.setText("This is some description");
    absolutePanel.add(txtrThisIsSome, 457, 118);
    txtrThisIsSome.setSize("149px", "88px");

    Label lblContact = new Label("Contact:");
    absolutePanel.add(lblContact, 95, 171);

    IntegerBox integerBox = new IntegerBox();
    integerBox.setText("91");
    integerBox.setVisibleLength(2);
    absolutePanel.add(integerBox, 161, 165);

    IntegerBox integerBox_1 = new IntegerBox();
    integerBox_1.setVisibleLength(10);
    absolutePanel.add(integerBox_1, 203, 165);

    FileUpload fileUpload = new FileUpload();
    fileUpload.setTitle("Upload Something");
    absolutePanel.add(fileUpload, 161, 194);

    Label lblUpload = new Label("Upload:");
    absolutePanel.add(lblUpload, 99, 200);

    Button btnSave = new Button("Save");
    absolutePanel.add(btnSave, 290, 255);
    btnSave.setSize("100px", "28px");

    Button btnCancel = new Button("Cancel");
    absolutePanel.add(btnCancel, 457, 255);
    btnCancel.setSize("100px", "28px");

    HTMLPanel panel = new HTMLPanel("This is just an example to show that in absolute panel resize wont work. This is evident if you resize your browser window.");
    absolutePanel.add(panel, 10, 319);
  }
}

我的 onModuleLoad 函数如下所示

public void onModuleLoad() {

    RootLayoutPanel.get().add(new AbsolutePanelDemo());

}

Answer 1

并非所有小部件都可以使用 RootLayoutPanel（以及其他 *LayoutPanel）的自动调整大小功能 - 只有实现 RequiresResize 的小部件才会在其父级更改大小时收到通知，并且它们必须更新。

CellBrowser 和 DataGrid 是 GWT 中支持此功能的两个小部件，所有以 LayoutPanel 结尾的容器也都支持它。另外两个是 HeaderPanel 和 ResizeComposite。您可以通过实现接口并将调用传递给可以处理新尺寸的另一个小部件，或者通过为您需要的行为构建您自己的调整大小代码来创建自己的尺寸。

Answer 2

您使用的是 AbsolutePanel ，它将其小部件放置在绝对位置上。据我所知，这也意味着除了绝对定位（当您调整面板或浏览器大小时，它们也不会改变其位置）之外，它们的尺寸也是绝对的（因此，如果您调整浏览器大小，它们的大小也不会改变） ）。

该问题最简单的解决方案是使用另一个面板，FlowPanel 进行简单测试（创建大量 div）或更奇特的东西，例如 CellPanel< /code>、Horizo​​ntalPanel、VerticalPanel...不过，不要过度使用这些面板，它们会占用相当多的浏览器资源，因为它们往往会创建巨大的 html 表；）。

更困难的解决方案是实现 Window.addResizeHandler() 并自行调整 AbsolutePanel 中小部件的所有大小。

Answer 3

尝试为面板设置布局，例如 BorderLAyout