Drupal 7 Module Development

JavaScript in Drupal
API Documentation for hook_library_alter() is available at
http://api.drupal.org/api/function/hook_library_
alter/7
Using renderable arrays
A Drupal Renderable Array is the way much of the output for a Drupal page is
represented before it is rendered into HTML. Theme functions, discussed in Chapter 3,
Drupal's Theme Layer, can return either a Drupal Renderable Array or HTML to output.
If a Renderable Array is returned it will be rendered into HTML by drupal_render().
If you are familiar with the Form API from previous versions of Drupal you've seen
the Renderable Arrays. They are the arrays from Form API extrapolated to other uses.
The Renderable Array for a form element might look like this:
$form['options'] = array(
'#type' => 'textfield',
'#title' => t('Author name'),
'#maxlength' => 25,
'#attached' => array(
'css' => array(
drupal_get_path('module', 'hello_world') . '/example.css',
),
'js' => array(
"alert('Hello World!')" => array('type' => 'inline'),
),
);
The #attached property on a renderable or form array can be used to add
JavaScript, CSS, and libraries. The keys are as follows:
• js is for JavaScript
• css is used for CSS
• library is used to add libraries
For each item in a sections array, like js, the key is the data and the options are the
value. If the value is omitted, the default options are assumed.
Using renderable arrays and attaching the JavaScript, CSS, and libraries is important
in several places throughout Drupal where caching of individual elements happen.
An example is with blocks which can be cached. A common use case is when
JavaScript is added to a block. If the JavaScript is added within the content of the
block using drupal_add_js() it will be added when the block is not cached.
Cached blocks do not rebuild the content so drupal_add_js() will not be called.
[ 298 ]