Using Themes and Skins for Personalization with Visual Basic 2005 - Enabling Editing and Layout Changes
(Page 6 of 7 )

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 can also create custom editor controls that allow users to do more extensive editing.

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

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 ID="Panel1" runat="server"
    Borderwidth="1"
    Width="230"
    BackColor="lightgray"
    Font-Names="Verdana, Arial, Sans Serif" >
    <asp:Label ID="Label1" runat="server"
      Text="&nbsp;Display Mode"
      Font-Bold="true"
      Font-Size="8"
      Width="120" />
    <asp:DropDownList ID="ddlDisplayMode" 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 theWebPartsDemopage in Design mode and make a space between theWebPartManagerand 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="DisplayModeMenu.ascx" TagName="DisplayModeMenul"
  TagPrefix="uc1" %>

and it has placed the control into the form:

  <div>
      <asp:WebPartManager ID="WebPartManager1" runat="server" />
    <uc1:DisplayModeMenul ID="DisplayModeMenul1" 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

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.

Next: Editing a Part >>
 

More Visual Basic.NET Articles
More By O'Reilly Media

Comments On: Using Themes and Skins for Personalization with Visual Basic 2005

· This article is an excerpt from the book "Programming Visual Basic 2005," published...   >>> Post your comment now!

Buy this book...

This article is excerpted from chapter 12 of the book Programming Visual Basic 2005, written by Jesse Liberty (O'Reilly, 2005; ISBN: 0596009496). Check it out today at your favorite bookstore. Buy this book now.