Adding a Widget to Map breaks other widgets in GWT

Question

I have basically two pairs of widgets, one has two datepickers and a submit button that submits the dates to an RPC on the server, and the other is a map which displays information between those dates. Each of them work individually, but when the map is displayed I cannot do anything to the datepickers or the submit button.

Here is the code that matters

public void onModuleLoad() {
    final DockLayoutPanel dock = new DockLayoutPanel(Unit.PCT);
    /*
     * Asynchronously loads the Maps API.
     *
     * The first parameter should be a valid Maps API Key to deploy this
     * application on a public server, but a blank key will work for an
     * application served from localhost.
     */
    Maps.loadMapsApi("", "2", false, new Runnable() {
        public void run() {

            final FormPanel form = new FormPanel();
            form.setMethod(form.METHOD_POST);   


            DatePicker datePicker = new DatePicker();
            final Label text = new Label();
            text.setText("Start Date");

            // Set the value in the text box when the user selects a date
            datePicker.addValueChangeHandler(new ValueChangeHandler<Date>() {
                public void onValueChange(ValueChangeEvent<Date> event) {
                    Date date = event.getValue();
                    String dateString = DateTimeFormat.getMediumDateFormat().format(date);
                    text.setText("Start Date - " + dateString);
                }
            });

            // Set the default value
            datePicker.setValue(new Date(), true);

            // Add the widgets to the page
            RootPanel.get().add(text);
            RootPanel.get().add(datePicker);

            DatePicker datePicker2 = new DatePicker();
            final Label text2 = new Label();
            text2.setText("End Date");

            // Set the value in the text box when the user selects a date
            datePicker2.addValueChangeHandler(new ValueChangeHandler<Date>() {
                public void onValueChange(ValueChangeEvent<Date> event) {
                    Date date = event.getValue();
                    String dateString = DateTimeFormat.getMediumDateFormat().format(date);
                    text2.setText("End Date - " + dateString);
                }
            });

            // Set the default value
            datePicker2.setValue(new Date(), true);

            // Add the widgets to the page

            RootPanel.get().add(text2);
            RootPanel.get().add(datePicker2);
            RootPanel.get().add(new Button("Submit", new ClickListener()
            {
                public void onClick(Widget sender)
                {
                    form.submit();
                }
            }));

            form.addSubmitHandler(new SubmitHandler() {
                @Override
                public void onSubmit(SubmitEvent event) {
                    getAwards(text.getText(),text2.getText());
                }
            });

        }
    });
}

This is the code that creates the datepickers.

Here is the code that displays the map.

private void buildUi() {
    ArrayList<Icon> icons = createIconList();
    content = new ArrayList<String>();
    LatLng sanDiego = LatLng.newInstance(32.83049, -117.122717);
    final MapWidget map = new MapWidget(sanDiego, 9);
    map.clearOverlays();
    map.setSize("100%", "100%");
    // Add some controls for the zoom level
    map.addControl(new LargeMapControl());

    java.util.Random rand = new java.util.Random();
    for(ContractAward ca : sanDiegoAwards)
    {
        double off1 = (rand.nextDouble()-.5)/100;
        double off2 = (rand.nextDouble()-.5)/100;
        index++;
        // Open a map centered on San Diego
        LatLng contract = LatLng.newInstance(ca.getLat() + off1,ca.getLon()+off2);

        MarkerOptions mo = MarkerOptions.newInstance();         
        mo.setTitle(""+index);
        mo.setIcon(icons.get(whichIcon(ca.getAmount())));
        final Marker mark = new Marker(contract,mo);    
        map.addOverlay(mark);

        String caContent = "<P>Company:  " + ca.getCompany() + "<br>";
        caContent+= "Date: " + ca.getDate().toGMTString() + "<br>";
        caContent+= "Amount: " + ca.getAmount() + "<br>";
        caContent+= "ContractID:  " + ca.getContractID() + "</P>";

        content.add(caContent);
        mark.addMarkerClickHandler(new MarkerClickHandler() {
            public void onClick(MarkerClickEvent event) {

                InfoWindow info = map.getInfoWindow();
                info.open(mark, new InfoWindowContent(content.get(Integer.parseInt(mark.getTitle())-1)));
            }
        });

    }
    final DockLayoutPanel dock = new DockLayoutPanel(Unit.PCT);
    dock.addEast(map, 80);


    // Add the map to the HTML host page
    RootLayoutPanel.get().add(dock);
}

I've tried changing the RootLayoutPanel.get().add(dock) to RootPanel.get().add(dock) but then the map itself does not display. I've also tried changing all the top parts to be docked and inserted via rootlayoutpanel but the same issue arises as is currently the problem.

Answer 1

Solution ended up being to use RootLayoutPanel and combine the two docks that take up the east and west portions of the screen into 1 dock that takes the entire screen. Having two docks led to only the most recently added one being active, but putting the two docks into 1 lets both of them function.

Answer 2

Several possibilities I see on a first glance.

1) You are adding the datepicker stuff to RootPanel, but the map stuff to RootLayoutPanel. I suggest sticking to RootLayoutPanel for both, if it works, standards mode generally has more useful, up-to-date stuff in GWT.

2) Why are you doing that whole thing with Runnable in the first bit of code? Is there a reason all that stuff isn't in just onModuleLoad?