Development:YUI

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.

All components in the YUI Library have been released as open source under a BSD license and are free for all uses.

Details of the YUI can be found at the Yahoo Developer Website.

Note

Some of the following information will be out of date when Moodle 2.0 is released. Please see Development:JavaScript guidelines for the latest information.

Getting started

One approach is to find an example that is close to what you want, either in the Moodle code, or on the Yahoo Developer Website. Then adapt it to your needs.

The entire YUI libraries are all part of a single YAHOO object, so they will not clash with other code. You then use them like this: YAHOO.util.Event.onDOMReady(...);

Dependencies

In order to make the onDOMReady method available to you, you first include a .js file that sets up the global object, then the events library .js file that adds all of the events methods to it. Moodle's way of doing this is with the require_js() function:

require_js(array('yui_yahoo', 'yui_event'));

As you can see, you need only refer to the libraries by name. You don't need to know the full path. The ajax_get_lib() function in /lib/ajax/ajaxlib.php has the complete list of libraries.

Once you have included the various .js dependency files with require_js() as outlined above, then write your own source .js file and add that to the require_js array after the other YUI ones. Many of the YUI files have other dependencies, so you'll often need to include more than one and the order matters for them too. Just follow the examples.

Skinning

For CSS, you include the css dependency files in either your theme styles.php or module/block styles.php using the standard PHP include() function. You will often need to apply the yui-skin-sam style to the body tag to get the skins to work right, so add something near the top of your script like:

document.body.className += ' yui-skin-sam';

As a caveat, the paths in the CSS files assume that yui is placed in the site's web root and have no reference to $CFG->wwwroot, so none of the images work. The solution is to go through the CSS files, pulling out any that have

background: url(../../whatever.png);

and paste them into your styles.php below the css include you've added, but looking like this:

background: url(<?php echo $CFG->wwwroot ?>/lib/yui/whatever.png);

Performance

Remember to use event bubbling wherever possible so that instead of adding a drag-drop listener to every page element, you just add one to the content div which catches all of the events lower down the DOM tree and does what's needed.

Debugging

• Ideally, you should use Firefox, with the Web Developer Toolbar, Firebug and YSlow extensions loaded (see also Development:Firebug and Web developer extension).

• The YUI logger will need to be included as a dependency if you want to use the xxx-debug.js versions of the files, so you need to add it to require_js() before them.

See also

• The official YUI documentation
• JavaScript FAQ