Custom Web Control Development

developed and taught by Microsoft C# MVP, Miguel Castro

In this intense 3-day course, Miguel will teach you to master the art of custom web control development.

Custom WebControl Development Course Outline

• Working Backwards (Preview of what you will build) 
  • Demo of some custom controls
  • The three controls we will develop later
    • The ConfirmationButton control
    • The FormField control
    • The EmailContact control
  • More Complex “cooler” controls
    • GalleryBuilder
    • Listbox Suite
  • Using the SalutationDropdown in a Datagrid
    • Alternatives to this method (conventional ASP.NET)
    • Benefits provided by its encapsulation
  • Review (learn how everything you’ve just seen actually works)
• Introduction to Webcontrols
  • An underused technology
  • What are Webcontrols & Why do we need them?
    • ASP.NET architecture
      • Webcontrols at the very heart of ASP.NET.
      • ASP.NET’s postback mechanism (behind the scenes).
    • Comparison to Windows Form Controls
    • Comparison to classic ASP
    • OOP in the UI
    • ASPX Control format
    • HTML Rendering
    • Cross-browser development
    • Business knowledge inclusion
    • Declarative Programming 
• Types of Webcontrols
  • Inherited controls
    • Explanation
    • Microsoft examples
  • Rendered controls
    • Explanation
    • Microsoft examples
  • Composite controls
    • Explanation
    • Microsoft examples
  • Advantages and disadvantages to each
  • The Million Dollar Question: When should I develop one or the other
  • Descriptions of each control we will be developing
    • What they each will do.
    • What category do they each fall under, and why.
     
• Commonalities of all Webcontrols
  • The base classes
    • Control
    • WebControl
    • CompositeControl (ASP.NET 2.0 only)
  • Properties
    • The conventional way
    • Introduction to the ViewState variable
    • Properties incorporating ViewState
    • Property Attributes
      • Category
      • Description
      • DefaultValue
      • Bindable
    • Overview of Complex Properties (to be discussed later)
  • State management
    • The state management methods
    • The IStateManagement interface
    • Simple overrides storing member variables
    • Why are object-based properties a problem?
    • Using the state management methods to store properties.
  • Styles
    • What is the Style object?
    • Back to the difference between Control and WebControl base classes.
    • Creating Style properties
    • Persisting Style properties
  • Naming
    • How control elements are expected to be named.
    • Rendered vs. Composite naming technique.
    • INamingContainer interface.

  Inherited Webcontrols

  • Review of what and why.
  • Overview of how they do what they do.
  • The ConfirmationButton control.
    • Adding properties
    • Rendering content
  • The SalutationDropdown control.
    • Adding properties
    • Rendering content
• Rendered WebControls
  • Review of what and why.
  • Overview of how they do what they do.

• Rendered Webcontrols.
  • The FormField control
    • Deciding on the elements
    • Rendering the elements
    • Proper naming
    • Adding properties
    • Adding styling
    • Adding events
      • The IPostBackEventHandler interface
      • The IPostBackDataHandler interface
    • Validation
      • The ValidatorProperty attribute
• Composite Webcontrols
  • Review of what and why.
  • Overview of how they do what they do.
    • Comparison to building a dynamic Webform
  • The EmailContact control.
    • Reusing the ConfirmationButton & the FormField controls
    • Adding more child controls..
    • Rendering additional HTML.
    • Adding properties
      • Mapping properties to child controls
      • Adding new properties
    • Adding Styling
      • Style copying
      • Style merging
    • Adding events
      • Event wiring
    • Adding business functionality
      • Providing emailing routines
    • Validation
      • The IValidator interface
• Control Designers
  • Why we need them.
  • How controls render without them.
  • Testing for Design-Time vs. Run-Time
  • The Designer class
    • Methods to override
    • Accessing the control being designed
    • Empty HTML
    • Error HTML
    • Additional Designer features
      • Custom Verbs (About Dialog)
• Additional Webcontrol technologies
  • Designer Verbs
  • Complex Properties
  • Enhanced Styling
  • Type Converters
  • Client-Side Scripting (The Listbox Suite)
  • Templates
  • Event Bubbling
  • Type-Editors
  • Data binding (generic and specific)
  • Web Resources (ASP.NET 2.0 only)
  • Async Callback (ASP.NET 2.0 only)
• Putting all together using Declarative Programming
  • An approach to ASP.NET development.
  • Custom control grids and forms.
  • Full UI object-orientation
    • Control inheritance
  • Gluing controls together on a form.
  • The future in XAML.
• Conclusion
  • Review Demo of Production version of the FormField and EmailContact controls (both available as freeware)
  • Preview of the Advanced class (currently in development by Miguel)
  • Suggested Reading

Course Lab Description

LAB 1

This simple introductory lab will allow the students to drag and drop several controls onto a Webform, set their properties, and observe their behavior. Its purpose is to illustrate the ease of working with visual components in a web deliverable platform in a way that was not possible in the past.

The GalleryBuilder and ListBox Suite are designed to illustrate more complex control with extensive functionality built right in and all complexity invisible to the user.

The Datagrid with the contained SalutationDropdown demonstrates the encapsulation of one control’s responsibilities, eliminating it completely from its parent control and/or the containing Webform.

LAB 2

This lab is inserted in the middle of the introduction talk on purpose. Not only to break up the monotney of a large intro but also to demonstrate the HTML generation purpose behind ASP.NET Webcontrols. The students will use a Textbox control, a Dropdown control, and a Calendar control to see what HTML gets rendered for each despite the small amount of code used at design time.

LAB 3

This lab indoctrinates the students in the techniques used to build the simplest of the three types of controls, Inherited Controls.

Two controls will be built, the ConfirmationButton, which is an extension of the Microsoft Button control, and the SalutationDropdown, a self-filling Dropdown list.

The controls will be built step-by-step starting with the inheritance of the existing controls demonstrating duplicate functionality.

LAB 4

This lab teaches a step by step method of developing a Rendered Control.

The control built is called the FormField control and consist of three primary elements within it, a label, textbox, and button.

The control will start with a simple text rendering and build upon itself with more elements, properties, events, and finally styling.

The elements within this control also demonstrate what it takes to wrap the three most common HTML elements in a Webcontrol: the label for display, the textbox for user input, and the button for action.

LAB 5

This last lab teaches the most straight forward, common, and enjoyable to write custom control, the Composite Control.

The control built here is called he EmailContact control and contains two previously built controls, the ConfirmationButton and the FormField controls.

This control will be built step by step, one child control at a time, demonstrating the high reusability factor in this type of control as well as its resemblance to dynamically created Webforms.

The building of this control will also demonstrate how business functionality can be encapsulated directly in the Webcontrols.

The controls being developed:

ConfirmationButton

This simple Inherited Control extends the ASP.NET Button control to having the ability to popup a confirmation message when pressed.

SalutationDropdown

This Inherited Control extends the ASP.NET DropdownList control to be self filling with a list of common salutations like Mr., Mrs., Ms., and Dr.

FormField

This Rendered Control encapsulates a label, textbox, and button into one control to be used in data entry forms.

EmailContact

This Composite Control builds a commonly used “Contact Us” form allowing a user to fill in some fields and send an email. The email sending functionality is encapsulated directly in this control.