jQuery is a JavaScript library, mostly used for expediting script writing. jQuery UI is a user interface built with jQuery. In the words of jQueryUI.com:

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Now you might think "hey, that sounds nice!", and "how do I use it on my website?". You can find instructions on how to use jQuery UI on their website, here.

But, lucky for those of us using mojoPortal, jQuery is already built in — and so is jQuery UI. This post will explain how to use it with mojoPortal.

Creation

The first thing you need before you can integrate a new UI style into mojoPortal, is a new UI style. I highly suggest using the jQuery UI Themeroller, as it is much easier than manually changing the CSS and images for an old UI theme.

Before you start, you might find it helpful to click the "gallery" tab on the left and look through the native themes to see if they have something a little closer to what you want. Once you've found one that you like, click the "edit" button under it in the gallery, and you're ready to begin making changes.

When I do this, I usually go to my mojoPortal site design and use a color-picker to pick out the primary colors from the skin, then add them to my UI theme until it matches the skin pretty well. Hint: The parts of mojoPortal that use the UI tend to use it very heavily, so you'll want to go easy on the bright colors.

Once you have the theme the way you like it, click the "download theme" button. This will bring you to a page that lets you pick what UI features you need. You can disable these as you like, but if you don't care about the file size just leave it all on the defaults and scroll to the bottom of the page, where you can name your theme and then click download again.

Encouragement

The next part can be a little confusing the first time you do it (which is why I wrote instructions), but after you get through it once you'll realize it's actually quite easy. Working for i7MEDIA, I do it on a regular basis and now the whole process only takes me 5 minutes.

I've written detailed instructions below, if you follow them it shouldn't take you too long either. Have fun!

Installation

Once you've gotten your theme downloaded, you'll need to extract the zip file into some folder on your computer. Next, navigate within that folder to the "css" folder, and then to the folder named whatever you named the theme (default is "custom-theme"). Now just follow these instructions:

1. Inside of the "custom-theme" folder, there are two css files and a folder.
2. Before putting them in your skin, you'll want to rename "jquery-ui-#.#.#.custom.css" to "style-jquery.css", and rename the "images" folder to "jquery-images".
3. Copy the renamed images folder and css file into your skin.
4. Open the "style.config" file within your skin and add a line that corresponds with the name of the new file.
   In example: <file>style-jquery.css</file> — where "style-jquery.css" is the name of the css file you copied from the folder.
5. Now there's some slight editing you need to do within the jquery css file. Open it and do a "find-and-replace" (usually ctrl+f or ctrl+h) for the following keys:
   • Find: (images/ — Replace with: ('jquery-images/ [1].
   • Find: .png) — Replace with: .png') [2].
   • Find: (opacity — Replace with: ('opacity.
6. Now for the next one, you can't automate the find and replace because the numbers at the end of the "opacity" rule are always different. You'll need to look for any rules like this: filter:Alpha('Opacity=#), and replace them with this: filter:Alpha('Opacity=#') — The only difference being the new apostrophe before the last parenthesis.
7. Next, open your "layout.master" file, and search for: <portal:StyleSheetCombiner. Once you've found it, check for the following key inside of it: IncludeJQueryUI="false". If this is set for "false", you'll be okay — if it is "true", change it to "false".

Hopefully, now your new UI theme works. However, if you have a really old version of mojoPortal, or are using a really old skin, you might need to read the next section, too.

Changing mojoPortal's native jQuery version

As of this writing, the latest version of jQuery UI is 1.9.2. The latest version of mojoPortal (2.3.9.4) ships with UI version 1.9.0 — as you can imagine, this could be a problem.

Usually, your particular skin will be configured to use the version of the UI that its theme was built to use when it was created. However, if you try to upload a new UI theme as per the instructions above, but find that it is not displaying properly or certain features of the UI are buggy/broken, you might need to force the mojoPortal installation you have to use a new version of the UI.

To do this, simply follow these instructions:

1. Open the layout.master file in your skin.
2. Search for the following line: <portal:ScriptLoader.
3. Make sure that the ScriptLoader has the following key: AssumejQueryUiIsLoaded="true"
4. Once that's done, add the following line somewhere under the ScriptLoader:
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script> - [3]
5. The numbers in that link can be changed from "1.9.2", to whatever is the latest version of jQuery UI. You can find what the latest version is and easily find the google CDN link at the bottom of this page, under "quick access".

You might also find this article helpful: http://www.mojoportal.com/self-hosting-jquery-jquery-ui-files

Help

If you've read this article, followed the instructions, and ripped out your hair trying to figure out why something is still broken… Well, you might need a psychiatrist — but you can also just try asking us for help in the comments section below!

[1] In this case, "jquery-images" is the name of the "images" folder that you renamed before putting it in your skin.
[2] The apostrophes are necessary to stop the StyleSheetCombiner from failing to combine the CSS properly.
[3] If your site has SSL, or if you just prefer not to call the script this way, you can call call it via the web.config.

Well, here's an extremely easy way to hide the links without sacrificing the usability of mojoPortal. This solution is completely skin based so it doesn't require any additions to the mojoPortal core.

First, we add the following to our skin script (see "Optimize Your mojoPortal Skin Scripts" for more info):

function HideEditLinks() {
	$(".modulelinks").hide();
	$(".ModuleEditLink").hide();
}

function ShowEditLinks() {
	$(".modulelinks").show();
	$(".ModuleEditLink").show();
}

$(document).ready(function() {
	var editLinksState = Get_Cookie('editLinksState');
	if (editLinksState != null) {
		if (editLinksState == 'hidden') {
			HideEditLinks();
		}
		if (editLinksState == 'visible') {
			ShowEditLinks();
		}
	}

	$("a#togglemodulelinks").click(function() {
		editLinksState = Get_Cookie('editLinksState');
		if (editLinksState == null || editLinksState == 'visible') {
			HideEditLinks();
			Set_Cookie('editLinksState', 'hidden')
		} else if (editLinksState == 'hidden') {
			ShowEditLinks();
			Set_Cookie('editLinksState', 'visible')
		}
	});
});

Second, we add the following inside the AutoHidePanel in the layout.master:

<a href="#" rel="nofollow" id="togglemodulelinks">Toggle Edit Links</a>

The code above simply hides the links if they're shown and displays them if they're hidden.

Placement of the "Toggle Edit Links" link can be done with CSS but it should definitely be inside of the AutoHidePanel. The AutoHidePanel will ensure that the link isn't shown unless one of the Admin Toolbar items is shown. You could add another AutoHidePanel to the layout.master but there's no point in increasing page load if you don't have to.

Happy mojo-ing!

Create the Skin Script and call it from the layout.master

1. Create a new js file in your skin directory, I usually name it skinscript.js.
2. Add your javascript to the new file. Don't use <script> tags, you don't need them in javascript files.
3. Add the following to your layout.master. I usually add this right after the <asp:ScriptManager control.

   <portal:SkinFolderScript ID="sfs1" runat="server" ScriptFileName="skinscript.js" AddToCombinedScript="true" />

Copy all the scripts from your layout.master to the Skin Script

This is the part that can be a little bit tricky because not all scripts are going to work properly when combined with other scripts. If you copy the scripts to your new file one at a time and test the result, you'll find those pesky ones that will not cooperate. Just leave them in the layout.master, or if you're feeling froggy, rewrite them so they can be combined.

A note about SuperFish

Most of our skins use a SuperFish menu but the scripts for the SuperFishmenu come in two parts. One is the static script that is in the ClientScript directory which contains all of the SuperFish magic. The other is an initialization script that is loaded in the layout.master of the skin. Typically, these are loaded by adding the layout.master a <portal:SiteScript control to load the main SuperFish script and then a <script> element with a bit of jQuery to initialize the SuperFish menu. We decided to use the jQuery .getScript() method to load the main script from our Skin Script. Using this method allows us to initialize the SuperFish menu only if the main script is loaded properly.

A Sample Skin Script

The script below is what we use for starting our skin scripts. It includes the JavaScript for the Administration Toolbar Menu, SuperFish Menu and a neat bit of jQuery that will give the "Add File" button in the Shared Files module a hover state. The script is written out long-form so you can easily see what it does. I suggest that you minify the script before using it in production.

//  ========== 
//  = This file stores all of the scripts that would normally be placed inside the layout.master
//  = Use the following syntax for referencing this script from the layout.master.
//  = 
//  ==========

/*Standard JavaScript */

function HideMenuToolbar() {
	$("#toolbar").fadeOut();
	$("#toolbarbut").fadeIn("slow");
}

function ShowMenuToolbar() {
	$("#toolbar").fadeIn();
	$("#toolbarbut").fadeOut("slow");
}


/* jQuery Scripts */
$(document).ready(function() {

	/* Admin Toolbar */
	$("span.downarr a").click(function() {
		HideMenuToolbar();
		Set_Cookie('openstate', 'closed')
	});
	$("span.showbar a").click(function() {
		ShowMenuToolbar();
		Set_Cookie('openstate', 'open')
	});
	$("span.downarr a, span.showbar a").click(function() {
		return false;
	});
	var openState = Get_Cookie('openstate');
	if (openState != null) {
		if (openState == 'closed') {
			HideMenuToolbar();
		}
		if (openState == 'open') {
			ShowMenuToolbar();
		}
	}

	/* Superfish Menu */
	/* Get Superfish mojoPortal Script */
	$.getScript("/ClientScript/jqmojo/mojosuperfish.js", function() {
		$("ul.sf-menu").supersubs({
			minWidth: 1,
			maxWidth: 27,
			extraWidth: .2
		}).superfish({
			pathClass: 'current',
			pathLevels: 0,
			delay: 500,
			animation: {
				opacity: 'show',
				height: 'show'
			},
			speed: 200,
			dropShadows: false,
			autoArrows: true
		});
	});
	/* This will make the Shared Files "Add File" button have a hover state */
	$("div.uploadpanel > div > input + div + div").hover(
		function() {
			$("div.uploadpanel div .jqbutton").addClass("ui-state-hover")
		},
		function() {
			$("div.uploadpanel div .jqbutton").removeClass("ui-state-hover")
		});
});

Further Reading

If you're serious about optimizing the speed of your mojoPortal site, I highly suggest you read the "Improving Your YSlow or Page Speed Score" article in the mojoPortal Documentation.

Happy mojo-ing!

I started browsing around the demo site (http://demo.mojoportal.com) so I could see some of the new changes in action. The list below are just the ones I found interesting, there are a lot more changes coming in the next release.

1. A new File Manager has been added and the old one has been re-factored. The new File Manager is very nice and is a big improvement over the old one. It uses Javascript whereas the old one doesn't so Audette decided to keep the old File Manager and allow users to switch back and forth between the old and the new. Usability is very big to mojoPortal and as a matter of fact, mojoPortal can be used entirely without Javascript if one chooses to do so. There is also a new link with the Administration and Edit Page links which opens the File Manager in a graybox. This allows for easy access to the File Manager at all times.
   
2. Adding users to Roles via the Role Administration admin page is a lot easier thanks to a new selector dialog. Previously, users not in a role were listed in a single drop-down list which made it very difficult to use when a site had a lot of users.
   
3. mojoPortal uses a CSSHandler to combine & minimize CSS files. This process makes caching easier and allows sites to load faster. The url to CSSHandler has been http://somedomain.com/data/sites/[sitenumber]/skins/[skinname]/CSSHandler.ashx. This required the Data directory or at least the skin directory to be executable which is not ideal. The CSSHandler URL has been moved to the root of applicaiton in the next release. Problem solved.
4. A new SQL Query tool will allow developers to easily see and modify data in the database from the website. This tool must be enabled by a site administrator in the web.config prior to it being available for use. It will allow developers to save queries which can be used to populate date in a custom module for quick and dirty data access.
   
5. The main administration links (admin, add page, edit page, page settings) used to be just that, links. If a site designer like yours truly wanted to display the links in a drawer or some other type of cool UI, custom code would have to be developed to create the links manually. This next version will include support for controls for each link which means it will be possible to declare them directly in the layout.master and they will show/hide automatically according to internal logic. See number 6 for what this really means.
6. The jQuery Extruder plugin has been included with mojoPortal which allows for an example of using a widget with the admin links.
    
7. The blog is getting some attention this go 'round. Community feedback suggested a preview draft option, paging, option to display only blog titles in the main blog page, and a few other improvements. All of them, that I noticed anyway, made it into the core! Check out the demo, to get a better idea of what has changed with the blog.
8. The Search facility will now provide a link to download items in ShareFiles modules. Previously, just a link to the Shared Files module was provided.

Rather impressive what Joe Audette can get done in just a few weeks, isn't it?

What improvements or features are you waiting to see implemented? Why not buy Joe Audette a Coffee to show him your appreciation? 

The first idea I had for using the widgets was to include a couple different contact forms on one page, each with its own tab. So I set out creating the 3 different Contact Form instances that I needed. I was doing this for my church so I had one for the Pastor, Christian Ed. Director and the Secretary. I then created an HTML Content instance on the Contact Us page and added the Tabs UI widget to the HTML content. Now this is when I ran into a problem; there isn't any way to reference a mojoPortal module from within another module, so I had no way to put the Contact Form instances inside the UI widget.

I looked throught the documentation on the mojoPortal site but couldn't find anything that I thought would lead me in the right direction so I posted a question in the forum asking for help. Joe Audette, mojoPortal's founder and chief developer, responded with a very elegant solution. All I needed to do was create a my own module that included the Tab widget with the Contact Form instances wrapped up inside. Being the great guy he is, Joe provided me with the necessary code to make this work. The process is very simple:

1. Create a text file named whateveryoulike.ascx
2. Paste this code into the text file:

   <%@ Control Language="C#" ClassName="MultiModuleInTabsModule.ascx" Inherits="mojoPortal.Web.SiteModuleControl" %>
   <%@ register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="portal" %>
   <%@ Import Namespace="mojoPortal.Business" %>
   <%@ Import Namespace="mojoPortal.Business.WebHelpers" %>
   <%@ Import Namespace="mojoPortal.Web.Framework" %>
   <%@ Import Namespace="mojoPortal.Web.Controls" %>
   <%@ Import Namespace="mojoPortal.Web.Editor" %>
   <%@ Import Namespace="mojoPortal.Net" %>
   
   <script runat="server">
   	protected void Page_Load(object sender, EventArgs e)
   	{
   	}
   </script>
   
   <div class="mojo-tabs">
   	<ul>
   		<li><a href="#tab1">Tab 1</a></li>
   		<li><a href="#tab2">Tab 2</a></li>
   		<li><a href="#tab3">Tab 3</a></li>
   	</ul>
   	<div id="tab1">
   		<asp:Panel ID="pnlModuleWrapper1" runat="server">
   			<portal:ModuleWrapper ID="ModuleWrapper1" runat="server" ConfigureModuleID="15" />
   		</asp:Panel>
   	</div>
   	<div id="tab2">
   		<asp:Panel ID="pnlModuleWrapper2" runat="server">
   			<portal:ModuleWrapper ID="ModuleWrapper2" runat="server" ConfigureModuleID="16" />
   		</asp:Panel>
   	</div>
   	<div id="tab3">
   		<asp:Panel ID="pnlModuleWrapper3" runat="server">   
   			<portal:ModuleWrapper ID="ModuleWrapper3" runat="server" ConfigureModuleID="17" />
   		</asp:Panel>
   	</div>
   </div>

3. Find the ModuleID for each Contact Form instance and modify the ModuleWrapper controls in the code above to match the correct ModuleIDs.
   Note: To find the correct ModuleIDs all you need to do is hover over the Edit or Settings link for the Contact Form instances and then look in your browser's status bar. The ModuleID will show as mid=SomeNumber.
4. Save the file you created in the first step to the "~\data\sites\[sitenumber]\Modules" directory. (Note: you can save the file to any directory in the mojoPortal application but I think it is best that you save it to a directory under your actual site in the Data directory because this will prevent it from being overwritten or accidentally deleted during upgrades.
5. Install your newly created module via the Administration > Advanced Tools > Feature Installation/Configuration screen inside of your mojoPortal site.
   1. This is rather straight forward. All you have to do is give your Module a name, and input the correct path in the Control Source field. You may want to create your own GUID to make sure that it is unique.
6. Now you can add your new module to any page you like just as you would add any other module to a page.

Here’s a screenshot of the end result:

Happy mojo-ing!

Joe is adding the ability to the HTML Feature of mojoPortal to display any element in a Slide Show. All the user has to do is type out their text, separating each "slide" with DIV or P elements and mojoPortal handles the rest! You can mix text with images within your SlideShow!

Here is a short video on it so you can see what I mean:

Try doing something like this with the built-in functionality of DNN!!! I can tell you now that you can't!!! This is a prime example of why mojoPortal is so far ahead of everyone else in the OpenSource .NET CMS game. One of the most important purposes of a CMS is supposed to be to allow users without a lot of web knowledge the ability to quickly and efficiently update/manage a website. This simple but very elegant feature will help those users keep their website up to date with a Web 2.0 feel.

I can't wait for the next release of mojo!!!!