MSDN Magazine - January 2008 - (Page 44)

the kinds of behaviors needed for a masked input reflected on the server. Aside from this relatively field. If, later on, you need a numeric textbox or standard code, an extender is just JavaScript code an up/down input box, you can create another that uses the DOM to provide richer UI elements custom control class. But creating a new control Figure 3 NumericUpDown to the end user. for each additional feature is not the best idea. As Extender in Action The sample extender featured in Figure 4 adds a Figure 2 shows, you’ll end up with a proliferation focus behavior to virtually all ASP.NET controls; of controls forming a flat hierarchy where each new control adds that is, to all controls that derive from Control. The focus feature just a little behavior to the same base class. is implemented in the linked focusbehavior.js file. This script file Fortunately, there is another way to augment a control: extending will likely be embedded in the assembly that contains the extender the behavior of a particular instance of an existing control. In this control and then downloaded to the client when requested. The focase, the additional behavior is added via an ASP.NET extender. cusbehavior.js file uses the programming model of the Microsoft Any number of additional AJAX Library (see my December 2007 column at msdn.microsoft.com/ behaviors can be associated msdnmag/issues/07/12/CuttingEdge) and is centered around an initialThe AJAX Control with an instance of a given ization method that registers Document Object Model (DOM) Toolkit extends existing control to enhance its ca- handlers for focus and blur events. In the focus handler, the code ASP.NET server controls pabilities without creating sets the CSS class for the target element. In the blur handler, it renew classes. sets the CSS class. For more details, check out the source code that with predefined blocks of As an ASP.NET server accompanies this column. All things considered, the easiest way script code. control, an extender gets a to create extenders is to use the facilities of the ACT. You run the reference to the extended installer in the toolkit download, set up the templates, then select control and modifies its behavior by injecting script code. The ex- “Add AJAX Control Extender” to obtain a scaffold for the extender tender control may feature a few properties of its own so developers and the behavior. More information is available at asp.net/AJAX/Ajax can further configure behavior as well. The association between the ControlToolkit/Samples/Walkthrough/CreatingNewExtender.aspx. target ASP.NET control and its set of extenders is typically established declaratively in the page markup. The following code snippet Input Extenders shows how to add a numeric up/down interface to a textbox so that As I mentioned, ACT features several extenders that add capabiliusers can select numbers by just clicking an up/down button: ties to buttons, textboxes, panels, listboxes, and so forth. The com ponents in ACT can be grouped in a few categories: panel, input, As you can see, the page contains a regular TextBox control plus the complete list of input extenders in ACT is shown in Figure 5. an instance of the NumericUpDownExtender control. The TargetControlID property on the extender sets the ID of the extendee Watermarks and Input control. The Width property is specific to the extender and defines One of the most annoying elements on a Web page is an unlathe final width of the extendee control plus any additional UI ele- beled textbox or a page in which the labels and the textboxes don’t ments contributed by the extender—in this case, a pair of up/down line up. This can be caused by the font size the user chose, or other buttons (see Figure 3). The extender’s properties can be set both de- settings, but the result is that the user can’t be sure just what belongs claratively and programmatically in the codebehind class. ACT contains classic server controls to serve particular user interface needs and extenders to add specific behaviors to existing controls. For example, in ACT there is a TabContainer control to set up a tab-based interface as well as a ReorderList control that provides a listbox with drag-and-drop support to move items around. Mostly, though, ACT consists of extenders. Take a look at Figure 4 where you see that an extender inherits from the base class, ExtenderControl, defined in the AJAX extensions assembly. Internally, a custom extender control class overrides the GetScriptReferences method, which returns the list of script files to be injected into the client page to implement the behavior, and the GetScriptDescriptors method, which returns the list of mappings between client-side and server-side properties. Thus any value assigned on the client to a given property will be properly 44 msdnmagazine Cutting Edge Anatomy of an Extender Control Figure 4 Add Focus Capabilities to Target Controls [ [TargetControlType(typeof(Control))] [ClientScriptResource(“IntroAjax.FocusBehavior”), “focusBehavior.js”)] public class FocusExtender : AjaxControlToolkit.ExtenderControlBase { [ExtenderControlProperty] [RequiredProperty] public string HighlightCssClass { get { return GetPropertyValue(“HighlightCssClass”, “”); } set { SetPropertyValue(“HighlightCssClass”, value); } } [ExtenderControlProperty] public string NoHighlightCssClass { get { return GetPropertyValue(“NoHighlightCssClass”, “”); } set { SetPropertyValue(“NoHighlightCssClass”, value); } } } http://msdn.microsoft.com/msdnmag/issues/07/12/CuttingEdge http://msdn.microsoft.com/msdnmag/issues/07/12/CuttingEdge http://asp.net/AJAX/AjaxControlToolKit/Samples/Walkthrough/CreatingNewExtender.aspx http://asp.net/AJAX/AjaxControlToolKit/Samples/Walkthrough/CreatingNewExtender.aspx http://asp.net/ajax/control-toolkit

Table of Contents Feed for the Digital Edition of MSDN Magazine - January 2008

MSDN Magazine - January 2008 Contents Toolbox CLR Inside Out Data Points Advanced Basics Cutting Edge IIS 7.0 - Enhance Your Apps with the Integrated ASP.NET Pipeline World Ready - Around the World with ASP.NET AJAX Applications WCF Syndication - HTTP Programming with WCF and the .NET Framework 3.5 Wicked Code Foundations Extreme ASP.NET {End Bracket}

MSDN Magazine - January 2008

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.