get started with yui

Get Started with YUI

Adam Luhttp://adamlu.com/

@adamluFrontend Engineer

What is YUI?

YUI = Yahoo! User Interface Library

http://yuilibrary.com/

YUI Library Project

• JavaScript library• CSS foundation• Documentation tools• Build tools• Testing tools• Server side delivery tools• Developer education

http://www.mindmeister.com/149577110/yui-library-project

YUI Core & Utilities

• Event• Node• YUI Global Object

• Anim• History• IO• Transition• …

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) {});

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

Y.Array

• dudupe• each• every• filter• find• grep• hashindexOf• Invoke• lastIndexOf

• map• numericSort• partition• reduce• reject• some• test• unique• zip

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

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

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

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

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}

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

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.

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

Event

• Dom Events• Custom Events• Event API• Custom Events more DOM like• “After” subscriptions• Unified subscription

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

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

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/

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

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/

YUI Infrastructure

http://yuilibrary.com/yui/infrastructure/

YUI Infrastructure

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], {});

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!”)

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

Widget

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

/* 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’);

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!

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/

YUI Gallery

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

http://www.amazon.com/YUI-3-Cookbook-Evan-Goer/dp/1449304192

@adam

lu