ResizeBar drag notification

[tomhj]

My app uses a ListGrid with a resizebar (on the right) and other content on the right. Is there a way to be notified when the user starts to drag the resizebar around?

thanks,
Tom

[mike.art1]

Just a guess but it would seem like one of these events would work

HasDragResizeMoveHandlers,
HasDragResizeStartHandlers,
HasDragResizeStopHandlers

[tomhj]

Those are interfaces supported by various UI elements in SmartGWT like ListGrid. I tried this:

        grid.addDragResizeStartHandler(new DragResizeStartHandler() {

            public void onDragResizeStart(DragResizeStartEvent event)
            {
                GWT.log("onDragResizeStart() called", null);
            }
            
        });

But it doesn't fire. I think the event is fired on the object that has started to be dragged. So that would really be the Splitbar - but I don't see anyway to get hold of the Splitbar to install a DragResizeStart/StopHandler since that is added automatically by the Layout. I tried calling getChildren() on the layout containing the ListGrid - but that just returned the ListGrid and the widgets to the right of the resize bar.

[Isomorphic]

There are a number of different approaches, but the question is, what exactly are you trying to do when resizing is occurring?

[tomhj]

Well... you may recall my other "active" thread on this forum regarding HTMLPane and resizing issues.

If that can't solved, then my Plan B is to go back to using GWT's basic Frame object (which is an iFrame) - which has worked pretty well except the resize bar between my left pane ListGrid and my right pane Frame didn't work so well. As soon as the mouse goes over the Frame/iFrame, mouse move events stop going to the GWT app and go directly to the iFrame. From the Showcase HTMLPane demo, I could see the resize bar worked nicely there. So I was hoping changing from Frame --> HTMLPane would give me nice resizing too. But of course, I'm seeing too much resizing and the low-level DOM manipulations we do across the iFrame break because the HTMLPane seems to destroy and recreate the internal iframe object.

So my Plan B in this post was to be notified when the splitter bar started the drag and then I would add a glass panel img over top of the iframe to keep the mouse events going to my GWT app. I used Firebug and could see from the DOM objects inside the HTMLPane object that that is very close to what HTMLPane is doing to allow resizing next to an iframe.

[curtis]

I too would like to know how to know how to get resize bar events.

I'm displaying an image in the top layout area. The image is sized based on the size of the container it is in. The resizing is done on the server side, so I need the size of the container so I can correctly scale the dimensions and send those dimensions to the server.

How can I get the size of the container when it is being resized using the resize bar?

Thanks

[capertown]

Has there been any movement on this issue of resizing the htmlPane? I have an htmlPane which I can drag to resize making it larger but can not make it smaller because when I drag the mouse over the htmlPane itself, it loses focus.

I used to have this working out-of-box with the border layout in GWT-Ext but have not been able to successfully mimic it in SmartGWT yet.

Thanks.

[Isomorphic]

There is now a "resized" event on all widgets (as of rev 295). As far as dragging an HTMLPane that contains an IFrame, the simple workaround, which may well be what is also going on in GWT-Ext, is to set a thick frame around the HTMLPane so that the mouse is unlikely to go over the iframe.

[capertown]

Thanks for your quick response.

I quickly tested and I don't believe the thick frame is what GWT-Ext uses as a workaround as I can readjust it to any size greater than my minimum size set for the frame (including when I drag my mouse into the Iframe)

In both SmartGWT and GWT-Ext, when you drag the size bar into the IFrame, you can still see the drag-indicator dotted line on the parts of the canvas which are not an IFrame. This means that SmartGWT must still have the handle on the drag, but for some reason doesn't recognize when I let go of my mouse button (inside the frame) to resize where as GWT-Ext can recognize this. Perhaps Sanjiv would remember how this we accomplished in GWT-Ext for the border layout.

Unfortunately setting a thick frame means that the user is limited in resizing of this particular canvas and the thicker I make it, the more space is wasted on the screen. I would like to avoid using this solution if at all possible.

Thanks again for your time. It's much appreciated.

[rakeshw]

I am facing this exact same issue. Do you think this problem is fixed in the latest version of smartgwt(2)? I am using 1.2. Online demo for smartgwt 2.0 that makes use of iframe looks good. I have still not upgraded. Any help would be appreciated.

Thanks

Thanks for your quick response.

I quickly tested and I don't believe the thick frame is what GWT-Ext uses as a workaround as I can readjust it to any size greater than my minimum size set for the frame (including when I drag my mouse into the Iframe)

In both SmartGWT and GWT-Ext, when you drag the size bar into the IFrame, you can still see the drag-indicator dotted line on the parts of the canvas which are not an IFrame. This means that SmartGWT must still have the handle on the drag, but for some reason doesn't recognize when I let go of my mouse button (inside the frame) to resize where as GWT-Ext can recognize this. Perhaps Sanjiv would remember how this we accomplished in GWT-Ext for the border layout.

Unfortunately setting a thick frame means that the user is limited in resizing of this particular canvas and the thicker I make it, the more space is wasted on the screen. I would like to avoid using this solution if at all possible.

Thanks again for your time. It's much appreciated.

[chimpeenuts]

Resurrecting a very old post

I'm not sure if tomhj or anyone who was following this thread is still even around, but I'm encountering the exact same issue.

I have a Google Maps map embedded in an iFrame inside an HTMLPane in a Smart GWT interface. The HTMLPane has resize bars showing but when I try to drag the resize bar INTO the HTMLPane/iFrame, the mouse events are captured, I'm assuming based on the discussion below, by the iFrame and resizing becomes impossible.

I've attached a screen capture of my view so one can see the resize bars on the left and the bottom.

Has ANYONE figured out anyway to handle this situation? It's relatively useless to show the resize bar if users can't actually resize the map view.

Have people used a "glass" image on top of the iframe to continue mouse clicks?

Is resize even feasible?

Is there some magical setting or attribute I can set on the resize bars, the HTMLPane, or my layout in general to tell SmartGWT to not lose mouse events when the mouse enters into the HTMLPane/iFrame?

[chimpeenuts]

Forgot the screen shot. See attached.

[Isomorphic]

In SmartGWT 4.1, a property canvas.useDragMask has been introduced, which you can use if you are building some kind of custom component that contains content that swallows events (iframes, plugins, etc).

This is only needed if, for whatever reason, you cannot base your component on HTMLFlow with contentsType:"page" or on BrowserPlugin (both of which have always automatically handled this).

If you need to build an equivalent feature in 4.0 or earlier, this thread shows how (warning: not especially easy).