integrating qooxdoo effects in qooxdoo window

Question

what's the best way of doing it? for example:

I want the window to fade (qx.fx.effect.core.Fade(DOM)) when the user clics on the minimize button. So I did this in the window class:

this.addListener("appear", function() {
    this.minimizeEffect = /*fade effect*/;
},this);
this.addListener("beforeMinimize", function() {
    this.minimizeEffect.start();/*delay(1000);*/
},this);

I need to do the delay because (I think) otherwise the window minimizes when it is just starting to fade! Any solution? I've even tryed it with the finish event of the effect with no luck. Thank you!

Edit: my delay() function was wrong.. so it won't "compile", and that makes it all more confusing to me:

function delay(ms){//this works (it fades ok)
    var date = new Date();
    var curDate = new Date();
    while(curDate-date < milis)//this is wrong, milis don't exist
        curDate = new Date();
}

function delay(ms){//it donesn't work (no fade)
    var date = new Date();
    var curDate = new Date();
    while(curDate-date < ms)//this is "good"
        curDate = new Date();
}

score 4 · Accepted Answer · answered Jun 17 '11 at 19:27

I would suggest the following

var win = new qx.ui.window.Window("First Window").set({
  width: 300,
  height: 300,
  opacity: 0,
  showMinimize: false
});

var hideEffect;

win.addListenerOnce('appear',function(){
  var el = win.getContainerElement().getDomElement();
  var showEffect = new qx.fx.effect.core.Fade(el).set({
    from: 0, to: 1 });
  hideEffect = new qx.fx.effect.core.Fade(el).set({
    from: 1, to: 0 });
  hideEffect.addListener('finish',function(e){
    win.setOpacity(0);
    win.close();
  });
  showEffect.addListener('finish',function(){
    win.setOpacity(1);
  });
  showEffect.addListenerOnce('finish',function(){
    win.addListener('appear',function(){
      showEffect.start();
    });
  });
  showEffect.start();  
});


win.addListener('beforeClose',function(){
  if (win.getOpacity() == 1){
    hideEffect.start(); 
    e.stopPropagation();
  }
});

this.getRoot().add(win, {left:10, top:30});
var openBtn = new qx.ui.form.Button('Open Window');
openBtn.addListener('execute',function(){win.open();});
this.getRoot().add(openBtn, {left:10, top:10});

Run this in the qooxdoo playground with http://tinyurl.com/3v72sk3

integrating qooxdoo effects in qooxdoo window

1 Answers1