YUI3 2006 február YUI2 2009 szeptember YUI3 nemcsak javascript framework css tools (reset, fonts, grid) YUI Compressor YUI Doc YUI Builder  YUI gallery

YUI3 előnyei csak a szükséges kódok betöltése kód újrafelhasználás egységes API kényelmes gyors

YUI3 főbb elemei – YUI Global Object Class hierarchia – extend Class kompozíció – augment Új viselkedés – mix Két objektum összeolvasztása - merge

YUI3 főbb elemei - Event DOM események EventFacade – egységes felület minden böngészőben Deferred Events – később létrehozott elementekre köthető esemény kezelők Szimulált események Delegált események Saját események: Bubles Cacelable AOP

YUI3 főbb elemei - Event YUI().use('node-base', function(Y) { //elements can be targeted using selector syntax: Y.on("click", handleClick, "#foo p"); //targets all p elements that are descendants of #foo //elements can be targeted by Node references: var foo = Y.one("#foo"); Y.on("click", handleClick, foo); foo.on("click", handleClick); //same as above //elements can be passed in as direct references: var foo = document.getElementById("foo"); //In all cases, you can pass in an array instead of single item: Y.on("click", handleClick, ["#foo p", "#bar"]); });

YUI3 főbb elemei – Event (CustomEvent) YUI().use('event-custom', function(Y) { // define a constructor: function Publisher() { var that=this; // create a custom event. it is not necessary to explicitly publish an event // unless you need to override the default configuration this.publish("publisher:testEvent", { // configuration options for this event }); this.test=function() { that.fire("publisher:testEvent"); }; } // augment the Publisher with EventTarget: Y.augment(Publisher, Y.EventTarget); var publisher = new Publisher(); publisher.on("publisher:testEvent", function(e) { //event handler code

YUI3 főbb elemei – Node, NodeList selector engine dom element wrapper EventTarget YUI3 - jQuery rosetta stone http://carlos.bueno.org/jq-yui.html

YUI3 főbb elemei – Node, NodeList YUI().use('node', function(Y) { var node1 = Y.one('#main'), node2 = Y.one(document.body), parent = node1.get('parentNode'); // Node instance node1.set('innerHTML', html); node1.prepend('<em>hello</em>'); node1.append('<em>world!</em>'); Y.all('#demo li').addClass('bar'); });

YUI3 főbb elemei - Attribute konfigurálható attribútumok value, valueFn, getter/setter, validator, readOnly, writeOnce események on/after obj.on('attributeNameChange', handler) akár komplex struktúrák  o.set("strings.ui.accept_label", "Yes")

YUI3 főbb elemei - Attribute

YUI3 főbb elemei - Attribute YUI().use("attribute", function(Y) { function 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!");

YUI3 főbb elemei - Plugin Már meglévő objektumhoz (host) új funkcionalitást ad: // This AnchorPlugin is designed to be added to Node instances (the host will be a Node instance) function AnchorPlugin(config) { // Hold onto the host instance (a Node in this case) for other plugin methods to use. this._node = config.host; } // When plugged into a node instance, the plugin will be available on the "anchors" property. AnchorPlugin.NS = "anchors" AnchorPlugin.prototype = { disable: function() { var node = this._node; var anchors = node.queryAll("a"); anchors.addClass("disabled"); anchors.setAttribute("disabled", true); }; var container = Y.one("div.actions"); container.plug(AnchorPlugin); container.anchors.disable();

YUI3 főbb elemei - Base ősosztály EventTarget attribútum támogatás init és destroy metódusok plugin és extension támogatás

YUI3 főbb elemei - Base MyClass = Y.Base.create('NAME',superclass,[extensions],{ // prototype properties },{ // static properties ATTRS:{ foo:{ value:'hello' }, bar:{ value:'world!' } });

YUI3 főbb elemei - Widget Base-ből származik (EventTarget, PluginHost, Extendable) ős implementáció minden widgetnek közös attribútumok és metódusok boundingBox, contentBox width, height show(), hide(), enable(), disable() render lifecycle moment renderUI bindUI syncUI   közös css osztályok (yui3-[widgetname], yui3-[widgetname]-[state]) Progressive Enhancement (HTML_PARSER)

YUI3 főbb elemei - Widget

YUI3 - egyéb fontos modulok Collections Console Animation Drag & drop IO JSON History

YUI3 - linkek http://developer.yahoo.com/yui/3/ http://developer.yahoo.com/yui/3/api/ http://developer.yahoo.com/yui/3/examples/ http://developer.yahoo.com/yui/theater/ Szalóki Róbert r.szaloki@gmail.com