So now that DasBlog was all set up for Atlas, complete with ScriptManager, the next step was to add a couple of controls from the Atlas Control Toolkit. Specifically, I'm using a TextBoxWatermark in the search box and RoundedCorner and CollapsiblePanel controls for each of the funky brown blobs you see to the right.

In the first iteration, I had opened up each of these controls individually and had myself a little hootenanny in each one. I created a bunch of panels and images programmatically within the Render method as well as CollapsiblePanel and RoundedCorners controls attached to these panels. At some point, I found it necessary even to move all of that code out of the Render method and into CreateChildControls (where I believe it belongs; what if I want to handle events by any of the constituent controls?). Can't remember why I needed it, probably for the calendar which required me to create a whole brand now control specifically so I could wrap it in a bunch of Panels to house the heading and dropdown image.

The end result, as I alluded to in a post from many moons ago, was FrankenBlog. A blog only a mother could love (but not my mother). The controls were so intrinsically tailored to the CodingHillbilly theme, the code was nigh unreleasable to the general public, lest the coding Hillbilly be scoffed for reasons other than his penchant for plaid. (On a side note...does anyone even know what 'intrinsically' means?)

But I's a smart bumpkin and I knew others might like to know how to do this themselves. And I sure wasn't about to release that code. It was, to continue the Frankenstein theme, abby-normal.

Anyway, enough pre-amble. Here is the HTML for my Links box:

<

div id="navLinksDiv">
   <div class="navHeader" id="navLinksHeader">
      <div style="float:left;">Links</div>
      <div style="float:right;"><img id="navLinksImage" style="cursor:hand;" src='<%radio.macros.imageurl( "webpart-up.gif" )%>' /></div>
   </div>
   <div id="navLinksContent">
      <%navigatorLinks%>
   </div>
</div>

Pretty standard HTML and it nicely highlights my disdain for using tables for layout.

And herein lies one of the many Good Things© about the toolkit extenders. They extend. As in you write your HTML like you normally would and apply whatever extenders you want to them.

One issue though is that all the toolkit samples show the extenders being applied to server-side controls. And they show the extenders as server-side controls themselves. But they don't need to be. The extenders can be applied client-side to regular HTML controls.

The following javascript will add a RoundedCorners extender to the navLinksDiv div above:

var roundedCorners = new AtlasControlToolkit.RoundedCornersBehavior( );
roundedCorners.set_Color( "#706861" );
roundedCorners.set_Radius( 10 );

var theDiv = new Sys.UI.Control( $("navLinksDiv") );
theDiv.get_behaviors( ).add( roundedCorners );
roundedCorners.initialize( );

It looks a little funky but yes, it's javascript. Atlas has abstracted a bunch of things and added an object model that I REALLY hope gets better documentation before release time. Hillbillies get cranky when there ain't no intelly-sense.

So we create a RoundedCornersBehavior object and set some properties on it. Then we create a Sys.UI.Control object which is, I think, a generic Atlas control. There are more specific ones but they correspond to actual form elements like textboxes and dropdown lists. In this case, we're applying it to a div, so we create a Sys.UI.Control.

Note that we pass in the ID of the DIV in the constructor (if I recall, the $ notation is Atlas-shorthand for document.getElementById but don't quote me). This was a little weird for me because now we've essentially got this Sys.UI.Control object that's bound somehow to the navLinksDiv HTML element. And in the next line, we call this method on it that attaches the roundedCorners behavior to it. And somehow this all filters back to the original HTML element, which hasn't really been touched.

Obviously, this code doesn't work out of the box. You need appropriate javascript references. The ScriptManager handles the base Atlas script references for things like the controls in the Sys.UI namespace. For the RoundedCornersBehavior object, you need to include a reference to the RoundedCornersBehavior.js file that is included in the AtlasControlToolkit source code:

<

script language="javascript" type="text/javascript" src="themes/CodingHillbilly/ExtenderScripts/AtlasControlExtender.js"></script>
<script language="javascript" type="text/javascript" src="themes/CodingHillbilly/ExtenderScripts/RoundedCornersBehavior.js"></script>

If you are using the server-side controls, this reference isn't necessary because the control itself handles the references for you using WebResource.axd, which I understand not at all. As you can see here, I've copied the .js file into my theme folder for easy reference. And the reference to AtlasControlExtender.js I gather is necessary if you're going to do any client-side extender work. All I know is that it didn't work when I just had RoundedCornersBehavior.js references and it did after I added AtlasControlExtender.js.

I'll wrap it up by saying the entire theme is attached. homeTemplate.blogTemplate is where all the action is. (Apologies in advanced on the formatting. For whatever reason, I slugged it out with Visual Studio as my editor and it kept wanting to reformat everything in that annoyingly helpful, Steve Urkel-like way.) There are a couple of other little things like the fact that Atlas will always call the pageLoad javascript function if it is defined and that the AtlasUIGlitz.js function is needed to make the animation in the CollapsiblePanel work. Hopefully the comments are clear.

The end result is: It is possible to use the Atlas Control Toolkit within your themes without having to muck around (much) with the codebase. On reflection, this whole post could have been laid out better had I known I would go into full "how to" mode. If anything is unclear, gimme a holler.

And finally, sweet Jayzus am I ever getting tired of correcting myself when my fingers inevitably type "behaviour".

CodingHillbilly.zip (64.56 KB)