HTMLPane and reload issues

[tomhj]

I have an app which I'm converting to SmartGWT from MyGWT/GXT. It uses an HTMLPane in "page" mode to show external HTML. The URL loaded into the HTMLPane points back to my backend server (the same one where my GWT webapp) is loaded from -- this means the HTML file loaded into the iFrame has the same origin as the GWT app itself. This enables me to write custom javascript to reach into the iFrame DOM and manipulate it while avoiding issues with the browser's Same-Origin security policy.

All this is working fine - except that HTMLPane is blowing away the iframe and reloading it whenever the browser window is resized or the splitter bar separating the HTMLPane from some stuff in a left-side pane is moved.

Why is HTMLPane doing that? Is there some way to avoid it?

HTMLPane has some real advantages - including smooth handling of the resizebar to adjust the size of the iframe. But this reloading issue is a real pain.

[Isomorphic]

Hi Tom,

It sounds like the HTMLPane is redrawing, which it normally would not do.

In the Developer Console, if you enable the "redraws" log category in the Developer Console, do you see this HTMLPane redrawing during the resize? If so, what reason is reported (components report their reason for redrawing if this log category is enabled).

Note, in IE, you can also use the "Trace Method" functionality of the Watch Tab to get a stack trace when redraw is called on that widget.

[tomhj]

I think you mean to set the logging preferences under the Logging Preferences -> More... then changing the "redraws" and "redrawTrace" values to "Debug". Then I moved the resize bar between my left pane ListGrid and my right pane VLayout with a ToolStrip on top and the HTMLPane.

Here is what I saw in the Log Messages window:

22:15:15.170:MUP9:INFO:redraws:isc_OID_41_body:Scheduling redraw (setColumnWidths)
    Canvas.$q9(_1=>"setColumnWidths", _2=>undef)
    Canvas.markForRedraw(_1=>"setColumnWidths")
    GridRenderer.setColumnWidths(_1=>Array[2])
    ListGrid.setBodyFieldWidths(_1=>Array[2])
    ListGrid.$45m(_1=>"resized", _2=>102, _3=>0)
    ListGrid.layoutChildren(_1=>"resized", _2=>102, _3=>0)
    Canvas.$t1()
    Canvas.resizeBy(_1=>102, _2=>0, _3=>undef, _4=>undef)
    Canvas.resizeTo(_1=>392, _2=>undef, _3=>undef, _4=>undef)
        "if(isc.$cv)arguments.$cw=this;if(_1==null&&_2==null)return false;var _5=this.getDelta(this.$o6,_1,this.getWidth()),_6=this.getDelta(this.$o5,_2,this.getHeight());return this.resizeBy(_5,_6,_3,_4)"
    Canvas.setWidth(_1=>392)
    Canvas.finishTargetResize(_1=>[ListGrid ID:isc_OID_41], _2=>false, _3=>false)
        "if(_3)return;_2?_1.setHeight(this.$ug):_1.setWidth(this.$ug)"
    Splitbar.dragStop(Obj, undef)
    EventHandler.bubbleEvent(_1=>[Snapbar ID:isc_Snapbar_49], _2=>"dragStop", _3=>undef, _4=>undef)
    EventHandler.handleEvent(_1=>[Snapbar ID:isc_Snapbar_49], _2=>"dragStop", _3=>undef)
    EventHandler.handleDragStop()
    EventHandler.$k5(_1=>Obj{type:mouseup}, _2=>undef)
    EventHandler.handleMouseUp(_1=>Obj{type:mouseup}, _2=>undef)
    EventHandler.dispatch(_1=>EventHandler.handleMouseUp(), _2=>Obj{type:mouseup})
    anonymous(event=>undef)
        "var returnVal=arguments.callee.$ch.isc.EH.dispatch(arguments.callee.$j2,event);return returnVal;"

22:15:15.170:MUP9:INFO:redraws:isc_OID_41_body:Immediate redraw of dirty widget (no reason provided)
    Canvas.$q9(_1=>undef, _2=>false)
    Canvas.redraw(_1=>undef, undef, undef, undef, undef, undef, undef, undef)
    Class.invokeSuper(_1=>[Class GridRenderer], _2=>"redraw", _3=>undef, _4=>undef, _5=>undef, _6=>undef, _7=>undef, _8=>undef, _9=>undef, _10=>undef)
    GridRenderer.redraw(_1=>undef, _2=>undef, _3=>undef, _4=>undef, undef, undef, undef, undef)
    ** recursed on Class.invokeSuper

22:15:15.685:RDQ5:DEBUG:redraws:clearRedrawQueue: 0 redraws (1 items), 0ms

From the Watch tab, here is my object layout:

ID                        Class            Position         Drawn Size
----------------------    -------------    -----------      ----------------
isc_OID_5                 HLayout          0,0              952w x 462h
   isc_Snapbar_49         Snapbar          392,0            13w x 462h
   isc_OID_41             ListGrid         0,0              392w x 462h
       isc_OID_41_body    GridBody         1,22             390w x 439h
       isc_ImgButton_47   ImgButton        1,1              332w x 21h
       isc_ImgButton_48   ImgButton        333,1            40w x 21h
   isc_OID_6              VLayout          405,0            547w x 462h
       isc_OID_42         HTMLPane         405,20           388w x 442h
       isc_OID_31         ToolStrip        405,0            547w x 20h
           7 toolstrip items not relevant to this problem so not included here.

If I understand those log statements, they indicate the grid was resized - which makes perfect sense. But I don't see any references to the isc_OID_6 VLayout or the isc_OID_42 HTMLPane redrawing.

thanks,
Tom

[tomhj]

Incidentally, using Firebug I can see that the SmartGWT showcase "Load HTML Pages (IFrame)" example does a reload of the page when the resize bar between the left-side nav pane and the right size example tab pane with "Load HTML pages (IFrame)" tab selected is moved.

Perhaps it is problem with the SmartGWT wrapper for SmartClient?

[tomhj]

I just tried the SmartClient (non-GWT) Showcase Demo selecting the Basics -> HTML -> Load HTML Pages.

Under Firefox I do not see the same iframe reload problem. So it does seem to be a problem particular to the SmartGWT wrapper.

And another possible clue, my code was calling HTMLPane.getElement() for a while - and I noticed that caused the iframe to be destroyed and reloaded. I took out the getElement() call - but the behavior seems very similar. Is it possible that the resizebar drag is causing getElement() to be called thus causing the iframe destroy and reload?

[Isomorphic]

Very interesting Tom, thanks for digging into it this far. One more question - are you seeing any clear()s when the IFrame is mysteriously recreated?

[bwalsh]

All this is working fine - except that HTMLPane is blowing away the iframe and reloading it whenever the browser window is resized or the splitter bar separating the HTMLPane from some stuff in a left-side pane is moved.

This is very similar to a problem I'm having w/ Google maps. The google map is blown away whenever I resize the browser .

see http://forums.smartclient.com/showthread.php?t=3366

[sjivan]

Tom, bwalsh : can you open separate issues for this? This might need some investigation as at the top of my head I can't think of anything special that SmartGWT is doing. If you can attach a stand alone test to the issue that would make things even easier to troubleshoot.

Thanks,
Sanjiv

[tomhj]

I just created issue #67 with the HTMLPane/iframe issue.

thanks,
Tom

[smartgwt.dev]

For the benefit of users browsing this forum, this issue (#67) was fixed way back in Jan 2008.

[pradeepknarne]

I faced similar kind of issue, I've got it fixed using the below custom implementation. I hope you also get it fixed using the same.

class CustomHTMLPane extends HTMLPane
    {
        protected native void onInit()/*-{
            this.@CustomHTMLPane::onInitialize()();
            
            // Handle redraw case
            var self = this.@com.smartgwt.client.widgets.BaseWidget::getOrCreateJsObj()();
            self.redraw = function() {
            }
            
        }-*/;
        
        protected void onInitialize()
        {
            super.onInit();
        }
    }

[savamilovanovic@yahoo.com]

pradeepknarne, thank you very much! This helped me even today, 3 and a half years after your post!

[mhoesche]

Yes, also 1000 thanks from my side, it did finally help me to solve an almost 1 year old problem that we treated as known bug bug in our software so far.
Good that I tried to search again - probably the last times I searched I did not find the right search key-words...