MSDN Magazine - January 2008 - (Page 45)

Figure 5 Input Extenders from ACT Input Extender AutoComplete Calendar ConfirmButton FilteredTextBox HoverMenu ListSearch MaskedEdit ModalPopup MutuallyExclusiveCheckBox NumericUpDown Slider TextBoxWatermark ToggleButton ValidatorCallout Target Controls TextBox TextBox IButtonControl TextBox Control ListControl TextBox Control CheckBox TextBox TextBox TextBox CheckBox BaseValidator Primary Goal Improved user experience Restricted input Preventing mistakes Restricted input Improved user experience Improved user experience Restricted input Improved user experience Restricted input Preventing mistakes Preventing mistakes Preventing mistakes Improved user experience Improved user experience Description Provides a list of suggestions as the user types in the edit field. Provides client-side date-picking functionality with customizable date format. Pops up a confirmation dialog box as the user clicks the button. Lets users only enter text that matches a given set of characters. Displays the contents of an associated panel control when the mouse hovers next to a given control—like a tooltip. Enables users to search for an item in a list by typing some of the characters. Lets users only enter text that fits into a given input mask. Implements a classic modal dialog box without using the browser’s window.alert method. It basically displays the contents of a panel and prevents users from interacting with the underlying page. Lets you define logical groups of checkboxes so that users can check only one in each group. Displays up and down buttons to select the next or previous value. Uses a slider-like user interface to select a numeric value in a range. Adds watermark text that disappears when the user starts typing and reappears as the textbox becomes empty. Enables users to display custom images to render the check buttons. Improves the user interface of validators by popping up a balloon-style callout for each error message. in the textbox. A great solution is a text watermark—default text in the textbox that disappears when the user begins to type in the box (see Figure 6). The following code shows how to get the effect: The extender injects script code that handles focus, blur, and keydown events. As the control gets focus, the watermark disappears. When the control loses focus, the watermark comes back if no text has been typed in. The watermark text is cleared when the page posts back. This is accomplished using a handler for the DOM’s submit event. The watermark extender control allows you to specify the text and the CSS style to apply to it. You might want to use a special CSS style to visually differentiate regular input text from watermark text. In HTML, there’s one primary element for accepting data—the element. You have to use it for numbers, strings, dates, currency values, and so forth. Often you need a numeric input to be restricted to a specific range of values. You can certainly enforce this business rule through a validation layer, but it would be better to do it right there in the input box. The Slider and NumericUpDown extenders force users to enter only numbers that fall in a given range. The Slider extender hides its associated TextBox and replaces it with a graphical slider moving through discrete steps within a minimum and a maximum interval. The underlying TextBox can always be set programmatically to Figure 6 Some Input Extenders Cutting Edge january2008 45

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.