Web Parts

· On the fly customization of the Web Pages by using Web Parts Creating Web Parts involves following controls : WebPartManager WebPartPageMenu CatelogZone WebPartZone ZoneTemplate EditorZone AppearanceEditorPart LayoutEditorPart Follow the steps to demonstrate the Web Parts : Create an html table in .aspx page. Create a WebPartManager before the table as

<asp:webpartmanager id="WebPartManager1" runat="server" />

Add an <asp:webpartzone> element inside the first <TD>element in the table, and assign its property values as shown in the following code example.

<asp:webpartzone id="SideBarZone" runat="server"  headertext="Sidebar">        
<zonetemplate>        
</zonetemplate>      
</asp:webpartzone>

Note : The layout of the Web Parts zone is specified by a <ZONETEMPLATE>element. Inside the zone template, you can add any Web server control, whether it is a custom Web Parts control, a user control, or an existing server control. 4. Inside the <ZONETEMPLATE>element for the Main zone, add an <asp:label> element with some content, as shown in the following code example.

<asp:webpartzone id="MainZone" runat="server" headertext="Main">
<zonetemplate>    
<asp:label id="contentPart" runat="server" title="Content">      
<h2>Welcome to My Home Page</h2>      
<P>Use links to visit my favorite sites!</P>    
</asp:label>  
</zonetemplate>
</asp:webpartzone>

Save the WebPartsDemo.aspx file. 6. Create a new file in your text editor. This file will contain a user control that can also be added to the page as a Web Parts control. · Enabling Users to Change the Layout 1. In the WebPartsDemo.aspx page, add an <asp:webpartpagemenu> element just after the <asp:webpartmanager> element. 2. Add the following property values and child elements to the <asp:webpartpagemenu> element.

<asp:webpartpagemenu
                        id="pagemenu1" 
                        runat="server"
                        text="Display Mode" 
                        Mode="Menu">
<HoverStyle BorderWidth="1" />
<MenuStyle BorderWidth="1" />


<Designmodeverb text="Design" />
</asp:webpartpagemenu>

This creates a WebPartPageMenu control at the top of the page, which enables a user to change the page layout by switching to design mode. 3. Save the WebPartsDemo.aspx file. · To add editing capabilities to Web Parts 1. In the WebPartsDemo.aspx file, add an <asp:editorzone> element inside the third <TD>element in the table. Add a <ZONETEMPLATE> element, an <asp:appearanceeditorpart> element, and an <asp:layouteditorpart> element. The code should look like the following example.

<td valign="top">
<asp:editorzone id="EditorZone1" runat="server">    
<zonetemplate>      
<asp:appearanceeditorpart runat="server" id="AppearanceEditorPart1" />      
<asp:layouteditorpart runat="server" id="LayoutEditorPart1" />    
</zonetemplate>  
</asp:editorzone>
</td>           

· To allow user to select WebParts from WebPart Catalog: The WebPart Catalog contains the WebParts that can be selected and then added to the WebZones. First we should declare all the WebParts at the top below the <%@ Page %> Directive as :

<%@ Register TagPrefix="Vorne" TagName="MyCht" Src="../MyChart.ascx" %>
<%@ Register TagPrefix="Vorne" TagName="Cale" Src="../Calender.ascx" %>
<%@ Register TagPrefix="Vorne" TagName="Chart" Src="../Chart.ascx" %>

To create Catalog, we can write as :

<asp:CatalogZone ID="CatalogZone1" Runat="server">
   <ZoneTemplate>
      <asp:DeclarativeCatalogPart Runat="server" ID="DeclCataPart1">
        <WebPartsTemplate>
           <Vorne:Calender Runat="server" ID="c1" Title="Calender" />
           <Vorne:MyChart Runat="server" ID="c2" Title="Line Chart" />
           <Vorne:Chart Runat="server" ID="c3" Title="BarChart" />
        </WebPartsTemplate>
      </asp:DeclarativeCatalogPart>
   </ZoneTemplate>
</asp:CatalogZone>