get started with yui
TRANSCRIPT
![Page 1: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/1.jpg)
Get Started with YUI
Adam Luhttp://adamlu.com/
@adamluFrontend Engineer
![Page 3: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/3.jpg)
![Page 4: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/4.jpg)
YUI Library Project
• JavaScript library• CSS foundation• Documentation tools• Build tools• Testing tools• Server side delivery tools• Developer education
![Page 5: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/5.jpg)
http://www.mindmeister.com/149577110/yui-library-project
![Page 6: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/6.jpg)
YUI Core & Utilities
• Event• Node• YUI Global Object
• Anim• History• IO• Transition• …
![Page 7: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/7.jpg)
YUI Global Object
• YUI.add• YUI(config).use()• YUI_config• YUI.GlobalConfig• YUI.applyConfig• Instance Config
YUI({ debug: true, combine: true, comboBase: 'http://mydomain.com/combo?', root: 'yui3/'}).use('node', function (Y) {});
![Page 8: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/8.jpg)
YUI Global Object
• Y.Lang • Y.UA
Y.Lang.isArray Y.Lang.isBoolean Y.Lang.isFunction Y.Lang.isNumber Y.Lang.isObject Y.Lang.isString Y.Lang.now Y.Lang.sub Y.Lang.trim
Y.UA.android Y.UA.ie Y.UA.ios Y.UA.ipad Y.UA.iphone Y.UA.ipod Y.UA.mobile Y.UA.opera Y.UA.os Y.UA.safari Y.UA.webkit
![Page 9: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/9.jpg)
Y.Array
• dudupe• each• every• filter• find• grep• hashindexOf• Invoke• lastIndexOf
• map• numericSort• partition• reduce• reject• some• test• unique• zip
![Page 10: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/10.jpg)
Y.mix
Y.mix(AttributeEvents, EventTarget, false, null, 1);Y.mix(Attribute, Y.AttributeEvents, true, null, 1);Y.mix(Base, Attribute, false, null, 1);
mix ( receiver supplier [overwrite=false] [whitelist] [mode=0] [merge=false] )
0: Default. Object to object.1: Prototype to prototype.2: Prototype to prototype and object to object.3: Prototype to object.4: Object to prototype.
Mixes supplier's properties into receiver.
Y.aggregate = function(r, s, ov, wl) { return Y.mix(r, s, ov, wl, 0, true);};
![Page 11: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/11.jpg)
Y.extend
Y.extend = function(r, s, px, sx) { var sp = s.prototype, rp = Y.Object(sp); r.prototype = rp; rp.constructor = r; r.superclass = sp; // add prototype overrides if (px) { Y.mix(rp, px, true); } // add object overrides if (sx) { Y.mix(r, sx, true); } return r;};
function Bird(name) { this.name = name;}
Bird.prototype.flighted = true; // Default for all Birds
function Chicken(name) { Chicken.superclass.constructor.call(this, name);}Y.extend(Chicken, Bird);Chicken.prototype.flighted = false;
Create Class Hierarchies with extend
![Page 12: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/12.jpg)
Y.augment
augment ( receiver supplier [overwrite=false] [whitelist] [args] )
Augments the receiver with prototype properties from the supplier. The receiver may be a constructor function or an object. The supplier must be a constructor function.
Y.augment(TreeNode, Y.EventTarget, true, null, { emitFacade: true, prefix: 'tree'});
function Foo() {} Foo.prototype.doSomething = function () {}; function Bar() {} Y.augment(Bar, Foo); var b = new Bar(); if (b instanceof Bar) {} // true if (b instanceof Foo) {} // false
![Page 13: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/13.jpg)
Y.Object
Y.Object = Lang._isNative(Object.create) ? function (obj) { return Object.create(obj);} : (function () { function F() {} return function (obj) { F.prototype = obj; return new F(); };}());
Prototype inheritance
![Page 14: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/14.jpg)
Y.merge
Returns a new object containing all of the properties of all the supplied objects. The properties from later objects will overwrite those in earlier objects.
var set1 = { foo : "foo" };var set2 = { foo : "BAR", bar : "bar" };var set3 = { foo : "FOO", baz : "BAZ" };
var merged = Y.merge(set1, set2, set3);//{foo => FOO, bar => bar, baz => BAZ}
![Page 15: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/15.jpg)
Y.clone
Deep object/array copy.
clone ( o safe f c owner cloned )
yeach(o, function(v, k) {if (k == 'prototype') { // skip the prototype // } else if (o[k] === o) { // this[k] = this; } else { this[k] = Y.clone(v, safe, f, c, owner || o, marked); }}, o2);
![Page 16: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/16.jpg)
Module
YUI.add("mywidget", function(Y) {function MyWidget(){}
Y.namespace(‘MyWidget’) = MyWidget;
} , "1.0.0", {requires:["widget", "substitute"]});
YUI.use(‘mywidget’, function(Y){new Y.MyWidget();
});
A module's add() callback isn't executed until that module is attached to a YUI instance via use(). Each time a module is attached via use(), the module's add() callback will be executed, and will receive as an argument the same YUI instance that will later be passed to the use() callback.
![Page 17: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/17.jpg)
Loader
• Built into YUI Global Object• Self-aware dependency management• Asynchronous combo-loaded from CDN• Sandboxed Code• Dynamic Loading with use() method
YUI().use('calendar', function (Y) { Y.use('autocomplete', function () { // The autocomplete module is available here, and the calendar module });});
![Page 18: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/18.jpg)
Event
• Dom Events• Custom Events• Event API• Custom Events more DOM like• “After” subscriptions• Unified subscription
![Page 19: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/19.jpg)
DOM Events
button.on('click', function (e) { e.target.get('id'); // => 'readygo' e.preventDefault(); e.stopPropagation();});
button.detach("click", handleClick);
Y.one('#items').delegate('click', handleClick, 'button.remove’, context);
Y.Event.define("tripleclick", {});button.on('tripleclick', omgYayCantClickEnough);
![Page 20: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/20.jpg)
Custom EventsY.augment(MyClass, Y.EventTarget);var instance = new MyClass();instance.on('addItem', function (e) { alert("Yay, I'm adding " + e.item);});instance.add('a new item');
Y.Env.evt.plugins.konami = Y.Node.DOM_EVENTS.konami = { on: function (type, fn, ctx) { var progress = {}, handlers = {}, keys = [38,38,40,40,37,39,37,39,66,65], ... node.on("keydown", _checkProgress); return detachHandle;
} node.on(konami, addUnicorns);
![Page 21: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/21.jpg)
Node
// Use Y.one( [css selector string] )var node = Y.one('#main');
node.one(".hello").setContent("<h1>Hello, <em>World</em>!</h1>");
node.addClass('highlight');
var doneTasks = Y.all('#tasklist .completed');doneTasks.each(function (taskNode) { taskNode.transition({ opacity: 0 }, function () { completedTasklist.appendChild(this); });});
http://jsfiddle.net/adamlu/zKSZq/
![Page 22: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/22.jpg)
IO
• io-base: base class used for standard XHR• io-xdr: extension for cross-domain requests• … …
var cfg, request;cfg = {
method: 'POST',arguments: { 'start' : 'bar' },on: {
start: function(o){},complete: function(o){
console.log(o.responseText);}
}};request = Y.io(uri, cfg);
![Page 23: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/23.jpg)
Transition
YUI().use('transition', function (Y) {
Y.one('#demo').transition({ duration: 1, height:0,
width: { delay: 1, duration: 0.5, value: 0 }}, function() { Y.log('end');});
});
http://jsfiddle.net/adamlu/RE6dF/
![Page 24: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/24.jpg)
YUI Infrastructure
http://yuilibrary.com/yui/infrastructure/
![Page 25: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/25.jpg)
YUI Infrastructure
![Page 26: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/26.jpg)
Basefunction MyClass(config) { // Invoke Base constructor, passing through arguments MyClass.superclass.constructor.apply(this, arguments);}
MyClass.NAME = "myClass";MyClass.ATTRS = { A : { // Attribute "A" configuration },};
Y.extend(MyClass, Y.Base, { initializer : function(cfg) {},
destructor : function() {},...
});
App = Y.Base.create('app', Y.Base, [View, Router, PjaxBase], {});
![Page 27: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/27.jpg)
Attributesfunction MyClass(userValues) { var attributeConfig = { attrA : { // ... Configuration for attribute "attrA" ... },
attrB : { // ... Configuration for attribute "attrB" ... } }; this.addAttrs(attributeConfig, userValues);};
Y.augment(MyClass, Y.Attribute);var o = new MyClass({ attrA:5});o.set("attrB", "Hello World!”)
![Page 28: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/28.jpg)
![Page 29: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/29.jpg)
Pluginfunction AnchorPlugin(config) {this._node = config.host;}AnchorPlugin.NS = "anchors"AnchorPlugin.prototype = { disable: function() {}};var container = Y.one("div.actions");container.plug(AnchorPlugin);container.anchors.disable();
Y.extend(WidgetAnimPlugin, Y.Plugin.Base, { initializer: function(config) {
this.afterHostEvent('render', this.insertCornerElements);
this.beforeHostMethod("_uiSetVisible", this._uiAnimSetVisible);
},_uiAnimSetVisible : function(show) {
return new Y.Do.Prevent();}
})http://yuilibrary.com/yui/docs/overlay/overlay-anim-plugin.html
![Page 30: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/30.jpg)
Widget
![Page 31: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/31.jpg)
Widget
• Basic Attributes: boudingBox, contentBox, focused…
• Rendering Methods: init, destroy, render, renderUI, bindUI, syncUI
• Plugins and Extensions
Extensions - A Class Level Concept
Plugins - An Instance Level Concept
![Page 32: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/32.jpg)
/* MyWidget class constructor */ function MyWidget(config) { MyWidget.superclass.constructor.apply(this, arguments);}
MyWidget.NAME = "myWidget";
MyWidget.ATTRS = {attrA : {
value: "A”}
}
Y.extend(MyWidget, Y.Widget, { renderUI : function() {} ,
bindUI : function() {} ,syncUI : function() {} ,
};
var mywidget = new MyWidget();mywidget.render(‘#container’);
![Page 33: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/33.jpg)
App Framework
• MVC-style framework• Y.Model• Y.ModelList• Y.View• Y.Router• Y.App• Templating: Y.Handlebars
http://yuilibrary.com/yui/docs/app/app-todo.html
var router = new Y.Router();router.route(/library/:lib/, function (req) {
var lib = req.params.lib; if (lib === yui) { Y.log(YUI Library is awesome!); }
});
router.save(/library/yui/);// => YUI Library is awesome!
![Page 34: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/34.jpg)
App Framework var usersApp = new Y.App({
views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: ‘users’ }
}});
var users = new Y.UsersList();
usersApp.route('/user/', function () { this.showView(users, {modelList: users});
});usersApp.route('/user/:id/', function (req) {
var user = users.getById(req.params.id); this.showView(user, {model: user}, function (view) {});
});
http://photosnear.me/
![Page 35: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/35.jpg)
YUI Gallery
![Page 36: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/36.jpg)
Learn More
• http://yuilibrary.com/yui/docs/tutorials• http://yuilibrary.com/theater/• http://yuilibrary.com/gallery/• https://github.com/yui/yui3• http://www.slideshare.net/drprolix/yui-3-quic
k-overview
• http://www.slideshare.net/eferraiuolo/app-framework-youve-been-wanting-this
![Page 37: Get started with YUI](https://reader034.vdocuments.mx/reader034/viewer/2022052217/555a2240d8b42a900d8b45bb/html5/thumbnails/37.jpg)
http://www.amazon.com/YUI-3-Cookbook-Evan-Goer/dp/1449304192