YUI február YUI szeptember YUI3

Az előadások a következő témára: "YUI február YUI szeptember YUI3"— Előadás másolata:

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

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

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

4 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

5 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"]); });

6 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

7 YUI3 főbb elemei – Node, NodeList
selector engine dom element wrapper EventTarget YUI3 - jQuery rosetta stone

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

9 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")

10 YUI3 főbb elemei - Attribute

11 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!");

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

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

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

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

16 YUI3 főbb elemei - Widget

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

18 YUI3 - linkek http://developer.yahoo.com/yui/3/
Szalóki Róbert