1. Atlas Framework
2. Atlas Control Toolkit

Summary

The Atlas Control Toolkit site does a good job a walking through all the steps necessary to build a custom extender. You’ll want to refer to that site for more general detail. I’m going to show you my own custom implementation.

I needed a control that would sum all the TextBoxes on a page, using the onchange event, and display the answer in another TextBox. For my purposes, the input is limited to integers, but it could easily be adapted to handle other numeric input. I call my Atlas extender “SumTextboxes”.

Getting Started

Create a new project. You can do this one of three ways:

• Go to File->New Project…;
• Ctrl + Shift + N;
• Right Click on a solution that is already open and select Add->New Project…

All three methods will open up the Add New Project dialog. Select your language preference (VB or C#) the “Atlas” Control Project. The Atlas Control Project does not exist for any other languages right now. Give your project a name and specify the location.

Next, right click on your new project and select Add->New Item…. This will open the Add New Item dialog. Choose the “Atlas” Extender Control template, give it a name, and click Add. Four files appear in your project. These are the base files needed to build a custom extender.

Write the Code

Open all four of the template files and make the following changes:

SumTextboxesDesigner.cs

Change the word Control to the more specific TextBox.

SumTextboxesExtender.cs

Same thing: Change the word Control to the more specific TextBox.

SumTextboxesProperties.cs

Looks like this:

[DefaultProperty("TargetResultTextBoxID")]
public class SumTextboxesProperties : TargetControlPropertiesBase<TextBox>
{
// TODO: Add your property accessors here.
//
[IDReferenceProperty(typeof(TextBox))]
public string TargetResultTextBoxID
{
get
{
return GetPropertyStringValue("TargetResultTextBoxID");
}
set
{
SetPropertyStringValue("TargetResultTextBoxID", value);
}
}
}


SumTextboxesBehavior.js

First, initialize your property variable: var _TargetResultTextBoxIDValue;. You can delete the this._onkeyup function; create a new function called this._onchange…we’ll get to the code for _onchange in a second. Change the initialize function to look like this:

this.initialize = function() {
SumTextboxes.SumTextboxesBehavior.callBaseMethod(this, 'initialize');
// TODO: add your initalization code here
this.control.element.attachEvent('onchange', Function.createDelegate(this, this._onchange));
this._onchange();
}


You will also need to change the code inside this.getDescriptor to this:
td.addProperty('TargetResultTextBoxID', String);

…and your property accessors:

// These are helper functions for communicating state back to the extender on the
// server side. They take or return a custom string that is available in your initialize method
// and later.
//
this.getClientState = function() {
var value = SumTextboxes.SumTextboxesBehavior.callBaseMethod(this, 'get_ClientState');
if (value == '') value = null;
return value;
}
//
this.setClientState = function(value) {
return SumTextboxes.SumTextboxesBehavior.callBaseMethod(this, 'set_ClientState',[value]);
}


And finally, back to this._onchange. This is where the meat of this extender is:

this._onchange = function() {
if (!document.getElementsByTagName)
{
return;
}
var e = document.getElementById(_TargetResultTextBoxIDValue);
var total = 0;
oTextboxes = new Array();
oInputs = document.getElementsByTagName('input');
for (i=0;i {
if (oInputs[i].type == 'text')
{
oTextboxes.push(oInputs[i]);
}
}
var msg = "Found " + oTextboxes.length + " text boxes";
for (i=0;i {
if (!isNaN(parseInt(oTextboxes[i].value)) && oTextboxes[i] != e)
{
total += parseInt(oTextboxes[i].value);
}
}
e.value = total;
}


You're almost done! Save the project and build. You can now use this extender in an ASP.NET website!

Implementation

Add a reference to SumTextboxes in the project by right clicking on the project and selection Add Reference.... This will open the Add Reference dialog. Select the Projects tab, the SumTextboxes project, and click OK.

Drag a ScriptManager control from your toolbar onto the design view. This is control is required for Atlas enabled applications.

Add some TextBoxes to your page. For each TextBox, you will also need a SumTextboxes control. I chose to use another Atlas Extender, the FilteredTextBoxExtender to restrict the user input to numbers. Here's a snippet of my code for each textbox:

<asp:Label ID="lblHundreds" runat="server" AssociatedControlID="txtHundreds">Hundreds (100s):</asp:Label>
<cc2:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server">
<cc2:FilteredTextBoxProperties TargetControlID="txtHundreds" FilterType="numbers" />
</cc2:FilteredTextBoxExtender>
<cc3:SumTextboxesExtender ID="SumTextboxesExtender1" runat="server">
<cc3:SumTextboxesProperties
TargetControlID="txtHundreds"
TargetResultTextBoxID="txtTotal" />
</cc3:SumTextboxesExtender>
$<asp:TextBox ID="txtHundreds" runat="server" Text="0" />.00


Notice that the TargetResultTextBoxID property has been set to "txtTotal". txtTotal is the TextBox control at the bottom of the page where the results are displayed. It is updated everytime the user tabs off a field that has the SumTextboxes control attached to it!