I couple days ago I was in Atlanta and gave a presentation at the SharePoint Saturday event there on how to build the next generation of SharePoint web parts by using jQuery and Silverlight. I must say that I thought this Atlanta event was INCREDIBLY successful, and I talked with several attendees who were thoroughly satisfied, and even excited, about being there. What's more is I believe my presentation went well, to which I'm very thankful. I promised my students that I would blog about my presentation so they could reference the techniques I discussed at a later date – hence this post (and a second post in a day or two on the Silverlight half).

Click the slide to the left if you wish to download my PowerPoint slides.

The first half of the presentation covered how to leverage jQuery in your SharePoint sites. For any jQuery beginner, I felt it would be important to discuss what jQuery is, how to use it (Syntax), and how to leverage a plugin. Keep reading, as this post will walkthrough those introductory concepts.

What is jQuery, and why use it in my SharePoint Sites?

I'm not sure if it is the most appropriate term to describe jQuery with, but "Easy Javascript" seems to fit the bill to me. Essentially jQuery is a Javascript library/API that lets you be able to do with one line of code, what would take ten or even worse, one hundred lines of javascript. Not only does it simplify your javascript code, but jQuery faster, lighter (only 55 KB!), and more widely supported (tier 1 and 2 browsers) than javascript. What's more is whether or not you like it, jQuery IS your future. It's being prepackaged in Visual Studio 2010 with intellesense and everything! If you're not on 2010 yet, no worries because 2008 has a hot fix that installs the intellesense.

To download jQuery, go here: http://docs.jquery.com/Downloading_jQuery

While all that is fun and all – it pales in comparison to the great user community behind it. The VAST community of jQuery developers has freely released HUNDREDS of plugins that can easily be consumed by your ASP.NET and SharePoint sites.

Because of this – jQuery fits my bill of the "next generation of SharePoint web parts", because tomorrow's web parts will be built by someone else, be consumed by non-developer folks, and are HIGHLY USABLE and GRAPHICALLY CHARMING. You'll be surprised by jQuery – in fact some of the plugins are so rich you'd expect to find Silverlight or Flash powering them.

Check out some of my favorite plugins here:

http://plugins.jquery.com

http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html

http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.html

After the Syntax demonstration, a walkthrough of the famous Lightbox plugin will be given.

How to Program jQuery – What is the Syntax?

When learning jQuery, the place to start is with selectors. Selectors give you the ability to select one or many DOM objects without directly calling the DOM, and then you can perform some action on that object(s). Look at these examples:

$("#someId")
This will select any object on the page that has the ID of "someId"

$(":text")
This will select ALL the text boxes (<input type="text" />) on the page

$(".someClass")
This will select ALL the object given the "someClass" class (class="someClass")

$("#sometable tr:even")
This will search for an object with an ID of "sometable", and will select all the tr objects therein. An example of this would be to select all the even rows within a table.

In addition to selecting objects, you can animate objects by using jQuery events. The following are some events you can use to animate your pages:

• click
• focus
• show
• hide
• slideDown
• slideUp
• fadeIn
• fadeout

See this example:

$(".philsClass").show("slow", someFunction)

This example selects all the objects on the page that have a class of "philsClass", and then runs the show event on those objects. If those objects are hidden they will now display. What's more is that you can optionally pass two parameters. The first is the speed, and the second is a callback method you can use to run some code when the object is finished is displaying.

What's worth noting is the "show" event is a combination of the "slideDown" event and the "fadeIn" event when this speed parameter is passed. Without the speed paremter there will be no transitional effect. The fadeIn event changes opacity gradually from 0% to 100%, while the slideDown event gradually makes the object vertically taller until it is it's intended size. Calling a show() with no parameters is similar to setting the display on a div to block, where the display will immediately change.

By using fades and slides, you can bring transitional effects into your pages, WITHOUT server side code! Now that's cool.

As an FYI, a great jQuery book I will not hesitate to recommend is jQuery in Action by Bear Bibeault and Yehuda Katz. It's written very well.

The LightBox – A jQuery Plugin

Like I said, one of the most powerful features of jQuery is the community behind it. LightBox is a sleek plugin that renders a modal diaglog and a picture viewer therein. Notice the screen shot to the left. This plugin has an AJAX feel with no post backs, and lets you scroll through pictures.

Each plugin works a bit different as far as how to use them. To install this plugin, simply download it and upload the files into a document library. Once there, you can use a content editor web part to drop source on the page that renders the plugin.

<div id="gallery">
    <a href="code/photos/image1.jpg" title="Image1">
        <img src="/atltest/code/photos/thumb_image1.jpg" width="72" height="72" alt="" />

    </a>
    <a href="code/photos/image2.jpg" title="Image2">
        <img src="/atltest/code/photos/thumb_image2.jpg" width="72" height="72" alt="" />
    </a>
</div>

<script type="text/javascript" src="/atltest/code/js/jquery.js"></script>
<script type="text/javascript" src="/atltest/code/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
</script>

Notice how easy this is to use. There's a DIV with some links in it. A link's HREF points to a big image, and within the link there's an image tag that points to the thumbnail version. Later you'll see some script tags pointing to the jQeury API as well as the lightbox plugin, followed by a function that executes as the page loads. The function gets all the objects on the page with an ID of "gallery", call calls the lightBox() method on them. That's IT!

Pretty easy huh? Go here to see a working example: http://philwicklund.com/pages/LightboxExample.aspx

To download the lightbox, go here: http://leandrovieira.com/projects/jquery/lightbox/

Integrating into SharePoint

The most straight forward way to integrate jQuery into SharePoint is to upload the API into a document library or stick it in the LAYOUTS directory on the web front ends. Whichever way you take, from there it is easy to put jQuery code on the page by simply using the content editor web part.

Notice this simple example:

The jQuery in this example does a select on all the text boxes on the page and changes their background color to be yellow. Here are the contents of the content editor:

<script type="text/javascript" src="code/jquery-1.3.2.min.js"></script>

<input type="text" />

<script type="text/javascript">
$(":text").css("background-color", "yellow");
</script>

It's not the most thrilling example, but it serves to demonstrate the concept. Notice the "code" in the URL for the jQuery API file. That's the name of the document library I place the API in, as you'll also notice that library is on the quick launch. You'll want to change this URL to reflect where you placed your API.

My next post will be about how to spice up your web parts with Silverlight – so Stay tuned!

Phil