Making a Control Adapter
Implementing a control adapter is a two-step process:
- Write the adapter’s code.
- Configure the .browser files in your web application’s App_Browsers folder to associate the control adapter with the server control it will adapt.
The following sections provide a detailed look at these two steps.
Coding a Control Adapter
As mentioned earlier, the first step in implementing a control adapter is to create its code. You code a control adapter by creating a class that derives from the WebControlAdapter class:
System.Web.UI.WebControls.Adapters.WebControlAdapter
Then you override methods and properties that are part of the control that’s being adapted.
To illustrate this concept, I wrote a simple server control named SimpleText. The SimpleText control does nothing more than render the value assigned to the SimpleText.Text property between the HTML heading tags <H1></H1>, as shown in Listing 1.
Listing 1 SimpleText server-control code.
using System; using System.ComponentModel; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace CogArtTech.Web.Controls { [DefaultProperty("Text")] [ToolboxData("<{0}:SimpleText runat=server></{0}:SimpleText>")] public class SimpleText : WebControl { [Category("Appearance")] [DefaultValue("")] [Localizable(true)] public string Text { get { String s = (String)ViewState["Text"]; return ((s == null) ? String.Empty : s); } set { ViewState["Text"] = value; } } protected override void RenderContents(HtmlTextWriter output) { output.WriteFullBeginTag("H1"); output.Write(this.Text); output.WriteEndTag("H1"); } } }
Listing 2 shows how the SimpleText control is embedded within a web page.
Listing 2 The SimpleText server control, used in an ASP.NET page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SimpleTextTester.aspx.cs" Inherits="TestApp.SimpleTextTester" %> <%@Register TagPrefix="cog" Namespace="CogArtTech.Web.Controls" Assembly="CogArtTech.Web.Controls" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Simple Text Display</title> </head> <body> <form id="form1" runat="server"> <div> <cog:SimpleText text="This is a simple control" id="SimpleText1" runat="server" /> </div> </form> </body> </html>
Figure 6 shows the rendered output for the control.
Figure 6 The SimpleText control in a web page.
As you can see, the server control isn’t very sophisticated, but this control will do quite nicely for our purposes. Now we’ll make the control adapter.
We’re going to make a control adapter that we will apply to the SimpleText control. The name of the control adapter is SimpleTextAdapter. The purpose of SimpleTextAdapter is to turn any text that it encounters to the color blue. The code for SimpleTextAdapter is shown in Listing 3.
Listing 3 The code for the SimpleTextAdapter control adapter.
using System; using System.Text; using System.Web; using System.Web.UI.WebControls.Adapters; using System.Web.UI; namespace CogArtTech.Web.ControlAdapters { public class SimpleTextAdapter : WebControlAdapter { protected override void Render(HtmlTextWriter writer) { //Surround text output in a <font color="blue"></font> tag writer.WriteBeginTag("font"); writer.WriteAttribute("color", "blue"); writer.Write(System.Web.UI.HtmlTextWriter.TagRightChar); base.Render(writer); writer.WriteEndTag("font"); } } }
The code for the SimpleTextAdapter overrides the Render method of the control that’s being adapted, and surrounds the output in a <font color="blue"> HTML tag, effectively turning the text to the color blue.
That’s it for making the control adapter. The only thing left to do is to tell ASP.NET to take any rendering coming from the SimpleText control and route it through the control adapter, SimpleTextAdapter. As mentioned earlier, we do this by making an entry in the .browser file in the web application’s App_Browsers folder.
The important thing to understand is that control adapters are bound to a particular control on a browser-by-browser basis. For example, you can create a configuration that makes your control adapter work with pages that are being called from any browser; or from a particular browser such as Internet Explorer, Firefox, or Opera; or from mobile browsers such as those used by Ericsson, Palm, or Windows Mobile devices.
Before I go into configuring for a specific browser, let me demonstrate how to configure the .browser file so that the SimpleTextAdapter will be bound to the SimpleText control, regardless of the calling browser. Listing 4 shows a configuration used for supporting any browser.
Listing 4 A .browser file that supports all browsers.
<browsers> <browser refID="default"> <controlAdapters> <adapter controlType="CogArtTech.Web.Controls.SimpleText" adapterType="CogArtTech.Web.ControlAdapters.SimpleTextAdapter" /> </controlAdapters> </browser> </browsers>
Notice that, in the <browser refID="default"> node, the refID attributer is set to the value default. The refID attribute is the place where the browser type is set. The refID values are referenced from the browser schema files, the .browser files that are stored in the following folder:
%System%\Microsoft.Net\Framework\v2.0.50727\CONFIG\Browsers
On a Windows XP system, this folder can be found here:
C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\CONFIG\Browsers
When you look in this folder, you’ll see a variety of .browser files. A .browser file contains schema definitions for one or many browser types.
If you want to make it so that the SimpleTextAdapter applies only to a SimpleText control that’s embedded in a page called from Internet Explorer (see Figure 7), you would set the value of the refID attribute to IE6to9, as shown in Listing 5.
Listing 5 A .browser file configured to apply the SimpleTextAdapter to the SimpleText control when called from IE.
<browsers> <browser refID="IE6to9"> <controlAdapters> <adapter controlType="CogArtTech.Web.Controls.SimpleText" adapterType="CogArtTech.Web.ControlAdapters.SimpleTextAdapter" /> </controlAdapters> </browser> </browsers>
Figure 7 Applying a control adapter to pages called from IE.