how to enforce redrawing a Panel (or similar)?

[rozek]

Hello!

How can I enforce that a given Panel is redrawn? I thought, "repaint" would do the trick - but it doesn't.

Concrete example: I'm loading an image myself using loadImage and want it's "container" to be redrawn automatically as soon as the image becomes available.

I already tried setPreferredSize (shouldn't this trigger a new layout?), setPreferredSize + invalidate, repaint, vrp...but nothing seems to work reliably.

Any hint would be greatly appreciated!

Kind regards,

Andreas Rozek

[rozek]

I got it, I got it!

By looking into the source code (we all love open source, don't we?) I realized, that my Image's container still had the size 0x0 (because the image had not been loaded before). Therefore, I just added a "toPreferredSize" after the image had been loaded...et voilà, "repaint" worked!

Thanks for...your patience!

Kind regards,

Andreas Rozek

[barmalei]

The problem browsers load images asynchronously. What can cause the size of the image is 0. There are few ways to avoid the issue:

• Images can be preloaded before you start building UI:

   var staticImage1 = null, staticImage2, ...;
   zebra.ready(function(path, result, image) {         
           staticImage1 = zebra.ui.loadImage("myimage1.jpg");
           staticImage2 = zebra.ui.loadImage("myimage2.jpg");
          ...
       },

       // the code will be called only after images loading in method above
       // is completed 
       function() {
           // build zebra UI
           // here it is guaranteed staticImage1 and staticImage2 are completely loaded
           new zebra.ui.zCanvas().root.properties({
               layout : new zebra.layout.FlowLayout(),
               kids   : [ new zebra.ui.ImagePan(staticImage1) ]
           }); 
           ...
       }
   );

• You can use "zebra.ui.ImagePan". Pass path to image to the component. In this case the component itself will track the image loading to trigger invalidating and repainting:

     //  image panel will care about repainting and validation 
     var myImg = new zebra.ui.ImagePan("myimage.jpg");
     ...

• You can track image loading to initiates an appropriate component repainting in proper time:

    var pan = new zebra.ui.ImagePan();
    ...
    var img = zebra.ui.loadImage("myimage1", function(path, result, img) {
         // image is loaded
         pan.vrp(); // invalidate and repaint component    
    }); 

   // here image still can have zero size since the image loading
   // is not completed 
   pan.setImage(img);
   ...