YUI3 Modules

YUI3 : MODULESBase - Plugin - Widget

Wednesday, June 8, 2011

CLASS CREATION


CLASS OBJECTS

Constructor Functions

function wooga() {}

var wooga = function(){};


PROPERTIESfunction Fooga() { this.wooga = 'wooga';}

Fooga.PI = Math.PI;

Fooga.prototype.nooga = function(){ return 42;};


EXTENDINGfunction Fooga() { Y.log('Fooga constructor');}

function Hooga() { Y.log('Hooga constructor'); Hooga.superclass.constructor.apply(this, arguments);}

Y.extend(Hooga, Fooga);


MIXINGfunction 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


EXAMPLEfunction 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);


BASE


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()


METHODS

• Static - create(), mix(), plug(), unplug()

• Life Cycle - init(), destroy()


EVENTS AND CONFIG

• Configuration - initialize, destroyed

• Events - init, initializedChange, destroy, destroyedChange


EXAMPLEYUI.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'] });


PLUGIN


LIFE CYCLE

• initializer - fired on plug()

• destructor - fired on unplug()


METHODS

• Life Cycle - initializer(), destructor()

• Host Method - beforeHostMethod(), afterHostMethod()

• Host Event - onHostEvent(), afterHostEvent()


EVENTS AND CONFIG

• host - object that gets plugged

• hostChange - fires when the host has changed


EXAMPLEYUI.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'] });


WIDGET


LIFE CYCLE

• initializer

• render

• renderUI

• bindUI

• syncUI

• destructor


METHODS

• focus - blur(), focus()

• enable - enable(), disable()

• show - show(), hide()

• getClassName()

• getSkinName()


EVENTS AND CONFIG

• boundingBox

• contentBox

• srcNode

• tabIndex

• rendered

• visible

• boundingBoxChange

• contentBoxChange

• srcNodeChange

• tabIndexChange

• renderedChange

• visibleChange


EXAMPLEYUI.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'] });


PLUGIN OR EXTENSION

• Plug when you:

• Want to add or remove features during run time

• Want to mix features per instance

• Extend when you:

• Want to keep the functionality across all instances

• Want to mix features into a new object


QUESTIONS?

Anthony Pipkin@apipkinIRC: apipkinmeebo: a.pipkin

Linkshttp://developer.yahoo.com/yui/3/http://developer.yahoo.com/yui/3/api/http://developer.yahoo.com/yui/theater/http://www.yuilibrary.com/


http://developer.yahoo.com/yui/3

http://developer.yahoo.com/yui/3

http://developer.yahoo.com/yui/3/api

http://developer.yahoo.com/yui/3/api

http://developer.yahoo.com/yui/theater

http://developer.yahoo.com/yui/theater

http://www.yuilibrary.com

http://www.yuilibrary.com

YUI3 Modules

Technology

Transcript of YUI3 Modules