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.

Getting started

Broadly speaking, you find an example you'd like to implement e.g. from here, then add it to an existing page, then tweak it to do what you want.

YUI works with a single global object called YAHOO, which all other functions are added to via namespacing. You then use them like this:

YAHOO.util.Event.onDOMready(//do something );

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:

<?php require_js(array('yui_yahoo', 'yui_event')); ?>

You can see that you can use shortcuts for many of the libraries. the ajax_get_lib() function in /lib/ajax/ajaxlib.php has details. Otherwise, you use the full path like this:

<?php require_js(array($CFG->dirroot.'/lib/yui/yahoo/yahoo-min.js', $CFG->dirroot.'/lib/yui/event/event-min.js')); ?>

You notice that the files are called xxx-min.js. This is because they have been minified to make them as small as possible for fast page loading. Every file comes in a non-minifed version too called xxx-debug.js, which will give you accurate error messages as well as letting you follow progress in the YUI logger console.

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.

You can also inject libraries dynamically if you really want to using YUI loader, which adds <script> and <link> tags on the fly and can keep initial page load lighter.

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 webdeveloper, Firebug and YSlow extensions loaded. 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.

Documentation for specific libraries

• Yahoo Global Object (/lib/yui/yahoo/yahoo.js)
• YUI event utility (/lib/yui/event/event.js)
• Yahoo DOM Manipulation (/lib/yui/dom/dom.js)
• Yahoo Connection Manager (/lib/yui/connection/connection.js)
• Yahoo Drag and Drop Utility (/lib/yui/dragdrop/dragdrop.js)
• Yahoo Animation Utility (/lib/yui/animation/animation.js)
• YUI TreeView (/lib/yui/treeview/treeview.js)
• Yahoo logger (/lib/yui/logger/logger-min.js)