During this weekend, I put together a “templated” WebPartZone for ASP.Net 2.0. With the TemplatedWebPartZone you can change the layout of the WebParts border etc by using templates. By using some “markers” within the templates, you can specify where the Icon, Titel, Verbs and WebPart should be located. For example, take a look at the following figure:
In the figure above, there are three templates used. As you can see in the figure, the verbs menus are located at different locations for the WebParts. By using the TemplatedWebPartZone, you don’t need to create your own WebPartzZone and your own WebPartChrome classes when you want to change the layout of the WebParts border etc. Isn’t that cool! ;)
The following is a short documentation of how you can use the TemplatedWebPartZone.
Instead of using a standard WebPartZone, you have to use the TemplatedWebPartZone control.The TemplatedWebPartzZone inherits the WebPartZone and if you don’t use a template, the control will work as the original WebPartZone control. The TemplatedWebPartZone is extended with two extra properties:
ChromeTempalteFile
Specify the application path to a template.
EnableChromeTemplateCache
Enable the caching of the templates. It’s false by default.
The TemplatedWebPartZone is also extended with a template, ChromeTemplate. With the ChromeTemplate, you can specify the template for the WebPart without using a separated file. There is also an interface, ITemplatedWebPart, that a WebPart can implement to specify which template file it will use. By using this template, each WebPart within a WebPart zone, can have its own design, more about this later.
The following is an example of a template that will create the layout of the Calendar WebPart in the previous figure:
WebPartTemplate.chrome
<table width="100%" heigth="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" nowrap valign="top" style="height:21px;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="images/lefttop.gif"/></td>
<td align="left" nowrap style="font-family: arial; font-size: 12px; font-weight: bolder; filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#B5C3EF,endColorStr=#EFF3FF);">
<# WebPartIcon #> <# WebPartTitle #>
</td>
<td width="100%" valign="top" align="left" nowrap style="filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#B5C3EF,endColorStr=#EFF3FF);">
<# WebPartVerbs #>
</td>
<td align="right" valign="top"><img src="images/righttop.gif"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height:100%; border: 1px solid #B5C3EF" valign="top" nowrap>
<# WebPartBody #>
</td>
</tr>
</table>
There are four markers that can be used inside a template:
<# WebPartIcon #>
Specifies where the icon of the template should be added.
<# WebPartTitle #>
Specifies where the title of the WebPart should be added.
<# WebPartVerbs #>
Specifies where the Verbs menu should be added.
Note: The Verbs will be located within a table, so have this in mind when you create your template. As you may now a <table> element is a bloc and will be located on a new line.
<# WebPartBody #>
Specifies where the WebPart’s content should be located.
To use the template above for all WebParts located within the WebPart zone, you can set the ChromeTemplateFile attribute of the TemplatedWebPartZone to the path where the template is located:
<Nsquared2:TemplatedWebPartZone ChromeTemplateFile="~/WebPartTemplate.chrome" LayoutOrientation=Horizontal ID="WebPartZone1" runat="server">
<MenuStyle Font-Size="12px" Font-Names="Arial" BorderStyle="Solid" BorderColor="gray" BorderWidth="1px" />
<ZoneTemplate>
<uc1:MyWebPart ID="MyWebPart" runat="server" />
<asp:Login runat="server" ID="Login1"></asp:Login>
</ZoneTemplate>
</Nsquared2:TemplatedWebPartZone>
Note: If a WebPart uses the ITemplatedWebPart interface, the WebPart will not use the template specified for the WebPart zone uses.
You can use the ChromeTemplate template of the TemplatedWebPartZone to specify a template instead of using a file:
<Nsquared2:TemplatedWebPartZone LayoutOrientation=Horizontal ID="TemplatedWebPartZone2" runat="server">
<MenuStyle Font-Size="12px" Font-Names="Arial" BorderStyle="Solid" BorderColor="gray" BorderWidth="1px" />
<ChromeTemplate>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" nowrap="" valign="top" style="height:21px;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="images/lefttop.gif"/></td>
<td width="100%" align="left" nowrap style="font-family: arial; font-size: 12px; font-weight: bolder; filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#B5C3EF,endColorStr=#EFF3FF);">
<# WebPartIcon #> <# WebPartTitle #>
</td>
<td valign="top" align="right" nowrap style="filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#B5C3EF,endColorStr=#EFF3FF);">
<# WebPartVerbs #>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height:100%; border: 1px solid black" valign="top" nowrap="">
<# WebPartBody #>
</td>
</tr>
</table>
</ChromeTemplate>
<ZoneTemplate>
<uc1:MyWebPart ID="MyWebPart2" runat="server" />
<asp:ChangePassword runat="server" ID="ChangePassword1"></asp:ChangePassword>
</ZoneTemplate>
</Nsquared2:TemplatedWebPartZone>
Note: If the ChromeTemplateFile property is used, the ChromeTemplate will not be used.
The following code is a user control that uses the ITempaltedWebPart interface to specify which template it will use:
<%@ Control Language="C#" ClassName="MyWebPart" %>
<%@ Implements Interface="Nsquared2.Web.UI.WebParts.ITemplatedWebPart"%>
<script runat="server">
public string ChromeTemplateFile
{
get { return "~/WebPartTemplate2.chrome"; }
set { }
}
</script>
<asp:Calendar ID="Calendar1" runat="server" Height="190px" BorderColor="White" Width="350px"
ForeColor="Black" BackColor="White" BorderWidth="1px" NextPrevFormat="FullMonth"
Font-Names="Verdana" Font-Size="9pt">
<SelectedDayStyle ForeColor="White" BackColor="#333399" />
<OtherMonthDayStyle ForeColor="#999999" />
<TodayDayStyle BackColor="#CCCCCC" />
<NextPrevStyle ForeColor="#333333" VerticalAlign="Bottom" Font-Size="8pt" Font-Bold="True" />
<DayHeaderStyle Font-Size="8pt" Font-Bold="True" />
<TitleStyle ForeColor="#333399" BorderColor="Black" Font-Size="12pt" Font-Bold="True"
BackColor="White" BorderWidth="4px" />
</asp:Calendar>
With the TemapltedWebPartZone the web designer of the application, can now easily change the layout of the WebPart’s borders etc.
Note: To make Drag & Drop of WebParts to work, the WebPart must use the <# WebPartTitle #> marker and the WebPart’s DisplayTitle property must have a value. I have some thoughts about adding a <# WebPartDragSurface #> marker, for specifying which area in the temple will be the drag area. Please let me know what you think about that.
The source code is available on the WebPart Components workspace.