| By default, the Web Part Framework supports the following Display Modes: BrowseDisplayMode The default mode. DesignDisplayMode Enables you to drag and drop Web Parts between Web Part Zones. EditDisplayMode Enables you to select a Web Part for editing. Associated with Editor Zones. CatalogDisplayMode Enables you to add new Web Parts to a page. Associated with Catalog Zones. ConnectDisplayMode Enables you to connect Web Parts. Associated with Connections Zones.
Notice that the last three display modes are associated with particular tool zones. For example, when you select a Web Part for editing, the contents of the Editor Zone are displayed. Like most other aspects of the Web Part Framework, this list of Display Modes is not written in stone. You can extend the Web Part Framework with your own custom display modes. In this section, we'll create a custom Display Mode and an associated custom tool zone. We'll create a Help Display Mode. When a Web Parts page is in Help Display Mode, a help box appears above each Web Part. Furthermore, detailed help can be accessed from a HelpZone (see Figure 30.9). Figure 30.9. A page in Help Display Mode. 
Let's start by creating the Web Part Help Display Mode itself. The custom HelpDisplayMode class is contained in Listing 30.25. Listing 30.25. HelpDisplayMode.vb Imports System Imports System.Web.UI.WebControls.WebParts ''' <summary> ''' Defines custom Help Display Mode ''' </summary> Public Class HelpDisplayMode Inherits WebPartDisplayMode Public Sub New(ByVal name As String) MyBase.New(name) End Sub ''' <summary> ''' When true, users can move Web Parts ''' </summary> Public Overrides ReadOnly Property AllowPageDesign() As Boolean Get Return False End Get End Property ''' <summary> ''' When true, a HelpZone must be added ''' to the page. ''' </summary> Public Overrides ReadOnly Property AssociatedWithToolZone() As Boolean Get Return False End Get End Property ''' <summary> ''' When true, an error is raised when ''' personalization is disabled. ''' </summary> Public Overrides ReadOnly Property RequiresPersonalization() As Boolean Get Return False End Get End Property ''' <summary> ''' When true, hidden Web Parts ''' are displayed. ''' </summary> Public Overrides ReadOnly Property ShowHiddenWebParts() As Boolean Get Return True End Get End Property End Class
|
The HelpDisplayMode class overrides a number of properties from its base WebPartDisplayMode class. For example, you prevent users from dragging Web Parts between zones when Help Display Mode is enabled by setting the AllowPageDesign property to the value False. To use the custom Web Part Display Mode, you must modify the WebPartManager control. The modified WebPartManager control, named CustomWebPartManager, is contained in Listing 30.26. Listing 30.26. CustomWebPartManager.vb| [View full width] Imports System Imports System.Web.UI.WebControls.WebParts Namespace myControls ''' <summary> ''' Extends WebPartManager control with support for ''' HelpDisplayMode ''' </summary> Public Class CustomWebPartManager Inherits WebPartManager Public Shared ReadOnly HelpDisplayMode As HelpDisplayMode = New HelpDisplayMode  ("Help") Protected Overrides Function CreateDisplayModes() As WebPartDisplayModeCollection Dim modes As WebPartDisplayModeCollection = MyBase.CreateDisplayModes() modes.Add(HelpDisplayMode) Return modes End Function End Class End Namespace
|
In Listing 30.26, the CreateDisplayModes() method is overridden and the HelpDisplayMode class is added. Notice that the HelpDisplayMode class is exposed as a public field of the CustomWebPartManager. That way, you can use CustomWebPartManager.HelpDisplayMode in your code to refer to the custom Display Mode. Next, we need to create the Web Parts that displays in the page. These Web Parts will display a floating help box. They are contained in Listing 30.27 and Listing 30.28. Listing 30.27. FirstHelpPart.ascx| [View full width] <%@ Control Language="VB" ClassName="FirstHelpPart" %> <%@ Import Namespace="myControls" %> <script runat="server"> Sub Page_PreRender() Dim wpm As CustomWebPartManager = CType(WebPartManager.GetCurrentWebPartManager (Page), CustomWebPartManager) divHelp.Visible = (wpm.DisplayMode Is CustomWebPartManager.HelpDisplayMode) End Sub </script> <div runat="server"> Here is the help for the FirstHelpPart control! </div> <h1>First Help Part</h1>
|
Listing 30.28. SecondHelpPart.ascx| [View full width] <%@ Control Language="VB" ClassName="SecondHelpPart" %> <%@ Import Namespace="myControls" %> <script runat="server"> Sub Page_PreRender() Dim wpm As CustomWebPartManager = CType(WebPartManager.GetCurrentWebPartManager (Page), CustomWebPartManager) divHelp.Visible = (wpm.DisplayMode Is CustomWebPartManager.HelpDisplayMode) End Sub </script> <div runat="server"> Here is the help for the SecondHelpPart control! </div> <h1>Second Help Part</h1>
|
Both Web Parts contain a <div> tag that has a brief help message. The contents of the <div> tag are hidden or displayed in the Page_PreRender() method, depending on the current Web Part Display Mode. Next, we need to create the custom HelpZone control. This control can be used to display extended help for the page. The HelpZone control is contained in Listing 30.29. Listing 30.29. HelpZone.vb Imports System Imports System.Web.UI Imports System.Web.UI.WebControls.WebParts Namespace myControls ''' <summary> ''' Displays extended page help when a page ''' is in Help Display Mode ''' </summary> Public Class HelpZone Inherits ToolZone Private _contents As String = "Help Contents" Private _headerText As String = "Help" Public Sub New() MyBase.New(CustomWebPartManager.HelpDisplayMode) End Sub ''' <summary> ''' Text displayed in title bar ''' </summary> Public Overrides Property HeaderText() As String Get Return _headerText End Get Set(ByVal Value As String) _headerText = Value End Set End Property ''' <summary> ''' Represents the help text displayed in the ''' Help Zone ''' </summary> <PersistenceMode(PersistenceMode.InnerProperty)> _ Public Property Contents() As String Get Return _contents End Get Set(ByVal Value As String) _contents = Value End Set End Property ''' <summary> ''' Renders the help text ''' </summary> Protected Overrides Sub RenderBody(ByVal writer As HtmlTextWriter) writer.Write(_contents) End Sub ''' <summary> ''' When the user clicks Close, switch ''' back to Browse Display Mode ''' </summary> Protected Overrides Sub Close() Me.WebPartManager.DisplayMode = WebPartManager.BrowseDisplayMode End Sub End Class End Namespace
|
The HelpZone control takes whatever text is contained in its <Contents> tag and renders it. The text appears only when the page is in Help Display Mode. Finally, we can create the page that hosts all of the custom controls. The page in Listing 30.30 contains the CustomWebPartManager control, the custom HelpZone control, and the two custom Web Parts. Listing 30.30. ShowHelpDisplayMode.aspx <%@ Page Language="VB" %> <%@ Register TagPrefix="custom" Namespace="myControls" %> <%@ Register TagPrefix="user" TagName="FirstHelpPart" src="/books/3/444/1/html/2/~/FirstHelpPart.ascx" %> <%@ Register TagPrefix="user" TagName="SecondHelpPart" src="/books/3/444/1/html/2/~/SecondHelpPart.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server"> Protected Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs) CustomWebPartManager1.DisplayMode = CustomWebPartManager1.DisplayModes(e.Item.Text) End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <style type="text/css"> .divHelp { position:absolute; width:200px; top:10px; left:20px; border:solid 2px orange; background-color:#FFFFE0; padding:5px; font:12px Arial,sans-serif; filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=-5, OffY=5, Color=#cccccc) } .helpZone { border:solid 2px orange; background-color:#FFFFE0; padding:5px; } .column table { position:relative; } .column { float:left; width:30%; height:200px; margin-right:10px; border:solid 1px black; background-color: white; } .menu { margin:5px 0px; } html { background-color:#eeeeee; } </style> <title>Show Help Display Mode</title> </head> <body> <form runat="server"> <custom:CustomWebPartManager Runat="server" /> <asp:Menu OnMenuItemClick="Menu1_MenuItemClick" Orientation="Horizontal" Css Runat="server"> <Items> <asp:MenuItem Text="Browse" /> <asp:MenuItem Text="Design" /> <asp:MenuItem Text="Help" /> </Items> </asp:Menu> <asp:WebPartZone Css Runat="server"> <ZoneTemplate> <user:FirstHelpPart Title="First Web Part" runat="Server" /> </ZoneTemplate> </asp:WebPartZone> <asp:WebPartZone Css Runat="server"> <ZoneTemplate> <user:SecondHelpPart Title="Second Web Part" runat="Server" /> </ZoneTemplate> </asp:WebPartZone> <custom:HelpZone Css runat="Server"> <Contents> This is the extended help for this page. </Contents> </custom:HelpZone> </form> </body> </html>
|
After you open the page in Listing 30.30, you can click the Help link to switch the page into Help Display Mode. When you switch to Help Display Mode, you should see help messages pop up above each Web Part. Furthermore, the contents of the HelpZone are displayed. The page in Listing 30.30 takes advantage of its style sheet to perform most of the formatting. For example, the floating help boxes are created with the help of the divHelp CSS class. | 