Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    GWT widgets disappear after resizing the window...

    I have a VLayout that embeds a GWT composite widget which is basically a customized flow panel. I add the GWT panel to VLayout using
    Code:
    vlayout.addMember(new WidgetCanvas(new MyGWTPanel()));
    it displays fine but when I resize the window, the GWT panel disappears! It does the same no matter what GWT widget I embed there or no matter whether I wrap the GWT widget inside WidgetCanvas.

    Is this a known bug or is there a workaround?

    Thanks,

    #2
    I've submitted an issue and attached a small test case that exhibits this problem.

    http://code.google.com/p/smartgwt/issues/detail?id=212&colspec=ID%20Stars%20Type%20Status%20Priority%20Milestone%20Owner%20Summary%20Reporter

    Please take a look into this. Thanks!

    Comment


      #3
      Originally posted by JimChill
      I've submitted an issue and attached a small test case that exhibits this problem.

      http://code.google.com/p/smartgwt/issues/detail?id=212&colspec=ID%20Stars%20Type%20Status%20Priority%20Milestone%20Owner%20Summary%20Reporter

      Please take a look into this. Thanks!
      Sorry the link above doesn't work (because of %20...). This is the updated link:
      http://code.google.com/p/smartgwt/issues/detail?id=212

      I may have better luck posting the test case code directly here:
      Application.java (entry point)
      Code:
      package com.smartgwt.experiment.client;
      
      import com.google.gwt.core.client.EntryPoint;
      import com.google.gwt.user.client.ui.RootPanel;
      
      /**
       * Entry point classes define <code>onModuleLoad()</code>.
       */
      public class Application implements EntryPoint {
      
      	/**
      	 * This is the entry point method.
      	 */
      	public void onModuleLoad() {
      		RootPanel.get().add(new MainLayout());
      	}
      }
      GwtBar.java (the GWT widget)
      Code:
      package com.smartgwt.experiment.client;
      
      import com.google.gwt.user.client.ui.Composite;
      import com.google.gwt.user.client.ui.FlowPanel;
      import com.google.gwt.user.client.ui.Hyperlink;
      
      public class GwtBar extends Composite {
      
      	FlowPanel fp = new FlowPanel();
      	
      	public GwtBar() {
      		initWidget(fp);
      		
      		fp.add(new Hyperlink("Home", "home"));
      		fp.add(new Hyperlink("Mail", "mail"));
      		fp.add(new Hyperlink("Video", "video"));
      		
      		fp.setWidth("100%");
      		
      	}
      	
      }
      SmartContainer.java (a SmartGWT widget)
      Code:
      package com.smartgwt.experiment.client;
      
      import com.smartgwt.client.widgets.tab.Tab;
      import com.smartgwt.client.widgets.tab.TabSet;
      
      public class SmartContainer extends TabSet {
      
      	public SmartContainer() {
      		
      	}
      	
      	@Override
      	protected void onInit() {
      		addTab(new Tab("Assigned"));
      		addTab(new Tab("Owned"));
      		addTab(new Tab("Finished"));
      	}
      }
      MainLayout.java (The main layout in SmartGWT)
      Code:
      package com.smartgwt.experiment.client;
      
      import com.google.gwt.user.client.ui.Widget;
      import com.smartgwt.client.widgets.WidgetCanvas;
      import com.smartgwt.client.widgets.layout.VLayout;
      
      public class MainLayout extends VLayout {
      
      	private WidgetCanvas wrapInCanvas(Widget w) {
      		WidgetCanvas retval = new WidgetCanvas(w);
      		retval.setWidth100();
      		return retval;
      	}
      	
      	public MainLayout() {
      		
      		addMember(wrapInCanvas(new GwtBar()));
      		addMember(new SmartContainer());
      		
      		setWidth100();
      		setHeight100();
      	}
      }
      And just to reiterate what the problem is: the GWT widgets disappear when resizing the window. This problem exhibits itself in either the hosted mode or the web mode.

      Thanks,

      Comment


        #4
        Has anyone on the dev team tried my test case yet? If I was doing something wrong in the code (i.e., not the right way to mix GWT with SmartGWT widgets) I'd appreciate someone could point it out. Otherwise, I'm sorry to say it's an issue with the library.

        Thanks,

        Comment


          #5
          OK, this will be the last time I shout for help on this issue...I experimented more on it, and found more bizarre behaviours:

          I changed the way to add the MainLayout to the window. Instead of calling
          Code:
          RootPanel.get().add()
          , I use
          Code:
          new MainLayout().draw()
          directly. This time, the resizing doesn't kick out my GWT widgets. However, (as always), when I have more elements in my GWT panel, if I resize vertically, it still works, but my GWT widgets disappear once again when I resize horizontally...

          Very frustrated...Could anyone please give a hint or two as to why this might have been this way?

          Thanks.

          Comment


            #6
            Bump

            I'd like to 'bump' this issue, as I've just encountered the same behavior. This seems like a very basic interop issue with GWT that either needs some workaround-feedback from the SmartGWT guys, or a fix.

            I've boiled it down to the simplest possible test-case I could think of.

            1) Create a Canvas
            2) Insert a GWT Label
            3) Observe that the Label displays
            4) Resize the window, observe that the GWT component disappears.

            Using the DOM inspector, I can see that after the resize, there is indeed no more Element in the DOM associated with the GWT Label. It doesn't matter whether the GWT component is inserted into a Canvas or Layout (HLayout, VLayout, etc.).

            Here's the testcase:

            Code:
            package com.test.client;
            
            import com.google.gwt.core.client.EntryPoint;
            import com.google.gwt.user.client.ui.RootPanel;
            import com.smartgwt.client.widgets.Canvas;
            import com.smartgwt.client.widgets.Label;
            
            /**
             * Entry point classes define <code>onModuleLoad()</code>.
             */
            public class Test implements EntryPoint
            {
            	public void onModuleLoad()
            	{
            		Canvas canvas = new Canvas();
            		canvas.setWidth100();
            		canvas.setHeight100();
            		canvas.setBackgroundColor("gray");
            
            		Label label = new Label("SmartGWT Test");
            		canvas.addChild(label);
            
            		com.google.gwt.user.client.ui.Label label2 = new com.google.gwt.user.client.ui.Label("GWT Label");
            		canvas.addChild(label2);
            
            		RootPanel.get().add(canvas);
            	}
            }
            In the test-case, I create two labels, one SmartGWT and one pure GWT. They both appear at first in the browser (hosted or otherwise), but as soon as a resize occurs, the GWT component will disappear.

            I've tried with other GWT components, and tried wrapping the GWT Label in a WidgetCanvas (not necessary), but in all cases the GWT object disappears. I have also tried layouts (VLayout) rather than Canvas as the container, but it doesn't matter, the behavior is the same.

            GWT version is 1.6.4, SmartClient/GWT version from the console is "SmartClient Version: 7.0beta4 (built 2009-02-24)".

            Update: Even the "showcase" showing "GWT Integration" is broken. It only works because the canvas in which the GWT components are placed is fixed in size.

            Brett
            Last edited by brettw; 12 May 2009, 06:43.

            Comment


              #7
              SmartClient widgets will redraw themselves on resize (read: destroy and rebuild interior content) unless you set redrawOnResize:false. Try setting this on anything containing a GWT widget.

              Comment


                #8
                Unfortunately...

                I tried calling setRedrawOnResize(false) on the Canvas object in the test-case presented above, as per your suggestion. Unfortunately, the result is the same. The GWT Label disappears when a resize of the window is performed.

                Just for good measure, I tried wrapping the GWT Label with a WidgetCanvas and calling setRedrawOnResize(false) on that, as well. Not surprisingly, it had no effect -- because Canvas.add(Widget) automatically wraps a GWT Widget with a WidgetCanvas anyway.

                Additionally, if you look at the test-case, you will see that Canvas is constructed using the default constructor, which sets redraw on resize to false already.

                But thanks for the speedy reply. What's next?

                Brett

                Comment


                  #9
                  You can enable the "redraws" log in the Developer Console to see if there's some other reason it's redrawing (at debug level, you'll get stack traces indicating where the redraw is coming from). You can also use the "Inspect" button in the Developer Console to see if the DOM for the GWT label is still there.

                  Bear in mind, as has been stated elsewhere, there are limits to the maximum achievable interoperability between GWT default widgets and SmartGWT, and in general, between any two widget sets.

                  It definitely does not make sense to pursue freely intermixing the two. It only makes sense to try intermixing for certain cases of upgrading GWT applications, or adding non-trivial components SmartGWT doesn't have as a built-in (say, ofc charts).

                  Comment


                    #10
                    Redraw

                    I get this in the log:

                    03:19:22.622:TMR9:INFO:resize:isc_OID_0:resize of drawn component: new width/height: 1198,750, old width/height: 1199,750, delta width/height: -1,0 [Stack trace not supported in this browser]
                    03:19:22.631:RDQ1:INFO:sizing:isc_OID_1:Specified size: 100x100, drawn scroll size: 100x100, border: 0x0, margin: 0x0, old size: 100x100, reason: redraw
                    03:19:22.632:RDQ1:INFO:sizing:isc_OID_2:Specified size: 100x100, drawn scroll size: 0x100, border: 0x0, margin: 0x0, old size: 55x100, reason: redraw
                    03:19:22.633:RDQ1:INFO:sizing:isc_OID_0:Specified size: 1198x750, drawn scroll size: 100x100, border: 0x0, margin: 0x0, old size: 100x100, reason: redraw
                    03:19:22.661:TMR3:INFO:resize:isc_OID_0:resize of drawn component: new width/height: 1198,749, old width/height: 1198,750, delta width/height: 0,-1 [Stack trace not supported in this browser]
                    03:19:22.665:RDQ5:INFO:sizing:isc_OID_1:Specified size: 100x100, drawn scroll size: 100x100, border: 0x0, margin: 0x0, old size: 100x100, reason: redraw
                    03:19:22.665:RDQ5:INFO:sizing:isc_OID_2:Specified size: 100x100, drawn scroll size: 0x100, border: 0x0, margin: 0x0, old size: 0x100, reason: redraw
                    03:19:22.665:RDQ5:INFO:sizing:isc_OID_0:Specified size: 1198x749, drawn scroll size: 100x100, border: 0x0, margin: 0x0, old size: 100x100, reason: redraw
                    03:19:22.712:TMR7:INFO:resize:isc_OID_0:resize of drawn component: new width/height: 1197,749, old width/height: 1198,749, delta width/height: -1,0 [Stack trace not supported in this browser]
                    03:19:22.716:RDQ9:INFO:sizing:isc_OID_1:Specified size: 100x100, drawn scroll size: 100x100, border: 0x0, margin: 0x0, old size: 100x100, reason: redraw
                    03:19:22.718:RDQ9:INFO:sizing:isc_OID_2:Specified size: 100x100, drawn scroll size: 0x100, border: 0x0, margin: 0x0, old size: 0x100, reason: redraw
                    03:19:22.718:RDQ9:INFO:sizing:isc_OID_0:Specified size: 1197x749, drawn scroll size: 100x100, border: 0x0, margin: 0x0, old size: 100x100, reason: redraw
                    03:19:22.763:TMR1:INFO:resize:isc_OID_0:resize of drawn component: new width/height: 1197,747, old width/height: 1197,749, delta width/height: 0,-2 [Stack trace not supported in this browser]
                    03:19:22.768:RDQ3:INFO:sizing:isc_OID_1:Specified size: 100x100, drawn scroll size: 100x100, border: 0x0, margin: 0x0, old size: 100x100, reason: redraw
                    03:19:22.769:RDQ3:INFO:sizing:isc_OID_2:Specified size: 100x100, drawn scroll size: 0x100, border: 0x0, margin: 0x0, old size: 0x100, reason: redraw
                    03:19:22.769:RDQ3:INFO:sizing:isc_OID_0:Specified size: 1197x747, drawn scroll size: 100x100, border: 0x0, margin: 0x0, old size: 100x100, reason: redraw
                    03:19:22.811:TMR5:INFO:resize:isc_OID_0:resize of drawn component: new width/height: 1196,747, old width/height: 1197,747, delta width/height: -1,0 [Stack trace not supported in this browser]
                    03:19:22.818:RDQ7:INFO:sizing:isc_OID_1:Specified size: 100x100, drawn scroll size: 100x100, border: 0x0, margin: 0x0, old size: 100x100, reason: redraw
                    03:19:22.818:RDQ7:INFO:sizing:isc_OID_2:Specified size: 100x100, drawn scroll size: 0x100, border: 0x0, margin: 0x0, old size: 0x100, reason: redraw
                    03:19:22.819:RDQ7:INFO:sizing:isc_OID_0:Specified size: 1196x747, drawn scroll size: 100x100, border: 0x0, margin: 0x0, old size: 100x100, reason: redraw

                    isc_OID_0 is Canvas (in the test-case), and has setRedrawOnResize() set to false, so I'm not sure why it's logging a resize here (other than maybe it doesn't have a choice but to resize given that it is a child of the RootPanel. I dunno the internals of SmartGWT, but I'm learning more of them than I wanted to know in pursuit of this issue. isc_OID_1 is the SmartGWT Label, and isc_OID_2 is the pure GWT Label. The trouble is, the GWT <div> containing the actual text of the label (that resides *inside* isc_OID_2) is gone after the resize. The SmartGWT "wrapper" apparently remains.

                    I'd love to not be trying to use a GWT component -- what I really need is an Image not a Label. I just used Label in the test-case because it's simple and demonstrates the same problem. As I said, what I really need is an Image, but the SmartGWT Img class does not provide an onLoad() and onError() handler like the GWT one does, and I need that. If you can show me how to accomplish that, I'll be largely satisfied. But it seems that SmartGWT is written on top of GWT, interoperability should be a goal, not a happy coincidence. We're not talking about two completely unrelated Ajax frameworks here -- I'm not mixing YUI and SmartGWT -- I'm mixing *GWT* and Smart*GWT*.

                    Brett

                    p.s. I don't know why I'm not getting stack traces, I've tried with both Firefox and Safari. I'm on Mac OS X.
                    Last edited by brettw; 12 May 2009, 10:25.

                    Comment


                      #11
                      We'll look into this.

                      Comment


                        #12
                        In Firefox you'll see the traces in the Firebug console, in IE you'll see them right in the Developer Console.

                        Wasn't clear whether you actually enabled the "redraws" log category - that was the key one to understand why the content would be disappearing.

                        An RPCRequest to the URL of the image would give you the opportunity to check errors as well as get a callback when it's loaded (hence cached). This approach also has advantages with respect to auto-sizing (the image is guaranteed loaded, so it's dimensions are known) as well as what the user sees, eg, you know for sure the image exists and is cached before rendering an image that may show up broken.

                        On interop, not sure if you read the linked post. The interop issue has nothing to do with GWT-as-such but with interop between any two Ajax widget libraries (those provided by Google with GWT, and the SmartGWT ones).

                        Interop for GWT-as-such is great, eg, you can use Java's powerful DateFormat classes for rendering dates DateFormat.

                        Interop between GWT's built-in widgets and SmartGWT widgets runs into the same set of problems you would have if you, eg, tried to combine Ext and Dojo widgets, to take a random example. It can be made to work well for limited case and to limp along in others, but there is not, at present, even a proposed solution for how two Ajax widget libraries can interoperate in tricky areas like dynamic tabbing order, pixel perfect flexible layout, layered modality and zIndex management.

                        Comment


                          #13
                          I've checked in a fix that should resolve this. Please get the latest build from SVN, or nightly build and try running your tests.

                          Sanjiv

                          Comment

                          Working...
                          X