Development:YUI

2010-03-04T21:50:23Z

Rodrigomcol: method name is onDOMReady (note uppercase R)

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 [http://developer.yahoo.com/yui/index.html 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 [http://developer.yahoo.com/yui/examples/slider/index.html 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:
<code javascript>
YAHOO.util.Event.onDOMReady(...);
</code>

=== 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:

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

As you can see, you need only refer to the libraries by name. You don't need to know the full path. The [http://xref.moodle.org/lib/ajax/ajaxlib.php.source.html#l6 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:

<code php>
document.body.className += ' yui-skin-sam';
</code>

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

<code php>
background: url(../../whatever.png);
</code>

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

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

== Performance ==

Remember to use [http://developer.yahoo.com/yui/examples/event/event-delegation.html 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 [https://addons.mozilla.org/en-US/firefox/addon/60 Web Developer Toolbar], [https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug] and [https://addons.mozilla.org/en-US/firefox/addon/5369 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 ==

* [http://developer.yahoo.com/yui/ The official YUI documentation]
* [[JavaScript FAQ]]

[[Category:Javascript|YUI]]
[[Category:AJAX|YUI]]
{{CategoryDeveloper}}

MoodleDocs - User contributions [en]

Development:YUI