Microsoft AJAX Library Case Study: Creating Custom Client Components

Start typing a name:

Case Study Explanations

This is a Microsoft AJAX Library exercise/case study from Chapter 7 of Microsoft AJAX Library Essentials: JavaScript in ASP.NET AJAX 1.0 Explained.

In this case study you will apply the theory you've learned through the book, while creating two client-side components: Timer, and EnhancedTextBox. Building components represents the fi nal challenge when working with the Microsoft AJAX Library.

The Timer component is one of the client components that didn't make it into ASP.NET AJAX 1.0. We will create it here, however, to help us create the component we're interested in: a behavior named EnhancedTextBox. This behavior extends the normal HTML input text control by implementing the word suggest/auto-complete feature based on the letters typed by the user inside the text box.

The Timer Component

The timer component is very useful because it can be used in a variety of scenarios that involve repetitive tasks. This component has a very simple logic: based on two properties named interval and enabled, the component fires a tick event informing the registered handlers of the elapsed period of time.

The following figure represents the class diagram for this component:

Timer Component JavaScript Diagram

The timer component inherits from Sys.Component as it doesn't have a visual representation.

The EnhancedTextBox Behavior

The EnhancedTextBox behavior enriches the classic HTML input text with one of the most appreciated features brought by today's web applications: suggest and autocomplete. While the user is typing text inside the text box, it is auto-completed using a dictionary of known names. You can move back and forth between known names using the "up" and "down" arrow keys.

EnhancedTextBox is a behavior component thus inheriting from Sys.UI.Behavior as it is attached to a visual element but it does not modify it. You can see its list of members in the diagram in this diagram:

EnhancedTextBox Behavior Diagram

EnhancedTextBox makes use of a class named Dictionary, which stores the possible words for auto-completion, and has a method named getMatchingItems() that returns the matches that start with the prefix provided as parameter.

Dictionary Class Diagram

Implement the exercise step by step and find detailed explanations in our book, Microsoft AJAX Library Essentials: JavaScript in ASP.NET AJAX 1.0 Explained.