I have implemented a similar thing in my Qx 0.5.x application.
My app has lots of windows, each with toolbars and buttons etc. which need to be "disabled" while a window is either busy (awaiting a response from the server) or blurred (not in focus).
Here is some code pasted from one of my QxWindow subclasses (you will need to clean out some of my non-generic code, but it is a good place to start)
Add this to your QxWindow subclass:
// A String to identify blocker divs - also appears in some Selenium tests.
QxLiveWindow.BLOCKER_ID = "blocker";
/*
* A flag that indicates whether or not this window is covered by an invisible
* blocker div that prevents the user from clicking any of its widgets.
*
* Note that isBlocked is distinct from isBusy. All windows that are not in
* focus are blocked, thou they may or may not be busy.
*/
QxLiveWindow.addProperty({ name : "isBlocked", type : QxConst.TYPEOF_BOOLEAN, defaultValue : false});
/*
A private method which adds a blocker div, preventing widgets within
this window from being clicked.
*/
proto._addBlocker = function()
{
if (!this.getIsBlocked()) {
// Reuse a blocker instance if available
var blocker= DefaultQxPool.get(QxLiveWindow.BLOCKER_ID);
if (! blocker) {
blocker = new QxTerminator();
};
// Position our blocker instance over this window
with (blocker) {
setTop(this.getTop() );
setLeft(this.getLeft() );
setHeight(this.getHeight());
setWidth(this.getWidth());
// Set the z-index to above this window
setZIndex((this.getZIndex() + 1));
setBackgroundColor("gray");
setOpacity(0.2);
// this only applies when busy!
//setCursor(QxConst.CURSOR_WAIT);
// Insert an arbitary html attribute into the DOM so that the
// automated tests can determine when the blocker is present.
setHtmlAttribute(QxLiveWindow.BLOCKER_ID, "true");
}
// Append blocker to the DOM
DOC.add(blocker);
this.setIsBlocked(true);
// Add a reference to our blocker as UserData so that we can retrieve it
this.setUserData(QxLiveWindow.BLOCKER_ID, blocker);
// keep our blocker's z-index in synch with this window
this.addEventListener("changeZIndex", synchBlockerZIndex, null);
// listen for clicks on the blocker
blocker.addEventListener(QxConst.EVENT_TYPE_CLICK, function (e) {
// block the event from going anywhere else
e.setPropagationStopped(true);
e.setBubbles(false);
// focus this window
this.focus();
}, this);
}
}
/*
A private method which removes the blocker div.
*/
proto._removeBlocker = function()
{
if ( this.getIsBlocked() ) {
// uncover window
var blocker = this.getUserData(QxLiveWindow.BLOCKER_ID);
this.removeEventListener("changeZIndex", synchBlockerZIndex, null);
blocker.removeHtmlAttribute(QxLiveWindow.BLOCKER_ID);
DOC.remove(blocker);
this.setIsBlocked(false);
// Release the blocker to the pool for use next time.
DefaultQxPool.release(blocker, QxLiveWindow.BLOCKER_ID);
}
}
I am not sure if this is the same in Qx 0.6, but in Qx 0.5.x you will also need to override QxWindow's zindex allocation so that you can insert a blocker between QxWindows. By default Qx 0.5.x makes window instances 1 z-index apart, but we need a gap of at least 1 z-index, so:
QxWindow.prototype._sendTo = function()
{
var vAll = QxUtil.convertObjectValuesToArray(QxWindowManager.getAll()).sort(QxCompare.byZIndex);
var vLength = vAll.length;
var vIndex = this._minZIndex;
for (var i=0; i<vLength; i++) {
vIndex = vIndex + 2;
vAll[i].setZIndex(vIndex);
};
};
Finally, all window instances need access to this z-index synch method so that when you change windows, their "blockers" follow them around. Ideally you would put this method on a window manager class of some sort - but if you don't have one it will work ok in the global scope:
synchBlockerZIndex = function (e)
{
var window = e.getTarget();
if (window) {
var blocker = window.getUserData(QxLiveWindow.BLOCKER_ID);
if (blocker) {
// window.debug("setting blocker z-index=" + (window.getZIndex() + 1));
blocker.setZIndex((window.getZIndex() + 1));
}
}
}
Hope that is useful,
Simon
dperez <[EMAIL PROTECTED]> wrote:
That's a good idea :-)
Maybe this could be added to qooxdoo.
Jim Hunter-2 wrote:
>
> I have not tried this yet, but you could simply try to overlay a panel on
> top of everything before you create the window. Give the panel a light
> gray
> color and set it's transparency to 80%-90%. This should make the other
> controls unreachable and give them a grayed out look without having to
> touch
> the events of any of them or the appearance.
>
> Jim
>
>
> On 9/14/06, Tomek Loboda <[EMAIL PROTECTED]> wrote:
>>
>> I like the idea. Helps the user focus on THE window. Don't know how to
>> achieve that though :-)
>>
>> Best,
>> --Tomek
>>
>>
>> dperez wrote:
>> > Hi,
>> >
>> > I like the behaviour of modal windows in this ZK demo:
>> > http://www.potix.com/zkdemo/userguide/
>> >
>> > All the controls are darkened, when a modal window is opened, to
>> emphasize
>> > that they unavailable.
>> >
>> > Is it easy to achieve something similar with qooxdoo?
>> > Maybe, playing with appearances.
>> >
>> > Regards,
>> > David
>>
>>
>> -------------------------------------------------------------------------
>> Using Tomcat but need to do more? Need to support web services, security?
>> Get stuff done quickly with pre-integrated technology to make your job
>> easier
>> Download IBM WebSphere Application Server v.1.0.1 based on Apache
>> Geronimo
>> http://sel.as-us.falkag.net/sel?cmd=lnk&kid=120709&bid=263057&dat=121642
>> _______________________________________________
>> qooxdoo-devel mailing list
>> [email protected]
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>
>
> -------------------------------------------------------------------------
> Using Tomcat but need to do more? Need to support web services, security?
> Get stuff done quickly with pre-integrated technology to make your job
> easier
> Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo
> http://sel.as-us.falkag.net/sel?cmd=lnk&kid=120709&bid=263057&dat=121642
> _______________________________________________
> qooxdoo-devel mailing list
> [email protected]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
--
View this message in context: http://www.nabble.com/Modal-window-behaviour-in-ZK-tf2270889.html#a6319542
Sent from the qooxdoo-devel forum at Nabble.com.
-------------------------------------------------------------------------
Using Tomcat but need to do more? Need to support web services, security?
Get stuff done quickly with pre-integrated technology to make your job easier
Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo
http://sel.as-us.falkag.net/sel?cmd=lnk&kid=120709&bid=263057&dat=121642
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Do you Yahoo!?
Listen to your personal radio station on Yahoo!7 Music
------------------------------------------------------------------------- Using Tomcat but need to do more? Need to support web services, security? Get stuff done quickly with pre-integrated technology to make your job easier Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo http://sel.as-us.falkag.net/sel?cmd=lnk&kid=120709&bid=263057&dat=121642
_______________________________________________ qooxdoo-devel mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
