YUI: Customize YUI

Building Your Own Widget Library with YUI
http://yuiblog.com/blog/2008/06/24/buildingwidgets/

Customizing Existing YUI Component

YAHOO.namespace static function to create an object space for our own library

YAHOO.namespace('SATYAM');  // create a property SATYAM under YAHOO

Define Constructor

YAHOO.SATYAM.LoadingPanel = function(id) {

  YAHOO.SATYAM.LoadingPanel.superclass.constructor.call(this,
    id || YAHOO.util.Dom.generateId() ,
    {
       width: "100px",
       fixedcenter: true,
       constraintoviewport: true,
       underlay: "shadow",
       close: false,
       visible: false,
       draggable: true
    }
  );

  this.setHeader("Loading ...");
  this.setBody('');
  YAHOO.util.Dom.setStyle(this.body, 'textAlign', 'center');
  this.render(document.body);
};


Use YAHOO.lang.extend
superclass is part of the inheritance mechanism provided by YUI’s extend method. After you declare the constructor for your new object, you call extend:

YAHOO.lang.extend(YAHOO.SATYAM.LoadingPanel, YAHOO.widget.Panel);

The constructor itself does not get executed immediately. The extend function does get executed immediately.

We use method call of JavaScript native Function object, which takes the first argument as the execution scope of the function called and passes it the rest of the arguments.

To Use the object we just created

if (!loadingPanel2) {
   loadingPanel2 = new YAHOO.SATYAM.LoadingPanel();
}
loadingPanel2.show();

Puts all the code within an anonymous function, which gets immediately executed (notice the empty parenthesis at the end)

YAHOO.namespace('SATYAM');
(function(){
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        Panel = YAHOO.widget.Panel;

 // here goes the library contents itself
 // constructor
 // extend component
})();
YAHOO.register('SATYAM.LoadingPanel', YAHOO.SATYAM.LoadingPanel, {version: "0.99", build: '11'});

After we declare the instance of the YUI Loader that we will use, we call method addModule providing the information about our library file

var loader = new YAHOO.util.YUILoader();

loader.addModule({
   name: 'SATYAM.LoadingPanel',
   type: 'js',
   requires: ['container'],
   fullpath: 'LoadingPanel.js'
});

loader.require('reset', 'grids', 'base', 'SATYAM.LoadingPanel');