Drupal 7 Module Development

JavaScript in Drupal
The preprocessing and caching properties go hand in hand. Preprocessing is the
feature Drupal provides to aggregate the files added to the page into fewer files.
Preprocessing of files is based on group and if a page is included in every page.
For example, files grouped as JS_LIBRARY on every page are all grouped into one
preprocessed file. Files grouped as JS_LIBRARY that are not on every page are
grouped into another preprocessed file. Each group and subgroup of every_page is
a different preprocessed file. This is done to minimize the amount of JavaScript sent
to the user and to take advantage of browser based caching. When cache is set to
FALSE files are not preprocessed since preprocessed files are cached.
Putting this together, a JavaScript file set to defer with caching and its preprocessing
disabled, with a group set to be added after drupal.js would look like the following:
$path = drupal_get_path('module', 'hello_world');
$options = array(
'group' => JS_LIBRARY,
'cache' => FALSE,
'preprocess' => FALSE,
'defer' => TRUE,
);
drupal_add_js($path . '/mylibrary.js', $options);
Adding CSS files
CSS files are added in a similar manner to JavaScript files. The API to
drupal_add_css() differs only in the options that can be passed in via the second
argument. The options for CSS files are weight, group, every_page, media,
basename, browsers, and preprocess. Just like drupal_add_js(), 'file' is used
for files internal to Drupal or using a relative path to Drupal and 'external' is used
for CSS files that are external to Drupal and they have a full URL.
There are three groups provided as constants by Drupal:
• CSS_SYSTEM is for system files and libraries
• CSS_DEFAULT is the module CSS files should use
• CSS_THEME comes after the other options and is used for theme CSS
CSS has different media that it's applied to. For example, stylesheets with a media
of screen are only applied when the page is rendered for screens. Other cases, like
printing, ignore the stylesheet. The default value is 'all'.
[ 292 ]