Turns out the CMSSiteManager.js library that is used by the Thumbnails list view is also using the $ variable! Argh!

Good thing the plug-in pattern we use only calls $ internally and not globally…

(function($) {
  // plug-in goodness here...
})(jQuery);

Unfortunately our scripts for invoking the plug-ins was referencing $…

$(document).ready(function(){
  $('.foo').samplePlugin();
});

A quick replacement of $ to jQuery did the trick:

jQuery(document).ready(function(){
  jQuery('.foo').samplePlugin();
});

If you have large blocks of inline jQuery code on your page, you’ll probably want to use jQuery.noConflict():

jQuery.noConflict()(function() {
    // code using $ as alias to jQuery
});

UPDATE!!!

The latest versions of the CKSDev for SharePoint 2010 include an SPI for stubbing out a contextual web part! I highly recommend that anyone coding for SP2010 to install the CKS Dev Tools!

http://cksdev.codeplex.com/

I haven’t had much opportunity to work with SharePoint 2010 in the past few months. However, I did get to try out the MSDN walkthrough for creating a custom web part with contextual ribbon tab recently. You can find the article here: http://msdn.microsoft.com/en-us/library/ff407578.aspx

In a nutshell, what’s supposed to happen is when you click on the web part, there will be a custom tab that appears in the Ribbon. It all works great for the first instance of the custom web part you place onto a page, but if you try adding a second instance of the web part, your page blows up!

You’ll get the following error:
Item has already been added. Key in dictionary: ‘Ribbon.CustomContextualTabGroup’ Key being added: ‘Ribbon.CustomContextualTabGroup’

:-/ … looks like there wasn’t much QA done for the walkthrough. Anyways, to make a short story shorter… I posted a question on the TechNet forums and Dallas Tester from MS did get back to me with a bunch of suggestions.

Here are the changes you can make to allow for multiple instances of the custom web part to appear on the page without everything blowing up.

Make the following modifications to the ContextualTabWebPart class.

Add the global ‘_added’ bool and OnInit event handler:

static bool _added = false;

protected override void OnInit(EventArgs e)
{
 base.OnInit(e);
 _added = false;
}

Since we no longer have to get the unique component ID in the delay script, I changed DelayScript into a private string:

private string delayScript = @"
 function _addCustomPageComponent()
 {
  for (var i = 0; i < g_customWebPartIds.length; i++)
  {
    SP.Ribbon.PageManager.get_instance().addPageComponent(new ContextualTabWebPart.CustomPageComponent(g_customWebPartIds[i]));
  }
 }

 function _registerCustomPageComponent()
 {
  SP.SOD.registerSod(""CustomContextualTabPageComponent.js"", ""/_layouts/CustomContextualTabPageComponent.js"");
  var isDefined = ""undefined"";
  try
  {
   isDefined = typeof(ContextualTabWebPart.CustomPageComponent);
  }
  catch(e)
  {
  }
  EnsureScript(""CustomContextualTabPageComponent.js"",isDefined, _addCustomPageComponent);
 }
 SP.SOD.executeOrDelayUntilScriptLoaded(_registerCustomPageComponent, ""sp.ribbon.js"");";

Modify the OnPreRender event handler:

protected override void OnPreRender(EventArgs e)
{
 base.OnPreRender(e);

 ClientScriptManager csm = this.Page.ClientScript;
 string componentId = SPRibbon.GetWebPartPageComponentId(this); // the unique component id 

 // if this is the first instance of the custom web part,
 //we need to add the contextual tab to the ribbon
 if (!_added)
 {
  this.AddContextualTab();
  _added = true;
 }

 // we need to create an array which will store the IDs of all instances of our custom web part
 csm.RegisterClientScriptBlock(
  this.GetType(), "DeclareCustomWebPartArray", "var g_customWebPartIds = new Array();", true);

 // add this webpart's ID to our array
 csm.RegisterClientScriptBlock(
  this.GetType(), "AddCustomWebPartId" + componentId, "g_customWebPartIds.push('" + componentId + "');", true);

 csm.RegisterClientScriptBlock(this.GetType(), "ContextualTabWebPart", this.delayScript, true);
}

If you want to verify that the correct web part is trigger the Ribbon commands, you can modify the ‘handleCommand‘ method in ‘CustomContextualTabPageComponent.js‘

handleCommand: function ContextualTabWebPart_CustomPageComponent$handleCommand(commandId, properties, sequence) {
 if (commandId === 'CustomContextualTab.HelloWorldCommand') {
  alert(this._webPartPageComponentId + ' says: Hello, world!');
 }
 if (commandId === 'CustomContextualTab.GoodbyeWorldCommand') {
  alert(this._webPartPageComponentId + ' says: Good-bye, world!');
 }
}

Here’s a ZIP file of the entire solution in case you’re too lazy to make the modifications yourself.

Because the sp.ui.dialog.js library is lazy-loaded, it may not be available when the page is ready/loaded. I’ve seen some early examples where if you wanted to do something on page load, you use:

_spBodyOnLoadFunctionNames.push("YourInitFunction()");

This will not work if you want to open a SharePoint dialog on page load. Instead use:

ExecuteOrDelayUntilScriptLoaded(YourInitFunction, "sp.ui.dialog.js");

Anyways, here are the presentation material and code:

• Slide Deck
• jQuery Sample Plug-in
• SharePoint jQuery Web Parts

• Much better JavaScript performance! IE8 was a nice first step at improving JS performance on IE but still woefully behind the JS profilers and JIT compilers of Firefox, Safari, et al. Early builds of IE9 are already 4 times faster in the SunSpider benchmark than that of IE8 and putting it about par with Firefox 3.5.
• CSS Level 3! Again early builds apparently are able to pass the majority of the CSS3 Selectors Testsuite, 41 out of 43. Of course, Firefox 3.5 and Safari 4 already completely pass this test. IE8 only passed 22 of these tests by the way.

Where’s more HTML5?

Microsoft was very non-committal about this. They made a good start in IE8 with things like DOM storage, cross document messaging (XDM) and have a built in JSON API, but where’s <video> or more importantly <canvas>?

It’s a promising start for Microsoft with news about IE9′s JS performance and CSS3 compliance. Here’s hoping to Microsoft finding time to implement some of the HTML elements that competitors have already integrated into their browsers. Don’t need IE10 to STILL be playing catch-up.

Status Bar

The Status Bar lives below the Ribbon and displays persistent information such as page status or web site alerts. It already existed in SharePoint 2007 as an UI element but it’s functionality was not exposed as an API. It will display an HTML message, which can include links and/or images, on 1 of 4 pre-set background colours depending on the importance of the status defined.

There is a Server API to set statuses at page render time as well as a JavaScript API to dynamically add/remove messages.

The JavaScript API is in the SP.UI.Status namespace and is as follows:

SP.UI.Status.addStatus(strTitle, strHtml, atBeginning)
SP.UI.Status.updateStatus(sid, strHtml)
SP.UI.Status.removeStatus(sid)
SP.UI.Status.removeAllStatus(hide)
SP.UI.Status.setStatusPriColor(sid, strColor)

Notifications

Notifications are brand new to SharePoint 2010 and they are used for transient or semi-transient messages such as action confirmations. Notifications appear on the right side of the page below the ribbon and default to a 5 second display period. Like the Status Bar, the message format is HTML with the ability of including links and/or images.

There is a JavaScript API to add/remove messages. You also have the option to make a Notification “sticky” which means it will continue to display until you manually remove it through the API.

Notifications are in the SP.UI.Notify namespace:

SP.UI.Notify.addNotification(strTitle, bSticky, tooltip, onclickHandler)
SP.UI.Notify.removeNotification(id)

I recently had the opportunity to demo our Contoso Riders Quick App at EnergizeIT in Toronto. A big thanks to Jean-Luc David and Chris Dufour for being such great hosts and for making our Services track a great success!

So you might be asking yourself; “What’s a Quick App?”

Quick Apps are projects that showcase the Microsoft Live Platform service offerings and also serve as templates which developers can use as a springboard to base their own projects off of. They are open-source projects release under Microsoft Public License (Ms-PL).

In the case of Contoso Riders, we implemented services and APIs such as:

• Live ID for user authentication
• Live Messenger Presence API and IM Control for Instant Messenging
• Virtual Earth Map Control to display and Virtual Earth Collections for storing map and routing information
• Silverlight Streaming for hosting videos
• Live Spaces Weblogs and the Metaweblog API to store and manage content
• Live Spaces Photo Albums to store photos

You can download the source for Contoso Riders on CodePlex as part of the Windows Live Quick Apps project.

Something that had me intrigued was when Shaun Walker of DotNetNuke fame showed how easily it was to integrate “Atlas” into DNN. I’m wondering if the simplicity of the changes is due to the .Net Framework itself or if the DNN developers had pre-wired some hooks for “Atlas.”

While the rest of the presentation was pretty much the same top-level information I’ve heard in previous previews of “Atlas,” there are a few points about “Atlas” I would like to touch upon.

Cross Platform Compatibility

I have been keeping an eye out on “Atlas” ever since it was announced last year but haven’t really taken a close look at it due to its maturity. The “Atlas” Microsoft AJAX Control Tookit, up until recently, hasn’t been very cross-browser friendly. Colour me impressed by the September 14th release though. All the controls seem to work just fine with FireFox and I’ll have to test everything with Safari and Opera the first chance I get.

File Size

The release version of the entire Microsoft AJAX Library is going to weigh in at around 350Kb. The core library alone is around 100Kb. That’s REALLY, REALLY big download the first time an user hits your page. Hopefully they have the browser’s file caching turned on.

XML Script

This both interests and concerns me at the same time. “Atlas” XML Script a new declarative script format for defining script object instances, their property values, and how they wire up to each other.

What excites me about XML Script is a non-JavaScript developer can now code up client-side functionality using simple to comprehend, XML-based markup. I can see tools being developed to format and debug XML Script client-side code because being XML, it can easily be parsed and styled.

The concern is XML Script IS STILL client-side code. It is interpreted by the “Atlas” JavaScript library within the browser runtime. So let me get this right:

• You take a hit loading the large “Atlas” JavaScript library.
• You take a hit parsing the XML Script.
• Then you finally execute whatever the XML Script you coded.

Why MS didn’t give you an option to compile the XML Script into JavaScript on the server-side in .Net, or even at authoring time in Visual Studio, is beyond me.

Deploying “Atlas” in the Real World

“Atlas” has an incredible set of features that will make developing client-side code simpler but it does so by giving up performance and file size. I think Atlas will have a great home in intranet style applications where the client platform is standardized and bandwidth considerations aren’t usually as much of an issue as in public-facing web apps.

I prefer the moo.* libraries over the Prototype/Script.aculo.us combo due to the former’s much smaller file size. Prototype by itself weighs in at 60Kb uncompressed and add at least another 30Kb for Script.aculo.us.

What’s really interesting is the way you can download mootools. The download page allows you to pick and choose which parts of the library you want and whether or not you want to compress the JS source file.

With the availability of many quality client-side frameworks and the buzz surrounding AJAX and Web 2.0 these days, being able to minimize the library’s file size by ways of pruning unused features and code compression is really important in today’s web applications.

A lot of developers tend to forget that there are still quite a few users out there who aren’t hooked up on a broadband connection. You can build the slickest, fanciest front-end but if it takes forever for your target audience to even download it and get started, what’s the point?

mootools is released under the MIT license meaning you can use or modify it on all your projects, whether they’re commercial or not.