3.5. Let Users Edit Web Parts at Runtime
Note: Let users customize the look and feel of the Web Parts at your site.
In addition to giving users the power to move Web Parts around on your portal pages, you can empower them to change the appearance of the Web Parts themselves. In this lab, you will learn how to use the EditorPart controls (AppearanceEditorPart, BehaviorEditorPart, LayoutEditorPart, and PropertyGridEditorPart) to allow users to change the look and feel of their Web Parts. Here is a quick overview of the EditorPart controls you'll use in this lab:
- AppearanceEditorPart
-
Provides an editor control that enables end users to edit several user interface properties (such as title, width, and height) on a Web Part control
- BehaviorEditorPart
-
Provides an editor control that enables end users to edit several user interface properties (such as the display of the Edit, Close, and Minimize buttons) on a Web Part control
- LayoutEditorPart
-
Provides an editor control that enables end users to edit several layout-oriented user interface properties on a Web Part control
- PropertyGridEditorPart
-
Provides an editor control that enables end users to edit custom properties on a Web Part control
3.5.1. How do I do that? In this lab, you will learn how to let users change the look and behavior of every Web Part on the page. You will add an EditorZone control to the page to contain the four EditorPart controls: AppearanceEditorPart, BehaviorEditorPart, LayoutEditorPart, and PropertyGridEditorPart. These four controls allow users to make a variety of changes to the look and feel of Web Parts on the page. For example, users can change the title of a Web Part, as well as selectively enable and disable the various buttons (such as Close, Edit, and Minimize) on a Web Part. Using the project created in the last lab (C:\ASPNET20\chap03-Webparts), drag and drop the EditorZone control onto the form (see Figure 3-32). The EditorZone control serves as the primary control for hosting EditorPart controls on a web page (more on this in Step 2). Figure 3-32. Adding an EditorZone control onto the default form 
To edit the Web Parts, you need to populate the EditorZone control with the three EditorPart controls. Drag and drop the AppearanceEditorPart, BehaviorEditPart, PropertyGridEditorPart, and LayoutEditorPart controls onto the EditorZone control. Apply the Colorful scheme to the EditorZone control (via the "Auto Format..." link in the EditorZone Tasks menu). The EditorZone control should now look like Figure 3-33. Figure 3-33. The EditorZone control with AppearanceEditorPart, BehaviorEditorPart, LayoutEditorPart, and PropertyGridEditorPart controls (images split for easy presentation on this page) 
In the radio button list control at the bottom of the form, add a new item (shown in bold) so that the user can choose the option to edit the Web Parts on the page: <asp:RadioButtonList runat="server" AutoPostBack="True"> <asp:ListItem>Browse Display Mode</asp:ListItem> <asp:ListItem>Design Display Mode</asp:ListItem> <asp:ListItem>Catalog Display Mode</asp:ListItem> <asp:ListItem>Edit Display Mode</asp:ListItem> </asp:RadioButtonList>
In the code-behind of the radio button list control, add the following line (shown in bold) to the SelectedIndexChanged event of the radio button list control. This will cause the EditorZone control to be displayed when the Catalog Display Mode item in the radio button list control is clicked: Protected Sub rblMode_SelectedIndexChanged( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles rblMode.SelectedIndexChanged Select Case rblMode.SelectedIndex Case 0 : WebPartManager1.DisplayMode = _ WebPartManager.BrowseDisplayMode Case 1 : WebPartManager1.DisplayMode = _ WebPartManager.DesignDisplayMode Case 2 : WebPartManager1.DisplayMode = _ WebPartManager.CatalogDisplayMode Case 3 : WebPartManager1.DisplayMode = _ WebPartManager.EditDisplayMode End Select End Sub
Press F5 to test the application. Click on the Edit Display Mode option. Note that there are no visual changes to the page. Examine the top right corner of the Calendar Web Part. You will notice that there is now a new Edit link (see Figure 3-34). Click on the Edit link. Figure 3-34. Editing a Web Part 
You should now see the EditorZone control. You can customize the appearance of the Web Part by modifying the properties in the AppearanceEditorPart and LayoutEditorPart controls (see Figure 3-35). Click OK.
Tip: Note that the PropertyGridEditorPart control is not displayed for this Web Part. You will learn more about the PropertyGridEditorPart control in Section 3.5.2 for this lab.
Figure 3-35. Customizing the look and feel of a Web Part 
3.5.2. What about... ...displaying the PropertyGridEditorPart control? Notice that in this lab the PropertyGridEditorPart control is not displayed when you switch the page to edit mode. So what is the use for this control? Let's explore this. For the PropertyGridEditorPart control to appear, a Web Part must have public properties that are browsable (through the WebBrowsable attribute) and personalizable (through the Personalizable attribute). Web User controls do not support these properties, and hence only controls that inherit from WebPart can use the PropertyGridEditorPart control. If you now edit the Translation Service Web Part, you will notice that the PropertyGridEditorPart control appears (see Figure 3-36). This is because the Translation Service Web Part has public and browsable properties: <Personalizable( ), WebBrowsable( )> _ Public Property strToTranslate( ) As String ...
Figure 3-36. The PropertyGridEditorPart control 
You can set a value for the public strToTranslate properties so that the next time the Translation Service Web Part is loaded, the value is shown by default. 3.5.3. Where can I learn more? Check out the MSDN Help topic on "EditorPart Class" for more information on the various EditorPart controls. |
