[WARNING! This is an archived post and as such there may be things broken/missing here.. you have been warned.]
[out of date post... this deals with MS Atlas CTP... which has been change drastically and is now MS Ajax Extensions]
I’m working on a fairly large post on Behaviors (right now I’m still working on it). A side result of this large post is that I’ve learned to attach Atlas behaviors to elements via script (most of the examples use MS’ new declarative method which seems to be a cool method waiting for a tool to make it easier).
So, here’s the code to apply the FloatingBehavior (which makes an element draggable) to an element and the PopupBehavior (creates inline dialogs using an element). In a nutshell we’re creating a movable popup dialog. So here’s the complete code for those who want to jump in and tinker right away.
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<divstyle="width:800px; height:600px; border:solid 1px black">
<spanid="MySpan">Just some text to use as a placeholder</span><br/>
<divid="divPopup"style="width:100px; border: inset 1px black; background-color:White;">
<div id="divTitleBar" style="width:100px;background-color:Blue; color:White">My Popup</div>
This is a popup<br/>
b = MyPopup.get_behaviors()
Here’s the major points… We load the “AtlasUIDragDrop” and the “AtlasUIGlitz” libraries (although I’m not sure UIGlitz is needed for this example… I think it’s a code leftover)
Believe it or not the first div (which looks like this: <divstyle="width:800px; height:600px; border:solid 1px black">) is extremely important. It creates our surface for dragging, because you can’t drag the dialog off the page. This was one of the first mistakes I made. I got my element to drag, but it wouldn’t stay anywhere (basically you can move the element anywhere on the defined page. If the element itself is the only thing on the page you’ll be able to drag the element, but it won’t stay where you drop it.
Next, we create a span (label) and a button that will be used to launch our dialog. I use the html button tag here because I think it’s cool (you could easily swap it out with a standard input button if you like).
After this we define our divPopup which will be our popup dialog. Notice that if we want this to look dialog like we have to create the look and feel ourselves (since I’m a bit graphically-challenged I created the minimal number of items: a title bar, a line of text within the element and a button to close).
The only other thing to note here is that the button’s click event manipulates the behavior (and not the element itself).
The script is not overly complex, but here’s what it does. It defines globally usable variables for the Popup Behavior (PopupBehavr), the Floating Behavior (FloatBehavr), A label control (MyLabel… which incidently is never really used… I used it in development for debug messages), the popup dialog (MyPopup).
All Atlas pages will automatically run this “event” and it is effectively a replacement for an onLoad event (except you don’t have to hook up the handler). So here’s a code break down of what’s happening.
MyLabel = new Sys.UI.Label($("MySpan"));
Our pageLoad method instantiatates the MyLabel label control with this code. In this example this class remains unused. When doing my research I have a standard page that I use, and this element is always there in case I want to give myself some feedback on what is happening without resorting to alert boxes everywhere.
MyPopup = new Sys.UI.Control($("divPopup"));
Next, we initialize the MyPopup as a control. In case you don’t know the $("divPopup") is an Atlas construct found in a lot of Ajax libraries. It equates to document.getElementById(“divPopup”).
var b = MyPopup.get_behaviors()
Set a variable for the Popup’s behaviors
PopupBehavr = new Sys.UI.PopupBehavior();
FloatBehavr = new Sys.UI.FloatingBehavior();
Create the PopupBehavior and FloatingBehavior classes. Note that with FloatingBehavior we also set any necessary properties. Handle is used to identify to the behavior which element it will be allowing to move.
Finally, we add the two created behaviors to the behaviors of the popup and we initialize each behavior. That’s it.
[tags: Atlas, ASP.NET, Ajax]