Portal Frameworks and Web Parts
Figure 10-1
Building Dynamic and Modular Web Sites
As you begin using the new Portal Framework to build Web sites, note that the framework defines everything in zones. There are zones for laying out content and zones for editing content. The zones that a page might incorporate are managed by a Portal Framework manager — they don’t have to be managed by you in any fashion — which makes working with this new Portal Framework a breeze.
This framework contains a lot of moving parts (pieces that are dependent upon each other), so I start at the beginning by examining the Portal Framework manager control: WebPartManager.
Introducing the WebPartManager control
The WebPartManager control is an ASP.NET server control that completely manages the state of the zones and the content placed in the zones on a per-user basis. This control, which has no visual aspect, can add and delete items contained within each zone of the page. The WebPartManager control can also
293
Chapter 10
manage the communications sometimes required between different elements contained in the zones. For example, you can pass a specific name/value pair from one item to another item within the same zone, or between items contained in entirely separate zones. The WebPartManager control provides the capabilities to make this communication happen.
The WebPartManager control is required to be in place on every page in your application that works with the Portal Framework. A single WebPartManager control does not manage an entire application; it manages on a per-page basis.
Listing 10-1 shows a WebPartManager control added to an ASP.NET page.
Listing 10-1: Adding a WebPartManager control to an ASP.NET page
<%@ Page Language=”VB” %>
<html xmlns=”http://www.w3.org/1999/xhtml” > <head runat=”server”>
<title>Web Parts Example</title> </head>
<body>
<form id=”form1” runat=”server”>
<asp:WebPartManager ID=”Webpartmanager1” Runat=”server”> </asp:WebPartManager>
</form>
</body>
</html>
If you want to work from the design surface of Visual Studio 2005, you can drag and drop the WebPartManager control from the Toolbox to the design surface — but remember, it does not have a visual aspect and appears only as a gray box. You can find the WebPartManager control (and the other server controls that are part of the Portal Framework) in the Personalization section of the Toolbox, as shown in Figure 10-2.
Working with zone layouts
After you place the WebPartManager control, the next step is to create zones on the page on which you want to utilize the Portal Framework. You should give this step some thought because it contributes directly to the usability of the page you are creating. Web pages are constructed in a linear fashion — either horizontally or vertically. Web pages are managed in square boxes — usually through the use of tables that organize the columns and rows in which items appear on the page.
Web zones define specific rows or columns as individual content areas managed by the WebPartManager. For an example of a Web page that uses these zones, you can create a table similar to the one shown in Figure 10-3.
294
Portal Frameworks and Web Parts
Figure 10-2
Figure 10-3
295
Chapter 10
The black sections in Figure 10-3 represent Web zones. The code used to produce the table is shown in Listing 10-2.
Listing 10-2: Creating multiple Web zones
<%@ Page Language=”VB”%>
<%@ Register TagPrefix=”myUserControl1” TagName=”DailyLinksWebPart” Src=”~/controls/DailyLinksWebPart.ascx” %>
<html xmlns=”http://www.w3.org/1999/xhtml” > <head runat=”server”>
<title>Web Parts Example</title> </head>
<body>
<form id=”form1” runat=”server”>
<asp:WebPartManager ID=”Webpartmanager1” Runat=”server”> </asp:WebPartManager>
<table cellpadding=”5” border=”1”> <tr>
<td colspan=”3”>
<h1>Bill Evjen’s Web Page</h1>
<asp:WebPartZone ID=”WebPartZone1” Runat=”server” LayoutOrientation=”Horizontal”>
<ZoneTemplate>
<asp:Label ID=”Label1” Runat=”server” Text=”Label” Title=”Welcome to my web page!”>
Welcome to the page! </asp:Label>
</ZoneTemplate>
</asp:WebPartZone>
</td>
</tr>
<tr valign=”top”> <td>
<asp:WebPartZone ID=”WebPartZone2” Runat=”server”> <ZoneTemplate>
<asp:DynamicImage ID=”DynamicImage1” Runat=”server” ImageFile=”~/kids.jpg” Width=”150” Title=”My Kids”> </asp:DynamicImage> <myUserControl1:DailyLinksWebPart ID=”DailyLinksWebPart1” Runat=”server” Title=”Daily Links” > </myUserControl1:DailyLinksWebPart >
</ZoneTemplate>
</asp:WebPartZone>
</td>
<td>
<asp:WebPartZone ID=”WebPartZone3” Runat=”server”> <ZoneTemplate>
<asp:Calendar ID=”Calendar1” Runat=”server”> </asp:Calendar>
</ZoneTemplate>
</asp:WebPartZone>
</td>
<td><!-- Blank for now -->
296
Portal Frameworks and Web Parts
</td>
</tr>
</table>
</form>
</body>
</html>
This page now has sections like the ones shown in Figure 10-3: a header section that runs horizontally and three vertical sections underneath the header. Running this page provides the result shown in Figure 10-4.
Figure 10-4
First, this page includes the <asp:WebPartManager> control that manages the items contained in the three zones on this page. Within the table, the <asp:WebPartZone> server control specifies three Web zones. You can declare each Web zone in one of two ways. You can use the <asp:WebPartZone> element directly in the code, or you can create the zones within the table by dragging and dropping WebPartZone controls onto the design surface at appropriate places within the table. In Figure 10-4, the table border width is intentionally turned on and set to 1 in order to show the location of the Web zones in greater detail. Figure 10-5 shows what the sample from Listing 10-2 looks like in the Design view of Visual Studio 2005.
297