iFinity

Written by:
Thursday, July 21, 2011 10:48 AM 

It’s fantastic that DotNetNuke 6.0 now includes jQuery as part of the standard build.  This  allows module developers to leverage this as a built-in component and not worry about having to package the jQuery libraries.   It also makes it very easy to get your custom module to have a similar look and feel to the native DotNetNuke 6.0 look and feel.

However, if you’re building a module that will target multiple environments, things get a little more tricky.   If your module will be used on versions of DotNetNuke 5 (or even DotNetNuke 4), then you will have to come up with a solution to build backwards compatibility into your module, so that it can run in any version of DotNetNuke that you support.  At this stage, with DotNetNuke 6.0 only a day old, it’s not feasible to build and release a module that is only 6.0 compatible, unless you’re only releasing into a single environment.

Changes for DotNetNuke 6.0 in relation to jQuery

As DotNetNuke 6.0 uses jQuery UI as part of the standard libraries of the installation, if your module uses jQuery UI, then it’s likely your module isn’t going to work, as you’ll probably end up with duplicate references to the libraries on your page (and potentially different versions).  If there is any javascript errors on a DotNetNuke 6.0 page, one of the first things to check is for multiple references to jQuery or jQuery UI libraries.  Often these will create bugs that seem totally disconnected with the source of the problem.

So all module developers who use jQuery/jQuery UI need to update their modules to use the in-built DNN 6.0 way of handling these libraries.  But, of course, these use DNN 6-specific library methods, so if you still need to support older versions of DotNetNuke, you’re going to have a problem.  In this blog post, I’ll outline the solution I have developed to handle this scenario.

Determining the DotNetNuke version

This is a piece of code I have posted a few times, but will include again for completeness.  This is a safe method for determining the current version of DotNetNuke:

internal static bool SafeDNNVersion(out int major, out int minor, out int revision, out int build)
{
     System.Version ver = System.Reflection.Assembly.GetAssembly(typeof(DotNetNuke.Common.Globals)).GetName().Version;
     if (ver != null)
     {
         major = ver.Major;
         minor = ver.Minor;
         build = ver.Build;
         revision = ver.Revision;
         return true;
     }
     else
     {
         major = 0; minor = 0; build = 0; revision = 0;
         return false;
     }
}

Including jQuery and jQuery UI

DotNetNuke 5.0 included jQuery as a standard library, and in a previous blog post, I detailed how to do this in a version-independent way.   This blog post updates and extends that further by including the jQuery UI library.

/// 

/// Includes the jQuery libraries onto the page
/// 
/// Page object from calling page/control
/// if true, includes the jQuery UI libraries
/// if true, includes the uncompressed libraries
internal static void InjectjQueryLibary(System.Web.UI.Page page, bool includejQueryUI, bool uncompressed)
{
    int major, minor, build, revision;
    bool injectjQueryLib = false;
    bool injectjQueryUiLib = false;
    if (SafeDNNVersion(out major, out minor, out revision, out build))
    {
        switch (major)
        {
            case 4:
                injectjQueryLib = true;
                injectjQueryUiLib = true;
                break;
            case 5:
                injectjQueryLib = false;
                injectjQueryUiLib = true;
                break;
            default://6.0 and above
                injectjQueryLib = false;
                injectjQueryUiLib = false;
                break;
        }
    }
    else
        injectjQueryLib = true;

    if (injectjQueryLib)
    {
        //no in-built jQuery libraries into the framework, so include the google version
        string lib = null;
        if (uncompressed)
            lib = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js";
        else
            lib = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
        if (page.Header.FindControl("jquery") == null)
        {
            System.Web.UI.HtmlControls.HtmlGenericControl jQueryLib = new System.Web.UI.HtmlControls.HtmlGenericControl("script");
            jQueryLib.Attributes.Add("src", lib);
            jQueryLib.Attributes.Add("type", "text/javascript");
            jQueryLib.ID = "jquery";
            page.Header.Controls.Add(jQueryLib);

            // use the noConflict (stops use of $) due to the use of prototype with a standard DNN distro
            System.Web.UI.HtmlControls.HtmlGenericControl noConflictScript = new System.Web.UI.HtmlControls.HtmlGenericControl("script");
            noConflictScript.InnerText = " jQuery.noConflict(); ";
            noConflictScript.Attributes.Add("type", "text/javascript");
            page.Header.Controls.Add(noConflictScript);

        }
    }
    else
    {
        //call DotNetNuke.Framework.jQuery.RequestRegistration();
        Type jQueryType = Type.GetType("DotNetNuke.Framework.jQuery, DotNetNuke");
        if (jQueryType != null)
        {
            //run the DNN 5.0 specific jQuery registration code
            jQueryType.InvokeMember("RequestRegistration", System.Reflection.BindingFlags.InvokeMethod | System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static, null, jQueryType, null);
        }
    }

    //include the UI libraries??
    if (includejQueryUI)
    {
        if (injectjQueryUiLib)
        {
            string lib = null;
            if (uncompressed)
                lib = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js";

            else
                lib = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js";
            page.ClientScript.RegisterClientScriptInclude("jqueryUI", lib);
        }
        else
        {
            //use late bound call to request registration of jquery
            Type jQueryType = Type.GetType("DotNetNuke.Framework.jQuery, DotNetNuke");
            if (jQueryType != null)
            {
                //dnn 6.0 and later, allow jquery ui to be loaded from the settings.
                jQueryType.InvokeMember("RequestUIRegistration", System.Reflection.BindingFlags.InvokeMethod | System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static, null, jQueryType, null);

            }
        }
    }
}

Looking at the above code, we can see a couple of important parts.  There are two main methods for inserting the jQuery and jQuery UI libraries on a DotNetNuke page.  These are:

• DotNetNuke.Framework.jQuery.RequestRegistration() – included from DNN 5.0 onwards.  Calling this method ensures that DotNetNuke will put a reference to the jQuery library into the page.
• DotNetNuke.Framework.jQuery.RequestUIRegistration() – included from DNN 6.0 onwards.  Calling this method ensures that DotNetNuke will put a reference o the jQuery UI library on the page.

The logic of this procedure is quite simple – find out whether both the jQuery and jQuery UI libraries are required for a page.  If they are, work out what version DNN is running.  If it’s DNN 4, then both the jQuery and jQuery UI libraries will be included by directly registering them on the page.   If it’s DNN 5, the DNN method for the jQuery library will be used, and the UI library will be included by registering on the page.  If it’s DNN 6, both of the in-built DNN calls will be used.

The calls to DNN are done by using Reflection on the  DotNetNuke library.  By doing it this way, you can compile your module against the earliest version of DotNetNuke you need to support.   And thus you retain compatibility with DotNetNuke 6.0 but also backwards to whatever the minimum version you wish to support.

Feel free to use/modify/steal this code and claim credit.  Let me know via the comments if you find problems or bugs.  I’ll even give you extra credit for doing so.

UPDATE :  Ian Robinson has a good post on using all the new jQuery tools that are bundled within DotNetNuke 6.0.  It is worth looking here to see if you can cut down on the amount of custom code implemented by leveraging DNN6.   See here : jQuery, jQuery UI and new jQuery plugins for DotNetNuke 6

UPDATE 2 (Dec 2011): I have created a new downloadable code library which wraps all this code up and also implements and integrates the new DNN 6.1 features - still in a version agnostic set of code which means you can target a wide range of DNN Versions with one library.

Trackback Print

Tags:

Categories:

Location: Blogs Crafty Code

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Add Comment   Cancel