将小部件添加到地图会破坏 GWT 中的其他小部件

Posted 2023-02-24

【中文标题】将小部件添加到地图会破坏 GWT 中的其他小部件

【英文标题】：Adding a Widget to Map breaks other widgets in GWT

【发布时间】：2013-06-28 23:20:37

【问题描述】：

我基本上有两对小部件，一个有两个日期选择器和一个提交按钮，用于将日期提交到服务器上的 RPC，另一个是显示这些日期之间信息的地图。他们每个人都单独工作，但是当显示地图时，我无法对日期选择器或提交按钮做任何事情。

这是重要的代码

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

        
    );

这是创建日期选择器的代码。

这是显示地图的代码。

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

我尝试将 RootLayoutPanel.get().add(dock) 更改为 RootPanel.get().add(dock) 但地图本身不显示。我还尝试通过 rootlayoutpanel 更改所有要停靠和插入的顶部部分，但出现与当前问题相同的问题。

【参考方案1】：

我第一眼看到的几种可能性。

1) 您将 datepicker 内容添加到 RootPanel，但将 map 内容添加到 RootLayoutPanel。我建议两者都使用RootLayoutPanel，如果它有效，标准模式通常在 GWT 中有更有用、最新的东西。

2) 你为什么要在第一段代码中使用Runnable？所有这些东西不只是在onModuleLoad 里有什么原因吗？

【讨论】：

我将两者都更改为 RootLayoutPanel 并将地图添加到第二个停靠点仍然会禁用第一个停靠点中的所有内容。我也把所有东西都从 runnable 中取出来了，这只是我的草率编程。它本质上是这样的。 Dock1 - 向 Dock1 添加东西 - 将 dock1 添加到 rootlayoutpanel 然后在 BuildUI 中将相同的东西添加到 dock2 但是当dock2出现在屏幕上时，我不能再对dock1上的任何小部件做任何事情，我不能点击提交，我可以'不点击日历上的日期，鼠标指针甚至无法识别它在某物上方（不会变成手形）

你能试着把东西移出Runnable吗？ GWT 并不真正支持它（文档说它只是为了与 JRE 兼容），所以它可能会导致问题。

我也有点困惑DockLayoutPanel 应该如何工作。您只是向其中添加了一个东部元素，而不是主要元素，并且您将日期选择器的内容直接添加到 RootLayoutPanel。那么那里的逻辑是什么，码头应该做什么？

我发现答案是 RootLayoutPanel 一次只能为 1 个停靠点提供焦点，所以我必须使用我的 2 个停靠点，并将它们一起添加到 1 个停靠点，以便两者同时工作。感谢您的帮助。

【参考方案2】：

解决方案最终是使用 RootLayoutPanel 并将占据屏幕东部和西部部分的两个停靠点组合成一个占据整个屏幕的停靠点。拥有两个 Dock 会导致只有最近添加的一个处于活动状态，但是将两个 Dock 放入 1 可以让它们都起作用。