Using Web User Controls to Create Rich Internet Application Subassembies

Web user controls provide an opportunity to combine multiple related controls into one neat package. If you combine standard form elements with components from the AJAX control toolkit then you can build a library of rich internet application elements.

Example: A Numeric Entry Control

To illustrate what I mean, let’s consider a basic web user control for numeric data entry. Of the basic HTML form elements, text box, check box, list box, radio button, etc., the only one that would work for entering numbers is the text box. But the text box will allow you to enter either text or numbers, so if you have a data entry field for a numeric values then you would need to supplement it by adding either server-side or client-side code to prevent the user from entering anything other than numbers.

Since this is a common programming task, it would be nice if we could make a generic control for numeric entry that we could then easily reuse anytime we need numeric data input.

The requirements for this control are:

• It will only accept numeric values
• You can set a minimum and maximum value
• You can set it accept either integers or decimal numbers
• You can set it add comma separators if desired

AJAX Control Subassemblies

We can make use of Microsoft’s AJAX Control Toolkit to perform the client-side tasks which will limit the user to entering only numbers within a specified range into a textbox.

The AJAX Control Toolkit uses the “extender” design pattern. What this means is that instead of creating specialized controls that that will do one particular task, they offer control extenders which all have a “target control” parameter. The extender adds some additional capability or feature to its target. Different extenders can operate on the same target control. This gives more flexibility for adding exactly the features and behaviors that you desire in a particular control.

Scott Guthrie has a great discussion of ASP.Net control extenders in his blog.

The disadvantage is that every time you want to add a particular type of control that makes use of multiple AJAX extenders then you have to combine all the parts together and wire them up for each and every field on every web page. We can give up a little flexibility but still have very useful generic components by creating web user control subassemblies that combine elements that are commonly used together.

The properties of the subassemblies are:

• Two or more extenders are pre-wired to a common target control
• The web user control assembly exposes public properties that control the key attributes of the extenders
• The extenders will have reasonable default values so that you can drop the web user control onto your web page and use it with a minimal amount of effort, setting only those properties that are unique to the specific field.

AJAX Extenders for our Sample Numeric Control

We can meet the above requirements be making use of the following AJAX extender controls:

Control	Description (from http://www.asp.net/ )
MaskedEdit	MaskedEdit is an ASP.NET AJAX extender that attaches to a TextBox control to restrict the kind of text that can be entered. MaskedEdit applies a "mask" to the input that permits only certain types of characters/text to be entered. The supported data formats are: Number, Date, Time, and DateTime.
RangeValidator	The RangeValidator server control tests whether an input value falls within a given range. RangeValidator uses three key properties to perform its validation. ControlToValidate contains the value to validate. MinimumValue and MaximumValue define the minimum and maximum values of the valid range.

The range validator is actually a standard ASP.Net control but it does use the same extender design pattern. You will often combine validation controls with text boxes and AJAX extenders. By preassembling these parts you can save yourself some work.

In my next post I will take you step-by-step through a real-world example by creating a web user control subassembly for numeric data input.

Summary

The AJAX Control Toolkit and other ASP.Net components such as validators use the Extender Design Pattern, which makes them very flexible for adding features and behaviors to existing controls and allowing you to pick and choose multiple extenders to work on the same control. The drawback is that you have to do a lot more work to custom define the features and behaviors of every individual control that you desire to have a rich user interface. You can reduce this effort by creating a subassembly that combines ASP.Net AJAX and other web interface components into a web user control.

One example of such a web user control is a numeric data input control which I describe here and will create in my next post.

Use Visual Studio Task List to Create Test Lists for Test Driven Development

Integrated TDD Environment

Introduction

The Visual Studio 2008 SP1 now includes integrated unit testing, making TDD (Test Driven Development or Test Driven Development) easier than ever before. However, if you want to use VS 2008 as a fully-integrated TDD environment, you'll need to make creative use of the Task List.

Test Driven Design and Development

The idea behind TDD is that you write all the code for your application through a series of small steps by creating unit tests. The mantra is, "Never write a single line of code unless you have a test that fails." There are a couple advanatages to doing it this way:

• By doing things in small steps, you can go quicker with less errors
• You create unit tests as you go and rerun them with each coding change, immediately finding any code that gets broken when you add new features

So how do you start?

Like any software project, TDD starts with requirements. What does the software need to do? You take each requirement and generate a "test list," a list of all the criteria that must be met to fulfill the requirement.

The basic TDD process is Red/Green/Refactor:

1. Write a test that fails so that the unit test shows a red light
2. Add code to make the test pass and show a green light
3. Refactor to avoid duplication

Using Visual Studio as TDD Environment

Visual Studio now helps with this process. Visual Studio 2008 Professional Edition now includes the Visual Studio Test Suite (previously only Team Edition had it) which gives you the red and green lights. The Visual Studio editor also includes some built-in refactoring support.

However I would like to do everything within a single IDE if possible. I would prefer to do the Test Lists within my code editor rather than entering them into a spreadsheet, text file, or writting them down on paper. One way to do this is with the Visual Studio Task List.

Visual Studio Task List

The Task List has been part of VS since the original .Net 1.0 release. It provides a mechanism for reminders of things that developers need to complete.

You can open the Task List by selecting it from the View menu. There are two types of tasks: User and Comments. User tasks are things that you enter manually and manage yourself. Comments are created by adding comments with special key words to your code. You can then jump from your task list to the spot in the code where you put the comment.

Visual Studio provides three default tokens for comment tasks:

• TODO: Something that needs to be started or completed. VS will automatically generate some of these, for example when you create a new class it adds, "TODO: Add constructor logic here."
• HACK: Quickly written code that needs to be reworked later.
• UNDONE: Code changes that have been reversed.

To create a comment you enter the comment characters, (// in C#, ' in VB), the token followed by a colon (:) and the text of the task.

We can use the Task List for TDD by adding our own comment token: TEST.

To add a custom token we select options from the Tools menu and then select Task List under Environment:

To add our new token we enter TEST in the Name field and then click Add. We can now add a Test Task anywhere in our code by starting a comment, typing TEST: and a description of our test. Now you can create your TDD test list right inside the VS source code editor for your test project.: // TEST: Verify a user can add a new record // TEST: Verify a user can update an existing record // TEST: Verify a user can delete an existing record // TEST: Verify an error occurs when add a duplicate record To implement each test you add your test code after the comment and delete the TEST: part of the comment to remove the test from the Task List:

// Verify a user can add a new record [TestMethod()] public void AddNewRecord() { // TODO: Add Test Logic }

As you think of new tests while your in the middle of coding others you add a TEST: comment and then go back to what you're working on. Later, you can double-click on an item in the Task List to go directly to that spot in the code.

In my next blog post I'll walk you through a simple example.

Happy not to be Spam

This is first cold morning of the season here in Colorado. I'm sipping my Starbuck's pumpkin spice latte and rejoicing that my blog has been cleared by the Blogger spam cops. You see, soon after I posted my first entry I received an email saying, "Your blog has been identified as a potential spam blog. To correct this, please request a review by filling out the form [here]." I checked my blog this morning and it's all back to normal again. I've been approved. Now that I've been approved, where do I start? Yesterday a was a bit of downer at work. It was the last day for several of the contractors because the company I work for is feeling the credit crunch and economic downturn that is dominating the news now. Last week was the "worst week in stock market history." I've heard that before. The economy goes in cycles. We're near the bottom now, there's brighter days. It's just hard to believe it at the moment, but we can ride the coming bull market to success. After working in IT for 20 years I've come to accept the fact that software developers are an expense that every business needs to minimize in order to be successful. The key to success as a programmer is to be a partner with your employers to deliver the highest quality software at the lowest cost possible. Today we have many tools and methodologies to help achieve that goal. In future blog posts I will be covering things like the newest versions of languages and developer tools, Test Driven Development, MVC, agile development, combining it all together into the "Get 'er Done" methodology.

Finally starting to blog

Hi, My name is Ray Wampler and this is my first blog. Why would anyone want read a blog by me? There are a few areas where I have some expertise that other people might find interesting:

• I've worked in the IT/Software industry for over 20 years for a variety of companies and industries. I keep up on the latest technologies and trends.
• I've been in Toastmasters for 8 years, earning the distinction of Advnaced Communicator Silver and Advanced Leader Silver, and I'm currently working on my Distinguished Toastmaster.
• I keep informed on a variety of topics including health and nutrition, travel, volleyball, business, and investing.

These subjects will hopefully provide a wealth of topics for interesting and entertaining blog posts. I plan to add to this blog on a regular basis, providing usefull information to my readers.

Regards,

Ray Wampler