YUI3 Gallery Modules: YUI 2 Wrapper Utility
gallery-yui2 in yui3-gallery by caridy

The YUI2 Wrapper is a utility to load YUI 2 modules within a YUI 3 Sandbox object. This utility is very handy for incremental migration of your legacy code. It's also a lightweight module (~789 bytes).

It provides an easy way to bring YUI 2 code into YUI 3 world, relying on YUI 3 lazy loading system and organization, and providing an easy way to mashup yui2 and yui3 code. It uses a YUI 2 Loader under the hood so you don't need to worry about dependencies.

Example:

YUI({
    modules: {
        'gallery-yui2': {
            fullpath: 'http://yui.yahooapis.com/gallery-2009.11.19-20/build/gallery-yui2/gallery-yui2-min.js',
            requires: ['node-base','get','async-queue'],
            optional: [],
            supersedes: []
        }
    }
}).use('gallery-yui2', function(Y) {

    Y.yui2().use('tabview', function() {

        var myTabs = new YAHOO.widget.TabView("demo");

    });

});

In this example, you just need to include YUI 3 seed file (yui.js) in the page. Tabview and it's dependencies will be injected into the page using combo handler and the latest version of YUI 2 by default.

Custom Modules

Everytime you call "Y.yui2().use" the system will behave just like Y.use but for YUI 2.x modules. Also, you can add custom YUI 2 modules with yui2 dependencies.

YUI({
    modules: {
        'gallery-yui2': {
            fullpath: '-----PATH/TO-----/gallery-yui2-min.js',
            requires: ['node-base', 'get', 'async-queue'],
            optional: [],
            supersedes: []
        }
    }
}).use('gallery-yui2', function(Y) {

    Y.yui2({
        modules: {
            'bar': {
                fullpath: './yui2-bar.js',
                requires: ['tabview']
            }
        }
    }).use('connection', 'bar', function() {

        var myTabs = new YAHOO.widget.TabView("demo");

    });

});

In this example, you can see how to define a custom module in YUI 2, and defining its dependencies. You have to use the YUI 3.x syntax, and you can load it immidiately after the definition calling "use" method.

Loading YUI 2 modules without CSS dependencies

Sometimes is better to include CSS files on the top, using a single request to load all the styles, and then injecting the JS dynamically.

YUI({
    modules: {
        'gallery-yui2': {
            fullpath: '-----PATH/TO-----//gallery-yui2-min.js',
            requires: ['node-base', 'get', 'async-queue'],
            optional: [],
            supersedes: []
        }
    }
}).use('gallery-yui2', function(Y) {

    Y.yui2({
        type: 'js'
    }).use('tabview', function() {

        var myTabs = new YAHOO.widget.TabView("demo");

    });

});

In this example, the CSS for the tabview have to be defined at the header, and the tabview control (tabview.js) is loaded on demand.

Using YAHOO_config to set up the loader upfront

As an advanced feature, you can define a global object called YAHOO_config to adjust the loading process. This feature was introduced in YUI 2.3.x, and has to be included before start using gallery-yui2. Here is an example:

YAHOO_config = {
    root: '2.7.0/build/',
    filter: 'debug',
    modules: {
        'foo': {
            fullpath: './yui2-foo.js',
            requires: ['event', 'button']
        }
    }
};

In this example, you can see how to use an old version of the library (YUI 2.7.0), turning on debug mode, and defining a custom module in YUI 2 with two dependencies (event and button). More info about YAHOO_config here.

In the case of the modules, they will be registered, but not loaded until you specify them in the list of requirement thru Y.yui2().use. This option is really useful to organize your code, having all the custom modules, that you will use in your page, defined in a single structure that will be included in all your pages. Also very usefull to switch between debug or production mode.

The current version in CDN (gallery-2009.11.19-20) is having some issues with inline and global modules. You can get the fixed copy from github or wait until next push to CDN scheduled for next week.

Useful links:

Download

You can download this project in either zip or tar formats.

You can also clone the project with Git by running: 

$ git clone git://github.com/caridy/yui3-gallery