Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

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.


advertisement
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() MyBase.New("Colorful") 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, _ EmailContact2) If ourControl IsNot Nothing Then ourControl.ControlStyle.Reset() ourControl.HeadingStyle.Reset() ourControl.CaptionStyle.Reset() ourControl.FieldStyle.Reset() ourControl.ReadonlyFieldStyle.Reset() ourControl.ButtonStyle.Reset() 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 _ DesignerAutoFormatCollection

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 Get 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.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

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