12.8. Enabling Editing and Layout Changes


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 Layout

To 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 control


Right-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.

User controls are described in detail in Chapter 13.


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="&nbsp;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.vb
 Imports 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 Zone


12.8.1.1. Moving a Part

Run 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 Part

Next, 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 Part


Figure 12-58. Edit mode


12.8.2. Adding Parts from a Catalog

You 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 action


Figure 12-60. Adding a DeclarativeCatalogPart control


Figure 12-61. Dragging controls into the Declarative Template


Before 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 mode


When 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 catalog


Once you've picked your control and the zone to add it to, click Add and the control instantly appears in the designated zone.



Programming Visual Basic 2005
Programming Visual Basic 2005
ISBN: 0596009496
EAN: 2147483647
Year: 2006
Pages: 162
Authors: Jesse Liberty

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net