CODEWITHSUNDEEP
gwtwindow-resize
Abhijith Nagaraja
Abhijith Nagaraja

Reputation: 3380

GWT Re-sizing components on browser window resize

I have placed many widgets in the absolute panel and added the absolute panel to the RootLayoutPanel. But on Browser resize, the contents are not resizing... am i missing something???

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

And my onModuleLoad function looks like this

public void onModuleLoad() {

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

}

Upvotes: 1

Views: 6657

Answers (3)

Colin Alworth
Colin Alworth

Reputation: 18331

Not all widgets can use RootLayoutPanel's (and the other *LayoutPanel's) automatic resizing stuff - only widgets that implement RequiresResize will be notified when their parent has changed size, and they must update.

CellBrowser and DataGrid are two widgets in GWT that support this, all of the containers that end in LayoutPanel support it as well. Two others are HeaderPanel and ResizeComposite. You can create your own by implementing the interface and either passing the call along to another widget that can handle a new size, or by building your own resize code for the behavior you need.

Upvotes: 4

Dominik Bucher
Dominik Bucher

Reputation: 1509

You're using an AbsolutePanel which positions its widgets on an absolute position. As far as I know this also means that apart from being positioned absolute (they will also not change their position when you resize the panel, or the browser) their dimension also is absolute (so their size will also not change if you resize your browser).

Easiest solution to the problem would be the use of another panel, FlowPanel for a simple test (creates a lot of divs) or something more fancy like CellPanel, HorizontalPanel, VerticalPanel... Don't overuse those panels though, they take up quite some browser resources as they tend to create huge html tables ;).

More difficult solution is to implement Window.addResizeHandler() and do all the resizing of the widgets in your AbsolutePanel yourself.

Upvotes: 1

Adel Boutros
Adel Boutros

Reputation: 10285

Try setting Layout for your Panel such as BorderLAyout

Upvotes: 0

Related Questions