Atlas talks at MIX and my new project

  • Article

Shanku (Atlas/ASP.NET PUM) just finished giving his Atlas talk where he went through the major parts of Atlas and did a bunch of demos.

He also demo'd some of the stuff that my team has been working on.  I've been hinting about exactly what it is, and it's been now (cryptically) mentioned by Shanku and Scott in a few places.

I'm on a mission to make developing Atlas controls and extenders as easy as possible, as soon as possible.  I spent a few weeks fiddling with Atlas and I noticed a very common pattern:

Control Extender -> XML Script -> Behavior

Control Extenders, as I mentioned earlier, are server-side controls that hook up server-side UI controls with client side behaviors.  The glue between them is XML script that gets parsed on the client side and attaches the behavior to the running browser element.

ControlExtender derive from a class called ExtenderBase, and have a collection of objects that derive from TargetProperies.  From my last post, an extender for the ConfirmButton behavior might look like this in the ASPX:

<myns

:ConfirmButtonExtender ID="cbe" runat="server">

<myns:ConfirmButtonProperties TargetControlID="Button1" ConfirmText="hello?" />

</myns:ConfirmButtonExtender>

So basically what's here is a class that derives from ExtenderBase that has a collection of type ConfirmButtonProperties. Each ConfirmButtonProperties object has a property called ConfirmText. 

The first thing I realized is that if you just named the properties in the ConfirmButtonProperties the same as the ones in your Javascript file, we could easily just walk that object and automatically generate the XML script for you.  Cool!  That's one less thing to learn, right?

That was just the start.  I also realized we could do a bunch of other stuff automatically.  Things like...

  • Knowing which properties referred to controls and then automatically fixing up the IDs at page-render time so they are client ID's in the XML Script (ASP.NET often encodes the ID of your server control to reflect nesting, etc, so "Button1" may not be "Button1" anymore when the browser sees it).
  • Automatically generating the script reference and packaging it up so you don't have to ship a JS file seperately from your ExtenderControl assembly.
  • Easily wrapping existing client behaviors so they are usable from the designer and you can program against them in the server-side model.
  • Encapsulate sending state back and forth between the client and the server so your client side script had some way of sending information back to the server in the event of a postback
  • Building "Atlas-aware" server side controls that render Atlas client behaviors behind the scenes for great UI experiences
  • Have your ExtenderControl be able to specify the scripts that it's dependant on and have those automatically downloaded before your control is instantiated so the user doesn't need to know/remember to set them up.

So it kind of grew from there.  The more we built the more cool ideas we had.  We started writing controls and adding functionality to the base classes, and before long, cranking out awesome Atlas controls/behaviors was a snap.

See, my last post was about how much I dig the Atlas Javascript framework.  So my goal here was two-fold:

1) To make the page-builder experience as familiar as possible for an ASP.NET developer

2) Cut out all the steps that I could so all you had to learn to get started was how to work in the Javascript framework.  No XML, no script references, none of that.  IJW - It Just Works.  You can learn the other stuff later, but you're not forced to learn it up front.

And now I've been having fun writing (eeeek!) Javascript and building behaviors that you can easily integrate into new or existing web pages.  We're going to give out source for the ones that we've built:

  • CollapsiblePanel - point this extender at a Panel control, give it a maximum and minimum size, and you'll get the roll-up/roll-down behavior on the client.  You can specify which control you "click" to make it collapse/expand, and it can expand horizontially or vertically.
  • HoverMenu - This is what Shanku demo'd today.  Basically, when you hover over control on the page, another control will be made visible and shown at a position of your choosing near your control.  Think of a normal GridView scenario where there is an Edit/Delete link by each row.  Now think of having those links appear as the user mouses-over each row.  You can also specify a CSS class to apply to the target when you over over it so it can highlight, etc.
  • TextboxWaterkmark - Some websites have greyed out "Type Here" text in textboxes when they're empty.  This extender does that.  Just tell it which textbox to show the text and what the text should be and it handles the rest.
  • ToggleButton - basically an image-checkbox, you can have better UI than plain checks in your application.  It's still a checkbox under the covers so you can databind to it, etc as usual.
  • ConfirmButton - this is the most demo I showed in my prior post.  Point it at a Button or LinkButton, set the text that you want to show, and it'll handle the rest.  If the user clicks "cancel", the click won't happen.
  • PopupControl - a hosting popup control that lets you have popup UI in your webpage.  For example, you can easily create a Date Picker by dropping a calendar control into this.
  • DragPanel - allows you to make a panel draggable and choose which control is the "handle" that users use to drag it around.
  • ReorderList - a server-side databound control that generates extenders at render-time and demonstrates how to create an Atlas-aware server side control.  In this case, it renders a list of items that the user can drag-drop reorder right in the browser.
  • CascadingDropDown - an extender that makes doing a sequence of drop down lists a snap (Make -> Model -> Color, for example).  It uses the Atlas web-service support to do the population of the lists asyncronously, and manages everything on the client side including clearing child items when a parent value changes (e.g. if you've selected "Ford", and "Mustang" and change to "Cheverolet", the Model field returns to "Please choose a model"), and actually disables fields that are farther down the chain which forces users to select in the right order.  It's super cool and can be hooked up to existing lists on the page.

In most of these cases you can also use the Javascript portion side as a standalone for non-ASP.NET scenarios as well.

We're working on getting this stuff packaged up so I can get it posted here soon and on the Atlas site before long.  As soon as that happens, I'll post a walkthrough of exactly how to use it so you can see first-hand why I've been having so much fun doing it.

UPDATED: Forgot CascadingDropDown...