| You use an Editor Zone to enable users to edit the Web Parts contained in a page. An Editor Zone can contain one or more Editor Parts. The contents of an Editor Zone are displayed only when the page is in Edit Display Mode. The Web Part Framework includes four standard Editor Parts: the AppearanceEditorPart, the BehaviorEditorPart, the LayoutEditorPart, and the PropertyGridEditorPart. This section discusses each of these Editor Parts. Note You can create your own Editor Parts. This option is explored in Chapter 30, "Extending the Web Part Framework." Using the Appearance Editor Part The AppearanceEditorPart control is useful for an administrator of a Web Part application, who can use the part to modify the general appearances of the Web Parts in the application (see Figure 27.11). This control enables you to modify the following properties of a Web Part: Title The title displayed for a Web Part in the Web Part title bar. ChromeType The type of chrome rendered around a Web Part. Possible values are Default, TitleAndBorder, TitleOnly, BorderOnly, and None. Direction The direction that text is displayed in a Web Part. This property is useful when working with languages that are written from right to left, such as Arabic. Height The pixel height of the Web Part. Width The pixel width of the Web Part. Hidden When true, the Web Part is not displayed in a browser. The Web Part is rendered with a display:hidden Cascading Style Sheet property.
Figure 27.11. Using the AppearanceEditorPart.
The page in Listing 27.16 illustrates how you can add the AppearanceEditorPart to an Editor Zone. Listing 27.16. ShowAppearanceEditorPart.aspx| <%@ Page Language="VB" %> <%@ Register TagPrefix="user" TagName="FirstSimplePart" src="/books/3/444/1/html/2/~/FirstSimplePart.ascx" %> <%@ Register TagPrefix="user" TagName="SecondSimplePart" src="/books/3/444/1/html/2/~/SecondSimplePart.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server"> Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs) WebPartManager1.DisplayMode = WebPartManager1.DisplayModes(e.Item.Text) End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <style type="text/css"> .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 Appearance Editor Part</title> </head> <body> <form runat="server"> <asp:WebPartManager Runat="server" /> <asp:Menu OnMenuItemClick="Menu1_MenuItemClick" Orientation="Horizontal" Css Runat="server"> <Items> <asp:MenuItem Text="Browse" /> <asp:MenuItem Text="Design" /> <asp:MenuItem Text="Edit" /> </Items> </asp:Menu> <asp:WebPartZone Css Runat="server"> <ZoneTemplate> <user:FirstSimplePart Title="First Web Part" Description="Our first simple Web Part" Runat="server" /> <user:SecondSimplePart Title="Second Web Part" Description="Our second simple Web Part" Runat="server" /> </ZoneTemplate> </asp:WebPartZone> <asp:WebPartZone Css Runat="server" /> <asp:EditorZone Css Runat="server"> <ZoneTemplate> <asp:AppearanceEditorPart Runat="server" /> </ZoneTemplate> </asp:EditorZone> </form> </body> </html> |
After you open the page in Listing 27.16, you can view the Appearance Editor Part by clicking the page menu's Edit link, and then selecting Edit from either of the two Web Part control menus. Using the Behavior Editor Part The Behavior Editor Part can be used to modify properties of a Web Part that have Shared personalization scope. In other words, it can be used to modify the properties that appear for all users and not only the current user. The Behavior Editor Part enables you to modify the following properties: Description Enables you to set the Web Part description that appears as a tooltip when you hover your mouse over a Web Part. Title Link Enables you to convert the title of a Web Part into a hyperlink to a page. Title Icon Image Link Enables you to specify an image that appears in a Web Part title bar. Catalog Icon Image Link Enables you to specify an image that appears when a Web Part is listed in a Catalog Part. Help Link Enables you to add a Help menu item that links to a help page. Help Mode Enables you to specify how the help window appears when you select a Web Part's Help menu option. Possible values are Modal, Modeless, and Navigate. Import Error Message Enables you to specify the error text that appears when a Web Part is imported with an ImportCatalogPart control that fails. Export Mode Enables you to specify whether a Web Part can be exported. Possible values are Do Not Allow, Export All Values, and Non-Sensitive Data Only. Authorization Filter Enables you to specify a string that can be used to determine whether a Web Part can be added to a page. Allow Close Enables you to prevent users from closing a Web Part. Allow Connect Enables you to specify whether a user is allowed to connect the current Web Part to another Web Part. Allow Edit Enables you to specify whether a Web Part can be edited. Allow Hide Enables you to specify whether a user can hide a Web Part (render the Web Part, but not display it). Allow Minimize Enables you to specify whether a user is allowed to minimize a Web Part. Allow Zone Change Enables you to specify whether a user is allowed to drag and drop the Web Part to a new location.
The Behavior Editor Part appears only when Shared personalization scope has been enabled for the page. You'll learn the gritty details of Shared personalization scope in Chapter 29, "Personalizing Web Parts." Right now, however, it is enough to know that there are two requirements for placing a page into Shared personalization scope. First, you need to add the web configuration file in Listing 27.17 to your application. Listing 27.17. Web.Config| <?xml version="1.0"?> <configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0"> <system.web> <webParts> <personalization> <authorization> <allow users="*" verbs="enterSharedScope"/> </authorization> </personalization> </webParts> </system.web> </configuration> |
The Web Configuration file in Listing 27.17 authorizes all users to enter Shared personalization scope (the asterisk represents everyone). Normally, you want to restrict this privilege to the administrators of your application. Next, you need to place the current page in Shared personalization scope. One way to do this is to use the Personalization property of the WebPartManager control, like this: <asp:WebPartManager Personalization-InitialScope="Shared" Runat="server" /> The Personalization-InitialScope attribute causes the page to enter Shared personalization scope for users who are authorized by the web configuration file to enter Shared personalization scope. If a user is not authorized, the attribute is ignored. The page in Listing 27.18 illustrates how you can add a BehaviorEditorPart control to an EditorZone. Listing 27.18. ShowBehaviorEditorPart.aspx| <%@ Page Language="VB" %> <%@ Register TagPrefix="user" TagName="FirstSimplePart" src="/books/3/444/1/html/2/~/FirstSimplePart.ascx" %> <%@ Register TagPrefix="user" TagName="SecondSimplePart" src="/books/3/444/1/html/2/~/SecondSimplePart.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server"> Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs) WebPartManager1.DisplayMode = WebPartManager1.DisplayModes(e.Item.Text) End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <style type="text/css"> .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 Behavior Editor Part</title> </head> <body> <form runat="server"> <asp:WebPartManager Personalization-InitialScope="Shared" Runat="server" /> <asp:Menu OnMenuItemClick="Menu1_MenuItemClick" Orientation="Horizontal" Css Runat="server"> <Items> <asp:MenuItem Text="Browse" /> <asp:MenuItem Text="Design" /> <asp:MenuItem Text="Edit" /> </Items> </asp:Menu> <asp:WebPartZone Css Runat="server"> <ZoneTemplate> <user:FirstSimplePart Title="First Web Part" Description="Our first simple Web Part" Runat="server" /> <user:SecondSimplePart Title="Second Web Part" Description="Our second simple Web Part" Runat="server" /> </ZoneTemplate> </asp:WebPartZone> <asp:WebPartZone Css Runat="server" /> <asp:EditorZone Css Runat="server"> <ZoneTemplate> <asp:BehaviorEditorPart Runat="server" /> </ZoneTemplate> </asp:EditorZone> </form> </body> </html> |
After you open the page in Listing 27.18 in your web browser, you can click the Edit menu link to place the page in Edit Display Mode. Next, select the Edit menu option on one of the two Web Parts, which causes the Behavior Editor Part to appear (see Figure 27.12). Figure 27.12. Using the Behavior Editor Part.
Using the Layout Editor Part The Layout Editor Part enables you to arrange Web Parts on a page without using a mouse (see Figure 27.13). You should always include a Layout Editor Part in every Web Parts page for two reasons. Figure 27.13. Using the Layout Editor Part.
First, adding a Layout Editor Part to a page makes your web application more accessible to persons with disabilities. Many persons with disabilities must interact with websites by using the keyboard. For example, if you are blind, then you will not be using a mouse to drag Web Parts around a page. Web Standards Note Both the Section 508 and WCAG 1.0 standards include guidelines concerned with the importance of creating device-independent pages. Second, the Web Part Framework does not support drag-and-drop for browseers other than Internet Explorer. In particular, you cannot drag-and-drop Web parts when using Firefox or Opera. The Layout Editor Part provides you with an (imperfect) method of supporting browseres other than Internet Explorer. The LayoutEditorPart control enables users to modify the following three properties: Chrome State Enables users to specify whether a Web Part is minimized or maximized. Zone Enables users to select a zone where they want a Web Part to be placed. Zone Index Enables users to specify the location of a Web Part within a zone.
The page in Listing 27.19 illustrates how you can add a LayoutEditorPart control to an Editor Zone. Listing 27.19. ShowLayoutEditorPart.aspx| <%@ Page Language="VB" %> <%@ Register TagPrefix="user" TagName="FirstSimplePart" src="/books/3/444/1/html/2/~/FirstSimplePart.ascx" %> <%@ Register TagPrefix="user" TagName="SecondSimplePart" src="/books/3/444/1/html/2/~/SecondSimplePart.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server"> Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs) WebPartManager1.DisplayMode = WebPartManager1.DisplayModes(e.Item.Text) End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <style type="text/css"> .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 Layout Editor Part</title> </head> <body> <form runat="server"> <asp:WebPartManager Runat="server" /> <asp:Menu OnMenuItemClick="Menu1_MenuItemClick" Orientation="Horizontal" Css Runat="server"> <Items> <asp:MenuItem Text="Browse" /> <asp:MenuItem Text="Design" /> <asp:MenuItem Text="Edit" /> </Items> </asp:Menu> <asp:WebPartZone Css Runat="server"> <ZoneTemplate> <user:FirstSimplePart Title="First Web Part" Description="Our first simple Web Part" Runat="server" /> <user:SecondSimplePart Title="Second Web Part" Description="Our second simple Web Part" Runat="server" /> </ZoneTemplate> </asp:WebPartZone> <asp:WebPartZone Css Runat="server" /> <asp:EditorZone Css Runat="server"> <ZoneTemplate> <asp:LayoutEditorPart Runat="server" /> </ZoneTemplate> </asp:EditorZone> </form> </body> </html> |
When you open the page in Listing 27.19 in a web browser, you can click the Edit link to place the page into Edit Display Mode. Next, select the Edit menu option from any Web Part menu to see the Layout Editor Part. Using the Property Grid Editor The PropertyGridEditorPart control enables users to modify custom properties of a Web Part control through a form interface. This control automatically generates a property sheet for a Web Part (see Figure 27.14). Figure 27.14. Using the Property Grid Editor Part.
If you want to be able to modify a particular Web Part property with the PropertyGridEditorPart, then you must decorate the property with two attributes. First, you must add a Personalizable attribute to the property. The Web Part Framework automatically saves any property decorated with the Personalizable attribute. Second, you must add a WebBrowsable attribute to the property. The WebBrowsable attribute is for the benefit of the PropertyGridEditorPart control. The control displays only properties decorated with this attribute. The Web Part in Listing 27.20, the FeaturedMoviePart illustrates how to use both of these attributes. Listing 27.20. FeaturedMoviePart.ascx| <%@ Control Language="VB" ClassName="FeaturedMoviePart" %> <script runat="server"> Public Enum MovieCategory Action Animation Drama Horror End Enum Private _movieTitle As String Private _category As MovieCategory Private _movieDescription As String Private _inTheaters As Boolean <Personalizable()> _ <WebBrowsable()> _ <WebDisplayName("Title")> _ <WebDescription("The title of the movie")> _ Public Property MovieTitle() As String Get Return _movieTitle End Get Set(ByVal Value As String) _movieTitle = value End Set End Property <Personalizable()> _ <WebBrowsable()> _ <WebDisplayName("Category")> _ <WebDescription("The movie category")> _ Public Property Category() As MovieCategory Get Return _category End Get Set(ByVal Value As MovieCategory) _category = value End Set End Property <Personalizable()> _ <WebBrowsable()> _ <WebDisplayName("Description")> _ <WebDescription("The movie description")> _ Public Property MovieDescription() As String Get Return _movieDescription End Get Set(ByVal Value As String) _movieDescription = value End Set End Property <Personalizable()> _ <WebBrowsable()> _ <WebDisplayName("In Theaters")> _ <WebDescription("Is the movie currently showing?")> _ Public Property InTheaters() As Boolean Get Return _inTheaters End Get Set(ByVal Value As Boolean) _inTheaters = value End Set End Property Private Sub Page_PreRender() lblMovieTitle.Text = _movieTitle lblCategory.Text = _category.ToString() lblMovieDescription.Text = _movieDescription lblInTheaters.Visible = _inTheaters End Sub </script> <asp:Label Runat="server" /> <br /> <asp:Label Runat="server" /> <br /> <asp:Label Runat="server" /> <br /> <asp:Label Text="In Theaters Now!" Css Runat="server" /> |
Notice that each of the properties of the FeatureMoviePart in Listing 27.20 is marked with four attributes. Each property includes the required Personalizable and WebBrowsable attributes. In addition, the WebDisplayName and WebDescription attributes are used to provide each property with a name and description in the property sheet. The page in Listing 27.21 demonstrates how you can use the PropertyGridEditorPart control to edit the properties of the FeaturedMoviePart. Listing 27.21. ShowPropertyGridEditorPart.aspx| <%@ Page Language="VB" %> <%@ Register TagPrefix="user" TagName="FeaturedMoviePart" src="/books/3/444/1/html/2/~/FeaturedMoviePart.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server"> Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs) WebPartManager1.DisplayMode = WebPartManager1.DisplayModes(e.Item.Text) End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <style type="text/css"> .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 Property Grid Editor Part</title> </head> <body> <form runat="server"> <asp:WebPartManager Runat="server" /> <asp:Menu OnMenuItemClick="Menu1_MenuItemClick" Orientation="Horizontal" Css Runat="server"> <Items> <asp:MenuItem Text="Browse" /> <asp:MenuItem Text="Design" /> <asp:MenuItem Text="Edit" /> </Items> </asp:Menu> <asp:WebPartZone Css Runat="server"> <ZoneTemplate> <user:FeaturedMoviePart Title="Featured Movie Part" Description="Displays movie information" Runat="server" /> </ZoneTemplate> </asp:WebPartZone> <asp:WebPartZone Css Runat="server" /> <asp:EditorZone Css Runat="server"> <ZoneTemplate> <asp:PropertyGridEditorPart Runat="server" /> </ZoneTemplate> </asp:EditorZone> </form> </body> </html> |
After you open the page in Listing 27.21, you can click the Edit link to switch the page to Edit Display Mode. Next, select the Edit menu option on the FeaturedMoviePart and you will see the property sheet rendered by the PropertyGridEditorPart. The PropertyGridEditorPart automatically associates certain types of properties with certain types of form fields in the property sheet: Boolean Property Displayed with a CheckBox control. Enumeration Property Displayed with a DropDownList control. Other Properties Displayed with a TextBox control.
In the case of the FeaturedMoviePart, The PropertyGridEditorPart control renders a TextBox control for the MovieTitle property, a DropDownList control for the Category property, a TextBox for the Description property, and a CheckBox control for the InTheaters property. Note The PropertyGridEditorPart does not provide you with very much control over the appearance of the property sheet. For example, there is no way to specify the order of the form fields. If you want more control, then you need to create a custom EditorPart. This option in discussed Chapter 30, "Extending the Web Part Framework." |