YUI 3.x 介紹

3,535 views

Published on

Published in: Technology
2 Comments
20 Likes
Statistics
Notes
No Downloads
Views
Total views
3,535
On SlideShare
0
From Embeds
0
Number of Embeds
299
Actions
Shares
0
Downloads
206
Comments
2
Likes
20
Embeds 0
No embeds

No notes for slide

YUI 3.x 介紹

  1. 1. YUI 3.0 PR1 Yahoo! YDN
  2. 2. The YUI Library 3.0 PR1 http://developer.yahoo.com/yui/3
  3. 3. Powered by YUI 3.0 PR1:
  4. 4. YUI 2.x
  5. 5. UI UI YUI UI
  6. 6. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  7. 7. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  8. 8. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  9. 9. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  10. 10. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  11. 11. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  12. 12. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  13. 13. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  14. 14. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  15. 15. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  16. 16. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  17. 17. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  18. 18. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  19. 19. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  20. 20. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  21. 21. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  22. 22. UI UI YUI UI Button Def. But. Label Menu Label Text Field Label Label Text Area click me
  23. 23. YUI
  24. 24. iPhone YUI
  25. 25. http://blogs.computerworld.com/nytimes_iphone_browser_marketshare iPhone YUI
  26. 26. http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2 Google Chrome ;)
  27. 27. http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2 Google Chrome ;)
  28. 28. http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2 Google Chrome ;)
  29. 29. Button + Menu + Container + ... = RTE Editor
  30. 30. Accessbility
  31. 31. ImageLoader Utility 2KB 4KB 5KB 2KB YUILoader Utility 2KB UI 4KB AutoComplete Control 2KB 4KB 5KB 4KB 4KB 8KB Button Control 2KB 4KB 5KB 3KB 8KB 10KB 15KB Calendar Control 2KB 4KB 5KB 13KB Color Picker Control 2KB 4KB 5KB 4KB 6KB 3KB 5KB 3KB Container Core 2KB 4KB 5KB 10KB Container Family 2KB 4KB 5KB 4KB 4KB 6KB 16KB DataTable Control 2KB 4KB 5KB 3KB 3KB 18KB Rich Text Editor 2KB 4KB 5KB 4KB 8KB 10KB 21KB Menu Control 2KB 4KB 5KB 10KB 15KB Slicer Control 2KB 4KB 5KB 4KB 6KB 3KB YAHOO Global Object Dom Collection Event Utility Animation Utility Connection Manager DataSource Utility Drag & Drop Utility Element Utility History Utility ImageLoader Utility YUILoader Utility AutoComplete Control TabView Control 2KB 4KB 5KB 3KB 3KB Button Control Calendar Control Color Picker Control Container Core Container Family DataTable Control Rich Text Editor Menu Control Slider Control TabView Control TreeView Control TreeView Control 2KB 5KB 5KB 0KB 15KB 30KB 45KB 60KB YUI K-weight on the wire (gzipped) by component, v2.3.0
  32. 32. YUI
  33. 33. Flickr My Yahoo! Go + iPhone + Delicious Yahoo Live + Yahoo Pipes Metro YUI
  34. 34. YUI
  35. 35. YUI
  36. 36. • 30 + • Yahoo! 3 • 90 • 1.1 • • • •
  37. 37. Thomas Sha, Satyen Desai, Dav Glass, Director Engineer Engineer & hacker Strategy and direction; Tools, Container Family, Rich Text Editor, Layout IO (AJAX) utility. Calendar Control, 3.x widget Manager, Drag and Drop framework Utility, Resize Utility, ImageCropper Control Adam Moore, Engineer Core, Loaders, OOP, Nate Koechley, Luke Smith, Event Utility, Color Engineer Engineer Picker, TreeView Global standards, Slider, Color Picker, Logger, Control, Doc Tool. evangelism; CSS Reset, Paginator, Connection Base, Fonts, & Grids. Manager, performance specialist Matt Sweeney, Architect Todd Kloots, CSS architect; Animation Engineer Utility; Menu Widget, Button Widget, Dom Collection; TabView accessibility protagonist. Widget. George Puckett Jenny Han, Program Manager Engineer DataSource Utility AutoComplete Widget, DataTable Widget, Evangelism.
  38. 38. Beyond the YUI Team Satyam (Daniel Barreiro) Major enhancements to TreeView for 2.6.0.
  39. 39. Beyond the YUI Team
  40. 40. Beyond the YUI Team Caridy Bubbling library, updates to Layout Manager
  41. 41. Beyond the YUI Team
  42. 42. Beyond the YUI Team Philip Date functions for 2.6.0
  43. 43. Beyond the YUI Team http://www.flickr.com/photos/scarls13/2104638757/ photo by Steve Carlson; used by kind permission.
  44. 44. Beyond the YUI Team Nicholas YUI Cookie, YUI Profiler, YUI Test http://www.flickr.com/photos/scarls13/2104638757/ photo by Steve Carlson; used by kind permission.
  45. 45. Beyond the YUI Team
  46. 46. Beyond the YUI Team Gopal Carousel Control for 2.6.0
  47. 47. Beyond the YUI Team
  48. 48. Beyond the YUI Team John Peloquin Interval Calendar for 2.6.0
  49. 49. Beyond the YUI Team
  50. 50. Beyond the YUI Team Marco AccordionView coming in 2.7.0
  51. 51. Beyond the YUI Team
  52. 52. Beyond the YUI Team Julien Browser History Manager, YUI Compressor
  53. 53. Beyond the YUI Team
  54. 54. Beyond the YUI Team Matt ImageLoader
  55. 55. Wanted! YUI Contributor
  56. 56. YUI 3.x YUI 2.x
  57. 57. YUI 3.x
  58. 58. YUI 3.x • Lighter
  59. 59. YUI 3.x • Lighter • Faster
  60. 60. YUI 3.x • Lighter • Faster • More Consistent
  61. 61. YUI 3.x • Lighter • Faster • More Consistent • More Powerful
  62. 62. YUI 3.x • Lighter • Faster • More Consistent • More Powerful • More Securable
  63. 63. based on YUI 3.0 PR1 2008-09-12 YUI 3.x Architecture (JavaScript) seed core component framework components YUI Event Node Widget Drag and Drop Animation IO Provides foundational plumbing for high-level UI Provides XMLHttpRequest, components, including lifecycle management. DD Manager Base SWF-based cross-domain YUI Base Event Base Node Base Builds upon base and is an Attribute provider. Anim Base requests, and file upload Minimal YUI Global and core Provides DOM event and Provides abstraction for Provides base DD manager Provides foundational functionality to make a Node support. library methods. The only Custom Event functionality, creating and manipulating animation support for universal YUI 3.x event facade implementation, DOM elements. Can be draggable. animating properties on the and page-load storyboarding extended by components via style object of an element. dependency. Base events. plugin architecture. Provides base class for all YUI components that DDM Shim Cookie provide managed attributes and that serve as Provides cookie management Extends DD manager to allow Anim Color event targets. support. Get elements to be dragged over Extends animation Provides generic mechanism NodeList iframes and other for dynamically loading script Dom Extension of Node to handle mousetraps. functionality to support animations of color values. abstraction for element and CSS resources. Dom Base collections; used for batching Attribute JSON Provides low-level DOM DOM manipulations. Provides managed attribute system that can DD Drag augment any class; includes get/set interface and Provides DD functionality for Anim Curve Stringify helper methods. Loader intrinsic change events. simple drag operations on a Extends animation Convert JavaScript Adds dependency calculator functionality to support objects to JSON strings. Node Style Node. animations of element and YUI 3.x package Extended API for metadata, allowing dynamic Dom Style position along a curved path. Provides low-level style manipulating style properties loading of all YUI modules in on Nodes and NodeLists. Plugin DD Drop Parse single, combo-handled HTTP management methods. Safely convert strings to Plugin namespace. Forthcoming class will serve Provides drop-target requests. functionality. Anim Easing JavaScript objects. as a template for plugin functionality. Plugins can also operate directly on Nodes. Extends animation Dom Screen Node Screen functionality to support easing Provides low-level positioning Extends Node and NodeList and region management API for positioning and region DD Proxy effects. methods. management. Provides proxy-drag functionality. ...and more More utility (low-level) Anim Scroll components are provided in Extends animation the YUI 3.0 preview release 1 Selector DD Constrain functionality to support Provides low-level methods Provides drag constraint build. Future preview animations of elements' scroll releases and betas will for collecting and filtering functionality. positions. include the full component DOM elements based on selector syntax. framework and samples of DD Plugin higher-level components Provides pluggable drag Anim XY (widgets). functionality for Node Adds support for the xy instances. property in from and to OOP configurations. OOP Base DD Drop Plugin Provides low-level object Provides pluggable drop- Anim Plugin target functionality for Node Provides pluggable animation management functionality for instances. support for Nodes. JavaScript objects including extension and augmentation. The YUI Seed layer can be used YUI's 3.x Core serves as a common dependency layer for most The Component Framework (not yet complete Components in YUI 3.x are provided a la carte and can be highly modular. You can minimize your o bootstrap any implementation. downstream components. Let the YUI Loader (or Dependency as of PR1) will provide a consistent and inclusion of library code by selecting the specific portions of each component that are required in your With the seed on the page, Configurator) calculate your true core dependencies, though; in many reusable structure for building low-level utilities implementation. YUI().use() can bring in all cases, you will not require the full core layer, even if you are using and higher-level UI widgets. additional components quickly and downstream components. safely.
  64. 64. seed core com YUI Event Node Provid compo YUI Base Event Base Node Base Builds Minimal YUI Global and core Provides DOM event and Provides abstraction for library methods. The only Custom Event functionality, creating and manipulating universal YUI 3.x event facade implementation, DOM elements. Can be dependency. and page-load storyboarding extended by components via events. plugin architecture. Provid provide Get event t Provides generic mechanism NodeList for dynamically loading script Dom Extension of Node to handle and CSS resources. abstraction for element Dom Base collections; used for batching Provides low-level DOM DOM manipulations. Provid helper methods. augme Loader intrinsi Adds dependency calculator Node Style and YUI 3.x package Extended API for metadata, allowing dynamic Dom Style Provides low-level style manipulating style properties loading of all YUI modules in on Nodes and NodeLists. single, combo-handled HTTP management methods. Plugin requests. as a te Dom Screen Node Screen also op Provides low-level positioning Extends Node and NodeList and region management API for positioning and region methods. management. Selector Provides low-level methods for collecting and filtering DOM elements based on
  65. 65. core component framework Node Widget Drag and Drop Provides foundational plumbing for high-level UI components, including lifecycle management. DD Manager Base Node Base Builds upon base and is an Attribute provider. Provides abstraction for Provides base DD manager creating and manipulating functionality to make a Node DOM elements. Can be draggable. extended by components via plugin architecture. Base Provides base class for all YUI components that DDM Shim provide managed attributes and that serve as Extends DD manager to allow event targets. elements to be dragged over NodeList iframes and other Extension of Node to handle mousetraps. abstraction for element collections; used for batching Attribute DOM manipulations. Provides managed attribute system that can DD Drag augment any class; includes get/set interface and Provides DD functionality for intrinsic change events. simple drag operations on a Node Style Node. Extended API for manipulating style properties on Nodes and NodeLists. Plugin DD Drop Plugin namespace. Forthcoming class will serve Provides drop-target as a template for plugin functionality. Plugins can functionality. Node Screen also operate directly on Nodes. Extends Node and NodeList API for positioning and region DD Proxy management. Provides proxy-drag functionality. DD Constrain Provides drag constraint functionality.
  66. 66. work components Drag and Drop Animation IO vel UI Provides XMLHttpRequest, ent. DD Manager Base SWF-based cross-domain der. Anim Base requests, and file upload Provides base DD manager Provides foundational functionality to make a Node support. animation support for draggable. animating properties on the style object of an element. s that DDM Shim Cookie as Provides cookie management Extends DD manager to allow Anim Color support. elements to be dragged over Extends animation iframes and other functionality to support mousetraps. animations of color values. JSON an DD Drag ace and Provides DD functionality for Anim Curve Stringify Extends animation Convert JavaScript simple drag operations on a functionality to support objects to JSON strings. Node. animations of element position along a curved path. DD Drop Parse Provides drop-target Safely convert strings to l serve functionality. Anim Easing JavaScript objects. ins can Extends animation functionality to support easing DD Proxy effects. Provides proxy-drag functionality. ...and more More utility (low-level) Anim Scroll components are provided in Extends animation the YUI 3.0 preview release 1 DD Constrain functionality to support Provides drag constraint build. Future preview animations of elements' scroll releases and betas will functionality. positions. include the full component framework and samples of
  67. 67. YUI 3.x
  68. 68. YUI 3.x • Seed YUI
  69. 69. YUI 3.x • Seed YUI • Core DOM Event Node
  70. 70. YUI 3.x • Seed YUI • Core DOM Event Node • Component Framework
  71. 71. YUI 3.x • Seed YUI • Core DOM Event Node • Component Framework • Component
  72. 72. YUI More Secure Faster Coding / Loading
  73. 73. 1 YUI 3.x 1. Seed 2. Script
  74. 74. <script type=quot;text/javascriptquot; src=quot;http:// yui.yahooapis.com/3.0.0pr1/build/yui/yui-min.jsquot;></ script>
  75. 75. YUI Global (7KB, 1 HTTP request)
  76. 76. YUI Global (7KB, 1 HTTP request) YUI().use('node', function(Y) { Y.Node.get('#demo'); });
  77. 77. YUI Global (7KB, 1 HTTP request) YUI().use('node', function(Y) { Y.Node.get('#demo'); }); <script src=quot;http://yui.yahooapis.com/3.0.0pr1/build/oop/oop-min.js></script> <script src=quot;http://yui.yahooapis.com/3.0.0pr1/build/event/event-min.js></script> <script src=quot;http://yui.yahooapis.com/3.0.0pr1/build/dom/dom-min.js></script> <script src=quot;http://yui.yahooapis.com/3.0.0pr1/build/node/node-min.jsquot;></script>
  78. 78. YUI Global (7KB, 1 HTTP request) YUI().use('node', function(Y) { Y.Node.get('#demo'); }); <script type=quot;text/javascriptquot; src=quot;http:// yui.yahooapis.com/combo?3.0.0pr1/build/oop/oop- min.js&3.0.0pr1/build/event/event-min.js&3.0.0pr1/ build/dom/dom-min.js&3.0.0pr1/build/node/node- min.jsquot;></script>
  79. 79. YUI Global (7KB, 1 HTTP request) OOP, Event, Dom, and Node (16KB, 1 HTTP request) YUI().use('node', function(Y) { YUI Instance /* Y Scope YUI Instance node Y Dependent */ Y.get('#demo'); });
  80. 80. <script type=quot;text/javascriptquot; src=quot;http:// yui.yahooapis.com/combo?3.0.0pr1/build/yui-base/yui- base-min.js&3.0.0pr1/build/oop/oop-min.js&3.0.0pr1/ build/event/event-min.js&3.0.0pr1/build/dom/dom- min.js&3.0.0pr1/build/node/node-min.jsquot;></script>
  81. 81. YUI Base, Dom, Node, Event and OOP (16KB, 1 HTTP request) YUI().use('node', function(Y) { /* YUI Instance Y Scope YUI Instance node Dependent */ Y.get('#demo'); });
  82. 82. YUI Configurator
  83. 83. 2 YUI 3.x Instance-based Instance
  84. 84. Instance-based
  85. 85. Instance-based YUI 2.x YAHOO YAHOO.widget.HelloWorld = doSomething; // 1 ... YAHOO.widget.HelloWorld = doNothing; // 2
  86. 86. Instance-based YUI 2.x YAHOO YAHOO.widget.HelloWorld = doSomething; // 1 ... YAHOO.widget.HelloWorld = doNothing; // 2 YUI 3.x YUI() YUI().use(‘node’, function(Y) { // 1 Y.HelloWorld = doSomething; };); YUI.use(‘drag’, function(Y) { // 2 Y.HelloWorld = doNothing; };);
  87. 87. 5 1 2 3 4 Y Application
  88. 88.
  89. 89.   YUI Instance
  90. 90.   YUI Instance  Instance Sandboxes
  91. 91.   YUI Instance  Instance Sandboxes  Sandboxes Secure Mashup
  92. 92.   YUI Instance  Instance Sandboxes  Sandboxes Secure Mashup  Instance YUI 3.x
  93. 93. 3 YUI YUI Instance
  94. 94. YUI Constructor
  95. 95. YUI Constructor YUI().use(‘node’, function(Y) { //... };);
  96. 96. YUI Constructor YUI().use(‘node’, function(Y) { //... };); var YAHOO = YUI(); // Factory, Instance YAHOO.use(‘node’, function(Y) { //... };);
  97. 97. 4 Y YUI YUI 2.x YAHOO
  98. 98. Y YUI
  99. 99. Y YUI YUI 2.x YAHOO <script type=”text/javascript” src=”...”></script> <script type=”text/javascript”> var oDD = new YAHOO.util.DD(‘foo’); </script>
  100. 100. Y YUI YUI 2.x YAHOO <script type=”text/javascript” src=”...”></script> <script type=”text/javascript”> var oDD = new YAHOO.util.DD(‘foo’); </script> YUI 3.x Y YUI YUI().use(‘dd-drag’, function(Y) { new Y.DD.Drag(‘#foo’); };);
  101. 101. 5 YUI 3.x YUI 2.x YUI Instance
  102. 102. var yui2path = ‘http://yui.yahooapis.com/2.5.2/build/’; YUI({ modules: { 'yui2-yde' : { ‘fullpath’: yui2path + ‘yahoo-dom-event/yahoo-dom-event.js’ }, 'yui2-calendar' : { ‘fullpath’ : yui2path + ‘calendar/calendar-min.js’, ‘requires’ : ['yui2-yde', 'yui2-calendarcss'] }, 'yui2-calendarcss' : { ‘fullpath’: yui2path + ‘calendar/assets/skins/sam/calendar.css’, ‘type’: 'css' } } }).use('node’, ‘yui2-calendar’, function(Y) { // YUI 2.x YUI 3.x Node });
  103. 103. seed core YUI Event YUI Base Event Base Minimal YUI Global and core Provides DOM event and Pr library method. The only Custom Event functionality, cre universal YUI 3.x event facade implementation, DO dependency. and page-load storyboarding ex events. plu Get Provides generic mechanism for dynamically loading script Dom Ex and CSS resources. ab Dom Base co Provides low-level DOM DO helper methods. Loader Adds dependency calculator and YUI 3.x package Ex metadata, allowing dynamic Dom Style Provides low-level style ma loading of all YUI modules in on single, combo-handled HTTP management methods. requests. Dom Screen Provides low-level positioning Ex and region management AP methods. ma Selector Provides low-level methods
  104. 104. seed core YUI Event YUI Base Event Base Minimal YUI Global and core Provides DOM event and Pr library method. The only Custom Event functionality, cre universal YUI 3.x event facade implementation, DO  YUI Base dependency. and page-load storyboarding events. ex plu Get  Get Utility: Provides generic mechanism for dynamically loading script Dom Ex and CSS resources. ab Dom Base co Provides low-level DOM DO  YUI Loader helper methods. Loader Adds dependency calculator and YUI 3.x package Ex metadata, allowing dynamic Dom Style Provides low-level style ma loading of all YUI modules in on management methods. Get Loader 2.x single, combo-handled HTTP requests. Dom Screen Provides low-level positioning Ex and region management AP methods. ma Selector Provides low-level methods
  105. 105. YUI 5
  106. 106. YUI 5 1.
  107. 107. YUI 5 1. 2. Instance-based
  108. 108. YUI 5 1. 2. Instance-based 3. YUI
  109. 109. YUI 5 1. 2. Instance-based 3. YUI 4. Y YUI
  110. 110. YUI 5 1. 2. Instance-based 3. YUI 4. Y YUI 5. YUI 2.x YUI 3.x
  111. 111. Node & NodeList DOM + Selector More Powerful More Consistent
  112. 112. id
  113. 113. 1 Selector CSS Selector DOM
  114. 114. CSS Selector
  115. 115. CSS Selector YUI 2.x DOM var $D = YAHOO.util.Dom; // reference cache var el = $D.get(‘foo’); var items = $D.getElementsByClassName(‘highlighted’, ‘li’, el);
  116. 116. CSS Selector YUI 2.x DOM var $D = YAHOO.util.Dom; // reference cache var el = $D.get(‘foo’); var items = $D.getElementsByClassName(‘highlighted’, ‘li’, el); YUI 3.x NodeList var items = Y.all(‘#foo li.highlighted’);
  117. 117. 2 Node NodeList HTMLElement
  118. 118. CSS Selector
  119. 119. CSS Selector YUI 2.x DOM HTMLElement var $D = YAHOO.util.Dom; // reference cache var el = $D.get(‘foo’); alert(el.nodeName); //output: DIV
  120. 120. CSS Selector YUI 2.x DOM HTMLElement var $D = YAHOO.util.Dom; // reference cache var el = $D.get(‘foo’); alert(el.nodeName); //output: DIV YUI 3.x HTMLElement var el = Y.get(‘#foo’); alert(el.nodeName); //output: undefined alert(el.get(‘nodeName’)); //output: DIVs
  121. 121. YUI Node HTMLElement
  122. 122. YUI Node HTMLElement • appendChild() • appendChild() • removeChild() • removeChild() • parentNode • parentNode
  123. 123. YUI Node HTMLElement • appendChild() • appendChild() • removeChild() • removeChild() • parentNode • parentNode • contains() • contains() • insertBefore() • insertBefore() • children • children
  124. 124. YUI Node HTMLElement • appendChild() • appendChild() • removeChild() • removeChild() • parentNode • parentNode • contains() • contains() • insertBefore() • insertBefore() • children • children • addClass() • test() • region
  125. 125. YUI 3.x
  126. 126. YUI 3.x YUI 2.x Function-based var $D = YAHOO.util.Dom; // reference cache var el = $D.get(‘foo’); YUD.addClass(el, ‘highlighted’); el.innerHTML += ‘ clicked’;
  127. 127. YUI 3.x YUI 2.x Function-based var $D = YAHOO.util.Dom; // reference cache var el = $D.get(‘foo’); YUD.addClass(el, ‘highlighted’); el.innerHTML += ‘ clicked’; YUI 3.x Object-based var el = Y.get(‘#foo’); el.addClass(‘highlighted’); el.set(‘innerHTML’) = el.get(‘innerHTML’) + ‘ clicked’;
  128. 128. 3 Node NodeList
  129. 129. NodeList Node
  130. 130. NodeList Node Node addClass var el = Y.get(‘#foo’); el.addClass(‘main-module’);
  131. 131. NodeList Node Node addClass var el = Y.get(‘#foo’); el.addClass(‘main-module’); NodeList NodeList var items = Y.all(‘#foo li’); items.addClass(‘disabled’); items.set(‘title’, ‘item disabled’);
  132. 132. Node 3
  133. 133. Node 3 1. Node Selector
  134. 134. Node 3 1. Node Selector 2. DOM
  135. 135. Node 3 1. Node Selector 2. DOM 3. NodeList
  136. 136. core component framework Event Node Widget Drag Provides foundational plumbing for high-level UI components, including lifecycle management. DD M Event Base Node Base Builds upon base and is an Attribute provider. d core Provides DOM event and Provides abstraction for Provides b ly Custom Event functionality, creating and manipulating functional event facade implementation, DOM elements. Can be draggable and page-load storyboarding extended by components via events. plugin architecture. Base Provides base class for all YUI components that D provide managed attributes and that serve as Extends D event targets. elements anism NodeList iframes an script Dom Extension of Node to handle mousetrap abstraction for element Dom Base collections; used for batching Attribute Provides low-level DOM DOM manipulations. Provides managed attribute system that can D helper methods. augment any class; includes get/set interface and Provides D intrinsic change events. simple dra ulator Node Style Node. Dom Style Extended API for amic manipulating style properties Provides low-level style les in management methods. on Nodes and NodeLists. Plugin D HTTP Plugin namespace. Forthcoming class will serve Provides d as a template for plugin functionality. Plugins can functional Dom Screen Node Screen also operate directly on Nodes. Provides low-level positioning Extends Node and NodeList and region management API for positioning and region D management. Provides p methods. functional Selector DD Provides low-level methods Provides d for collecting and filtering functional DOM elements based on selector syntax. D Provides p functional instances OOP OOP Base DD D Provides p Provides low-level object target fun
  137. 137. core component framework Event Node Widget Drag Provides foundational plumbing for high-level UI components, including lifecycle management. DD M Event Base Node Base Builds upon base and is an Attribute provider. d core Provides DOM event and Provides abstraction for Provides b ly Custom Event functionality, creating and manipulating functional event facade implementation, DOM elements. Can be draggable and page-load storyboarding extended by components via events. plugin architecture. Base Provides base class for all YUI components that D provide managed attributes and that serve as Extends D  Node Base DOM event targets. elements anism NodeList iframes an script Dom Extension of Node to handle mousetrap abstraction for element Dom Base collections; used for batching Attribute Provides low-level DOM DOM manipulations. Provides managed attribute system that can D  NodeList Node helper methods. augment any class; includes get/set interface and Provides D intrinsic change events. simple dra ulator Node Style Node. Dom Style Extended API for amic manipulating style properties Provides low-level style les in management methods. on Nodes and NodeLists. Plugin D NodeStyle HTTP  Plugin namespace. Forthcoming class will serve Provides d as a template for plugin functionality. Plugins can functional Dom Screen Node Screen also operate directly on Nodes. Provides low-level positioning Extends Node and NodeList and region management API for positioning and region D management. Provides p methods. functional  Node Screen Selector Provides low-level methods for collecting and filtering DOM elements based on XY Region DD Provides d functional selector syntax. D Provides p functional instances OOP OOP Base DD D Provides p Provides low-level object target fun
  138. 138. Event DOM Event Custom Event More Consistent
  139. 139. 1 DOM Event
  140. 140. Y.on() YUI().use(‘node’, function (Y) { Y.on(‘click’, function (e) { // }, ‘#foo’); });
  141. 141. Y.on() YUI().use(‘node’, function (Y) { Y.on(‘click’, function (e) { // }, ‘#foo’); }); Node.on() YUI().use(‘node’, function (Y) { var el = Y.get(‘#foo’); el.on(‘click’, function (e) { // }); });
  142. 142. 2 Node Event DOM Event
  143. 143. Event
  144. 144. Event YUI 2.x DOM Event var $E = YAHOO.util.Event; // reference cache $E.on(‘foo’, ‘click’, function (e) { alert(e.type); //output: click $E.preventDefault(e); // $E.stopPropogation(e); // Bubbleup }); YUI 3.x Y.on(‘click’, function (e) { alert(e.type); //output: undefinded e.preventDefault(); e.stopPropogation(); }, ‘#foo’);
  145. 145. 3 YUI 3.x Custom Event
  146. 146. YUI 2.x Custom Event var $E = YAHOO.util.Event; // reference cache function Toggle() { this.onToggleComplete = new YAHOO.util.CustomEvent(‘toggleComplete’); ... this.onToggleComplete.fire(); } var oToggle = new Toggle(); oToggle.onToggleComplete.subscribe(function(e) { //... });
  147. 147. YUI 2.x Custom Event var $E = YAHOO.util.Event; // reference cache function Toggle() { this.onToggleComplete = new YAHOO.util.CustomEvent(‘toggleComplete’); ... this.onToggleComplete.fire(); } var oToggle = new Toggle(); oToggle.onToggleComplete.subscribe(function(e) { //... }); YUI 3.x Event
  148. 148. before after
  149. 149. YUI().use(quot;dragquot;, function(Y) { var drag = new Y.Drag({ node: ‘#demo’ }); drag.on(quot;drag:mouseDownquot;, function(e) { e.preventDefault(); }); Y.on(quot;drag:mouseDownquot;, function(e) { e.preventDefault(); }); }); before after
  150. 150. 4 DOM Event Customer Event preventDeafult stopPropagation
  151. 151. Custom Event
  152. 152. Custom Event YUI().use(quot;dragquot;, function(Y) { var drag = new Y.Drag({ node: ‘#demo’ }); drag.on(quot;drag:mouseDownquot;, function(e) { e.preventDefault(); e.stopPropagation(); }); });
  153. 153. Event 4
  154. 154. Event 4 1.
  155. 155. Event 4 1. 2.
  156. 156. Event 4 1. 2. 3. Custom Event
  157. 157. Event 4 1. 2. 3. Custom Event 4. Custom Event bubble preventable after moment
  158. 158. seed core com YUI Event Node Prov com YUI Base Event Base Node Base Buil Minimal YUI Global and core Provides DOM event and Provides abstraction for library method. The only Custom Event functionality, creating and manipulating universal YUI 3.x event facade implementation, DOM elements. Can be dependency. and page-load storyboarding extended by components via events. plugin architecture. Prov prov Get even Provides generic mechanism NodeList for dynamically loading script Dom Extension of Node to handle and CSS resources. abstraction for element Dom Base collections; used for batching Provides low-level DOM DOM manipulations. Prov helper methods. aug Loader intrin Adds dependency calculator Node Style and YUI 3.x package Extended API for metadata, allowing dynamic Dom Style Provides low-level style manipulating style properties loading of all YUI modules in on Nodes and NodeLists. single, combo-handled HTTP management methods. Plug requests. as a Dom Screen Node Screen also Provides low-level positioning Extends Node and NodeList and region management API for positioning and region methods. management. Selector Provides low-level methods for collecting and filtering
  159. 159. seed core com YUI Event Node Prov com YUI Base Event Base Node Base Buil Minimal YUI Global and core Provides DOM event and Provides abstraction for DOM events and library method. The only Custom Event functionality, creating and manipulating universal YUI 3.x event facade implementation, DOM elements. Can be dependency. and page-load storyboarding extended by components via events. plugin architecture. Prov prov Custom Events Get even Provides generic mechanism NodeList for dynamically loading script Dom Extension of Node to handle and CSS resources. abstraction for element Dom Base collections; used for batching Provides low-level DOM DOM manipulations. Prov helper methods. aug Loader intrin Adds dependency calculator Node Style and YUI 3.x package Extended API for metadata, allowing dynamic Dom Style Provides low-level style manipulating style properties loading of all YUI modules in on Nodes and NodeLists. single, combo-handled HTTP management methods. Plug requests. as a Dom Screen Node Screen also Provides low-level positioning Extends Node and NodeList and region management API for positioning and region methods. management. Selector Provides low-level methods for collecting and filtering
  160. 160. Lifecycle YUI 3.x More Consistent
  161. 161. ore component framework Node Widget Drag and Drop Provides foundational plumbing for high-level UI components, including lifecycle management. DD Manager Base Node Base Builds upon base and is an Attribute provider. Provides abstraction for Provides base DD manage creating and manipulating functionality to make a Nod DOM elements. Can be draggable. extended by components via plugin architecture. Base Provides base class for all YUI components that DDM Shim provide managed attributes and that serve as Extends DD manager to al event targets. elements to be dragged ov NodeList iframes and other Extension of Node to handle mousetraps. abstraction for element collections; used for batching Attribute DOM manipulations. Provides managed attribute system that can DD Drag augment any class; includes get/set interface and Provides DD functionality f intrinsic change events. simple drag operations on Node Style Node. Extended API for manipulating style properties on Nodes and NodeLists. Plugin DD Drop Plugin namespace. Forthcoming class will serve Provides drop-target as a template for plugin functionality. Plugins can functionality. Node Screen also operate directly on Nodes. Extends Node and NodeList API for positioning and region DD Proxy management. Provides proxy-drag functionality. DD Constrain Provides drag constraint functionality.
  162. 162. YUI 3.x Miscs. Debug IO Queue More Powerful
  163. 163. Debug Enhancement • YUI 2.x • alert() • YAHOO.log() • console.log() • YUI 3.x Y.log() Y.dump()
  164. 164. alert()
  165. 165. Firebug console.log() Firefox
  166. 166. YUI 2.x YAHOO.log() Logger ...
  167. 167. YUI 2.x Debugging with YAHOO.log() YAHOO.log(dItem.innerHTML);
  168. 168. YUI 3.x Y.log() 1. 2. Firebug Console
  169. 169. YUI 3.x Debugging with Y.log() Y.log(el.get(‘innerHTML’));
  170. 170. IO & Queue • IO Connection Manager • Queue
  171. 171. IO • Resource crossdomain.xml • Pipes http://pipes.yahooapis.com/ crossdomain.xml • Server io.swf • xdr (cross domain request)
  172. 172. YUI 3.x JavaScript
  173. 173. YUI 3.x DragDrop / IO / Animation YUI 3.x Lighter / Faster
  174. 174. Drag and Drop, minified, in KB 30.0 22.5 15.0 7.5 0 2.x 3.x Drag & Drop DDM Base DDM Shim DDM Drop DD Drag DD Drop DD Proxy DD Constrain DD Plugin DD Drop Plugin
  175. 175. Drag and Drop, minified, in KB 30.0 22.5 15.0 7.5 0 2.x 3.x Drag & Drop DDM Base DD Drag
  176. 176. Animation, minified, in KB 15.00 11.25 7.50 3.75 0 2.x 3.x Animation Anim Base Anim Color Anim Curve Anim Easing Anim Scroll Anim XY Anim Plugin Anim XY
  177. 177. Ajax component, minified, in KB 15.00 11.25 7.50 3.75 0 Connection Manager IO 2.x 3.x
  178. 178. rk components Drag and Drop Animation IO I Provides XMLHttpRequest, DD Manager Base SWF-based cross-domain Anim Base requests, and file upload Provides base DD manager Provides foundational functionality to make a Node support. animation support for draggable. animating properties on the style object of an element. t DDM Shim Cookie Provides cookie management Extends DD manager to allow Anim Color support. elements to be dragged over Extends animation iframes and other functionality to support mousetraps. animations of color values. JSON DD Drag Anim Curve nd Provides DD functionality for Stringify Extends animation Convert JavaScript simple drag operations on a functionality to support objects to JSON strings. Node. animations of element position along a curved path. DD Drop Parse Provides drop-target Safely convert strings to ve functionality. Anim Easing JavaScript objects. an Extends animation functionality to support easing DD Proxy effects. Provides proxy-drag functionality. ...and more More utility (low-level) Anim Scroll components are provided in Extends animation the YUI 3.0 preview release 1 DD Constrain functionality to support build. Future preview
  179. 179. rk components Drag and Drop Animation IO I Provides XMLHttpRequest, DD Manager Base SWF-based cross-domain Anim Base requests, and file upload Provides base DD manager Provides foundational functionality to make a Node support. animation support for Improved granularity draggable. animating properties on the style object of an element. t DDM Shim Cookie Provides cookie management Extends DD manager to allow Anim Color support. elements to be dragged over Extends animation iframes and other functionality to support mousetraps. animations of color values. JSON DD Drag Anim Curve nd Provides DD functionality for Stringify Extends animation Convert JavaScript simple drag operations on a functionality to support objects to JSON strings. Node. animations of element position along a curved path. DD Drop Parse Provides drop-target Safely convert strings to ve functionality. Anim Easing JavaScript objects. an Extends animation functionality to support easing DD Proxy effects. Provides proxy-drag functionality. ...and more More utility (low-level) Anim Scroll components are provided in Extends animation the YUI 3.0 preview release 1 DD Constrain functionality to support build. Future preview
  180. 180. rk components Drag and Drop Animation IO I Provides XMLHttpRequest, DD Manager Base SWF-based cross-domain Anim Base requests, and file upload Provides base DD manager Provides foundational functionality to make a Node support. animation support for Improved granularity draggable. animating properties on the style object of an element. t DDM Shim Cookie Provides cookie management Extends DD manager to allow Anim Color support. Improved performance elements to be dragged over Extends animation iframes and other functionality to support mousetraps. animations of color values. JSON DD Drag Anim Curve nd Provides DD functionality for Stringify Extends animation Convert JavaScript simple drag operations on a functionality to support objects to JSON strings. Node. animations of element position along a curved path. DD Drop Parse Provides drop-target Safely convert strings to ve functionality. Anim Easing JavaScript objects. an Extends animation functionality to support easing DD Proxy effects. Provides proxy-drag functionality. ...and more More utility (low-level) Anim Scroll components are provided in Extends animation the YUI 3.0 preview release 1 DD Constrain functionality to support build. Future preview
  181. 181. 3.x
  182. 182. 3.x Roadmap  2008/11 3.0 PR2  2009 3.0 Beta 2.x
  183. 183. More information:  http://tech.groups.yahoo.com/ group/yui3/  http://developer.yahoo.com/ yui/3/  http://developer.yahoo.com/ yui/community/
  184. 184. YUI
  185. 185. Project Roadmap  9/8 CLA Contributor License Agreement  9/8 2.6.0 Carousel DataStore RTE DataTable Beta  11/8 Repository  11/8 3.0 PR2  2009 Q1 2.7.0 and 3.0 beta 1
  186. 186. Conclusion • YUI 2.x • YUI 3.x Optional Loader Element Selector • Usable v.s. Professional

×