ColdBox JQueryUI Plugin

Posted At : May 7, 2010 2:00 PM | Posted By : Ernst van der Linden
Related Categories: ColdBox,Coldfusion

I work quite a lot with JQueryUI 1.8 lately, so time has come to create a new CB plugin. The JQueryUI Plugin handles (core)JS dependencies and CSS links for you, so no CFHTMLHEADs in your views anymore to include the proper files. You can just write:

<cfscript>
jQueryUI = getPlugin("JQueryUI",true);
jQueryUI.setEnableWidget('tabs');
</cfscript>

...or to enable multiple widgets at once:

jQueryUI.setEnableWidgets('tabs,datepicker');

What about effects and adding different ones along your code? Well, you can keep adding them and the plugin handles the boring stuff for you.

<cfscript>
jQueryUI.setEnableEffect('bounce');
// other code
jQueryUI.setEnableEffects('bounce,blind');
// other code
jQueryUI.setEnableEffect('explode');
</cfscript>

Adding interactions is rather simple as well. The following enables 'droppable and sortable' and includes the proper core JS files for you.

jQueryUI.setEnableInteractions('droppable,sortable');

What if you only need one specific core file only?

jQueryUI.setEnableCore('ui.position');

If you want to know which effects/widgets are supported by the plugin, you could use CFDUMP e.g.

Ok, we're almost done. What if you want to add your own CSS file which overrides style definitions from the core CSS?

jQueryUI.setCustomCssLink('includes/css/mytabs.css');

...which is exactly the same as:

jQueryUI.setCustomCssLink(href='includes/css/mytabs.css',media='screen',renderPosition=arrayLen(jQueryUI.getCustomCssLinks()));

As you noticed in the code above, we used an attribute 'renderPosition'. this attribute gives you control over the order how the CSS links are rendered. Having control over the rendering order is rather important for JS files (Thanks bro Tom de Man for notifying......or 'G. Ramsey' for the insiders). So let's say you have a couple of JS files which you're adding along your code and you want the last JS file being rendered as first.

<cfscript>
jQueryUI.setCustomJsLink('includes/js/myfile1.js');
jQueryUI.setCustomJsLink('includes/js/myfile2.js');
jQueryUI.setCustomJsLink(src='includes/js/myfile3.js',renderPosition=( arrayLen(jQueryUI.getCustomJsLinks() )-1 ));
jQueryUI.setCustomJsLink(src='includes/js/myfile4.js',renderPosition=2);
// first position
jQueryUI.setCustomJsLink(src='includes/js/myfile5.js',renderPosition=1);
</cfscript>

Ok, all features discussed. Still interested?...let's set everything up.

Grab the JQueryUI plugin from RIAForge and place it into your plugin folder
Download jqueryui 1.8.1, unzip it into your includes folder (See screenshot below)
Add the following lines to your coldbox config file

<setting name="JQueryUIPlugin.baseRelativePath" value="includes/jQueryUI" />
Place this code somewhere in your layout file. This renders the output of the plugin.
<cfoutput>#getPlugin("JQueryUI",true).render()#</cfoutput>

Enjoy!

Comments (9) |

Print |

Send |

del.icio.us |

Digg It! |

Linking Blogs | 1777 Views

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

[Add Comment]

I cannot for the life of me see a download link at the riaforge project. Am I just missing something?

# Posted By Judah McAuley | 5/14/10 10:37 PM

Thanks Judah,

You were right. Somehow version 1.1 did not make it to the download section.
Just uploaded version 1.1 again.

# Posted By Ernst van der Linden | 5/15/10 3:15 AM

The folder structure for jQueryUI that I downloaded doesn't look at all like what you show in the screenshot. Is that going to be a problem? I see, in the jqueryui zip file, a css folder, a development-bundle folder, a js folder and an index.html file. The js folder contains the jquery-1.4.2 file and jqueryui js file. Your screenshot has the jquery-1.4.2 file at the top level and no jqueryui js file at all. I presume it is in the ui folder as the init function in your cfc runs this setter: setJsRelativePath( getBaseRelativePath() & '/ui' );

It looks to me that the folder structure expected by your cfc is quite different than what gets downloaded from the JQuery site. Could you confirm?

Thanks

# Posted By Judah McAuley | 5/17/10 10:47 PM

Judah, the development-bundle folder is what you need.
I renamed the folder to JQueryUI (screenshot) for convenience.

# Posted By Ernst van der Linden | 5/18/10 12:15 AM

That makes sense. When I implemented it on my own, I just used the jquery-ui-1.8.1-custom.min.js file in the js directory. I kind of wondered why you were talking about enabling the various functions as they all seemed to be in the one minified file. But now I see the separate files in the ui folder you talking about and it all makes much more sense now. I shall give it a try. Thanks.

# Posted By Judah McAuley | 5/18/10 2:16 AM

Exactly, the plugin only uses the js-files which are needed for the current request.

# Posted By Ernst van der Linden | 5/18/10 2:26 AM

Hi there. I have been trying to get this installed on ColdBox v. 3.0. I am trying yo figure out where to put the settings information. Please bear with me as I am new to ColdBox.

# Posted By Mal | 6/1/10 7:08 PM

I've just got this working on an app I'm upgrading from CB2.6.4 to CB3 M6 and thought I'd share the experience. Hopefully it will save someone else some time.

To set the JQueryUIPlugin.baseRelativePath in CB 3 M6 you need to use a Coldbox.cfc config file written Programmatically (not xml). If, like me, you're updating to CB3, and need to write a non xml config file from scratch... there is great documentation on the CB wiki "ConfigurationCFC".

I created a new app through the dashboard with reinit fw every request enabled, deleted the xml.cfm config file and built a cfc config using the guide on the wiki. 1 setting at a time with lots of testing. If ( like mine ) the app is not in the webroot and you get not found errors, check you are using an appMapping setting.

The file layout & settings section of the config file looks like this...

mySite
- includes
- - jQueryUI
- - - jquery-1.4.2.js the core jquery js
- - - jquery-ui-1.8.5-custom-min.js optional jquery code (if you chose extras like effects)
- plugins
- - JQueryUI.cfc (if you use a sub folder, remember to add it when getting the plugin)
- config
- - Coldbox.cfc

settings = {
// settings here
};
settings[ 'JQueryUIPlugin.baseRelativePath' ] = 'includes/jQueryUI';
// jQuery Setting for CB3

And that is working for me. The only other issue was a component not found error caused by not restarting CF after updating the Coldbox folder. Now of to play with this plugin :)

# Posted By Steve | 9/25/10 12:37 PM

Hi Thank you for this great plugin!

However, I have followed your instructions and got the following error:
Application Execution Exception
Error Type: Controller.SettingNotFoundException : [N/A]
Error Messages: The setting jQueryUIPlugin.baseRelativePath does not exist.
FWSetting flag is false

I have added the files into my directory based on what you have suggested.

could you please advice me in what may went wrong?

Thanks!

# Posted By joseph | 6/2/11 10:49 PM

[Add Comment]