Embed Size (px)
Citation preview
Get Started with YUI
Adam Luhttp://adamlu.com/
@adamluFrontend Engineer
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
