ptg 1584 The control in Listing 36.6 renders a drop shadow behind whatever text you assign to the control’s Text property (see Figure 36.3). The drop shadow is created with the help of an Internet Explorer DropShadow filter. CHAPTER 36 Building Custom Controls The Filter attribute is added to the <div> tag with a call to the AddStyleAttribute() method. The AddStyleAttribute() method works just like the AddAttribute() method, except that the AddStyleAttribute() method adds a CSS attribute instead of an HTML attribute. WEB STANDARDS NOTE Filters are an Internet Explorer extension to the CSS standard. They don’t work with Firefox or Opera. Firefox has its own extensions to CSS with its -moz style rules. Specifying the Containing WebControl Tag By default, a WebControl renders an HTML <span> tag around its contents. You can specify a different tag by overriding the WebControl’s TagKey property. For example, the control in Listing 36.7 renders its contents within an HTML <div> tag. FIGURE 36.3 Displaying a drop shadow with the DropShadow control. From the Library of Wow! eBook ptg 1585 Overview of Custom Control Building 36 LISTING 36.7 Glow.cs using System.Web.UI; using System.Web.UI.WebControls; namespace myControls { public class Glow : WebControl { private string _Text; public string Text { get { return _Text; } set { _Text = value; } } protected override HtmlTextWriterTag TagKey { get { return HtmlTextWriterTag.Div; } } protected override void AddAttributesToRender(HtmlTextWriter writer) { writer.AddStyleAttribute( HtmlTextWriterStyle.Filter, “glow(Color=#ffd700,Strength=10)”); base.AddAttributesToRender(writer); } protected override void RenderContents(HtmlTextWriter writer) { writer.Write(_Text); } public Glow() { this.Width = Unit.Parse(“500px”); } } } From the Library of Wow! eBook ptg 1586 CHAPTER 36 Building Custom Controls The control in Listing 36.7 displays a glowing effect around any text that you assign to its Text property. The control takes advantage of the Internet Explorer Glow filter to create the glow effect (see Figure 36.4). In a real production application, you would want to either provide an alternate rendering for other browsers, or stick to more CSS-compliant rendering. The control overrides the base WebControl’s TagKey property. Because the overridden prop- erty returns a <div> tag, the WebControl renders a <div> tag. NOTE You can use several methods to modify the tag rendered by a WebControl. You can override the TagName property instead of the TagKey property. The TagName property enables you to specify an arbitrary string for the tag. (It doesn’t limit you to the HtmlTextWriterTag enumeration.) You also can specify the tag rendered by a WebControl in the WebControl’s co n str uc t or. F ina l ly, y o u can over ri d e a WebControl’s RenderBeginTag() and RenderEndTag() methods and completely customize the open- ing and closing tags. Furthermore, the control in Listing 36.7 overrides the AddAttributesToRender() method. If you override this method, you can add HTML or CSS attributes to the opening HTML FIGURE 36.4 Displaying glowing text with the Glow control. From the Library of Wow! eBook ptg 1587 Overview of Custom Control Building 36 tag rendered by the control. When overriding this method, be careful to call the base AddAttributesToRender() method or the standard control attributes, such as the control ID, won’t be rendered. Building Composite Controls If you don’t want to start from scratch when building a custom control, you can build a composite control. When you create a composite control, you create a new control from existing controls. Every ASP.NET control has a Controls property that represents all its child controls. If you add child controls to a control, the child controls are automatically rendered when the parent control is rendered. When you create a composite control, you typically override a control’s CreateChildControls() method. This method is called when a control builds its collection of child controls. For example, the control in Listing 36.8 combines a TextBox control and RequiredFieldValidator control. LISTING 36.8 RequiredTextBox.cs using System; using System.Web.UI.WebControls; namespace myControls { public class RequiredTextBox : CompositeControl { private TextBox input; private RequiredFieldValidator validator; public string Text { get { EnsureChildControls(); return input.Text; } set { EnsureChildControls(); input.Text = value; } } From the Library of Wow! eBook ptg 1588 CHAPTER 36 Building Custom Controls protected override void CreateChildControls() { input = new TextBox(); input.ID = “input”; this.Controls.Add(input); validator = new RequiredFieldValidator(); validator.ID = “valInput”; validator.ControlToValidate = input.ID; validator.ErrorMessage = “(Required)”; validator.Display = ValidatorDisplay.Dynamic; this.Controls.Add(validator); } } } The control in Listing 36.8 inherits from the base CompositeControl class. Furthermore, rather than override the base control’s RenderContents() method, the control overrides the base control’s CreateChildControls() method. You should notice one other special thing in Listing 36.8. The EnsureChildControls() method is called in both the Get and Set methods of the Text property. The EnsureChildControls() method forces the CreateChildControls() method to be called; however, it prevents the CreateChildControls() method from being called more than once. The Text property gets or sets a property of a child control (the TextBox control). If you attempt to use the Text property before the CreateChildControls() method is called, you receive a null reference exception. The child controls must be created before you can access any of the child control properties. The page in Listing 36.9 illustrates how you can use the RequiredTextBox control in a page. LISTING 36.9 ShowRequiredTextBox.aspx <%@ Page Language=”C#” Trace=”true” %> <%@ Register TagPrefix=”custom” Namespace=”myControls” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <script runat=”server”> protected void btnSubmit_Click(object sender, EventArgs e) { From the Library of Wow! eBook ptg 1589 Overview of Custom Control Building 36 lblResults.Text = txtUserName.Text; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show RequiredTextBox</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Label ID=”lblUserName” Text=”User Name:” AssociatedControlID=”txtUserName” Runat=”server” /> <custom:RequiredTextBox ID=”txtUserName” Runat=”Server” /> <br /> <asp:Button ID=”btnSubmit” Text=”Submit” Runat=”server” OnClick=”btnSubmit_Click” /> <hr /> <asp:Label id=”lblResults” Runat=”server” /> </div> </form> </body> </html> The page in Listing 36.9 has tracing enabled. If you look at the control tree for the page, you see that the RequiredTextBox control includes both a TextBox and RequiredFieldValidator control as child controls. From the Library of Wow! eBook ptg 1590 CHAPTER 36 Building Custom Controls Building Hybrid Controls In practice, you rarely build pure composite controls. In most cases in which you override a control’s CreateChildControls() method, you also override the control’s RenderContents() method to specify the layout of the child controls. For example, the control in Listing 36.10 represents a Login control. In the control’s CreateChildControls() method, two TextBox controls are added to the control’s collec- tion of child controls. LISTING 36.10 Login.cs using System; using System.Web.UI; using System.Web.UI.WebControls; namespace myControls { public class Login : CompositeControl { private TextBox txtUserName; private TextBox txtPassword; public string UserName { get { EnsureChildControls(); return txtUserName.Text; } set { EnsureChildControls(); txtUserName.Text = value; } } public string Password { get { EnsureChildControls(); return txtPassword.Text; } set From the Library of Wow! eBook ptg 1591 Overview of Custom Control Building 36 { EnsureChildControls(); txtPassword.Text = value; } } protected override void CreateChildControls() { txtUserName = new TextBox(); txtUserName.ID = “txtUserName”; this.Controls.Add(txtUserName); txtPassword = new TextBox(); txtPassword.ID = “txtPassword”; txtPassword.TextMode = TextBoxMode.Password; this.Controls.Add(txtPassword); } protected override void RenderContents(HtmlTextWriter writer) { writer.RenderBeginTag(HtmlTextWriterTag.Tr); // Render UserName Label writer.RenderBeginTag(HtmlTextWriterTag.Td); writer.AddAttribute(HtmlTextWriterAttribute.For, txtUserName.ClientID); writer.RenderBeginTag(HtmlTextWriterTag.Label); writer.Write(“User Name:”); writer.RenderEndTag(); // Label writer.RenderEndTag(); // TD // Render UserName TextBox writer.RenderBeginTag(HtmlTextWriterTag.Td); txtUserName.RenderControl(writer); writer.RenderEndTag(); // TD writer.RenderEndTag(); writer.RenderBeginTag(HtmlTextWriterTag.Tr); // Render Password Label writer.RenderBeginTag(HtmlTextWriterTag.Td); writer.AddAttribute(HtmlTextWriterAttribute.For, txtPassword.ClientID); writer.RenderBeginTag(HtmlTextWriterTag.Label); writer.Write(“Password:”); writer.RenderEndTag(); // Label writer.RenderEndTag(); // TD From the Library of Wow! eBook ptg 1592 CHAPTER 36 Building Custom Controls // Render Password TextBox writer.RenderBeginTag(HtmlTextWriterTag.Td); txtPassword.RenderControl(writer); writer.RenderEndTag(); // TD writer.RenderEndTag(); // TR } protected override HtmlTextWriterTag TagKey { get { return HtmlTextWriterTag.Table; } } } } In Listing 36.10, the RenderContents() method is overridden to layout the two TextBox controls. The TextBox controls are rendered within an HTML table (see Figure 36.5). Each TextBox is rendered by calling the RenderControl() method. FIGURE 36.5 Performing layout with an HTML table. From the Library of Wow! eBook ptg 1593 Overview of Custom Control Building 36 The default RenderContents() method simply calls the RenderControl() method for each child control. If you override the RenderContents() method, you have more control over the layout of the control. The Login control in Listing 36.10 uses an HTML table for layout. From a web standards perspective, using HTML tables for layout is frowned upon. The modified Login control in Listing 36.11 uses <div> tags instead of a <table> tag for layout. LISTING 36.11 LoginStandards.cs using System; using System.Web.UI; using System.Web.UI.WebControls; namespace myControls { public class LoginStandards : CompositeControl { private TextBox txtUserName; private TextBox txtPassword; public string UserName { get { EnsureChildControls(); return txtUserName.Text; } set { EnsureChildControls(); txtUserName.Text = value; } } public string Password { get { EnsureChildControls(); return txtPassword.Text; } set { From the Library of Wow! eBook . Register TagPrefix=”custom” Namespace=”myControls” %> <!DOCTYPE html PUBLIC -/ /W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <script runat=”server”> protected. glow effect (see Figure 36 .4) . In a real production application, you would want to either provide an alternate rendering for other browsers, or stick to more CSS-compliant rendering. The control. rendered by a WebControl. You can override the TagName property instead of the TagKey property. The TagName property enables you to specify an arbitrary string for the tag. (It doesn’t limit