Easy Integration of Rich Internet Applications with Drupal - The RIA Module

By Skander, 19 September, 2012

This post is part of a series of where I present a solution that allows an easy integration of Rich Internet Applications in Drupal 7. I have already set the requirements of this project in the previous post : Rich Internet Applications / Drupal Integration Project Requirements

This entry describes the RIA module. This module is responsible of loading all the JavaScript and CSS resources needed by a Rich Internet Application.

For the sake of completeness, the INFO file of the RIA module is listed below

  1. name = RIA
  2. description = Easy Integration of Rich Internet Applications with Drupal.
  3. core = 7.x
  4. package = My Modules
  5. configure = admin/config/content/ria

RIA module implements a single Drupal hook, namely hook_node_view(). This hook is invoked by the Drupal core before a node is rendered. The implementation of hook_node() is depicted below. RIA resources should only be loaded when the node corresponding to the application's page is viewed in full. For instance, we do not want to load such resources when someone visits the homepage of our site and if this home page contains say a dozen of RIA 's. This check is done in line 11. Afterwards, the function looks if the current node has an field_ria_application_directory property. Application resources are supposed to be stored under directory sites/all/modules/ria/. If such directory exists, then the module proceeds to add the necessary markup that will allow loading application's CSS and JavaScript resources.

  1. /**
  2.  * @files
  3.  * Allows easy integration of Rich Internet Applications with Drupal
  4.  *
  5.  * @author Skander Kort
  6.  * @copy This code can be used in any project as long as you include this docblock
  7.  */
  8.  
  9. function ria_node_view($node, $view_mode, $langcode) {
  10.     if ('full' == $view_mode) {
  11.         if (isset($node->field_ria_application_directory)) {
  12.             $application_directory = drupal_get_path('module', 'ria') .
  13.                 DIRECTORY_SEPARATOR .
  14.                 $node->field_ria_application_directory[LANGUAGE_NONE][0]['value'];
  15.                
  16.             if (is_dir($application_directory)) {
  17.                 _ria_add_css($node, $application_directory);
  18.                 _ria_add_api_js($node);
  19.                 _ria_add_application_js($node, $application_directory);
  20.                 _ria_add_inline_js($node);
  21.             }
  22.         }
  23.     }
  24. }

Function _ria_add_css() loads the application's CSS file. The CSS file name is given by property field_ria_css. This file should be stored under directory sites/all/modules/ria/field_ria_application_directory/css. The markup required to load this file is added by function drupal_add_css().

  1. function _ria_add_css($node, $application_directory) {
  2.     if (isset($node->field_ria_css[LANGUAGE_NONE][0]['value'])) {
  3.         $css_file = $application_directory . DIRECTORY_SEPARATOR .
  4.             'css' . DIRECTORY_SEPARATOR . $node->field_ria_css[LANGUAGE_NONE][0]['value'];
  5.         drupal_add_css($css_file);
  6.     }
  7. }
  8.  

Function _ria_add_api_js() loads the code of any external JavaScript libraries needed by the Rich Internet Application. The URLs of these libraries are stored as an array in node property field_ria_javascript_api. The markup to load the JavaScript code is rendered by function drupal_add_js(). We specify that the API's URL is that of an JS_LIBRARY. This tells Drupal to load this library before any custom JavaScript (that might rely on it).

  1. function _ria_add_api_js($node) {
  2.     if (isset($node->field_ria_javascript_api[LANGUAGE_NONE])) {
  3.         foreach ($node->field_ria_javascript_api[LANGUAGE_NONE] as $url) {
  4.             drupal_add_js($url['value'], array('group' => JS_LIBRARY));
  5.         }
  6.     }
  7. }

The JavaScript of the application is held in one file. The name of this file is given by node property field_ria_application_javascript. This file should be stored under directory sites/all/modules/ria/field_ria_application_directory/js.

  1. function _ria_add_application_js($node, $application_directory) {
  2.     if (isset($node->field_ria_application_javascript[LANGUAGE_NONE][0]['value'])) {
  3.             $js_file = $application_directory . DIRECTORY_SEPARATOR .
  4.                 'js' . DIRECTORY_SEPARATOR . $node->field_ria_application_javascript[LANGUAGE_NONE][0]['value'];
  5.             drupal_add_js($js_file);
  6.     }
  7. }

Finally function _ria_add_inline_js() allows adding any inline JavaScript. This is added to the head element of the RIA's page. The inline JS is stored in node property field_ria_inline_javascript, without the script tags.

  1. function _ria_add_inline_js($node) {
  2.   if (isset($node->field_ria_inline_javascript[LANGUAGE_NONE][0]['value'])) {
  3.             $js = $node->field_ria_inline_javascript[LANGUAGE_NONE][0]['value'];
  4.             drupal_add_js($js, 'inline');
  5.     }
  6. }

You can now create a new content type for Rich Internet Applications through Drupal's user interface. The new content type must have all the fields required by RIA module. I will describe in the coming post the installation hook that will save you this trouble.

Thoughts
Technology

Skander Kort