Using jQuery UI in DotNetNuke Modules

Web applications have made many advances over the years, especially in the area of user interface design. Interactive interfaces, complex windows style GUI, seamless flow and a great user experience are some of the requirements that developers are faced with. As developers we look to frameworks and libraries for easier, faster development. In this article we’ll focus on adding jQuery UI, a library of rich client side components, to a DotNetNuke Module.

What is DotNetNuke?

DotNetNuke is an open source web application framework and a content management system (CMS). DotNetNuke is the most successful open source project on the Microsoft .Net Platform.  Developers can easily extend the framework by building custom modules. Skins can be applied to a DotNetNuke site to customize the graphic appearance. It’s impossible to cover all the features and extensibility of DotNetNuke in this paragraph. If you are not familar with DotNetNuke, visit www.dotnetnuke.com.

jQuery is tested against all major browsers and is CSS compliant

What is jQuery?

jQuery is an open source, fast, easy to use, JavaScript library. jQuery is a must have library for client side developers. What were once cumbersome JavaScript tasks that took many lines of code, can now be done quickly, efficiently, with very little code. It handles DOM manipulation, CSS, AJAX, events and animation. jQuery is tested against all major browsers and is CSS compliant.

jQuery is easy to learn, with detailed documentation on jquery.com, cheat sheets and code samples readily available on the internet. For Visual Studio developers, Microsoft has announced inclusion of jQuery in the next version of Visual Studio. You can download the intellisense file (vsdoc.js) from jQuery.com and begin using jQuery with intellisense in your Visual Studio 2008 projects.

What is jQuery UI?

jQuery UI is an open source library of client side components based on jQuery. jQuery UI provides components like accordion, tabs, drag & drop and many others. With jQuery UI you now have reusable components that give you consistency across your site. 

One of the most exciting tools jQuery UI offers is an online GUI called Theme Builder. With the Theme Builder, you can select from an existing collection of pre-defined themes or create your own theme. The Theme Builder will generate the css styles and icons for you. Using jQuery UI components and Theme Builder, you can quickly customize your module to match your DotNetNuke Skin.

Building the Module

We will assume that you already know how to build a DotNetNuke Module. If you are not familiar with module development, the module developer guide is included in the documentation download for the version of DotNetNuke you are running. For this example, visit the Downloads page on www.DotNetNuke.com and download ‘DotNetNuke 4.9.2 Docs’.

This example is built using DotNetNuke Community Edition 4.9.2, jQuery 1.3.2 and jQuery UI 1.7.1. The module contains one ascx file, Demo.ascx and a folder named jQuery UI to hold the jQuery UI files.

Create a jQuery UI Theme

We’ll use the jQuery UI Theme Roller to choose a theme and to download the accordion component.

• Go to http://www.jqueryui.com/themeroller/
• Choose the Gallery option, for a list of predefined themes.
• Choose the Redmond theme (a good match for the default DotNetNuke skin)
  
   

Fig. 1: jQuery UI ThemeRoller – Gallery

The next page will allow you to select the components you wish to download. The default option is ‘select all components’. Although in this article we only need the Accordion, we will download all components so they are available for later use.

After the download is complete, unzip the package. The contents will look like:

Fig. 2: Contents of jQuery Download

Adding jQuery UI to the Module

We only need to include the css and js folders in our module. The development-bundle folder contains demos. In our module we have added a jqueryui folder to hold our jquery files.

Now copy the css and js folders from the jQuery UI download to the jqueryui folder in the module.

Fig. 3: jQuery UIDemo Project

In the code behind, register the css and script files and add the jQuery.noConflict(). jQuery.noConflict() is added immediately after including jquery-1.3.2-min.js. It is used to avoid conflicting with other libraries that use the $ variable. It will assign jQuery to the “jQuery” variable, but will not assign jQuery to the $ variable.

protected void Page_Init(object sender, EventArgs e)
{
  string basePath =
    "~/DesktopModules/jQuery UIDemo/jQuery UI/";
  string cssPath =
    "css/redmond/jquery-ui-1.7.1.custom.css";
  string jQueryPath = "js/jquery-1.3.2.min.js";
  string jQuery UIPath =
    "js/jquery-ui-1.7.1.custom.min.js";

  // Add CSS Link
  string jQueryCss = string.Format(
    "<link type=/"text/css/" href=/"{0}/"
      rel=/"Stylesheet/" />"
    , ResolveUrl(basePath + cssPath)
    );

  Page.Header.Controls.Add(
    new LiteralControl(jQueryCss)
    );

  // Register jQuery Script
  Page.ClientScript.RegisterClientScriptInclude(
    jQueryPath
    , ResolveUrl(basePath + jQueryPath)
    );

  // Add jQuery.noConflict()
  // jQuery will not be assigned to the $ variable
  Page.ClientScript.RegisterClientScriptBlock(
    this.GetType()
    , "jQuery.noConflict"
    , "jQuery.noConflict();"
    , true
    );

  // Register jQuery UI Script
  Page.ClientScript.RegisterClientScriptInclude(
    jQuery UIPath
    , ResolveUrl(basePath + jQuery UIPath)
    );
}

There is some specific HTML required for the jQuery accordion widget to work correctly. The title must be a <h3> tag followed by the content placed in a <div> tag. Add the following HTML to the Demo.ascx page:

<div id="Accordion" runat="server">
  <h3><a href="#">Section 1</a></h3>
  <div>
  ...
  </div>
  <h3><a href="#">Section 2</a></h3>
  <div>
  ...
  </div>
  <h3><a href="#">Section 3</a></h3>
  <div>
  ...
  </div>
</div>

Next add the JavaScript to create the accordion.

<script type="text/javascript">
jQuery(document).ready(function($) {
  $("#<%=Accordion.ClientID%>").accordion();
});
</script>

The resulting page is

Fig. 4: DotNetNuke Page with jQuery UI’s Accordion Widget

jQuery Integration in DotNetNuke 5

In this module, we’ve registered the client script jquery1.3.2.min.js in our ascx control. JQuery is included in DotNetNuke 5 by default. There are two options for loading the jquery script file: from the Resources directory of the DotNetNuke website or from a url where the script is hosted remotely. Let’s look at including jQuery 1.3.2 from Google’s AJAX APIs.

DotNetNuke includes configuration options for jQuery in Host Settings > Advanced Settings > JQuery Settings.

• Check the ‘Use Hosted jQuery Version?’ option
• Update the ‘Hosted jQuery URL’ http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

In our module, we can now remove the code required to register the jquery script file and ask DotNetNuke to register the jQuery script. Our Page_Init now looks like this:

protected void Page_Init(object sender, EventArgs e)
{
  // Register the jQuery Script
  DotNetNuke.Framework.jQuery.RequestRegistration();

  string basePath =
    "~/DesktopModules/jQuery UIDemo/jQuery UI/";
  string cssPath =
    "css/redmond/jquery-ui-1.7.1.custom.css";
  string jQuery UIPath =
    "js/jquery-ui-1.7.1.custom.min.js";

  // Add CSS Link
  string jQueryCss = string.Format(
    "<link type=/"text/css/" href=/"{0}/"
      rel=/"Stylesheet/" />"
    , ResolveUrl(basePath + cssPath)
    );

  Page.Header.Controls.Add(
    new LiteralControl(jQueryCss)
    );

  // Register jQuery UI Script
  Page.ClientScript.RegisterClientScriptInclude(
    jQuery UIPath
    , ResolveUrl(basePath + jQuery UIPath)
    );
}

Conclusion

A little plumbing code, 2 lines of JavaScript and we have converted simple HTML into a fully functional accordion that is themed to match our DotNetNuke skin. DotNetNuke Modules & jQuery UI combined offer an excellent combination of framework and library to make your web application development, quicker, easier and more cost effective.

Resources

• www.dotnetnuke.com – Official DotNetNuke site
• www.jquery.com – Official jQuery Site
• www.jqueryui.com – Official jQuery UI Site
  At the time of writing, the jQuery UI is in the early stages of development. Check out their planning wiki for a list of future planned UI components:  http://jqueryui.pbwiki.com/
• Instructions on how to add jQuery Intellisense in Visual Studio 2008 http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx

De sources die bij dit artikel horen kun je downloaden via darkis_usingJQueryUIinDNNmodules_SRC.zip.