Customizing Sharepoint WebPartZone
Spesso capita di aver la necessità di pesonalizzare la visualizzazione di "aree" o "WebPartZone" in maniera differente da come ce le presenta MOSS, questo vale anche per le precedenti versioni in quanto il markup non è cambiato ma è stato esteso verso il supporto dei controlli di Asp.Net 2.0. Ipotizziamo ad esempio di avere la necessità di customizzare l'area che sarà occupata dalle nostre webparts in modo totalmente diverso dalla classica rappresenatzione che Sharepoint ci propone:
Ipotizziamo quindi di desiderare che la pagina non sia divisa in due WebPartZone "Left" e "Right" ma solo in "Center", cioè una sola WebPartZone che occupi l'intera pagina (nessuno ci vieta di costruirne n...).
Sharepoint Designer ci viene incontro e ci permette di effettuare tutte le modifiche di cui necessitiamo direttamente dal codcie di markup, in questo modo:
basta quindi aprire il sito da SharepointDesigner e vederemo il codice di amrkup relativo alla tabella container della pagina che vogliamo modificare, in particolare vederemo il seguente codice:
1 <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
2 <table cellspacing="0" border="0" width="100%">
3 <tr>
4 <td class="ms-pagebreadcrumb">
5 <asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional" runat="server"/>
6 </td>
7 </tr>
8 <tr>
9 <td class="ms-webpartpagedescription">
10 <SharePoint:ProjectProperty Property="Description" runat="server"/></td>
11 </tr>
12 <tr>
13 <td>
14 <table width="100%" cellpadding=0 cellspacing=0 style="padding: 5px 10px 10px 10px;">
15 <tr>
16 <td valign="top" width="70%">
17 <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="Left" Title="loc:Left"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
18
19 </td>
20 <td> </td>
21 <td valign="top" width="30%">
22 <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="Right" Title="loc:Right"><ZoneTemplate>
23 <WebPartPages:ImageWebPart runat="server" PartImageLarge="" MissingAssembly="Cannot import this Web Part." AllowConnect="True" HorizontalAlignment="Center" IsIncludedFilter="" PartOrder="1" FrameState="Normal" ChromeType="None" ImageLink="/_layouts/images/homepage.gif" DetailLink="" Description="Use to display pictures and photos." AllowMinimize="True" PartImageSmall="" FrameType="None" ZoneID="Right" ExportControlledProperties="True" AllowRemove="True" IsIncluded="True" AllowHide="True" HelpLink="" VerticalAlignment="Middle" ExportMode="All" HelpMode="Modeless" ID="g_738691e4_8465_4ce4_8ca1_7d8a8923ee28" SuppressWebPartChrome="False" Title="Site Image" AllowZoneChange="True" Dir="Default" IsVisible="True" AlternativeText="Microsoft Windows SharePoint Services Logo" BackgroundColor="transparent" ConnectionID="00000000-0000-0000-0000-000000000000" AllowEdit="True" __MarkupType="vsattributemarkup" __WebPartId="{738691E4-8465-4CE4-8CA1-7D8A8923EE28}" WebPart="true" Height="" Width=""></WebPartPages:ImageWebPart>
24
25 </ZoneTemplate></WebPartPages:WebPartZone>
26
27 </td>
28 <td> </td>
29 </tr>
30 </table>
31 </td>
32 </tr>
33 </table>
34 </asp:Content>
35
Il codice che ci interessa è il seguente:
1 <td valign="top" width="70%">
2 <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="Left" Title="loc:Left">
3 <ZoneTemplate></ZoneTemplate>
4 </WebPartPages:WebPartZone>
5 </td>
6 <td>td>
7 <td valign="top" width="30%">
8 <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="Right" Title="loc:Right">
9 <ZoneTemplate>
10 <WebPartPages:ImageWebPart runat="server" PartImageLarge=""
11 MissingAssembly="Cannot import this Web Part." AllowConnect="True" HorizontalAlignment="Center" IsIncludedFilter="" PartOrder="1" FrameState="Normal" ChromeType="None"
12 ImageLink="/_layouts/images/homepage.gif" DetailLink=""
13 Description="Use to display pictures and photos." AllowMinimize="True"
14 PartImageSmall="" FrameType="None" ZoneID="Right" ExportControlledProperties="True" AllowRemove="True" IsIncluded="True" AllowHide="True" HelpLink=""
15 VerticalAlignment="Middle" ExportMode="All" HelpMode="Modeless"
16 ID="g_738691e4_8465_4ce4_8ca1_7d8a8923ee28" SuppressWebPartChrome="False"
17 Title="Site Image" AllowZoneChange="True" Dir="Default" IsVisible="True"
18 AlternativeText="Microsoft Windows SharePoint Services Logo" BackgroundColor="transparent" ConnectionID="00000000-0000-0000-0000-000000000000" AllowEdit="True" __MarkupType="vsattributemarkup" __WebPartId="{738691E4-8465-4CE4-8CA1-7D8A8923EE28}" WebPart="true" Height="" Width="">
19 </WebPartPages:ImageWebPart>
20 </ZoneTemplate>
21 </WebPartPages:WebPartZone>
22 </td>
Le due aree che vediamo all'interno di Sharepoint Designer sono racchiuse dai tag <WebPages:WebPartZone></WebPages:WebPartZone>, in questo esempio notiamo che la seconda contiene anche una WebPart:ImageWebPart in quanto di default Sharepoint include la classica immagine logo del sito appena creato. Una volta indivuduato il codice è banale la personalizzazione, infatti se ad esempio vogliamo creare una sola WebPartZone per la nostra pagina, centrata e che occupi tutta la larghezza della pagina non dobbiamo far altro che modificare il codice nel seguente modo:
1 <td valign="top" width="100%">
2 <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="Center" Title="loc:Center">
3 <ZoneTemplate></ZoneTemplate>
4 </WebPartPages:WebPartZone>
5 </td>
facendo attenzione a settare a 100% la larcghezza del <td> e modificare l'Id e titolo del controllo a "Center", cosi da non indurre in confusione i prossimi che dovranno modificare o ulteriormente personalizzare il contenuto. Il risultato è questo:
Attenzione, non utilizzate questo metodo se avete la necessità di personalizzare la struttura di un sito, per quello ci sono le site definition o i templaets ;-)