One of the commonly asked for features in BlogEngine.NET has just made it into the codebase. This feature is Multiple WidgetZones.
To use multiple widget zones in your BE.NET blog, there's not too much you need to do. I'll explain how it works and a couple of minor changes you may need to make to your blog -- even if you won't be using more than one widgetzone.
Stylesheet Changes
When there was only one widgetzone, the widgetzone <div> and the widget selector dropdown list had a fixed ID on their HTML elements. So, there was these two elements:
<div id="widgetzone">
<select id="widgetselector">
Because there can now be multiple widget zones and multiple widget selectors, and because there cannot legally be more than one element with the same ID, the widgetzone <div> now uses "widgetzone" for its class, and the selector uses "widgetselector" for its class. Both the widgetzone and the selector also have a unique ID based on the new ZoneName property (see below). So, example markup of what the <div> and <select> elements now look like are:
<div class="widgetzone" id="widgetzone_PageBottom">
<select class="widgetselector" id="widgetselector_PageBottom">
There's a good chance you have #widgetzone or #widgetselector styles defined in your theme's CSS file. Since there no longer are elements with those IDs, you'll want to do a search-and-replace in your CSS file. Replacing #widgetzone with .widgetzone and #widgetselector with .widgetselector is all that is required. Fortunately, because each widgetzone <div> and <select> element now have their own unique IDs, you can use those IDs to style individual widgetzones if they need to be styled differently in your blog.
ZoneName
Each widgetzone you add to your blog needs to have it's own unique ZoneName. The ZoneName can be added as a simple property to the widgetzone's control markup. For example:
<blog:WidgetZone runat="server" ZoneName="PageBottom" />
Although the ZoneName property is new to BE.NET, the existing widgetzone you've had in your blog up till now will start off with a ZoneName of "be_WIDGET_ZONE". This was the name used to store widgetzone data in either the App_Data folder, or in a database. Although not required, it wouldn't hurt to add that ZoneName to your existing widgetzone for clarity:
<blog:WidgetZone runat="server" ZoneName="be_WIDGET_ZONE" />
If you don't explicitly state a ZoneName, that is okay for one widgetzone, as BE.NET will default to using "be_WIDGET_ZONE" when a ZoneName is not provided. But, you MUST give each widgetzone its own unique ZoneName if you will use more than one widgetzone in your blog.
App_Data and Database - Both OK
Sometimes designing a flexible, well structured application pays off. It's great that BE.NET was designed as such. There was very little change required to enable multiple widget zones to be saved in either the App_Data folder or in a database. No database changes are needed either since the data for all the widgetzones will be stored in the existing be_DataStoreSettings table. Whether you're using XML storage in the App_Data folder or a DB backend, multiple widget zones work in both scenarios.
Moving Widgets
Drag-and-drop is out, and dropdown is in! Rearranging widgets within a widgetzone has always been done by dragging and dropping a widget to a new location within the zone. While initially implementing multiple widgetzones, I had a zone on the left side of the page, and another on the right side. While trying to drag-and-drop a widget on the right side to a new location within the same right side zone, I was having troubles with the drag-and-drop library trying to drop the widget into the zone on the left side of the page! Instead of spending time trying to weed through the logic of the drag-and-drop library, it occurred to me a simpler interface would be the better route to go. Drag-and-drop may be sexy, but getting widgets to move without any hassles or confusion is a better goal.
There is now a 'Move' link for each widget, next to the Edit and X (remove) links.
Clicking the Move link will display a dropdown list and Move button above the Move link.
In this example, I have 3 widget zones in my blog. Opening the dropdown list shows all 3 zones and the widgets within each zone.
The 3 zones appear in the list with brackets around them. They are the HeaderZone, be_WIDGET_ZONE and the PageBottom zone. Under each zone name is the list of widgets within that zone. You can either select a widget to move the current widget in front of, or you can select a zone which will move the current widget to the bottom of that zone.
As you can tell, moving a widget from one zone to another zone is fully supported. There's lots of possibilities with this capability.
Few More Stylesheet Changes
In addition to the search-and-replace stylesheet modification mentioned above, there's a couple of other additions you may want to make to your stylesheet in support of the new Move link and dropdown list. These changes are already in the stylesheets of the themes included with BE.NET. So you know what they are, I've listed them below. The first style below was a modification of an existing style.
div.widget a.edit, div.widget a.move{
font-size: 10px;
font-weight: normal;
float: right;
z-index: 1;
margin-left: 5px;
}
.widgetzone div#moveWidgetToContainer {
text-align: right;
margin: 3px;
}
Credits
Thanks to McZosch who posted the initial code changes for multiple widgetzones in the Issue Tracker at CodePlex. I was able to use mostly everything he contributed. Integration of his code went smoothly. Most of the time I spent with adding this feature was with moving widgets. Switching from drag-and-drop to dropdown and enabling widgets to move from one zone to another took some time altogether.
Give it a Try!
Since it's of course not required to fill up a widgetzone with many widgets in it, multiple widgetzones will allow you to add a zone anywhere in your blog with just a single widget in it. There's a lot of possibilities with this, and for many BE.NET bloggers out there, I think multiple widgetzones are going to be very useful.
Everything seems to work well after testing out the new feature in a few scenarios. You can download the latest build of BE.NET in the Source Code section at CodePlex. If you run into any issues, please post them in the Discussions area at CodePlex.