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.

score 1 · Answer 1 · answered Jun 30 '13 at 08:31

1

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?

answered Jun 30 '13 at 08:31

Marconius

683
1
5
13

I changed everything to RootLayoutPanel for both and adding the map to the second dock still disables everything in the first dock. I also got everything out of runnable, that was just sloppy programming on my part. it essentially is this. Dock1 -Add stuff to Dock1 - add dock1 to rootlayoutpanel then in BuildUI the same thing to dock2 But when dock2 shows up on the screen I can no longer do anything with any of the widgets on dock1, I can't click submit, I can't click a date on the calendar, the mouse pointer doesn't even recognize that it is over something (doesn't change to a hand) – NolanPower Jul 01 '13 at 17:07
Could you try moving stuff out of `Runnable`? GWT doesn't really support it (documentation says it's only there for JRE compatibility), so it might be causing issues. – Marconius Jul 01 '13 at 17:40
I'm also a bit confused as to how this `DockLayoutPanel` is supposed to work. You are only adding an east element to it, not a main element, and you are adding the datepicker stuff directly to the `RootLayoutPanel`. So what was the logic there, what is the dock supposed to do? – Marconius Jul 01 '13 at 17:46
I figured out that the answer was that RootLayoutPanel can only provide focus to 1 dock at a time, so I had to take my 2 docks, and add them together to 1 dock for both to work simultaneously. Thanks for your help. – NolanPower Jul 01 '13 at 21:05

score 0 · Accepted Answer · answered Jul 01 '13 at 21:06

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.

Adding a Widget to Map breaks other widgets in GWT

2 Answers2