Today BlogEngine.NET 1.6 is available to everyone as announced here.
The two big features are a new Comment Management area to view, edit and delete comments across all posts. This also includes a new automated comment moderation system. Just like how you can build custom Extensions, custom filters can be built and plugged into the event system when a new comment is posted. BE.NET 1.6 ships with two custom filters – a filter for Akismet filter and one for StopForumSpam.com. It’s quite slick.
The other notable feature is Multiple Widget Zones. This has actually been in the code base for several months now. I blogged about Multiple Widget Zones back in April.
If you’re upgrading from BE.NET 1.5, there are a couple of changes to be aware of, including one change you must make related to the ExtensionManager sub-folder in the App_Code folder. Simple upgrade instructions are available here in the documentation.
A more complete list of features and changes in BE.NET 1.6 can be found here. It’s definitely a worthwhile upgrade I recommend going to.
I like using bookmarklets to inject scripts into a page I’m on. One of the popular ones for this is the jQueryify bookmarklet to inject jQuery into a page.
After getting the jQuerify bookmarklet, I created a separate bookmarklet to inject my own JavaScript file into a document. This is handy when I’m debugging a website I either don’t have the files for, or just want to test changes out within the confines of my own browser without touching any of the live files. To do this, I simply Edit the bookmark in my browser, and change the URL embedded in the bookmarklet to point to the URL of the JavaScript file I want to inject into the page. The URL to the script can even be a script on your own computer accessible via http://localhost, if you’re too lazy to upload the script to a public website :)
Recently, I needed to inject a CSS stylesheet into the page I’m on. The bookmarklet for this is very similar to the JavaScript injection bookmarklet. The bookmarklet I created for this is at the bottom of this post.
Dynamic URL Bookmarklets
Even though it’s not a big hassle to Edit the CSS/JS injection bookmarks to change the URL to the JS or CSS file embedded within the bookmarklet, I realized a very convenient bookmarklet would be one that would prompt me for the URL to the CSS/JS file, and then inject that URL. By doing this, I don’t need to edit the bookmark, and can easily inject any CSS or JS file. It’s also easy to inject multiple URLs by running the bookmark more than once, and entering a different URL each time.
Bookmarklets – For your Browser
For convenience’s sake, I have these 4 bookmarklets down below. Feel free to use them. Two of the bookmarklets are for JS injections and two are for CSS injections. Within each pair, one bookmarklet has the URL already embedded within it, and the other one will prompt you for the URL.
Just drag these links into your Bookmarks toolbar or menu area. For reference, the bookmarklet code is under each link.
> Inject JS file <
javascript:(function(){var%20s=document.createElement('script');s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js');document.getElementsByTagName('body')[0].appendChild(s);alert('Script%20injected!');})();
> Inject JS file (get prompted) <
javascript:(function(){var%20sUrl=prompt('Enter%20URL%20to%20JavaScript%20file');if(sUrl){var%20s=document.createElement('script');s.setAttribute('src',sUrl);document.getElementsByTagName('body')[0].appendChild(s);alert('Script%20injected!');}})();
> Inject CSS file <
javascript:(function(){var%20s=document.createElement('link');s.setAttribute('href','http://l.yimg.com/a/lib/arc/core_1.0.5.css');s.setAttribute('rel','stylesheet');s.setAttribute('type','text/css');document.getElementsByTagName('head')[0].appendChild(s);alert('Stylesheet%20injected!');})();
> Inject CSS file (get prompted) <
javascript:(function(){var%20sUrl=prompt('Enter%20URL%20to%20Stylesheet');if(sUrl){var%20s=document.createElement('link');s.setAttribute('href',sUrl);s.setAttribute('rel','stylesheet');s.setAttribute('type','text/css');document.getElementsByTagName('head')[0].appendChild(s);alert('Stylesheet%20injected!');}})();
January 30, 2010 11:34 PM
The latest check-in of BE.NET (1.5.1.36) has a small, but important change. The three themes included with BE.NET now include rel=”nofollow” on the links of commenter’s websites.
This is a theme specific change. So if you’re using a custom theme, and even if you upgrade to the latest build of BE.NET, there’s a good chance you might not have the NOFOLLOW instruction on these links. It can simply be added in the CommentView.ascx file in your theme’s blog folder.
As I’m using a custom theme myself, I just added NOFOLLOW to this blog too. Wikipedia has a good writeup on NOFOLLOW, in case you aren’t familiar with its purpose. I’m a little surprised it’s taken this long to get NOFOLLOW into the themes that are included with BE.NET. Better late than never!
I get a lot of comment spam on this blog. As I’m moderating comments, it ends up never showing up since I don’t approve any of it (TIP to spammers, stop wasting your time!).
Comment spammers are a lot more likely to leave comments on blogs that do not include NOFOLLOW. Yes, I’m sure a lot of the spammers actually look at these types of details when scoping out blogs to attack.
Incidentally, the ResolveLinks extension that comes with BE.NET already includes the NOFOLLOW instructions. This is the extension that will convert URLs in comments into hyperlinks. If the extension finds a URL like www.google.com in the comment content, it will convert that into:
<a href="http://www.google.com" rel="nofollow">www.google.com</a>
This conversion is done as the comment is being served.
I’m anxious to see what type of impact adding NOFOLLOW will have on my level of comment spam.
Fingers crossed ...
December 8, 2009 10:01 PM
For a few years, .NET has had the built-in capability to easily take your entire application offline when you need to make an update or perform some maintenance on your site.
By simply putting a file named app_offline.htm in the root directory of your site, ASP.NET will serve the app_offline.htm file, instead of the requested page.
I recently employed this feature for probably the first time. I put the app_offline.htm file on the site, and pulled up my site in Firefox. The contents of app_offline.htm displayed as expected.
However, if I were to pull my site in Chrome or IE, I would get a Page Not Found error that appeared as though my entire site did not exist.
App_offline.htm result in IE8:
App_offline.htm result in Chrome:
As mentioned above, in Firefox, the contents of App_offline.htm would display as expected.
The problem is that when ASP.NET serves the App_offline.htm file, the HTTP Response code it passes out is 404. Chrome will display the page shown above for 404 errors. In IE, you can actually avoid that generic error page shown above if you turn off HTTP Friendly errors.
But I obviously cannot expect IE visitors to my site to have HTTP Friendly errors turned off.
The way ASP.NET has implemented app_offline.htm by passing out a 404 HTTP status code is not well designed, in my opinion. A much better implementation would be for ASP.NET to return a normal 200 HTTP status code.
To accomplish this, for this site, I created a simple HTTP Module that processed the beginning of each request. It checks an “offline” appSetting in web.config to see if the application should be offline. If the offline setting is turned on, the module will do a server transfer to my own app offline HTML file.
One thing I found on an IIS7 server is requests for items such as JPG, GIF, CSS files, etc. will also go through this HTTP module. This is normally a great benefit of IIS7’s integrated mode pipeline. However, if the application offline HTML file includes an IMG tag for an image on the same site, or a link to a CSS file on the same site, the HTTP module is also going to do a server transfer for these other files (JPG, CSS, etc). This will result in the image not displaying on the application offline page, or the CSS file not loading in the browser, etc.
A simple filter in the HTTP module to only do a server transfer for actual pages is all that is required. The fairly simple HTTP Module I ended up creating is below.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.IO;
public class AppOffline : IHttpModule
{
public void Dispose()
{
}
public void Init(HttpApplication context)
{
context.BeginRequest += new EventHandler(context_BeginRequest);
}
void context_BeginRequest(object sender, EventArgs e)
{
HttpContext context = ((HttpApplication)sender).Context;
if (ConfigurationManager.AppSettings["offline"] == "true")
{
string extension = Path.GetExtension(context.Request.Path);
// Don't server transfer for extensions like .JPG, .CSS, etc.
string targetedExtensions = ".aspx.ashx.asmx";
if (targetedExtensions.IndexOf(extension, StringComparison.OrdinalIgnoreCase) == -1)
return;
context.Server.Transfer("~/application_offline.html");
}
}
}
It’s a pretty simple, but effective HTTP module. When the server transfer is done to my own application offline HTML file, the HTTP status code returned to the client is 200. No more Page Not Found problems with browsers like IE and Chrome.
September 5, 2009 6:11 PM
When a regular expression in .NET will be used multiple times, it’s common to create that Regex with the Compiled flag, e.g. RegexOptions.Compiled. Compiled regexp’s take a bit more time to create initially, but will run faster than a regexp created without the Compiled flag. At least that’s what the documentation states!
Without the Compiled flag, your regexp will be interpreted. There’s even "precompiled” regular expressions. You need to compile these regular expressions into an assembly before runtime. This might be a good option if you have constant regexps that don’t change. If your regexps are subject to change, pre-compiled is not a good option. These three types of regexp’s (interpreted, compiled and pre-compiled) are explained with a few more technical details in this somewhat dated MS blog article.
Theory is great, but real benchmarks are more meaningful. I’ve assembled some code that benchmarks the difference in speed it takes to create and run 5,000 regular expressions. There’s actually a big difference in the time taken to run a compiled regular expression the first time, versus subsequent times. So the results shown here will include the first run time as well as the subsequent run times.
Here’s some code to get us started:
private static List<Regex> _expressions;
private static object _SyncRoot = new object();
private static List<Regex> GetExpressions()
{
if (_expressions != null)
return _expressions;
lock (_SyncRoot)
{
if (_expressions == null)
{
DateTime startTime = DateTime.Now;
List<Regex> tempExpressions = new List<Regex>();
string regExPattern =
@"^[a-zA-Z0-9]+[a-zA-Z0-9._%-]*@{0}$";
for (int i = 0; i < 5000; i++)
{
tempExpressions.Add(new Regex(
string.Format(regExPattern,
Regex.Escape("domain" + i.ToString() + "." +
(i % 3 == 0 ? ".com" : ".net"))),
RegexOptions.IgnoreCase | RegexOptions.Compiled));
}
_expressions = new List<Regex>(tempExpressions);
DateTime endTime = DateTime.Now;
double msTaken = endTime.Subtract(startTime).TotalMilliseconds;
}
}
return _expressions;
}
We’re storing 5,000 regular expressions in a static list. Notice the RegexOptions.Compiled flag is being used. The regexp’s are just looking for email addresses with specific domain names – domain1.net, domain2.net, domain3.com, etc. Not very useful, but I just wanted the regexp’s to vary. You can see we’re also recording the number of milliseconds taken to create the regular expressions. Now here’s the code that calls GetExpressions() and actually invokes the IsMatch function on each regexp.
private static void CheckForMatches(string text)
{
List<Regex> expressions = GetExpressions();
DateTime startTime = DateTime.Now;
foreach (Regex e in expressions)
{
bool isMatch = e.IsMatch(text);
}
DateTime endTime = DateTime.Now;
double msTaken = endTime.Subtract(startTime).TotalMilliseconds;
}
And we call CheckForMatches like so:
CheckForMatches("some random text with email address, address@domain200.com");
How much time does it take to create and run these 5,000 compiled expressions? Here’s what I get:
Compiled Regular Expressions
CREATION TIME: 1662 ms
FIRST RUN TIME: 25137 ms
SUBSEQUENT RUN TIMES: 41 ms
Subsequent runs of all 5,000 expressions is very fast. However, look how much time it takes the first time these 5,000 expressions are run in CheckForMatches() – 25 seconds!!!
Let’s make ONE change. Remove the RegexOptions.Compiled flag. By doing this, our regular expressions will be interpreted. Here’s what we get:
Interpreted Regular Expressions
CREATION TIME: 493 ms
FIRST RUN TIME: 22 ms
SUBSEQUENT RUN TIMES: 20 ms
Interpreted regexp’s beat compiled in every category! Running these tests several times produces similar results. The BIG difference here is obviously the First Run Time. 25 seconds versus .022 seconds.
I’ve seen some benchmarks showing static regexp’s performing a little slower than instance regexp’s. I ran the same tests without the static modifier on the fields and methods above. Same results – using the Compiled flag takes around 25 seconds for the regular expressions to run the first time. Without the Compiled flag, they run in hundredths of a second.
Clearly, interpreted regexps are the winner. Granted, if you’re only dealing with a small number of regular expressions, and you use the compiled flag, the first run time isn’t going to be anywhere near what I’ve shown here with 5,000 regexps. However, even with just a few regular expressions, in .NET, you’ll see me sticking with interpreted regular expressions!
When creating an account online and you need to enter your desired username and password, it's common for there to be a note regarding the minimum number of characters required for a username/password. But the maximum character limit is often omitted in this note. Particularly for passwords, when allowed, I try to make 36 character passwords. My passwords are just random characters of letters, numbers and special characters. Every time I spend 30 seconds creating one of these passwords, I always tell myself I need to get one of those random password generators -- but end up never getting one!
Back to my point -- all sites should be making use of the "maxlength" attribute on a text input element. Not just for usernames/passwords, but for every piece of data that is accepted through a text input. At the very very least, indicating the maximum length in a note next to the input field would be appreciated.
On numerous sites I've registered at (including large sites), there is no note, and there is no maxlength on the input field. I spend my 30 seconds typing in a 36 character password to find out when I click the Submit button that the password is too long. In a couple of cases, the site doesn't even tell you the password is too long. They just report "Invalid Password". I'll try shortening it in chunks until they take it.
This may just be a small user experience point, but adding a maxlength attribute takes no time at all and provides immediate knowledge you've reached the max character limit.
There’s two new features in the latest build of BE, 1.5.1.11. These features, Logging and Improved Error Reporting, are separate but related features. I think both features will turn out to be very helpful – especially when trying to diagnose a problem. I’ll explain both features and how they can be used independently of each other, as well as with each other.
Logging
There’s a new event handler in BE that any extension or other component can subscribe to: Utils.OnLog. It can be subscribed to in an extension, like:
Utils.OnLog += new EventHandler<EventArgs>(OnLog);
In this case, there’s an OnLog event handler that will fire every time any piece of code in BE.NET logs a message. I created a simple Logger extension that is now included in BE 1.5.1.11 that subscribes to log notifications, and writes the log message to a logger.txt file in the App_Data folder. Anyone can write a similar extension that will save log messages to a database. The code for the this new Logger extension can be viewed below.
Logger Extension 1.0 (view code)
#region using
using System;
using BlogEngine.Core;
using BlogEngine.Core.Web.Controls;
using System.IO;
using System.Text;
#endregion
/// <summary>
/// Subscribes to Log events and records the events in a file.
/// </summary>
[Extension("Subscribes to Log events and records the events in a file.", "1.0", "BlogEngine.NET")]
public class Logger
{
static Logger()
{
Utils.OnLog += new EventHandler<EventArgs>(OnLog);
}
/// <summary>
/// The event handler that is triggered every time there is a log notification.
/// </summary>
private static void OnLog(object sender, EventArgs e)
{
if (sender == null || !(sender is string))
return;
string logMsg = (string)sender;
if (string.IsNullOrEmpty(logMsg))
return;
string file = GetFileName();
StringBuilder sb = new StringBuilder();
lock (_SyncRoot)
{
try
{
using (FileStream fs = new FileStream(file, FileMode.Append))
{
using (StreamWriter sw = new StreamWriter(fs))
{
sw.WriteLine(@"*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*");
sw.WriteLine("Date: " + DateTime.Now.ToString());
sw.WriteLine("Contents Below");
sw.WriteLine(logMsg);
sw.Close();
fs.Close();
}
}
}
catch
{
// Absorb the error.
}
}
}
private static string _FileName;
private static object _SyncRoot = new object();
private static string GetFileName()
{
if (_FileName != null)
return _FileName;
_FileName = System.Web.Hosting.HostingEnvironment.MapPath(Path.Combine(BlogSettings.Instance.StorageLocation, "logger.txt"));
return _FileName;
}
}
Any code within BE.NET, a widget, extension, etc. can now log any message like:
Utils.Log("some message to log");
If more than one event handler is subscribed to the OnLog notifications, each event handler will of course fire. It’s worth noting that Utils.Log() accepts a parameter of type object. The Logger extension is designed to receive messages of a string type (it actually casts the object type parameter to a string type). If Logger receives a non-string type, it doesn’t log the message – because the Logger extension is designed to receive simple string-based messages. If an extension or other piece of code wants to pass a non-string type message to a logger, a different extension could be created that is equipped to handle log messages that are of a type different than string.
If you don’t want logging to take place, either because you don’t want to worry about having a log file that keeps growing, or because you prefer not to store data in the App_Data folder (as the Logger extension does), you can simply disable the Logger extension on the Extensions tab in the control panel. As of right now, even if you leave the Logger extension enabled, there’s going to be virtually no messages logged as there isn’t any code that currently calls Utils.Log().
This new logging feature is going to help keep track of events going on. Although logging can be used for many purposes, one of the reasons I wanted to have this in BE.NET was to be able to record unhandled errors.
Error Handling & Reporting
There’s now an event handler in the Global.asax file that catches all unhandled exceptions. Up till now, if a 500 server error occurred, you would be redirected to error404.aspx, as defined by the <customErrors> tag in the web.config file. While this is a nice catch-all method to handling errors, people just getting started with BE.NET are often confused why they are seeing a “Page cannot be found” message when they are trying to do something like save changes and an unhandled error occurs -- which they don’t know has occurred when all they see is a “Page cannot be found” message. To be fair, most people just getting started with BE.NET are not getting errors. But some do, and adjusting folder permissions or other settings fixes the errors they are seeing. In order to fix the problem, one must first know an error is actually occurring, and they need to know what the actual error is!
The new Application_Error event handler in Global.asax does up to three things for non-404 errors:
- It generates a summary, including details, of the unhandled error that just occurred.
- If error logging is turned on (a new option, explained below), it makes a call to Utils.Log(), passing the error summary to any event handlers registered to receive log notifications.
- It does a Server.Transfer() to a new error.aspx page in the root of the BE.NET web folder.
For #1, the summary generated includes a stack trace, inner exceptions, and the URL the page occurred on (both Request.Url and Request.RawUrl).
The summary that is generated is stored in the Items collection of HttpContext.Current. Why? When Application_Error in Global.asax does a Server.Transfer to the new error.aspx page, the error.aspx page checks to see if the person is logged in (i.e. if they’re authenticated). If they are logged in, error.aspx will display the error summary generated within Global.asax. The error summary is retrieved out of the HttpContext.Current.Items collection. If the person isn’t logged in, they just see a message similar to error404.aspx, indicating an “unexpected error has occurred”, and the developer will be tortured, blah blah. :-)
Displaying the error details directly on error.aspx for logged in users is helpful for two reasons. (a) Immediate knowledge of the error, and (b) even if the new error logging option is turned off, you still can see the error message in your browser when you’re transferred to error.aspx.
I’ve mentioned this new error logging option twice now. On the Settings tab in the control panel, in the Advanced Settings section, there is a new checkbox labeled “Enable error logging”. By default, it’s turned off. While this is turned off, the only notifications the Logger extension will receive (if you leave the Logger extension enabled) will be messages coming from some piece of code that explicitly makes a call to Utils.Log(). If you turn this new Enable Error Logging feature on, then when an unhandled exception occurs, Global.asax will pass the error details to Utils.Log() for any registered event handlers to deal with.
Result & Extensibility Possibilities
From version 1.5.1.11, any extension, widget or even BE.NET itself can now simply make a call to Utils.Log() to have any message logged. Logging can be done with the built-in Logger extension, or messages can be logged to a database, sent via email, etc. by any other extension someone creates. I’m also very excited about the new error handling mechanism which will give administrators a lot more information about errors that may be occurring in their blog.
Please download and test out the latest build. If any problems show up or you have any ideas for improvements, you can leave a comment here, or post a message on the CodePlex discussion boards.
The advances in VM technology for both client and server operating systems is obviously a great thing. It saves money, time and makes life much easier when you can just copy an image to a different machine, make backup copies of an image and go back to an old image in a very small amount of time. It's great too for having software testing environments.
One significant downside to this technology is going to be the amount of legacy software that will stick around. By software, I mean operating systems and applications. Upgrading or moving to a different OS or app is always a hassle. However, one common opportunity when switching to a newer OS or app makes sense is when replacing old hardware. Before VMs entered the scene, you might traditionally buy a new workstation or server every 4 years, for example. A new machine means re-installing the OS and applications. What a perfect opportunity to start off the new machine by installing the latest OS and applications.
With VM technology, when a physical machine needs to be replaced, if the OS on it is already a VM, you just copy that VM to the new hardware. Even if the old system isn't a VM, no problem. There's tools available to create a VM from a physical instance of an OS. Once the old physical instance of an OS is a VM, you just copy that VM over to the new hardware. So you end up with a brand new machine, but the old OS and old applications are still running on that machine.
For software companies, this means their customers may demand they support older versions of their software for a longer period. When building new versions of software, it may also be necessary to include support for older operating systems based on the number of existing or potential customers who are still running an old OS.
A client of mine just recently needed to replace their 8 year old server. It's a Windows 2000 terminal server that several employees work out of. I've convinced some of the employees to start using Firefox, but others are still stuck on IE6. The client ended up converting the physical Win2K server to a virtual server and copied that over to the new hardware. Ack! There's that growing movement in the community to persuade people to get off IE6. I think the statistics show the percentage of IE6 users out there is still in the 15% - 25% range. That's much too high a demographic to desert and not support when building a website. Unfortunately, IE7/IE8 isn't available for Windows 2000. For this particular client, I just need to convince everyone there to start using Firefox. Maybe I can just hide the IE6 icon on their desktops :)
IE6 is a classic example of software you want everyone to get off of, and bury as deep as possible. It's definitely not the only software out there that should be moved away from as newer versions of subpar software are released. This increase in legacy software still being used out there is one of the few downsides to this overall great virtualization technology.
The caching of data in BlogEngine.NET becomes a problem when BE.NET is installed in a web farm. When you add, edit or delete a post, that change is occurring on one machine within the farm as well as within the data store (App_Data or DB). But the other servers within the farm are unaware there’s been a change in data. Not until the data loaded in memory on these other servers clears out anywhere from minutes to hours to days later, the old set of data will continue to be shown to visitors hitting one of these other servers.
I created a WebFarm extension which may help some people in this situation. I haven’t worked much with web farms, so I’m not sure how well this extension will work. Any feedback is appreciated. I was able to test this extension on Vista/IIS7 where I had two separate web applications pointing to the same physical BE.NET location on my machine. Even in this situation, creating a new post within one application would normally result in the post NOT showing up in the other application. This new Web Farm extension did solve the caching problem for this scenario. I’m hoping this success will carry over to a Web Farm scenario.
There’s two files in the ZIP file download. WebFarm.cs should go in the App_Code\Extensions folder. The other file, webfarm_data_update_listener.ashx, should go in the root of your blog.
Once those files are in their correct locations, if you go to the Extensions tab in the control panel, you’ll want to click ‘Edit’ for this new WebFarm extension.
I wanted the help box on the right side to include as much information as possible. But as you can see, the Extensions page doesn’t currently handle long description boxes very well :)
The idea behind this extension is that if each server within the farm has a unique internal Ip address, this extension can notify each server that a change in data has occurred. Not knowing a lot about web farms, this is the part I’m unsure is possible. But it does some reasonable each server would have its own unique IP address. If you’re using host headers, this extension may not work for you – unless you have a unique URL to each server within the farm.
The extension currently notifies the servers in the web farm when a new post or page has been created, updated or deleted. Other data such as Settings, Profiles, Categories, Comments, etc. is not handled by this extension. Or at least not in this version.
The webfarm_data_update_listener.ashx file you placed in the root of the blog is the handler that receives notifications when a change in Post or Pages has occurred. The data passed to the handler includes the type of data changed (Post, Page), the type of change (Insert, Update, Deletion) and the ID of the Post or Page that has been inserted/updated/deleted. Rather than the handler re-loading all the Post/Page data, it will insert, update or delete just the one piece of data that changed. This is more efficient than re-loading all the data which could be taxing for those with a lot of blog data.
As described in the help area when adding the server Ip/Urls in the WebFarm extension, make sure the “Shared Key” you enter matches the key in the webfarm_data_update_listener.ashx handler file. The default key in the handler is “blogengine”. For security purposes, you may change the key in the ASHX handler. But be sure the ASHX key matches the key you enter for each Ip/Url.
Also, because of this same data caching issue in web farms, after you enter all the web farm server Ip addresses into the WebFarm extension, you’ll want to re-start BE.NET so the extension data you just entered is detected by all the servers in your farm. Updating the web.config file with any meaningless change will accomplish re-starting the blog application. This is just a one-time requirement so all servers have the list of servers they need to notify when a post or page change has occurred.
I realize this extension has its limitations and isn’t a comprehensive solution to undesired caching in a web farm scenario. But it does handle propagating changes in posts across the servers in the farm – one of the more important areas. This extension is also easy to get started with in contrast to making various changes within BE.NET itself. Again, any feedback on this extension is appreciated.
Download: WebFarmExtension_1.0.zip (3.26 kb)
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.