An Immediacy plug-in is a special type of ASP.NET User Control that allows you to extend the functionality of the core content management system. http://www.immediacy.net/

Follow these instructions to create a custom plug-in for the Immediacy/CMC CMS.

Instructions

Create a new directory within the Immediacy plug-ins directory for your plug-in. This new directory will hold the .ascx file for your user control plus your Immediacy editor dialogue UI (Which is a special web file that allows you to change the plug-in settings from within the Immediacy editor).

The name of your plug-in directory should have the same name as the “tagName” you use to register the User Control in Immediacy’s web.config file.

Build your ASP.NET User Control to perform your custom functionality making sure that you create public properties in your C#/VB.NET code for all the properties you would like configurable from within the Immediacy editor.

Add a reference to the Immediacy.Web assembly to your project.

Next, add these attributes to your User Control class.

[PluginDesigner(PluginDesignerType.Html, "PluginCmsDialogue.aspx", Height = 400, Width = 400)]
[ToolboxData("<{0}:PluginName runat=server></{0}:PluginName>")]
[PluginInfo("My First Plug-in", "CMS Plug-in Category", Description = "Description of my Plug-in")]
public partial class Comments : System.Web.UI.UserControl, INamingContainer
{
    // Your plug-in code here
}

If you don’t add these class attributes your plug-in properties will not be configurable from within Immediacy, but the plug-in will still work.
If you don’t have public properties that you want editors to be able to change you can skip creating a dialogue box for your plug-in.

Create an Editor Dialogue Pop-up

Create a CMS dialogue page which will allow Immediacy users to change the properties of your custom plug-in from within the editor. The name of this file is referenced in the class attributes above (e.g. PluginCmsDialogue.aspx) .

Your dialogue box can be either an HTML file with JavaScript or an ASP.NET web form. This example uses an HTML page with a .aspx extension, although it doesn’t contain any server-side code. 

In the HTML you need to reference the Helpers.js JavaScript file that resides in the Immediacy plug-ins folder.

<script type="text/javascript" src="../Helpers.js"></script>

Create a simple HTML form with form elements to match each public property of your plug-in class.

Add two HTML buttons, one for OK, one for Cancel. Give them IDs of ok and cancel respectively.

Create a JavaScript function called Init() as below.

<script type="text/javascript">
var Dialog;

function Init()
{
   Dialog=new DialogObject("name of plugin", 400, 400); Dialog.UniqueKeys=false;

   // Load each property and update the dialogue box
   Dialog.Load("property", function(value){document.getElementById("property").value=value;});

   // Add functionality to the OK and Cancel HTML buttons
   document.getElementById("ok").onclick=function(){Dialog.Ok();}
   document.getElementById("cancel").onclick=function(){Dialog.Cancel();}

   Dialog.Valid=function()
   {
      // Perform validation here
      return true;
   }

   Dialog.Submit=function()
   {
      // Save each property
      Dialog.Save("property",document.getElementById("property ").value);

      // Update the Immediacy control UI placeholder
      Dialog.InnerHTML="<div style='background:#DDDDDD; color:#000000; float:left; padding:10px; clear:both;'><strong>Comments Enabled : </strong>Status of Plug-in</div>";
   }
}
</script>

At the bottom of your dialogue HTML call the Init() function as below.

<script type="text/javascript">Init();</script>

Install the Plug-in

Register your ASP.NET User Control to Immediacy’s web.config under <pages><controls> as you would with an ordinary User Control. Ensure the “tagName” is the same as the plugin directory name for your plugin.

<add tagPrefix="MyUserControls" tagName="PluginName" src="~/plugins/ PluginName /test.ascx"/>

Build your project in Visual Studio.

Copy the .ascx and your dialogue box HTML file to the /plugins/PluginName folder.

Copy the .dll file to the Immediacy bin folder.

My first exposure to jQuery was using other developer's plugins to create animation effects such as sliders, and accordion menus.
The highly refactored and compressed production code isn't the easiest to read and understand, especially if you want to alter the code to any great extent.
After reading a few tutorials, I thought I'd buy a book and get more involved with the jQuery library.

As an ASP.NET developer used to coding with intellisense, I was pleased that jQuery has been incorporated into Visual Studio to allow ease of developing.
I browsed through the jQuery books on Amazon and opted to buy "Learning JQuery 1.3" by Jonathon Chaffer and Karl Swedberg after reading the user reviews.

I've now read most of the book and can highly recommend it.  The book assumes the reader has good HTML, CSS knowledge as well as a familiarity with JavaScript and the DOM, but this enables the book to quickly move onto doing useful, everyday tasks with jQuery.

The first six chapters of the book explore the jQuery library in a series of tutorials and examples focusing on core jQuery components.  Chapters 7 to 9 look at real-world problems and show how jQuery can provide solutions to them, and the final two chapters cover using and developing jQuery plugins.

Web developers should be aware of web accessibility and SEO issues with using client-side scripting and it is good to see the book highlighting the concepts of progressive enhancement and graceful degradation where appropriate.

"the inherent danger in making certain functionality, visual appeal, or textual information available only to those with web browsers capable of (and enabled for) using JavaScript.  Important information should be accessible to all, not just people who happen to be using the right software." - Learning jQuery 1.3,  page 94

After a brief introduction into the world of jQuery, what it does and how it came about the book moves quickly on to selectors, which are a fundamental part of how jQuery selects element(s) from the DOM.  It also covers jQuery's chaining capability, which coming from other programming languages looks odd at the outset, but quickly proves to be a very powerful technique.

The authors then move on to talk about events.  What I particularly like about the way jQuery handles events is that the behavioural code can be cleanly separated away from the HTML mark-up without having to litter tags with onclick and onload attributes.

The examples show how to add functionality on top of your HTML by binding events to elements on the page, which when triggered cause jQuery to modify the HTML to bring the page to life.  Techniques are introduced by example, then slowly refactored and improved while introducing new jQuery methods along the way, which is a breeze to follow and learn.

The fourth chapter covers effects such as fading in and out and custom animations, and jumps straight in to cover a useful example of how text size can be increased on-the-fly for ease of reading.  The intro also mentions an important usability example of effects.

jQuery effects "can also provide important usability enhancements that help orient the user when there is some change on a page (especially common in AJAX applications)."- Learning jQuery 1.3,  page 67

Chapter 5 is all about DOM manipulation and covers jQuery's many insertion methods such as copying and cloning parts of the page, which it demonstrates with another useful example in the form of dynamically creating CSS styled pull quotes from a page of text used to attract a readers attention.

AJAX is the next topic, which interested me enough to create a little tool to load in an XML RSS feed and create a blog category list from the data.
The chapter covers the various options of loading partial data from the server including appending a snippet of HTML into the page, JSON, XML and how to choose which method is the most appropriate.

Table manipulation is next on the agenda and the book discusses how to sort table data preventing page refreshing using AJAX as well as client-side sorting, filtering and pagination.

Chapter 8 delves into forms, using progressive enhancement to improve their appearance and behaviour.  It also covers AJAX auto-completion as well as an in-depth look at shopping carts.

Shufflers and Rotators are next and the book starts out by building a headline news feed rotator which gets it's headlines from an RSS feed, typically used by blogs.  It also covers carousels, image shufflers and image enlargement.

Chapter 10 and 11 examine the plugin architecture of jQuery and demonstrate how to use plugins and build your own.  I successfully produced my first jQuery plugin from reading this book.  You can check out my tag cloud plugin and read about how I originally built it before turning it into a plugin that other developers can use.

If you happen to be getting an error message like the one below, then read on.

Error    1    No defining declaration found for implementing declaration of partial method 'mvcCMS.Models.WebPage.OnValidate(System.Data.Linq.ChangeAction)'    C:\mvcCMS\Models\WebPage.cs    28    22    mvcCMS

I'm using LINQ to SQL designer in Visual Studio to create a database schema and I'm using a partial class to extend the code generated by the designer.

In the example below I am using the pattern used by NerdDinner.com to add business rules/validation to the model classes LINQ to SQL built based on my database schema.

namespace mvcCMS.Models
{
    public partial class WebPage
    {
        public bool IsValid
        {
            get { return (GetRuleViolations().Count() == 0); }
        }
        public IEnumerable<RuleViolation> GetRuleViolations()
        {
            if (String.IsNullOrEmpty(Title))
                yield return new RuleViolation("Title is required", "Title");
            if (String.IsNullOrEmpty(Text))
                yield return new RuleViolation("Web copy is required", "Text");

            yield break;
        }
        partial void OnValidate(ChangeAction action)
        {
            if (!IsValid)
                throw new ApplicationException("Rule violations prevent saving");
        }
    }
}

Where OnValidate() is a partial method LINQ to SQL provides which enables us to be notified when the object is about to be persisted to the database, so we can check all our business rules have been met before the object is flushed to the database.

An empty OnValidate() method is part of the designer generated code for your data class located in the #region Extensibility Method Definitions and it seems that these Extensibility Method Definitions only get added to the designer code when your tables have primary keys.

When a table is dragged onto the Object Relational Designer in Visual Studio the classes that are generated will only implement INotifyPropertyChanging and INotifyPropertyChanged if your tables have primary keys.  If the classes don't implement these interfaces the code won't implement the OnValidate() method, and if the OnValidate() method doesn't exist your partial class won't compile.

The Solution

The solution is simple.  Add a primary key to your database table, delete the associated data class from the Object Relational Designer and then drag the database table from Server Explorer back onto the Object Relational Designer surface.

You should then find the designer generated code now implements INotifyPropertyChanging and INotifyPropertyChanged and the class contains a definition for OnValidate() in the #region Extensibility Method Definitions.  Your code should now compile.

I previously created a jQuery Blogger Template Category List Widget to retrieve blog categories from a Blogger.com RSS feed and create a list of links which click through to Blogger label pages.

I've now taken this code a step further and modified it to calculate the number of times each category/tag occurs enabling me to create a tag cloud from the data, like the one below.

Before I explain the code I wrote to make the tag cloud I'll go through the solution to a bug I found with the original categories code.

You may recall this snippet of code where I iterate through each post and then each category of each post, finally, when all the categories have been added to the array I sort them prior to de-duping them.

$.get('/blog/rss.xml', function(data) {
//Find each post
        $(data).find('item').each(function() {
//Get all the associated categories/tags for the post
            $($(this)).find('category').each(function() {
                categories[categories.length] = $(this).text();
            });
        });
        categories.sort();

I later refactored the code removing the $(data).find('item').each iteration which wasn't required since find('category') will find them all anyway.

I then discovered that the JavaScript .sort() function was case-sensitive which resulted in lower case categories being placed at the end of the list, causing problems when I de-dup them.

So the rewritten snippet of code became:

$.get('blog/rss.xml', function(data) {
     //Find each tag and add to an array
     $(data).find('category').each(function() {
         categories[categories.length] = $(this).text();
     });
     categories.sort(caseInsensitiveCompare);

where caseInsensitiveCompare refers to a JavaScript compare function:

function caseInsensitiveCompare(a, b) {
    var anew = a.toLowerCase();
    var bnew = b.toLowerCase();
    if (anew < bnew) return -1;
    if (anew > bnew) return 1;
    return 0;
}

Creating the Tag Cloud jQuery Code

I start off as before fetching the XML, adding all the categories/tags from the RSS feed to a JavaScript array, then sorting them.

But I needed a way to store, not only the tag name, but the number of times that tag is used on the blog (the number of times the category appears in the feed).  For this I decided to use a multi-dimensional array which would essentially store the data in a grid fashion e.g.

The de-dup loop from my previous categories script now performs two jobs, it removes the tag duplicates and creates a count of each tag occurrence.

Once the multi-dimensional array has been populated, all that's left to do is iterate through the array creating the HTML necessary to build the tag cloud, followed by appending it to a DIV tag with an ID="bloggerCloud" on the page.

Note the calculation I perform to get the tags appearing a reasonable pixel size ((tagCount * 3) + 12).

$(document).ready(function() {
    var categories = new Array();
    var dedupedCategories = [];
    $.get('blog/rss.xml', function(data) {
        //Find each tag and add to an array
        $(data).find('category').each(function() {
            categories[categories.length] = $(this).text();
        });
        categories.sort(caseInsensitiveCompare);
        //Dedup tag list and create a multi-dimensional array to store 'tag' and 'tag count'
        var oldCategory = '';
        var x = 0;
        $(categories).each(function() {
            if (this.toString() != oldCategory) {
                //Create a new array to put inside the array row 
                dedupedCategories[x] = [];
                //Store the tag name first 
                dedupedCategories[x][0] = this.toString();
                //Start the tag count 
                dedupedCategories[x][1] = 1;
                x++;
            } else {
                //Increment tag count
                dedupedCategories[x - 1][1] = dedupedCategories[x - 1][1] + 1;
            }
            oldCategory = this.toString();
        });
        // Loop through all unique tags and write the cloud
        var cloudHtml = "";
        $(dedupedCategories).each(function(i) {
            cloudHtml += "<a href=\"/blog/labels/";
            cloudHtml += dedupedCategories[i][0] + ".html\"><span style=\"font-size:" + ((dedupedCategories[i][1] * 3) + 12) + "px;\">";
            cloudHtml += dedupedCategories[i][0] + "</span></a> \n";
        });
        $('#bloggerCloud').append(cloudHtml);
    });
    return false;
});

Since building this script I've now gone one step further and created a jQuery plug-in based on this code.  For more details and the source code see my jQuery Blogger.com Tag Cloud Plugin page.

I've just spent my lunch hour downloading and installing ASP.NET MVC.  I also downloaded the sample chapter from Professional ASP.NET MVC 1.0 (large PDF) which walks through the development of NerdDinner.com.  I began to create a test ASP.NET MVC project on Visual Studio 2008 Standard.

One of the main positives of ASP.NET MVC is that Test Driven Development is so much easier than with ASP.NET Webforms.

I soon realised when I created my first ASP.NET MVC project however that unless you have Visual Studio Professional or higher you don't get Visual Studio test Unit Framework, which means that to create a test project, you first need to install another testing framework such as NUnit, and configure Visual Studio or Visual Web Developer 2008 to use it.

This is an extract from the book Professional ASP.NET MVC 1.0:

Note: The Visual Studio Unit Test Framework is only available with Visual Studio 2008 Professional and
higher versions). If you are using VS 2008 Standard Edition or Visual Web Developer 2008 Express you
will need to download and install the NUnit, MBUnit or XUnit extensions for ASP.NET MVC in order for
this dialog to be shown. The dialog will not display if there aren't any test frameworks installed.

I already had NUnit installed, so I began my search for an NUnit extension for ASP.NET MVC, which I found here. Updated NUnit Templates for ASP.Net MVC 1.0 RTM

After running installNUnit.cmd which created the registry entries required by Visual Studio, you need to make sure the registry entries created point to the compressed templates.

Note: If you are using Visual Web Developer 2008, this might be all you need to do.  Click on File > New Project and check to see if "Test" appears under "Project types" on the left-hand menu in the dialogue box.  If not carry on reading.

Copy the NUnit test templates from the downloaded directory (in your chosen .NET language) MvcApplication.NUnit.Tests.zip to the following folder on your machine:

%Program Files%\Microsoft Visual Studio 9.0\Common7\IDE\ProjectTemplates\CSharp\Test

or here for VWD 2008:

%Program Files%\Microsoft Visual Studio 9.0\Common7\IDE\VWDExpress\ProjectTemplates\CSharp\Test

Then make sure the registry entry here:

HKEY_LOCAL_MACHINE\SOFTWARE\VisualStudio\9.0\MVC\TestProjectTemplates\NUnit\C#

or here for VWD 2008:

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VWDExpress\9.0\MVC\TestProjectTemplates\NUnit\C#

Correctly points to the location of MvcApplication.NUnit.Tests.zip. e.g.

Path: CSharp\Test\

Template: MvcApplication.NUnit.Tests.zip

Then close all instances of Visual Studio and open up the command prompt and move to the following location:

C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE>

and run the following command:

> devenv /setup

Once this has completed, you should find that when you create an ASP.NET MVC project, you will now get another pop-up menu asking you if you wish to create a unit test project for your application using NUnit.