[out of date post... this deals with MS Atlas CTP... which has been change drastically and is now MS Ajax Extensions]
I have been playing with the Atlas client behaviors for some time. [My fear is that when I finally publish my “big” post it will bomb (but that’s another matter)]. I found a reason to build my own behavior (although I may incorporate it into an Atlas client control as well)
Here’s what I discovered. The Atlas client side Sys.UI.Control class supports a visibility property which shows and hides an element using the visibility style. The problem with this is that the space of the original element is always taken up on the page. I wanted to build a collapsible panel (one that uses the display style instead). I decided a behavior sounded like a good approach since this was new functionality not already covered in the Atlas control library (and I wasn’t building a new control… yet).
Admittedly I started with the clickBehavior’s source code and morphed it into this:
Sys.UI.invisibleBehavior = function() {
Sys.UI.invisibleBehavior.initializeBase(this); // Initialize the base class
var _reappearedHandler;
var _disappearedHandler;
this.reappeared = this.createEvent(); // Create the reappeared event
this.disappeared = this.createEvent(); // Create the disappeared event
// destroy this class
this.dispose = function() {
Sys.UI.invisibleBehavior.callBaseMethod(this, 'dispose');
}
// What needs to happen to start the class
this.initialize = function() {
Sys.UI.invisibleBehavior.callBaseMethod(this, 'initialize');
_reappearedHandler = Function.createDelegate(this, reappearedHandler);
_disappearedHandler = Function.createDelegate(this, disappearedHandler);
}
// Field that holds the value of the reappearDisplayMode property… I could have used an enum here
// (the only 2 valid values are “” and “block”… this is what is used when reappear is called to set the
// display style to something visible)
this._ReappearDisplayMode = "";
// set reappearDisplayMode string
this.set_reappearDisplayMode = function(newDisplayMode)
{
this._ReappearDisplayMode = newDisplayMode;
}
// get reappearDisplayMode string
this.get_reappearDisplayMode = function()
{
return this._ReappearDisplayMode;
}
// method for making the underlying element appear on the screen
this.reappear = function() {
this.control.element.style.display=this._ReappearDisplayMode;
this.reappeared.invoke(this, Sys.EventArgs.Empty);
}
// method for making the underlying element disappear from the screen
this.disappear = function() {
this.control.element.style.display="none";
this.disappeared.invoke(this, Sys.EventArgs.Empty);
}
// single property for determining whether the element is hidden or not
this.get_isHidden = function() {
return (this.control.element.style.display=="none");
}
/*
// experimental set that was just added (untested at the time of this writing… uncomment to try)
this.get_isHidden = function(HideMe) {
if(HideMe)
this.disappear();
else
this.reappear();
}
*/
// Build the metadata
this.getDescriptor = function() {
var td = Sys.UI.invisibleBehavior.callBaseMethod(this, 'getDescriptor');
td.addProperty('reappearDisplayMode', String, true);
td.addProperty('isHidden', Boolean, false);
td.addMethod('disappear');
td.addMethod('reappear');
td.addEvent('disappeared', true);
td.addEvent('reappeared', true);
return td;
}
// reappeared Event handler
function reappearedHandler() {
this.reappeared.invoke(this, Sys.EventArgs.Empty);
}
// disappeared Event handler
function disappearedHandler() {
this.disappeared.invoke(this, Sys.EventArgs.Empty);
}
}
// Set Base class
Sys.UI.invisibleBehavior.registerSealedClass('Sys.UI.invisibleBehavior', Sys.UI.Behavior);
// Set metadata
Sys.TypeDescriptor.addType('script', 'invisibleBehavior', Sys.UI.invisibleBehavior);
Now you are probably wondering how to use it.
var myPanel;
var invisible;
function pageLoad()
{
myPanel = new Sys.UI.Control($(“SomeControl”));
invisible = new Sys.UI.invisibleBehavior();
myPanel.get_behaviors().add(invisible);
invisible.initialize();
myPanel.initialize();
}
function someEvent()
{
if(invisible.get_isHidden())
invisible.reappear();
else
invisible.disappear();
}
[NOTE: I will try the above sample code later.. it matches exactly how I have used it in my own work.. enjoy!]
Technorati Tags: Atals, Ajax, ASP.NET