Browse DevX
Sign up for e-mail newsletters from DevX


Web Control Enhancements in ASP.NET 2.0 : Page 4

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.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Template Design-Time Editing
In the July/August 2006 issue of CoDe Magazine, I taught you how to add templating capability to your controls. I'm not going to go through that again, but I am going to review a part of that article since its subject matter falls under the context of this article as well. I'm referring to the ability to edit template contents from the Web Form's design surface; something you couldn't easily accomplish in ASP.NET 1.x.

Template design-time editing is visible in controls like the GridView where you can put the control into "template editing" mode and drag other controls into the template area. Without this ability, page developers must switch to ASPX view and create template contents there manually like this:

<dnd:EmailContact ID="ctl1" runat="server"> <HeaderTemplate> <asp:Label ID="lbl1" runat="server" Text="Label" /> <asp:Textbox ID="txt1" runat="server"/> </HeaderTemplate> <FooterTemplate> <asp:LinkButton ID="lnk1" runat="server" Text="LinkButton" /> </asp:LinkButton> <asp:DropdownList ID ="ddl1" runat="server" /> </FooterTemplate> </dnd:EmailContact>

While this is not that bad, it would be better to keep page developers in the designer surface.

To add template editing capability to a control, you must override the Initialize method of the control designer class and set a flag that informs the designer that you want to support template editing.

Public Overrides Sub Initialize( _ ByVal Component As IComponent) MyBase.Initialize(Component) SetViewFlags(ViewFlags.TemplateEditing, True) End Sub

Notice I made a call to the base method to make sure I didn't cancel anything I wasn't supposed to. This call informs the designer that it will support template editing, but you still have to code the implementation of said editing.

Microsoft built their designer in such a way that you can categorize templates into template groups, in the case that you have many templates in your control. The template itself is defined in an object called TemplateDefinition and it is the TemplateGroup object that contains one or more of these definition objects. The TemplateGroup objects are contained in an object of type TemplateGroupCollection, so it is here that you'll declare a variable of that type at the class level in the designer class. As in the case of smart tags, the infrastructure will cache this object which is why I declare it at a class-level scope.

Private o_TemplateGroups As TemplateGroupCollection = Nothing

This collection gets a built in property called TemplateGroups that I now have to override. It is the contents of this property that will be exposed to the page developer for template editing.

Public Overrides ReadOnly Property TemplateGroups() As TemplateGroupCollection Get If o_TemplateGroups Is Nothing Then ... End If Return o_TemplateGroups End Get End Property

In this property override, I'll build the TemplateGroupCollection that Visual Studio will use. The Is Nothing check in the property prevents the unnecessary rebuilding of this object.

First I'll instantiate the o_TemplateGroups object.

o_TemplateGroups = New TemplateGroupCollection()

Now I need to grab the control I'm designing using the Component variable I talked about in the smart tags section.

Dim ctl As EmailContact = CType(Component, EmailContact)

I'll use this variable in a few minutes, but first I have to set up the two object variables I want to use for the TemplateGroup and TemplateDefinition objects.

Dim o_TemplateGroup As TemplateGroup Dim o_TemplateDefinition As TemplateDefinition

Now I can start defining groups and templates.

o_TemplateGroup = New TemplateGroup("Surrounding Templates")

The text "Surrounding Templates" will appear as the category heading for whatever template definitions I place in this group.

o_TemplateDefinition = New TemplateDefinition(Me, "Header Template", ctl, "HeaderTemplate", False) o_TemplateGroup.AddTemplateDefinition _ (o_TemplateDefinition)

Let me walk you through the arguments in the TemplateDefinition constructor. I first have an instance of the designer incorporating template editing, usually just Me. The second argument is the name of template as it will be displayed in a shortcut menu or a smart tag. This is followed by the control being designed; remember, you obtained this earlier by casting the Component object. The next argument is the name of the template property in the control. The Boolean argument at the end of the argument list is set to False so this template will accept both server controls and HTML controls. Setting it to True will only allow the addition of server controls (regular Web controls) to the template.

As you can guess, this is repeated for every template and every template group you want to define. The end result is my o_TemplateGroups object nicely filled with all my template definition information and that is what I return in this property.

Figure 3: EmailContact control in template editing mode.
So now I'll recompile and go to my test page. When I right click on my EmailContact control, I'll see "Edit Template" added to the shortcut menu. The listing in the submenu will display the template groups I defined in the designer class. And when I select the "Surrounding Templates" group, I'll see something like what's in Figure 3. You can see the controls that I manually added to the two templates and, in fact, I can now drag other controls directly from the toolbox. Right clicking again and selecting "End Template Editing" will return back to the standard control view and display the template contents in the control.

Also notice that an "Edit Templates" link has also automatically been added to the control's smart tag. If a smart tag did not exist previously, then one would have been automatically created for me when I added the template editing code to the designer class.

Here's the complete template editing code as it fits in the control designer class.

Public Overrides Sub Initialize(ByVal Component As IComponent) MyBase.Initialize(Component) ' Turn on template editing SetViewFlags(ViewFlags.TemplateEditing, True) End Sub Private o_TemplateGroups As TemplateGroupCollection = Nothing Public Overrides ReadOnly Property TemplateGroups() _ As TemplateGroupCollection Get If o_TemplateGroups Is Nothing Then o_TemplateGroups = New TemplateGroupCollection() Dim o_TemplateGroup As TemplateGroup Dim o_TemplateDefinition As TemplateDefinition Dim ctl As EmailContact2 = CType(Component, _ EmailContact2) o_TemplateGroup = New TemplateGroup( _ "Surrounding Templates") o_TemplateDefinition = New TemplateDefinition( _ Me, "Header Template", ctl, "HeaderTemplate", True) o_TemplateGroup.AddTemplateDefinition( _ o_TemplateDefinition) o_TemplateDefinition = New TemplateDefinition( _ Me, "Footer Template", ctl, "FooterTemplate", True) o_TemplateGroup.AddTemplateDefinition( _ o_TemplateDefinition) o_TemplateGroups.Add(o_TemplateGroup) End If Return o_TemplateGroups End Get End Property

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