RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Web Control Enhancements in ASP.NET 2.0 : Page 5

ASP.NET 2.0 does not break any existing controls from 1.1, but it adds a whole bunch of new ones, as well as several new technologies for control development.

Auto Format
All right, hang on because now the ride is going to get fun! Have you ever dropped a GridView onto a form and noticed a little link under the property browser labeled "Auto Format…"? You know the one—you click on it and you get a choice of pre-defined formats such as Corporate, Elegant, Classic, etc. In fact, the entire Security Control Suite that comes with ASP.NET 2.0 provides this feature. Well, you'll be surprised how easy it is to supply your controls with this functionality.

I need to decide what formats I want to provide for my control. I'll keep it simple by creating three formats. I'll call two of them "Monochrome" and "Colorful". The third (it will actually be the first) I'll call "No Format" which reverts the control to its original state when it was dropped onto a form. I suggest you add a format like this any time you apply this technology to your controls.

Each format I create will need its own class which will inherit from the DesignerAutoFormat class in the System.Web.UI.Design namespace; so I start with a class called ColorfulFormat and inherit DesignerAutoFormat. I need to provide a default constructor for this class and in it I will call the base constructor, sending to it one argument; the name of the format as it will appear in the list.

   Public Sub New()
   End Sub
Next I must override the Apply method. This method receives one argument of type Control. My control designer class will call this method and send the instance of my control (remember Component?) into this argument. Then I'll cast the argument to my control type so I can have a strongly-typed reference with which to work.

   Public Overrides Sub Apply( _
      ByVal control As System.Web.UI.Control)
      Dim ourControl As EmailContact2 = CType(control, EmailContact2)
      If ourControl IsNot Nothing Then
      End If
   End Sub
Now I need to set whatever properties I want that will cause my control to appear in the context of what I consider a "colorful format." This will usually include styling properties but it can, in fact, include anything I want. So inside the "IsNot Nothing" check, I simply set whatever style properties I want for this particular format. Listing 2 shows the complete list.

   ourControl.BackColor = Drawing.Color.Aquamarine
   ourControl.BorderStyle = BorderStyle.Double
   ourControl.BorderWidth = Unit.Pixel(2)
   ourControl.BorderColor = Drawing.Color.DarkRed
   ourControl.HeadingStyle.Font.Name = "arial"
   ourControl.HeadingStyle.Font.Bold = True
   ourControl.HeadingStyle.Font.Size = FontUnit.Large
Next, I'll create a class called MonochromeFormat and perform the same steps, only this time I'll set the styling properties to something more black and white to adhere to a "monochrome" format. See Listing 3 for the complete class.

Finally, I have to create the NoFormat class. This class follows the same design as the previous two, but instead of setting styling property values to various colors and fonts, I call the Reset method on all style properties. This resets all style values to their default state.

Incidentally, since my EmailContact control derives from the CompositeControl class, which in turn derives from the all-to-familiar WebControl class, I also get styling properties at the class level in my control. This means I have BackColor, ForeColor, etc., accessible directly from my control without having to go through one of its properties. This is used to style the container for my control and is explained in detail in my article series, "Custom Web Controls Demystified." However, to reset these style values I don't get a Reset method directly from my control class; instead the WebControl class gives me a ControlStyle property that serves as the entry point for all the container style values. As part of the "resetting" of the control's appearance, I am also setting the Height property to a default value of 400 pixels. Here's the complete class:

   Public Class NoFormat
      Inherits DesignerAutoFormat
      Public Sub New()
         MyBase.New("No Format")
      End Sub
      Public Overrides Sub Apply(ByVal control _
         As System.Web.UI.Control)
         Dim ourControl As EmailContact2 = CType(control, _
         If ourControl IsNot Nothing Then
            ourControl.Height = Unit.Pixel(400)
         End If
      End Sub
   End Class
AutoFormat adds a professional touch to your controls and your users will appreciate the ease of formatting you've provided them.
Now that I've created all of the format classes I want, I need to actually do something with them. To do that, I'll go back to the control designer class. You can probably guess that there is something here that I have to override. And you're right. The property I need to override is called AutoFormats and it returns an object of type DesignerAutoFormatCollection in the System.Web.UI.Design namespace.

As in smart tags and template editing, the object that I'm going to instantiate in order to return through the property is declared at the class level since the infrastructure will cache it for me.

   Private o_AutoFormats As _
Then, in the property override implementation, I can test the object variable against a null value—once again, very similar to the previous cases. The o_AutoFormats collection object will now simply be filled with instances of each of the format classes I previously created.

   Public Overrides ReadOnly Property AutoFormats() _
      As DesignerAutoFormatCollection
         If o_AutoFormats Is Nothing Then
            o_AutoFormats = New DesignerAutoFormatCollection
            With o_AutoFormats
               .Add(New NoFormat)
               .Add(New MonochromeFormat)
               .Add(New ColorfulFormat)
            End With
         End If
         Return o_AutoFormats
      End Get
   End Property
If I recompile and test the control again, I'll see that a link called "Auto Format…" has been added to the top of the smart tag. If no smart tag existed before, then Visual Studio would have automatically created one for me with the "Auto Format…" link in it. You'll also notice that an "Auto Format…" link appears at the bottom of the property browser.

If I click on either link, I'll see something like Figure 4. Select any of the formats in the list to change it in the preview window and click OK to commit the settings to the control in the Web Form design surface.

Figure 4: Auto Format Screen.
Now that you know how to do something, you should learn when and why as well.

I can just hear the CSS zealots out there screaming at this article. I am indeed a big fan of cascading style sheets and use them in all my sites, but there's a lot to be said for packaging and ease of development. A feature like Auto Format is very welcome in situations like control suites. For example, consider Microsoft's Security Control Suite. Here you have seven Web controls that you can use to add authentication to a site. Each of them has Auto Format capability and each displays the same list from which to choose a format. This is great if you need to either throw something together quickly or if you actually like the formats included and wish to model the rest of your site similarly.

Think of some of the popular visual metaphors out there today; the many styles of the Outlook bar, various TreeViews, menus and toolbars, etc. You can integrate many of them into almost any site's design style. Auto Format is a great tool in a case like this.

Now remember that in each format class, I changed styling values in some of my style properties. If you apply one of these formats on the Web Form, you'll see that the style values have indeed changed in the property browser. If I wanted to, though I wouldn't choose to, I could have modified the CssClass value of the style properties and assigned a style sheet class to them. That would have worked as well, but then I would need to distribute the CSS file along with my control and also make sure the page links to it.

Wouldn't it be really cool if I could use these kinds of resource files in my control and not have to distribute them along with the control's DLL file? Well, that leads me to the last topic of this article, Web Resources.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date