Time for another small article. I have been using the new WebPart framework for quite some time now and I have developed a few things that might interest you. This time I will describe how to create an EditorZone which is able to collapse the EditorParts it contains using plus and minus icons found in many applications.
Normally when you have an EditorZone and it contains some EditorParts, all will be displayed when you set the display mode to WebPartManager.EditDisplayMode. It is likely you'll have your EditorZone parked to the side of the screen in a narrow vertical bar, much in the same way as Microsoft Sharepoint. Because of this the EditorParts contained in the EditorZone will be rendered one above the other in a column like fashion. A problem with this setup is that the height of an individual EditorPart can get quite large, the BehaviorEditorPart is a good example of this. It takes up about sixty percent of my screen height, so when I want to display other EditorParts along with it, I’ll have to scroll down. If you examine products such as Sharepoint, you'll notice an EditorPart is collapsible, preserving valuable screen real estate. It turns out that ASP.NET can be easily extended to provide the same look and feel.
The code itself is not to exiting, it was quite easy to override the default rendering behavior of an EditorZone. Two classes perform the bulk of the workload, a class derived from EditorZone called CollapsibleEditorZone. By overriding the creation of EditorPartChrome the rendering can be customized. The CollapsibleEditorPartChrome class takes care of this. Adding the icon is a simple task of doing some rendering using the HtmlTextWriter. To bad the RenderTitle method on the EditorPartChrome class isn’t virtual, that would have saved the trouble of creating the necessary logic for rendering with and without titles and such based on the PartChromeType. (it is a bit of an exact copy of what found in the EditorPartChrome base class).
Some interesting things about the code then. It uses two embedded resources for the icons. These are served using the WebResource.axd HTTP handler. This can easily be done using the WebResourceAttribute and a call to the ClientScriptManager to tie the src attribute of the image to the handler. The icons have a clientside handler for the click event which posts the page back to the CollapsibleEditorZone which takes care of minimizing EditorParts and restoring them. Just for fun I’ve also created to switches with which you can control the behavior and style. The behavior is either Collapse or NoCollapse. This indicates whether you want to show the collapsing icons. For style you can choose out of CollapseNone or CollapseAll, which indicates what to do to other EditorParts when you restore an EditorPart to full size.
You can get the code from my still enormously ugly homepage. I am building a DotNetNuke like framework using WebParts + MasterPages and such. It is kinda feature complete for beta 1. What I’ll do with it I don’t know yet, I’ll keep you informed. The hard thing is still to come, create some kind of skin which renders properly and looks nice at the same time (kinda hard for me)
(edit: added the image of how it all looks when used.)