Applying Effects To CF Ajax Controls Revisited
Posted By : todd sharp Posted At : September 2, 2007 11:07 AM Posted In: Ext, Ajax, ColdFusion
5
Almost a month ago I blogged about using Spry effects on a cfwindow. While it was a cool proof of concept, it left a bit to be desired in my opinion. First off there was no fade out effect - just a fade in. Secondly the thing really didn't work quite as expected in IE - go figure. I've been trying to get some time here and there to revisit the topic and finally have a solution that I'm pretty happy with.
Demo This technique makes use of the Ext FX class - which is a pretty decent package that can be used on pretty much every Ext element (even on standard HTML as I understand it. But I think you'll need to do an Ext.get on the element to magically make it available to Ext. I'm a bit fuzzy on that whole issue, but that's really digressing from the point of this post. So back to the point, the Ext FX class is used to fade the window in and out of view here. There are some other considerations though. First - if the window is modal there is a separate div that needs to be addressed and hidden and shown as appropriate. I'm not sure I did that the "proper" way - I basically hacked into it's CSS and set the visibility manually - but I don't see a method to toggle it's visibility. Secondly the window's shadow is yet another element that needs to be shown/hidden - I've chosen to fade it in and out at the same time as the window which seems to work out. As a quick side note, there are a handful of additional effects that could be applied such as a 'ghost', 'puff', 'slide', etc. For more on those, see the Ext FX docs. On to the code. Just like my last example there are a bunch of comments, but really not much to it. I'll post the code in whole here because I think it's pretty self explanatory with the comments. If there are questions please feel free to post a comment.<cfajaximport />
<html>
<head>
<!--- import the Ext FX library --->
<script src="/CFIDE/scripts/ajax/ext/build/core/Fx-min.js"></script>
<script type="text/javascript">
showWin = function(f){
//show the window
//i'm not really sure why this is necessary
//but it is
//there doesn't appear to be any flicker or
//negative side effects, so we'll go with it
ColdFusion.Window.show('fadeWin')
//get the window object
var winOb = ColdFusion.Window.getWindowObject('fadeWin');
//get the window 'element'
var el = winOb.getEl();
//need to get the windows shadow object separately
var s = winOb.shadow.el;
//remove the existing closeclick listener
winOb.close.un("click", winOb.closeClick, winOb);
//set up a new close listener
winOb.closeClick = hideWin;
//apply the new close listener
winOb.close.on("click", winOb.closeClick, winOb);
//if the window is modal show the modal mask
if(winOb.modal){
winOb.mask.dom.style.visibility = 'visible';
}
//fade in the shadow
s.fadeIn({duration: .5});
//fade in the window
el.fadeIn({duration: .5});
}
hideWin = function(){
//get the window object
var winOb = ColdFusion.Window.getWindowObject('fadeWin');
//get the winodws 'element' object
var el = winOb.getEl();
//get the shadow element
//if we don't get this separately
//wacky things happen
var s = winOb.shadow.el;
//is the window modal?
//if so hide the modal mask
if(winOb.modal){
winOb.mask.dom.style.visibility = 'hidden';
}
//fade out the shadow
s.fadeOut({duration: .5});
//fade out the window itself
el.fadeOut({duration: .5});
}
</script>
</head>
<body>
<cfwindow name="fadeWin" initShow="false" title="windowz" closable="true" draggable="true" modal="true">
<p>Hi, I'm a window.</p>
</cfwindow>
<a href="javascript:showWin();">show window</a>
</body>
</html>
The coolest part of this demo to me is the overriding of the close click so that the fade out effect happens when the window is closed. This could also be called directly from JavaScript if your window is not 'closable'.
Any thoughts/questions/ideas?
<html>
<head>
<!--- import the Ext FX library --->
<script src="/CFIDE/scripts/ajax/ext/build/core/Fx-min.js"></script>
<script type="text/javascript">
showWin = function(f){
//show the window
//i'm not really sure why this is necessary
//but it is
//there doesn't appear to be any flicker or
//negative side effects, so we'll go with it
ColdFusion.Window.show('fadeWin')
//get the window object
var winOb = ColdFusion.Window.getWindowObject('fadeWin');
//get the window 'element'
var el = winOb.getEl();
//need to get the windows shadow object separately
var s = winOb.shadow.el;
//remove the existing closeclick listener
winOb.close.un("click", winOb.closeClick, winOb);
//set up a new close listener
winOb.closeClick = hideWin;
//apply the new close listener
winOb.close.on("click", winOb.closeClick, winOb);
//if the window is modal show the modal mask
if(winOb.modal){
winOb.mask.dom.style.visibility = 'visible';
}
//fade in the shadow
s.fadeIn({duration: .5});
//fade in the window
el.fadeIn({duration: .5});
}
hideWin = function(){
//get the window object
var winOb = ColdFusion.Window.getWindowObject('fadeWin');
//get the winodws 'element' object
var el = winOb.getEl();
//get the shadow element
//if we don't get this separately
//wacky things happen
var s = winOb.shadow.el;
//is the window modal?
//if so hide the modal mask
if(winOb.modal){
winOb.mask.dom.style.visibility = 'hidden';
}
//fade out the shadow
s.fadeOut({duration: .5});
//fade out the window itself
el.fadeOut({duration: .5});
}
</script>
</head>
<body>
<cfwindow name="fadeWin" initShow="false" title="windowz" closable="true" draggable="true" modal="true">
<p>Hi, I'm a window.</p>
</cfwindow>
<a href="javascript:showWin();">show window</a>
</body>
</html>
How would one put cfwindow's name as a variable in to showWin and hideWin functions?
Thank you in advance.
<script type="text/javascript">
showWin = function(f){
consoleDump(f);
//show the window
//i'm not really sure why this is necessary
//but it is
//there doesn't appear to be any flicker or
//negative side effects, so we'll go with it
ColdFusion.Window.show(f)
//get the window object
var winOb = ColdFusion.Window.getWindowObject(f);
//get the window 'element'
var el = winOb.getEl();
//need to get the windows shadow object separately
var s = winOb.shadow.el;
//remove the existing closeclick listener
winOb.close.un("click", winOb.closeClick, winOb);
//set up a new close listener
winOb.closeClick = function(){
hideWin(f);
};
//apply the new close listener
winOb.close.on("click", winOb.closeClick, winOb);
//if the window is modal show the modal mask
if(winOb.modal){
winOb.mask.dom.style.visibility = 'visible';
}
//fade in the shadow
s.fadeIn({duration: .5});
//fade in the window
el.fadeIn({duration: .5});
}
hideWin = function(f){
//get the window object
var winOb = ColdFusion.Window.getWindowObject(f);
//get the winodws 'element' object
var el = winOb.getEl();
//get the shadow element
//if we don't get this separately
//wacky things happen
var s = winOb.shadow.el;
//is the window modal?
//if so hide the modal mask
if(winOb.modal){
winOb.mask.dom.style.visibility = 'hidden';
}
//fade out the shadow
s.fadeOut({duration: .5});
//fade out the window itself
el.fadeOut({duration: .5});
}
</script>
// The link is
<a href="#" onclick="showWin('nameOfWindow'); return false;" class="tracking">open Me</a>