• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
YUI3 Modules
 

YUI3 Modules

on

  • 1,417 views

 

Statistics

Views

Total Views
1,417
Views on SlideShare
1,417
Embed Views
0

Actions

Likes
1
Downloads
21
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    YUI3 Modules YUI3 Modules Presentation Transcript

    • YUI3 : MODULES Base - Plugin - WidgetWednesday, June 8, 2011
    • CLASS CREATIONWednesday, June 8, 2011
    • CLASS OBJECTS Constructor Functions function wooga() {} var wooga = function(){};Wednesday, June 8, 2011
    • PROPERTIES function Fooga() { this.wooga = wooga; } Fooga.PI = Math.PI; Fooga.prototype.nooga = function(){ return 42; };Wednesday, June 8, 2011
    • 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
    • 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
    • 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
    • BASEWednesday, June 8, 2011
    • 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
    • METHODS • Static - create(), mix(), plug(), unplug() • Life Cycle - init(), destroy()Wednesday, June 8, 2011
    • EVENTS AND CONFIG • Configuration - initialize, destroyed • Events - init, initializedChange, destroy, destroyedChangeWednesday, June 8, 2011
    • 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
    • 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(), afterHostMethod() • Host Event - onHostEvent(), afterHostEvent()Wednesday, June 8, 2011
    • EVENTS AND CONFIG • host - object that gets plugged • hostChange - fires when the host has changedWednesday, June 8, 2011
    • 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
    • WIDGETWednesday, June 8, 2011
    • LIFE CYCLE • initializer • render • renderUI • bindUI • syncUI • destructorWednesday, June 8, 2011
    • METHODS • focus - blur(), focus() • enable - enable(), disable() • show - show(), hide() • getClassName() • getSkinName()Wednesday, June 8, 2011
    • EVENTS AND CONFIG • boundingBox • boundingBoxChange • contentBox • contentBoxChange • srcNode • srcNodeChange • tabIndex • tabIndexChange • rendered • renderedChange • visible • visibleChangeWednesday, June 8, 2011
    • 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
    • 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
    • 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