1. YUI3 : MODULES
Base - Plugin - Widget
Wednesday, June 8, 2011

2. CLASS CREATION
Wednesday, June 8, 2011

3. CLASS OBJECTS
Constructor Functions
function wooga() {}
var wooga = function(){};
Wednesday, June 8, 2011

4. PROPERTIES
function Fooga() {
this.wooga = 'wooga';
}
Fooga.PI = Math.PI;
Fooga.prototype.nooga = function(){
return 42;
};
Wednesday, June 8, 2011

5. EXTENDING
function Fooga() {
Y.log('Fooga constructor');
}
function Hooga() {
Y.log('Hooga constructor');
Hooga.superclass.constructor.apply(this, arguments);
}
Y.extend(Hooga, Fooga);
Wednesday, June 8, 2011

6. MIXING
function Hooga() {}
Hooga.prototype.fooga = 'wooga';
function Nooga() {}
Nooga.prototype.fooga = null;
Y.mix(Hooga, Nooga);
var h = new Hooga();
Y.log(h.fooga); // 'wooga'
Y.mix(Hooga, Nooga, true, null, 2); // allow override. set mode to
prototype (2)
var h2 = new Hooga();
Y.log(h2.fooga); // null
Wednesday, June 8, 2011

7. EXAMPLE
function Fooga() {
Fooga.superclass.constructor.apply(this, arguments);
}
Fooga.NAME = 'fooga';
Fooga.ATTRS = {
timer : {
value : 2000
}
};
Y.extend(Fooga, Y.Base);
Y.mix(Fooga, Y.io);
Wednesday, June 8, 2011

8. BASE
Wednesday, June 8, 2011

9. UNDER THE HOOD
• Event Target - publish(), fire(), once(), before(), on(), after()
• Attribute - set(), get(), value, valueFn, setter, getter, validator,
readOnly, writeOnce
• Plugin Host - plug(), unplug(), hasPlugin()
Wednesday, June 8, 2011

10. METHODS
• Static - create(), mix(), plug(), unplug()
• Life Cycle - init(), destroy()
Wednesday, June 8, 2011

11. EVENTS AND CONFIG
• Configuration - initialize, destroyed
• Events - init, initializedChange, destroy, destroyedChange
Wednesday, June 8, 2011

12. EXAMPLE
YUI.add('calc', function(Y){
Y.Calc = Y.Base.create('calc', Y.Base, [], {
add : function() {
var total = this.get('total'),
args = arguments;
Y.Array.each(args, function(val) {
total += parseFloat(val, 10);
});
this.set('total', total);
return total;
}
}, {
ATTRS : {
total : {
value : 0
}
}
});
}, '1.0.0', { requires: ['base'] });
Wednesday, June 8, 2011

13. PLUGIN
Wednesday, June 8, 2011

14. LIFE CYCLE
• initializer - fired on plug()
• destructor - fired on unplug()
Wednesday, June 8, 2011

15. METHODS
• Life Cycle - initializer(), destructor()
• Host Method - beforeHostMethod(), afterHostMethod()
• Host Event - onHostEvent(), afterHostEvent()
Wednesday, June 8, 2011

16. EVENTS AND CONFIG
• host - object that gets plugged
• hostChange - fires when the host has changed
Wednesday, June 8, 2011

17. EXAMPLE
YUI.add('my-plugin', function(Y){
Y.Plugin.MyPlugin = Y.Base.create('my-plugin', Y.Plugin.Base, [], {
_clickHandle : null,
initializer : function() {
this._bindUI();
},
destructor : function() {
var handle = this._clickHandle;
if (handle) {
handle.detach();
}
},
_bindUI : function() {
this._clickHandle = this.get('host').on('click', this._preventClick, this);
},
_preventClick : function(e) {
e.preventDefault();
Y.log('click prevented');
}
}, {
NS : 'my-plugin',
ATTRS : {}
});
}, '1.0.0', { requires: ['plugin', 'base-build'] });
Wednesday, June 8, 2011

18. WIDGET
Wednesday, June 8, 2011

19. LIFE CYCLE
• initializer
• render
• renderUI
• bindUI
• syncUI
• destructor
Wednesday, June 8, 2011

20. METHODS
• focus - blur(), focus()
• enable - enable(), disable()
• show - show(), hide()
• getClassName()
• getSkinName()
Wednesday, June 8, 2011

21. EVENTS AND CONFIG
• boundingBox • boundingBoxChange
• contentBox • contentBoxChange
• srcNode • srcNodeChange
• tabIndex • tabIndexChange
• rendered • renderedChange
• visible • visibleChange
Wednesday, June 8, 2011

22. EXAMPLE
YUI.add('my-widget', function(Y){
Y.MyWidget = Y.Base.create('my-widget', Y.Widget, [], {
renderUI : function() {
var cb = this.get('contentBox');
cb.append(Y.Node.create('<strong />'));
cb.one('strong').setContent(this.get('content'));
},
bindUI : function() {
var strongNode = this.get('contentBox').one('strong');
strongNode.on('click', function(e){
e.currentTarget.toggleClass('blue');
});
}
}, {
ATTRS : {
content : {
value : 'Widget Content'
}
}
});
}, '1.0.0', { requires: ['widget', 'base-build'] });
Wednesday, June 8, 2011

23. PLUGIN OR EXTENSION
• Plug when you: • Extend when you:
• Want to add or remove • Want to keep the
features during run time functionality across all
instances
• Want to mix features
per instance • Want to mix features
into a new object
Wednesday, June 8, 2011

24. QUESTIONS?
Anthony Pipkin
@apipkin
IRC: apipkin
meebo: a.pipkin
Links
http://developer.yahoo.com/yui/3/
http://developer.yahoo.com/yui/3/api/
http://developer.yahoo.com/yui/theater/
http://www.yuilibrary.com/
Wednesday, June 8, 2011