0
YUI3 : MODULES                            Base - Plugin - WidgetWednesday, June 8, 2011
CLASS CREATIONWednesday, June 8, 2011
CLASS OBJECTS    Constructor Functions               function wooga() {}               var wooga = function(){};Wednesday,...
PROPERTIES    function Fooga() {        this.wooga = wooga;    }    Fooga.PI = Math.PI;    Fooga.prototype.nooga = functio...
EXTENDING    function Fooga() {        Y.log(Fooga constructor);    }    function Hooga() {        Y.log(Hooga constructor...
MIXING    function Hooga() {}    Hooga.prototype.fooga = wooga;    function Nooga() {}    Nooga.prototype.fooga = null;   ...
EXAMPLE    function Fooga() {        Fooga.superclass.constructor.apply(this, arguments);    }    Fooga.NAME = fooga;    F...
BASEWednesday, June 8, 2011
UNDER THE HOOD    • Event Target              - publish(), fire(), once(), before(), on(), after()    • Attribute  - set(),...
METHODS    • Static          - create(), mix(), plug(), unplug()    • Life        Cycle - init(), destroy()Wednesday, June...
EVENTS AND CONFIG    • Configuration               - initialize, destroyed    • Events              - init, initializedChan...
EXAMPLE    YUI.add(calc, function(Y){           Y.Calc = Y.Base.create(calc, Y.Base, [], {                  add : function...
PLUGINWednesday, June 8, 2011
LIFE CYCLE    • initializer         - fired on plug()    • destructor           - fired on unplug()Wednesday, June 8, 2011
METHODS    • Life        Cycle - initializer(), destructor()    • Host           Method - beforeHostMethod(), afterHostMet...
EVENTS AND CONFIG    • host          - object that gets plugged    • hostChange           - fires when the host has changed...
EXAMPLE    YUI.add(my-plugin, function(Y){          Y.Plugin.MyPlugin = Y.Base.create(my-plugin, Y.Plugin.Base, [], {     ...
WIDGETWednesday, June 8, 2011
LIFE CYCLE    • initializer    • render             • renderUI             • bindUI             • syncUI    • destructorWe...
METHODS    • focus           - blur(), focus()    • enable              - enable(), disable()    • show            - show(...
EVENTS AND CONFIG    • boundingBox                  • boundingBoxChange    • contentBox                   • contentBoxChan...
EXAMPLE    YUI.add(my-widget, function(Y){          Y.MyWidget = Y.Base.create(my-widget, Y.Widget, [], {                 ...
PLUGIN OR EXTENSION    • Plug         when you:                • Extend   when you:             • Want    to add or remove...
QUESTIONS?    Anthony Pipkin    @apipkin    IRC: apipkin    meebo: a.pipkin    Links    http://developer.yahoo.com/yui/3/ ...
Upcoming SlideShare
Loading in...5
×

YUI3 Modules

1,265

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,265
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "YUI3 Modules"

  1. 1. YUI3 : MODULES Base - Plugin - WidgetWednesday, June 8, 2011
  2. 2. CLASS CREATIONWednesday, June 8, 2011
  3. 3. CLASS OBJECTS Constructor Functions function wooga() {} var wooga = function(){};Wednesday, June 8, 2011
  4. 4. PROPERTIES function Fooga() { this.wooga = wooga; } Fooga.PI = Math.PI; Fooga.prototype.nooga = function(){ return 42; };Wednesday, June 8, 2011
  5. 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. 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); // nullWednesday, June 8, 2011
  7. 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. 8. BASEWednesday, June 8, 2011
  9. 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. 10. METHODS • Static - create(), mix(), plug(), unplug() • Life Cycle - init(), destroy()Wednesday, June 8, 2011
  11. 11. EVENTS AND CONFIG • Configuration - initialize, destroyed • Events - init, initializedChange, destroy, destroyedChangeWednesday, June 8, 2011
  12. 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. 13. PLUGINWednesday, June 8, 2011
  14. 14. LIFE CYCLE • initializer - fired on plug() • destructor - fired on unplug()Wednesday, June 8, 2011
  15. 15. METHODS • Life Cycle - initializer(), destructor() • Host Method - beforeHostMethod(), afterHostMethod() • Host Event - onHostEvent(), afterHostEvent()Wednesday, June 8, 2011
  16. 16. EVENTS AND CONFIG • host - object that gets plugged • hostChange - fires when the host has changedWednesday, June 8, 2011
  17. 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. 18. WIDGETWednesday, June 8, 2011
  19. 19. LIFE CYCLE • initializer • render • renderUI • bindUI • syncUI • destructorWednesday, June 8, 2011
  20. 20. METHODS • focus - blur(), focus() • enable - enable(), disable() • show - show(), hide() • getClassName() • getSkinName()Wednesday, June 8, 2011
  21. 21. EVENTS AND CONFIG • boundingBox • boundingBoxChange • contentBox • contentBoxChange • srcNode • srcNodeChange • tabIndex • tabIndexChange • rendered • renderedChange • visible • visibleChangeWednesday, June 8, 2011
  22. 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. 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 objectWednesday, June 8, 2011
  24. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×