CUSTOM WEB CONTROL

Custom Web control

A custom Web control is a control that inherits from a WebServer control.

A custom Web control can be compiled into a separate .dll file that can be shared among applications.

It allows to define a better design-time experience for the consumers of the control.

This includes Toolbox and designer functionality

Creating a Custom Web Server Control

There are two common approaches to creating a custom Web server control.

The first approach is to create a Web server control that inherits directly from WebControl Class. The Web- Control class provides a base set of functionality. This leaves a lot of work to develop the control.

The second approach is to inherit from an existing Web control that already provides the core features of your control. This can give you a jump start and allow you to focus on what makes your control different. This is the more common scenario.

Creating a Custom Web Server Control

If the custom Web server control is targeted to multiple Web sites, you should place the new custom Web server control class into a class library project to create a .dll file that can be shared.

If the custom Web server control is only meant for the current Web site, you can add the custom Web server control’s class file to the Web site.

Inheriting from Existing Web Server Controls

For example, suppose you wish to create a custom version of the TextBox control. This custom version will include text that labels the given TextBox (such as “User Name” or “Password”).

You create this control by first inheriting from TextBox.

public class LabeledTextBox : TextBox{public string PromptText { get; set; }public int PromptWidth { get; set; }protected override void Render(HtmlTextWriter writer){writer.Write( @"<span style="”display:inline-block;width:{0}px”">{1}&nbsp;</span>",PromptWidth, PromptText);

base.Render(writer);}}

Inheriting Directly from the WebControl Class

This approach is desirable when there is no control that currently provides default behavior similar to the control you wish to implement.

When inheriting from the WebControl class, you must override the Render method to provide the desired output.

For example, suppose you wish to create a custom control that allows a user to display a logo and an associated company name for the logo. For this, you might create two properties: LogoUrl and CompanyName.

Inheriting Directly from the WebControl Class

public class LogoControl : WebControl {public LogoControl(){}public string LogoUrl {get { return _logoUrl; }set { _logoUrl = value; } }private string _logoUrl;public string CompanyName {get { return _companyName; }set { _companyName = value; } }private string _companyName;protected override void Render(HtmlTextWriter writer) {writer.WriteFullBeginTag(“div”);writer.Write(@"<img src=""{0}"" /><br />", LogoUrl);writer.Write(CompanyName + "<br />");writer.WriteEndTag(“div”);}}

Adding Toolbox Support for a Custom Web Server Control

The primary requirement to allow a custom Web control to be added to the Toolbox is that the Web control be placed into a separate .dll file.

You can set a reference to this .dll file to add the .dll to the Bin folder of your project.

In this case, you can right-click the Toolbox and select Choose Items. You can then browse to the given user control’s .dll to add the controls that are contained in the file to the Toolbox.

Adding Toolbox Support for a Custom Web Server Control

Notice that the controls are defined in their own grouping at the top of the Toolbox.

When you drag a control to the page, the control must be registered.

This markup is shown at the top of the page.

The bottom of the page shows the control defined declaratively (including custom properties).

Adding a Custom Icon for Your Control

You can add your own custom icon through an attribute called ToolboxBitmap of the System.Drawing namespace.

This attribute specifies a bitmap that is 16 × 16 pixels in size.[ToolboxBitmap(typeof(LabeledTextBox),“MyUserControls.LabeledTextBox.bmp”)]public class LabeledTextBox : TextBox

Adding a Custom Icon for Your Control

Setting a Default Property for Your Custom Control

A default property is accessed without actually specifying a property.

You set the default property for your control through the DefaultProperty attribute class in the System.ComponentModel namespace.

Apply this attribute at the class level. Simply pass the name of one of your properties

to this attribute.

[DefaultProperty(“PromptText”)]public class LabeledTextBox : TextBox

Control the Markup Generated for Your Custom Control

You can further change the way your custom server control behaves when it is dropped onto the Web page by setting the ToolboxDataAttribute in your control class.

This attribute is used to change the markup that gets generated by Visual Studio.

A common scenario is to set default values for properties on the control inside the generated markup.

Creating a Custom Designer for a Custom Control

You might wish to alter the default rendering of the control in design mode.

To do so, you start by adding a reference to the System.Design.dll assembly in your user control.

You then create a new class in your user control that

inherits from the ControlDesigner class. This class will override the GetDesignTimeHtml method of the ControlDesigner class to render separate design-time HTML that can be set based on the property settings of the control instance.

You then apply the Designer attribute to your control.

To this, you pass an instance of your ControlDesigner class.

Creating a Custom Designer for a Custom Control

[Designer(“MyUserControls.LabeledTextBoxDesigner, MyUserControls”)]public class LabeledTextBoxDesigner : ControlDesigner{private LabeledTextBox _labeledTextBoxControl;public override string GetDesignTimeHtml(){if (_labeledTextBoxControl.PromptText.Trim().Length == 0)return "<div style='color: Gray'>[Define PromptText]</div>";elsereturn base.GetDesignTimeHtml();}public override void Initialize(IComponent component){_labeledTextBoxControl = (LabeledTextBox)component;base.Initialize(component);return;}}

Creating a Composite Control A composite control is a custom Web control

that contains other controls.

This sounds like a user control, but the composite control doesn’t provide a designer screen for creating the control, nor an .ascx file that lets you drag and drop controls on it at design time.

Instead, you create a custom control that inherits from the CompositeControl class. You then add constituent controls to this control.

The composite control then handles events raised by its child controls.

Creating a Composite Control To create a composite control, you start by

creating a class that inherits from the CompositeControl class and overrides the CreateChildControls method.

The CreateChildControls method contains the code to instantiate the child controls and set their properties.

If you want to be able to assign styles to the composite control, you should create an instance of the Panel class to provide a container that can have attributes assigned to it.

In this case, you add it to the Controls collection of your composite control, and then add your controls to the Panel control.

Creating a Templated Custom Web Control

A templated custom Web control provides separation of control data from its presentation.

This means that a templated control does not provide a default UI.

For example, if you know that you need to display product data, but you don’t know how the developer who intends to use your control wants to format the product data, you could create a templated control that allows the page designer to supply the format for the product data as a template.