Announcement

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

    Infinite Redraws of a window when shown

    We are experiencing some weird and random flashing (hiding/showing) of scroll bars in windows and canvases, as they're being continuously redrawn in a an infinite loop. This happens in certain browsers (IE9, Chrome) when we bring up certain windows in our app . At this point we can't really figure out what's triggering this behavior, and we're stuck on how to address it, and so I am posting this question here, along with a standalone test case hoping for some feedback, and directions on how to best handle these situations. This particular test case I am providing below reproduces this behavior on IE9 only (Chrome and FF work fine). We have many other cases where the window exhibits this behavior on other browsers. So I guess I have two questions:

    1) Is what am experiencing in this test case a bug in SmartGWT?
    2) Given that I am also seeing this behavior in other dialogs that are different than this one (i.e. smaller than the main canvas, but contain multiple forms in a SectionStack, is the issue there related to this one? What's the best way to handle issues like these?

    Problem happens in SmartGWT4.1p, and 5.1d(Build 2015-05-14), and GWT2.6.1

    Any help is greatly appreciated.

    Mike

    Code:
    public class MainEntryPoint implements EntryPoint {
        /** 
         * Creates a new instance of MainEntryPoint
         */
        public MainEntryPoint() {
        }
    
        /** 
         * The entry point method, called automatically by loading a module
         * that declares an implementing class as an entry-point
         */
        public void onModuleLoad() {
            final VLayout layout = new VLayout();
            layout.setWidth("100%");
            layout.setHeight("100%");
    
           
            final TestWindow win = new TestWindow();
            win.setVisible(false);
    
            IButton openBtn = new IButton("Open Window");
            openBtn.addClickHandler(new ClickHandler() {
    
                public void onClick(ClickEvent event) {
                     win.moveTo(layout.getPageLeft(), layout.getPageTop());
                     win.resizeTo(layout.getInnerWidth(), layout.getInnerHeight() );
    
                    win.show();
                }
            });
    
            layout.addResizedHandler(new ResizedHandler() {
    
                public void onResized(ResizedEvent event) {
                    win.resizeTo(layout.getInnerWidth(), layout.getInnerHeight());
                }
            });
    
            HLayout hl1 = new HLayout();
            hl1.setWidth100();
            hl1.setLayoutRightMargin(5);
            hl1.addMember(openBtn);
            layout.addMember(hl1);
    
            layout.draw();
        }
    }

    Code:
    public class TestWindow extends Window {
    
        public TestWindow() {
            setIsModal(true);
    		setShowModalMask(true);
    		setModalMaskOpacity(40);
    
    		setCanDragReposition(false);
    
    		setBorder("0px");
    		setShowEdges(false);
    		setShowHeader(false);
    
    		setShowShadow(true);
    		setShadowSoftness(10);
    		setShadowOffset(5);
    
    		ImgButton closeButton = new ImgButton();
    		closeButton.setSrc("[SKIN]/headerIcons/close.png");
    		closeButton.setSize(16);
    		closeButton.setShowFocused(false);
    		closeButton.setShowDown(false);
    
    		closeButton.addClickHandler(new ClickHandler() {
    
    			public void onClick(ClickEvent event) {
    				hide();
    			}
    		});
    
    		HLayout hl = new HLayout();
    		hl.setWidth100();
    		hl.setAutoHeight();
    		hl.setAlign(Alignment.RIGHT);
    		hl.addMember(closeButton);
    
    		addItem(hl);
        }
    }

    #2
    This kind of thing is typically due to external CSS you've added to the page, or to using the wrong DOCTYPE, so first, eliminate that as a possible cause.

    If you still see the problem, try making your test case minimal. You have a bunch of random settings in the code, surely not all are needed to reproduce the problem. We need to see the minimal settings.

    Comment


      #3
      Hi Isomorphic,

      Thanks very much for the feedback. I have simplified my test case (included below) to make it as minimal as possible. I have also include the corresponding html page. I do not use any external CSS in this test case, The skin that I am using is SmartGWT's out of the box Simplicity skin. As you'll note from the code, I have narrowed down the problem to the setShowShadow() setting. Again the problem only happens on IE9. Chrome and FF work fine.

      Please let me know if you need more info, and
      thanks again for all the help.

      Code:
      public class TestWindow extends Window {
      
          public TestWindow() {
              
      		setShowShadow(true); // Commenting this line out eliminates the flashibg scroll bars on IE9
      	
          }
      }
      Code:
      <!doctype html>
      <!--
      The DOCTYPE declaration above will set the browser's rendering engine into
      "Standards Mode". Replacing this declaration with a "Quirks Mode" doctype may
      lead to some differences in layout.
      -->
      <html>
          <head>
              <meta name='gwt:module' content='test.Main=test.Main'>
              <title>Main</title>
          </head>
          <body>
              <script type="text/javascript"  src="test.Main/test.Main.nocache.js"></script>
          </body>
      </html>

      Comment


        #4
        OK, we'll queue this to be looked at. Fair warning: this is not one of the recommended skins, relates to showing shadows so is cosmetic, you don't have support or even a commercial license, and there are a lot of support requests coming in right now. Be prepared to wait a while.

        Comment


          #5
          We realize this has sat for a while without comment.
          We investigated this and the infinite resize behavior is actually an unavoidable result of the way things can behave when sized to match the viewport size if a shadow is visible.
          Essentially the window sizes to fill the viewport - with its shadow extending slightly beyond that size.
          The extra content causes page level scrollbars to be required.
          This in turn changes the size of the viewport to be smaller -- the window gets resized smaller to fit the new space, the shadow also gets resized smaller -- and since there's not content now overflowing the native browser window, the scrollbars go away (which again increases the available space, etc).

          This is a design problem, not a framework bug. We've added a note to the "showShadow" documentation to make this potential issue clearer and steer people away from this sort of 100% sizing coupled with a shadow.

          Also - the differences in behavior in various browsers you report was a result of how the page's height was being calculated by the SmartClient library and we've modified things to make that consistent. However the way to avoid this problem is to change your application code - for example, avoid the drop-shadow, size the window differently or suppress the browser level scrollbars in your bootstrap file's HTML.

          Regards
          Isomorphic Software

          Comment

          Working...
          X