Web Parts provide users with the ability to change the layout of the Web Part controls by dragging them from zone to zone. You may also allow your users to modify the appearance of the controls, their layout and their behavior. The built-in Web Parts control set provides basic editing of any Web Part control on the page. You an also create custom editor controls that allow users to do more extensive editing. 12.8.1. Creating a User Control to Enable Changing Page LayoutTo edit the contents of zones or move controls from one zone to another, you need to be able to enter Edit and Design mode. To do so, you will create a new user control called DisplayModeMenu.ascx, that will allow the user to change modes among Browse, Edit, and Design, as shown in Figure 12-55. Figure 12-55. Display Mode user controlRight-click on the web project in the Solution explorer and choose Add New Item. Select Web User Control and name the new user control DisplayModeMenu.
Add the highlighted code listed in in Example 12-25 to the content file of your new user control. Example 12-25. DisplayModeMenu .ascx file <%@ Control Language="VB" AutoEventWireup="false" CodeFile="DisplayModeMenu.ascx.vb " Inherits="DisplayModeMenu" %> <div> <asp:Panel runat="server" Borderwidth="1" Width="230" BackColor="lightgray" Font-Names="Verdana, Arial, Sans Serif" > <asp:Label runat="server" Text=" Display Mode" Font-Bold="true" Font-Size="8" Width="120" /> <asp:DropDownList runat="server" AutoPostBack="true" EnableViewState="false" Width="120" OnSelectedIndexChanged="ddlDisplayMode_SelectedIndexChanged" /> </asp:Panel> </div> This code creates a panel, and within that panel it adds a single drop-down list (ddlDisplayMode). It also sets the event handler for when the Selected item changes in the drop-down list. To support this page, open the code-behind file (DisplayModeMenu.ascx.vb) and add the code shown in Example 12-26. Example 12-26. DisplayModeMenu.ascx.vbImports System.Web.UI Partial Class DisplayModeMenu Inherits System.Web.UI.UserControl Dim myWebPartManager As WebPartManager Protected Sub Page_Init( _ ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Init AddHandler Page.InitComplete, AddressOf Page_InitComplete End Sub Protected Sub Page_InitComplete( _ ByVal sender As Object, _ ByVal e As System.EventArgs) myWebPartManager = _ WebPartManager.GetCurrentWebPartManager(Page) For Each mode As WebPartDisplayMode In _ myWebPartManager.SupportedDisplayModes Dim modeName As String = mode.Name If mode.IsEnabled(myWebPartManager) Then Dim myListItem As ListItem = _ New ListItem(modeName, modeName) ddlDisplayMode.Items.Add(myListItem) End If Next End Sub Protected Sub ddlDisplayMode_SelectedIndexChanged( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles ddlDisplayMode.SelectedIndexChanged Dim selectedMode As String = ddlDisplayMode.SelectedValue Dim mode As WebPartDisplayMode = _ myWebPartManager.SupportedDisplayModes(selectedMode) If (mode IsNot Nothing) Then myWebPartManager.DisplayMode = mode End If End Sub Protected Sub Page_PreRender( _ ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.PreRender Dim items As ListItemCollection = ddlDisplayMode.Items Dim selectedIndex As Integer = _ items.IndexOf(items.FindByText(myWebPartManager.DisplayMode.Name)) ddlDisplayMode.SelectedIndex = selectedIndex End Sub End Class Open the WebPartsDemo page in Design mode and make a space between the WebPartManager and the table of zones. Drag the DisplayModeMenu.ascx file from the Solution explorer into that space. Change to Source view and notice that Visual Studio 2005 has done two things for you: it has registered the new control: <%@ Register src="/books/2/660/1/html/2/DisplayModeMenu.ascx" TagName="DisplayModeMenul" TagPrefix="uc1" %> and it has placed the control into the form: <div> <asp:WebPartManager runat="server" /> <uc1:DisplayModeMenul runat="server" /> Before testing this, delete the Web Part Zone in the lower righthand cell in the table and drag an Editor Zone into that cell. Drag an AppearanceEditorPart and a LayoutEditorPart onto the Editor Zone. To make the Editor Zone stand out, click on its smart tab and choose AutoFormat and then Professional. Your design page should look more or less like Figure 12-56. Figure 12-56. Editor Zone12.8.1.1. Moving a PartRun the application. When you log in and go to the Web Parts page, you are in Browse mode. Use the Display mode drop-down list to switch to Design mode and all the zones (except the Editing Zone) appear. You can now click on any Web Part (e.g., Today's News) and drag it to any other zone, as shown in Figure 12-57. 12.8.1.2. Editing a PartNext, change the drop-down list to Edit mode. Nothing much happens, but click on the drop-down tag on one of the Web Part controls. A menu appears that now includes Edit, as shown in Figure 12-58. Click Edit and the Edit Zone appears, allowing you to edit the current Web Part, as shown in Figure 12-59. The Appearance editor lets you change the title and look of the Web Part, while the Layout lets you change, among other things, the zone where the Web Part will appear. Figure 12-57. Dragging a Web PartFigure 12-58. Edit mode12.8.2. Adding Parts from a CatalogYou may want to provide a catalog of Web Parts that your users can add to the various zones. To do so, open WebPartsDemo.aspx and find Zone 4. Remove it from the cell so that the cell is empty. Next, drag a CatalogZone control into newly empty cell. Click on the zone and in the Properties window make sure the HeaderText property is set to Catalog Zone. Drag a DeclarativeCatalogPart control into the zone, as shown in Figure 12-60. Click the smart tag on the DeclarativeCatalogPart and select Edit Templates. From the standard tab of the Toolbox drag on a Calendar and a File Upload control, as shown in Figure 12-61. Figure 12-59. Editor Zone in actionFigure 12-60. Adding a DeclarativeCatalogPart controlFigure 12-61. Dragging controls into the Declarative TemplateBefore you run your program, switch to Source view and find the catalog zone you've added. Within the <WebPartsTemplate> element, add a Title attribute to both the Calendar and the File Upload controls, as shown in Example 12-27. (Again, IntelliSense will not like this attribute, but be strong and do it anyway.) Example 12-27. Catalog Zone <asp:CatalogZone runat="server"> <ZoneTemplate> <asp:DeclarativeCatalogPart runat="server"> <WebPartsTemplate> <asp:Calendar runat="server" title="Calendar" /> <asp:FileUpload runat="server" title="Upload Files" /> </WebPartsTemplate> </asp:DeclarativeCatalogPart> </ZoneTemplate> </asp:CatalogZone> Run the application. Drop down the display mode and notice that the Catalog mode has been added, as shown in Figure 12-62. Figure 12-62. Catalog added to Display modeWhen you select Catalog, the Catalog Zone is displayed. You may select one of the controls and decide which zone to place it in, as shown in Figure 12-63. Figure 12-63. Adding a control from the catalogOnce you've picked your control and the zone to add it to, click Add and the control instantly appears in the designated zone. |