Problem with resize TabLayoutPanel+gwt-maps+uibinder
giannisdag
It appears a grey background, probably because of the resize affect.
If I resize a little my browser's window, the problem disappears.
This is my code in uibinder:
<g:tab>
<g:header size='7'><ui:msg description="Map">Map</ui:msg></
g:header>
<g:AbsolutePanel ui:field="mapPanel">
</g:AbsolutePanel>
</g:tab>
I declared the mapwidget inside the relative uibinder class as
following:
final MapWidget map = new MapWidget();
mapPanel.setSize("500px", "500px");
// διαχείριση χαρτών
LatLng Hraklitsa = LatLng.newInstance(40.885275,24.318516);
// Συντεταγμένες στην Ηρακλείτσα Καβάλας
map.setCenter(Hraklitsa,6);
map.setSize("100%","100%");
map.addControl(new LargeMapControl());
// Add a marker
map.addOverlay(new Marker(Hraklitsa));
// Add an info window to highlight a point of interest
map.getInfoWindow().open(map.getCenter(), new
InfoWindowContent("Βρισκόμαστε εδώ"));
map.checkResizeAndCenter();
mapPanel.add(map);
I probably have to call map.checkResizeAndCenter() on a resize event
at the creation of the page, but I don't know how
Eric Ayers
maps.checkResizeAndCenter() when the map was exposed either when the
map was created the first time or when you switched tabs. In gwt-maps
1.1.0, the map now implments the "RequiresResize" interface, to react
to resize events automatically. In my tests this worked, but others
have said the problem still exists sometimes and I haven't had a
chance to look into it.
Here is what I think is happening in your case. The AbsolutePanel
that you have the map in does not implement RequresResize. It may be
that by simply changing your AbsolutePanel to a DockLayoutPanel in the
sample below will fix the problem. If you are not already using
TabLayoutPanel, try that as well.
If that does not fix the problem, a the workaround would be to have
your code react to the SelectionEvent on the tab and call
map.checkResizeAndCenter(). In fact, you may have to put that inside
a Timer or DeferredCommand. You can see in the 'onAttach()' method in
MapWidget that there is a doubly nested DeferredCommand to try to get
the map to center correctly:
On Thu, Jul 8, 2010 at 4:47 AM, giannisdag <pasco...@gmail.com> wrote:
> I have a problem when I use a gwt-maps 1.1.0 widget inside a tabpanel.
> It appears a grey background, probably because of the resize affect.
> If I resize a little my browser's window, the problem disappears.
> This is my code in uibinder:
> <g:tab>
> <g:header size='7'><ui:msg description="Map">Map</ui:msg></
> g:header>
> <g:AbsolutePanel ui:field="mapPanel">
> d </g:AbsolutePanel>
> </g:tab>
> I declared the mapwidget inside the relative uibinder class as
> following:
> final MapWidget map = new MapWidget();
> mapPanel.setSize("500px", "500px");
> // διαχείριση χαρτών
> LatLng Hraklitsa = LatLng.newInstance(40.885275,24.318516);
> // Συντεταγμένες στην Ηρακλείτσα Καβάλας
> map.setCenter(Hraklitsa,6);
> map.setSize("100%","100%");
> map.addControl(new LargeMapControl());
> // Add a marker
> map.addOverlay(new Marker(Hraklitsa));
>
> // Add an info window to highlight a point of interest
> map.getInfoWindow().open(map.getCenter(), new
> InfoWindowContent("Βρισκόμαστε εδώ"));
> map.checkResizeAndCenter();
> mapPanel.add(map);
>
> I probably have to call map.checkResizeAndCenter() on a resize event
> at the creation of the page, but I don't know how
>
> --
> You are subscribed to the Google Groups "GWT-Google-Apis" group.
> For more options, visit http://groups.google.com/group/gwt-google-apis?hl=en
>
--
Eric Z. Ayers
Google Web Toolkit, Atlanta, GA USA
zundel
http://code.google.com/p/gwt-google-apis/issues/detail?id=354
If all the problems are in TabLayoutPanel, I would appreciate some
ideas on how to fix this. To get the map panel to react appropriately
when it is first created I had to put some hacks in the MapWidget's
onAttach() method.
On Jul 8, 6:23 am, Eric Ayers <zun...@google.com> wrote:
> Prior to maps 1.1.0, you had to always call
> maps.checkResizeAndCenter() when the map was exposed either when the
> map was created the first time or when you switched tabs. In gwt-maps
> 1.1.0, the map now implments the "RequiresResize" interface, to react
> to resize events automatically. In my tests this worked, but others
> have said the problem still exists sometimes and I haven't had a
> chance to look into it.
>
> Here is what I think is happening in your case. The AbsolutePanel
> that you have the map in does not implement RequresResize. It may be
> that by simply changing your AbsolutePanel to a DockLayoutPanel in the
> sample below will fix the problem. If you are not already using
> TabLayoutPanel, try that as well.
>
> If that does not fix the problem, a the workaround would be to have
> your code react to the SelectionEvent on the tab and call
> map.checkResizeAndCenter(). In fact, you may have to put that inside
> a Timer or DeferredCommand. You can see in the 'onAttach()' method in
> MapWidget that there is a doubly nested DeferredCommand to try to get
> the map to center correctly:
>
giannisdag
Eric, thank you for your suggestions. I am already using a tablayout
panel. I tried 3 different approaches using the new layout mechanism,
all 3 of them inside a tab
1) using a layout panel
2) using a DockLayoutPanel
3) using the map widget alone
examples (widget alone)
<g:header size='7'><ui:msg description="Map">Map</ui:msg></
g:header>
</g:tab>
(docklayoutpanel)
<g:DockLayoutPanel>
<g:center>
<gm:MapWidget ui:field="map"></gm:MapWidget>
</g:center>
</g:DockLayoutPanel>
none of them does the trick.
So finally I did your final suggestion using the selection event
without a timer or deffered command, which works fine.