implementing scrolling for formpanel in gwt

Question

I am new to gwt and facing challenge to implementing scrolling for my form, some of the widget are getting hidden. I tried using scrollpanel of gwt but it didn't helped me, may be I don't know how to use it correctly.

here's my form code:

class FormPanelExample extends FormPanel{
    Grid grid = new Grid(20, 3);

    Label contactLabel = new Label("Contact No.");
    TextBox contactTextBox = new TextBox();

    Label startAddressLabel = new Label("Start Address:");
    TextArea startAddressTextArea = new TextArea(); 

    Label destinationAddressLabel = new Label("Destination Address:");
    TextArea destinationAddressTextArea = new TextArea(); 

    Label genderLabel = new Label("Gender:");
    ListBox genderlistBox = new ListBox();

    Label vehicleTypeLabel = new Label("Vehicle Type:"); 
    ListBox vehicleTypeBox = new ListBox();

    Label availableSeatsLabel = new Label("Available Seats:"); 
    ListBox availableSeatsBox = new ListBox();

    Label timeOfDayLabel = new Label("Time Of Day:");
    HourMinutePicker timeOfDayPicker = new HourMinutePicker(PickerFormat._12_HOUR);

    Label recursiveDayLabel = new Label("Available Days:");



//  Button submit = new Button("Submit");

    public FormPanelExample() {
        super();
        contactTextBox.setName("contactno");
        startAddressTextArea.setCharacterWidth(20);
        startAddressTextArea.setVisibleLines(5);

        destinationAddressTextArea.setCharacterWidth(20);
        destinationAddressTextArea.setVisibleLines(5);

        genderlistBox.addItem("Male");
        genderlistBox.addItem("Female");
        genderlistBox.addItem("Other");

        vehicleTypeBox.addItem("2 Seater");
        vehicleTypeBox.addItem("3 Seater");


        availableSeatsBox.addItem("1 Seater");


        CheckBox monday = new CheckBox("Monday");
        CheckBox tuesday = new CheckBox("Tuesday");


        VerticalPanel availableDaysPanel = new VerticalPanel();
          availableDaysPanel.setSpacing(10);            
          availableDaysPanel.add(monday);


        grid.setWidget(0, 0, contactLabel);
        grid.setWidget(0, 1, contactTextBox);

        grid.setWidget(1, 0, startAddressLabel);
        grid.setWidget(1, 1, startAddressTextArea);

        grid.setWidget(2, 0, destinationAddressLabel);
        grid.setWidget(2, 1, destinationAddressTextArea);

        grid.setWidget(3, 0, genderLabel);
        grid.setWidget(3, 1, genderlistBox);

        grid.setWidget(4, 0, vehicleTypeLabel);
        grid.setWidget(4, 1, vehicleTypeBox);

        grid.setWidget(5, 0, availableSeatsLabel);
        grid.setWidget(5, 1, availableSeatsBox);

        grid.setWidget(6, 0, timeOfDayLabel);
        grid.setWidget(6, 1, timeOfDayPicker);

        grid.setWidget(7, 0, recursiveDayLabel);
        grid.setWidget(7, 1, availableDaysPanel);



        setAction("/someAction");

        setEncoding(FormPanel.ENCODING_MULTIPART);
        setMethod(FormPanel.METHOD_POST);
        setWidget(grid);
        setStyleName("formPanel");


        addFormHandler(new FormHandler() {
            public void onSubmitComplete(FormSubmitCompleteEvent event) {
                Window.alert(event.getResults());
            }

            public void onSubmit(FormSubmitEvent event) {
            }
        });
    }

}

Answer 1

Here's a simple example:

public class ScrollPanelDemo implements EntryPoint {
   public void onModuleLoad() {
      FormPanelExample formPanelExample = new FormPanelExample();

      ScrollPanel scrollPanel = new ScrollPanel(formPanelExample);
      scrollPanel.setSize("500px", "200px");

      RootPanel.get().add(scrollPanel);
   }  
}

Detailed information can be found here:

• GWT FormPanel
• GWT ScrollPanel