The upcoming release of YUI 3 is going to change the way we develop using the YUI framework. Instead of namespacing the library behind the YAHOO
object, as was done in YUI 2, in YUI 3 the library will be referenced in isolated functional contexts by calling "YUI().use". Thus developers need to modify their code to wrap everything that uses the YUI library with a "YUI().use" call.
Example 1: Calling YUI().use
YUI().use(widget, function(Y) { var node = Y.Node.get(#myNode); });
The first n parameters of the use
method are the YUI modules needed for your callback function context; these will be added to the first parameter of the callback function (in this case Y
). When adding a YUI module with other modules dependencies, those other modules will also be added. The widget
module for example has dependencies on the node
module, so inside of the of the callback function, we use node
module, even though we didnt explicitly ask for it.
So now you know how to include all the YUI modules into your project. However, now that all code exists inside of a function context, how do we share classes between files and/or parts of your code? One approach would be to attach your code to the window object, but that would be bad practice. The YUI way is to attach your own classes to the library. To do this, use the "YUI().add" method:
Example 2: Calling YUI().add
YUI().add(theNameOfMyModule, function(Y) { function _F(conf) { _F.superclass.constructor.apply(this, arguments); } _F.NAME = "theNameOfMyModule"; _F.prototype { // the meat of your class }; Y.theNameOfMyModule = _F; },3.0.0b1,{requires:[node]});
This code snippet creates a new module theNameOfMyModule that can be called with "YUI().use". Inside of the callback function context, "Y.theNameOfMyModule" will be available for you to instantiate. The
add function signature has 4 parameters: the name of the module, the callback function in which to build the module, the version number, and a configuration object. The version number is the version number of your module, not the version number of YUI 3 that it is compatible with. The configuration object should contain at least 1
requires or
use value (probably both), as
requires are the YUI module instances passed into the
add callback, while
use are the YUI module instances passed into future "YUI().use" calls. The
use value can also be used to augment existing widgets. For example, the Node class is essentially
node-base augmented by
node-style,
node-screen, and
node-aria.
Example 3: Using use with YUI().add
YUI().add(node, function(Y){},3.0.0b1,{skinnable:false, use:[node-base,node-style,node-screen,node-aria]});
Hopefully, you now have the tools required to write your own YUI 3 classes. I will be endeavoring to use YUI 3 for developing future widgets.