Evjen c17.tex V2 - 01/28/2008 2:58pm Page 817 Chapter 17: Portal Frameworks and Web Parts 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 17-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 17-5 shows what the sample from Listing 17-2 looks like in the Design view of Visual Studio 2008. Figure 17-3 When using Visual Studio 2008, note that by default this IDE creates a Microsoft SQL Server Express Edition file called ASPNETDB.MDF and stores it in the App_Data folder of your Web Project. This database file is where the Portal Framework stores all the customization points. Note that if you want this portal framework to run from SQL Server 7.0, 2000, 2005, or 2008, you should follow the se-up instructions that are defined in Chapter 12. Now that you have seen the use of WebPartZone controls, which are managed by the WebPartManager control, the next section takes a closer look at the WebPartZone server control itself. Understanding the WebPartZone Control The WebPartZone control defines an area of items, or Web Parts, that can be moved, minimized, max- imized, deleted, or added based on programmatic code or user preferences. When you drag and drop WebPartZone controls onto the design surface using Visual Studio 2008, the WebPartZone control is drawn at the top of the zone, along with a visual representation of any of the items contained within the zone. You can place almost anything in one of the Web zones. For example, you can include the following: ❑ HTML elements (when putting a runat = "server" on the element) ❑ HTML server controls 817 Evjen c17.tex V2 - 01/28/2008 2:58pm Page 818 Chapter 17: Portal Frameworks and Web Parts ❑ Web server controls ❑ User controls ❑ Custom controls Figure 17-4 WebPartZone controls are declared like this: < asp:WebPartZone ID="WebPartZone1" Runat="server" >< /asp:WebPartZone > 818 Evjen c17.tex V2 - 01/28/2008 2:58pm Page 819 Chapter 17: Portal Frameworks and Web Parts Figure 17-5 The LayoutOrientation Attribute The Web Parts declared within a WebPartZone control can be displayed either horizontally or vertically. By default, all the items are displayed vertically, but to display the items horizontally, you simply add the LayoutOrientation attribute to the < asp:WebPartZone > element: < asp:WebPartZone ID="WebPartZone1" Runat="server" LayoutOrientation="Horizontal" >< /asp:WebPartZone > The first row in the table from Listing 17-2 uses horizontal orientation, whereas the other two zones use the default vertical orientation. The ZoneTemplate Element In order to include items within the templated WebPartZone control, you must include a < ZoneTemplate > element. 819 Evjen c17.tex V2 - 01/28/2008 2:58pm Page 820 Chapter 17: Portal Frameworks and Web Parts The ZoneTemplate element encapsulates all the items contained within a particular zone. The order in which they are listed in the ZoneTemplate section is the order in which they appear in the browser until changed by the end user or by programmatic code. The sample < ZoneTemplate > section used earlier is illustrated here: < asp:WebPartZone ID="WebPartZone2" Runat="server" > < ZoneTemplate > < asp:Image ID="Image1" Runat="server" ImageUrl="~/Images/Tuija.jpg" Width="150" Title="Tuija at the Museum" > < /asp:Image > < uc1:DailyLinks ID="DailyLinks1" runat="server" Title="Daily Links" > < /uc1:DailyLinks > < /ZoneTemplate > < /asp:WebPartZone > This zone contains two items — an Image server control and a user control consisting of a collection of links that come from an XML file. Default Web Part Control Elements By default, when you generate a page using the code from Listing 17-2, you discover that you can exert only minimal control over the Web Parts themselves. In the default view, which is not the most artistic in this case, you are able only to minimize or close a Web Part. You can see these options when you click on the down arrow that is presented next to the name of the Web Part. Figure 17-6 shows what the Web Part that contains the Calendar control looks like after you minimize it. Notice also that if you opt to close one of the Web Parts, the item completely disappears. There seems to be no way to make it come back — even if you shut down the page and restart it. This is by design — so don’t worry. I will show you how to get it back! A few of the items included in the zones have new titles. By default, the title that appears at the top of the Web Part is the name of the control. For instance, you can see that the Calendar control is simply titled Calendar. If you add a Button control or any other control to the zone, at first it is simply titled Untitled. To give better and more meaningful names to the Web Parts that appear in a zone, you simply add a Title attribute to the control — just as was done with the Image control and the User control, which both appear on the page. In the preceding code example, the Image control is renamed to Tuija at the Museum , and the user control is given the Title value Daily Links . Besides this little bit of default functionality, you can do considerably more with the Web Parts contained within this page, but you have to make some other additions. These are reviewed next. Allowing the User to Change the Mode of the Page Working with the WebPartManager class either directly or through the use of the WebPartManager server control, you can have the mode of the page changed. Changing the mode of the page being viewed allows the user to add, move, or change the pages they are working with. The nice thing about the Web Part capabilities of ASP.NET is that these changes are then recorded to the ASPNETDB.MDF database file and are, therefore, re-created the next time the user visits the page. 820 Evjen c17.tex V2 - 01/28/2008 2:58pm Page 821 Chapter 17: Portal Frameworks and Web Parts Figure 17-6 Using the WebPartManager object, you can enable the user to do the following, as defined in this list: ❑ Add new Web Parts to the page: Includes Web Parts not displayed on the page by default and Web Parts that the end user has previously deleted. This aspect of the control works with the cat- alog capabilities of the Portal Framework, which is discussed shortly. ❑ Enter the Design mode for the page: Enables the end user to drag and drop elements around the page. The end user can use this capability to change the order in which items appear in a zone or to move items from one zone to another. ❑ Modify the Web Parts settings: Enables the end user to customize aspects of the Web Parts, such as their appearance and behavior. It also allows the end user to modify any custom settings that developers apply to the Web Part. 821 Evjen c17.tex V2 - 01/28/2008 2:58pm Page 822 Chapter 17: Portal Frameworks and Web Parts ❑ Connect Web Parts on the page: Enables the end user to make a connection between one or more Web Parts on the page. For example, when an end user working in a financial services applica- tion enters a stock symbol into an example Web Part, he can use a connection to another Web Part to see a stock chart change or news appear based on that particular stock symbol. All of this is based on the variable defined in the first Web Part. Building on Listing 17-2, Listing 17-3 adds a DropDownList control to the table’s header. This drop-down list provides a list of available modes the user can employ to change how the page is displayed. Again, the mode of the page determines the actions the user can initiate directly on the page (this is demonstrated later in this chapter). Listing 17-3: Adding a list of modes to the page VB < %@ Page Language="VB"% > < %@ Register Src="DailyLinks.ascx" TagName="DailyLinks" TagPrefix="uc1" % > < script runat="server" > Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, _ ByVal e As System.EventArgs) Dim wpDisplayMode As WebParts.WebPartDisplayMode = _ Webpartmanager1.SupportedDisplayModes(DropDownList1.SelectedValue.ToString()) Webpartmanager1.DisplayMode = wpDisplayMode End Sub Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) For Each wpMode As WebPartDisplayMode In _ Webpartmanager1.SupportedDisplayModes Dim modeName As String = wpMode.Name Dim dd_ListItem As ListItem = New ListItem(modeName, modeName) DropDownList1.Items.Add(dd_ListItem) Next End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head id="Head1" 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="2" > < h1 > Bill Evjen’s Web Page < /h1 > < asp:WebPartZone ID="WebPartZone1" Runat="server" LayoutOrientation="Horizontal" > < ZoneTemplate > Continued 822 Evjen c17.tex V2 - 01/28/2008 2:58pm Page 823 Chapter 17: Portal Frameworks and Web Parts < asp:Label ID="Label1" Runat="server" Text="Label" Title="Welcome to my web page!" > Welcome to the page! < /asp:Label > < /ZoneTemplate > < /asp:WebPartZone > < /td > < td valign="top" > Select mode: < asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" > < /asp:DropDownList > < /td > < /tr > < tr valign="top" > < td > < asp:WebPartZone ID="WebPartZone2" Runat="server" > < ZoneTemplate > < asp:Image ID="Image1" Runat="server" ImageUrl="~/Images/Tuija.jpg" Width="150px" Title="Tuija at the Museum" > < /asp:Image > < uc1:DailyLinks ID="DailyLinks1" runat="server" Title="Daily Links" > < /uc1:DailyLinks > < /ZoneTemplate > < /asp:WebPartZone > < /td > < td > < asp:WebPartZone ID="WebPartZone3" Runat="server" > < ZoneTemplate > < asp:Calendar ID="Calendar1" Runat="server" Title="Calendar" > < /asp:Calendar > < /ZoneTemplate > < /asp:WebPartZone > < /td > < td >< ! Blank for now > < /td > < /tr > < /table > < /form > < /body > < /html > C# < %@ Page Language="C#"% > < %@ Register Src="DailyLinks.ascx" TagName="DailyLinks" TagPrefix="uc1" % > < script runat="server" > protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { WebParts.WebPartDisplayMode wpDisplayMode = Continued 823 Evjen c17.tex V2 - 01/28/2008 2:58pm Page 824 Chapter 17: Portal Frameworks and Web Parts Webpartmanager1.SupportedDisplayModes[DropDownList1.SelectedValue.ToString()]; Webpartmanager1.DisplayMode = wpDisplayMode; } protected void Page_Init(object sender, EventArgs e) { foreach (WebPartDisplayMode wpMode in Webpartmanager1.SupportedDisplayModes) { string modeName = wpMode.Name; ListItem dd_ListItem = new ListItem(modeName, modeName); DropDownList1.Items.Add(dd_ListItem); } } < /script > This adds a drop-down list to the top of the table, as shown in Figure 17-7. This drop-down list will allow the end user to switch between the Browse and Design modes. Figure 17-7 824 Evjen c17.tex V2 - 01/28/2008 2:58pm Page 825 Chapter 17: Portal Frameworks and Web Parts When the end user clicks the link, a drop-down window of options appears, as shown in Figure 17-8. Figure 17-8 Using the Page_Init event, the drop-down list is populated with a list of the available page modes that are accessible at this particular time. In this case, it is Browse and Design. The Browse mode is the default mode used when the page is first created. The Design mode causes the ASP.NET page to show the WebPartZone sections. In this mode, the user can drag and drop controls from one section to another with relative ease. Again, the positioning of the elements contained in the page is remembered from one application visit to the next. It is important to note that the Design mode is only able to work in Internet Explorer browsers. The DropDownList control is populated by iterating through a list of available WebPartDisplayMode objects contained in the SupportedDisplayModes property (which is of type WebPartDisplayMode- Collection ). These modes are available through the WebPartManager1 control, which was placed on the page and is in charge of managing the modes and change of modes of the page. These WebPartDisplay- Mode objects are then used to populate the DropDownList control. When the end user selects one of the available modes displayed in the DropDownList control, using the AutoPostBack feature of the control, the page is then changed to the selected mode. This is done using the first creating an instance of a WebPartDisplayMode object and populating it with the value of the mode selected from the drop-down list. Then, using this WebPartDisplayMode object, the DisplayMode property of the WebPartManager object is assigned with this retrieved value. The next section covers an important addition to the Portal Framework — the capability to add Web Parts dynamically to a page. Adding Web Parts to a Page The next step is to rework the example so that the end user has a built-in way to add Web Parts to the page through the use of the Portal Framework. The ASP.NET Portal Framework enables an end user to add Web Parts, but you must also provide the end user with a list of items he can add. To do this, simply add a Catalog Zone to the last table cell in the bottom of the table, as illustrated in the partial code example in Listing 17-4. Listing 17-4: Adding a Catalog Zone < tr valign="top" > < td > < asp:WebPartZone ID="WebPartZone2" runat="server" > < ZoneTemplate > < asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Tuija.jpg" Width="150px" Title="Tuija at the Museum" > Continued 825 Evjen c17.tex V2 - 01/28/2008 2:58pm Page 826 Chapter 17: Portal Frameworks and Web Parts < /asp:Image > < uc1:DailyLinks ID="DailyLinks1" runat="server" Title="Daily Links" > < /uc1:DailyLinks > < /ZoneTemplate > < /asp:WebPartZone > < /td > < td > < asp:WebPartZone ID="WebPartZone3" runat="server" > < ZoneTemplate > < asp:Calendar ID="Calendar1" runat="server" Title="Calendar" > < /asp:Calendar > < /ZoneTemplate > < /asp:WebPartZone > < /td > < td > < asp:CatalogZone ID="Catalogzone1" runat="server" > < ZoneTemplate > < asp:PageCatalogPart ID="Pagecatalogpart1" runat="server"/ > < /ZoneTemplate > < /asp:CatalogZone > < /td > < /tr > Once a Catalog Zone section is present on the page, the page is enabled for the Catalog mode. You need to create a Catalog Zone section by using the < asp:CatalogZone > control. This is similar to creating a Web Part Zone, but the Catalog Zone is specifically designed to allow for categorization of the items that can be placed on the page. Notice that Catalog mode does not appear as an option in the drop-down list of available modes until a CatalogZone control is placed on the page. If no CatalogZone control is present on the page, this option is not displayed. After the Catalog Zone is in place, the next step is to create a < ZoneTemplate > section within the Cat- alog Zone because this is also a templated control. Inside the < ZoneTemplate > element is a single control — the PageCatalogPart control. If you run the page after adding the PageCatalogPart control and change the mode to Catalog, you will see the results shown in Figure 17-9. To get some items to appear in the list (since none do at present), delete one or more items (any items contained on the page when viewing the page in the browser) from the page’s default view and enter the Catalog mode by selecting Catalog from the drop-down list of modes. At this point, you can see the deleted Web Parts in the Catalog Zone. The PageCatalogPart control con- tains a title and check box list of items that can be selected. The PageCatalogPart control also includes a drop-down list of all the available Web Part Zones on the page. From here, you can place the selected Web Parts into one of the Web Part Zones available from this list. After you select the Web Parts and the appropriate zone in which you want to place the item, you click the Add button and the items appear in the specified locations. Moving Web Parts Not only can the end user change the order in which Web Parts appear in a zone, he can also move Web Parts from one zone to another. By adding the capability to enter the Design mode through the 826 . c17.tex V2 - 01/28/2008 2 :58 pm Page 817 Chapter 17: Portal Frameworks and Web Parts directly in the code, or you can create the zones within the table by dragging and dropping WebPartZone controls onto. Links" > < /uc1:DailyLinks > < /ZoneTemplate > < /asp: WebPartZone > < /td > < td > < asp: WebPartZone ID="WebPartZone3" runat="server" > < ZoneTemplate > < asp: Calendar. encapsulates all the items contained within a particular zone. The order in which they are listed in the ZoneTemplate section is the order in which they appear in the browser until changed by