Use Primefaces UI in a Drupal 7 Theme

Drupal 7 comes shipped with JQuery and JQuery UI by default. The versions of JQuery are quite old. I believe the JQuery version with Drupal is version 5.

There are a couple of easy steps to easily use Primefaces UI javascript component suite in your Drupal pages.

1) Use the JQuery update module to update JQuery to version 1.7 at a minimum.

2) Include various JQueryUI modules in order for the Primefaces components to work. My project used Gallery and Accordion. For those two to work I had to modify the preprocess_page method in the template.php file. You have to tell Drupal to load the pieces of JQuery UI that you need. You may need to load additional ones for your project if a different primefaces component requires that base library.

drupal_add_library('system', 'ui');
drupal_add_library('system', 'ui.widget');
drupal_add_library('system', 'effects');
drupal_add_library('system', 'effects.blind');
drupal_add_library('system', 'effects.slide');
drupal_add_library('system', 'effects.bounce');
drupal_add_library('system', 'effects.clip');
drupal_add_library('system', 'effects.drop');
drupal_add_library('system', 'effects.explode');
drupal_add_library('system', 'effects.fade');
drupal_add_library('system', 'effects.fold');
drupal_add_library('system', 'effects.highlight');
drupal_add_library('system', 'effects.pulsate');
drupal_add_library('system', 'effects.scale');
drupal_add_library('system', 'effects.shake');
drupal_add_library('system', 'effects.transfer');

Thats it. Just save and blow away the drupal cache and you should see the primefaces components function on your page. (after you add their javascript to initialize them ofcourse in your javascript files)

Here are some other JQueryUI modules that are available that I didn't use in my project. You can add these if needed.

drupal_add_library('system', 'ui.accordion');
drupal_add_library('system', 'ui.autocomplete');
drupal_add_library('system', 'ui.button');
drupal_add_library('system', 'ui.datepicker');
drupal_add_library('system', 'ui.dialog');
drupal_add_library('system', 'ui.draggable');
drupal_add_library('system', 'ui.droppable');
drupal_add_library('system', 'ui.mouse');
drupal_add_library('system', 'ui.position');
drupal_add_library('system', 'ui.progressbar');
drupal_add_library('system', 'ui.resizable');
drupal_add_library('system', 'ui.selectable');
drupal_add_library('system', 'ui.slider');
drupal_add_library('system', 'ui.sortable');
drupal_add_library('system', 'ui.tabs');