Solving Problems with YUI3: AutoComplete

4,534 views
4,472 views

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,534
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
145
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • I’m Isaac Schlueter, from the YUI team. I’m here to talk to you today about something I’m working on for YUI3, an Autocomplete module, and what goes into solving real world problems with YUI 3.
  • When I say "real-world" problem, I mean something that's an actual use case, something that real users are going to use. This talk isn't about a quick hack, or a proof of concept. Those things are great, and important, and there’s a place for them. This is about getting something done.
  • When I say "solve", I mean, I shouldn't ever have to deal with this problem again, and if anyone else uses YUI, they shouldn’t either. I'm going to show that YUI 3 gives you the tools to do things in a way that is flexible, extensible, and extremely reusable, with not very much effort on your part.
  • So, yeah, I AM pretty lazy. But that's why I don't want to write the same thing over and over again. Cost matters, and that's the real value proposition with YUI.
  • You all know what an autocomplete widget does. You start typing, and some suggestions show up. You type some more, and they get further filtered, or something different shows up.



    When might not be so obvious until you sit down to create one, though, is that there are like a million different UI paradigms for these things. Also, some of them are hitting a web service, and others are just looking in a local blob of data, so we'll need a way to abstract that stuff all out.
  • You all know what an autocomplete widget does. You start typing, and some suggestions show up. You type some more, and they get further filtered, or something different shows up.



    When might not be so obvious until you sit down to create one, though, is that there are like a million different UI paradigms for these things. Also, some of them are hitting a web service, and others are just looking in a local blob of data, so we'll need a way to abstract that stuff all out.
  • You all know what an autocomplete widget does. You start typing, and some suggestions show up. You type some more, and they get further filtered, or something different shows up.



    When might not be so obvious until you sit down to create one, though, is that there are like a million different UI paradigms for these things. Also, some of them are hitting a web service, and others are just looking in a local blob of data, so we'll need a way to abstract that stuff all out.
  • You all know what an autocomplete widget does. You start typing, and some suggestions show up. You type some more, and they get further filtered, or something different shows up.



    When might not be so obvious until you sit down to create one, though, is that there are like a million different UI paradigms for these things. Also, some of them are hitting a web service, and others are just looking in a local blob of data, so we'll need a way to abstract that stuff all out.
  • You all know what an autocomplete widget does. You start typing, and some suggestions show up. You type some more, and they get further filtered, or something different shows up.



    When might not be so obvious until you sit down to create one, though, is that there are like a million different UI paradigms for these things. Also, some of them are hitting a web service, and others are just looking in a local blob of data, so we'll need a way to abstract that stuff all out.
  • You all know what an autocomplete widget does. You start typing, and some suggestions show up. You type some more, and they get further filtered, or something different shows up.



    When might not be so obvious until you sit down to create one, though, is that there are like a million different UI paradigms for these things. Also, some of them are hitting a web service, and others are just looking in a local blob of data, so we'll need a way to abstract that stuff all out.
  • So, yeah, I really don't want to worry about all that stuff. I just want to make this thing work.
  • So, yeah, I really don't want to worry about all that stuff. I just want to make this thing work.
  • So, yeah, I really don't want to worry about all that stuff. I just want to make this thing work.
  • So, yeah, I really don't want to worry about all that stuff. I just want to make this thing work.
  • Doing things the first time, or creating a whole new way of doing things, that’s pretty hard. I mean, it’s hard if you want to do a good job of it. In this case, when we do things with the grain of YUI, we’ll spend a lot less effort for a better result.
  • This is definitely a case of good laziness. That is, cost matters, so doing things with the grain is cheaper.
  • So, did I mention the site that this module is going on? It's fairly popular, maybe you've seen it before.
  • This is going on the yahoo home page, and in the search page, and the header that sits at the top of all Yahoo sites.



    Between these three modules, about 7 trillion people view these pages every 4 seconds, so it has to work reliably, it has to load fast, it has to put almost no extra code on the page.
  • At this scale, every byte matters. By reusing as much off-the-shelf components from YUI as we can, we’re going to save a lot of bytes.
  • But accessibility isn’t just about blind people and devices. It has to work in all languages everywhere, because this is Yahoo, so just supporting America is not really an option.



    remember those examples I showed before?
  • yeah, those



    So, if you look closely, you'll notice that sometimes it's a list of selections, and sometimes it's a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it's something completely ridiculous. This little widget has to accommodate all of those.
  • yeah, those



    So, if you look closely, you'll notice that sometimes it's a list of selections, and sometimes it's a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it's something completely ridiculous. This little widget has to accommodate all of those.
  • yeah, those



    So, if you look closely, you'll notice that sometimes it's a list of selections, and sometimes it's a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it's something completely ridiculous. This little widget has to accommodate all of those.
  • yeah, those



    So, if you look closely, you'll notice that sometimes it's a list of selections, and sometimes it's a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it's something completely ridiculous. This little widget has to accommodate all of those.
  • yeah, those



    So, if you look closely, you'll notice that sometimes it's a list of selections, and sometimes it's a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it's something completely ridiculous. This little widget has to accommodate all of those.
  • yeah, those



    So, if you look closely, you'll notice that sometimes it's a list of selections, and sometimes it's a list of other sorts of things, like a picture and a title, and sometimes, like in the search assist case, it's something completely ridiculous. This little widget has to accommodate all of those.
  • Thankfully, most of the hard stuff is already done. The main task here is figuring out how to use what YUI offers to assemble the thing we want.



    The other advantage is that, by doing it this way, the little bit of code that we do end up having to write can be submitted back to the library.
  • The big message at this conference, the thing that I’m personally really excited about, is the new YUI gallery. Eric talked about it yesterday, and Dav’ll be talking about it later on. Don’t miss Dav’s talk later to find out how you can get your code into the gallery.
  • Getting feedback from people using your stuff is addictive. Definitely watch for more collaborative features from YUI in the near future.
  • A lot of you have probably heard about some of these things already, and if not, I recommend going onto YUI Theater and watching the other talks, because most people who talk about YUI are way smarter than me.



    But just in case, I’ll go over some of the pieces that are relevant in this case.
  • Node is like candy for the DOM. It does everything you think it should do, and it does it in consistent and predictable ways.
  • This is the browser DOM API. Generally friendly, tries to do the right thing, but... a bit slow, mild stuttering problem, and... well... he’s got no pants.



    And, if you’re in the unlucky majority that gets to support MSIE...
  • I’m guessing everyone in the room has written this garbage at least once.
  • By contrast, the node API gets in there, does the dirty work that has to be done, and you never have to worry about it.
  • Surprisingly straightforward. Use selectors to get things, then do stuff to the things, and it all just works.
  • Well, I don't really want to worry about having to interface with a jillion different kinds of web services, and I *definitely* don't want to have to worry about caching and all that craziness. Data is strange, and I don’t want to have to deal with it.
  • (yui 2 ds vs yui3)
  • So, some of these have more than just a bit of text showing up. In fact, almost all of them have some other stuff in there.
  • So, some of these have more than just a bit of text showing up. In fact, almost all of them have some other stuff in there.
  • So, some of these have more than just a bit of text showing up. In fact, almost all of them have some other stuff in there.
  • So, some of these have more than just a bit of text showing up. In fact, almost all of them have some other stuff in there.
  • So, some of these have more than just a bit of text showing up. In fact, almost all of them have some other stuff in there.
  • So, some of these have more than just a bit of text showing up. In fact, almost all of them have some other stuff in there.
  • A widget is just a box. You put stuff in the box, and you can easily move it around, or put it somewhere, or whatever you like. You don’t have to worry about what it’s sitting on top of, because it’s all tidied up for you.
  • The thing about putting stuff in a box is that it makes it a lot easier to manage, and a lot easier to move around.
  • The thing about putting stuff in a box is that it makes it a lot easier to manage, and a lot easier to move around.
  • The thing about putting stuff in a box is that it makes it a lot easier to manage, and a lot easier to move around.
  • The thing about putting stuff in a box is that it makes it a lot easier to manage, and a lot easier to move around.
  • Plugins in YUI 3 let you add almost any functionality you can think of to almost any object in the library. You can set up functions that get called when the plugin is attached, and the another function for when it's detached, and in between there, you can add whatever you want.
  • If you want to take an existing API, and extend it with some additional functionality, you can use a plugin to do that. Specifically, plugins are useful when you want to add on the features in a way that lets them be taken off again later.



    Creating a plugin is easy. You expose one function that gets called when it’s plugged into something, and another that’s called when it gets unplugged (in case you have to do any cleanup)
  • Here’s what it looks like when you’re done.
  • I want to take a moment to talk about one more concept that you’ll see all throughout the YUI library: Loose coupling. In general, it means that things fit together, but they’re not tightly attached to one another, like these train pieces.
  • Now I’m gonna mix metaphors pretty badly here, and talk about ducks, because it’s kind of related, and this picture of a duck is really nice. So, what is a duck? (follow points)
  • Now I’m gonna mix metaphors pretty badly here, and talk about ducks, because it’s kind of related, and this picture of a duck is really nice. So, what is a duck? (follow points)
  • Now I’m gonna mix metaphors pretty badly here, and talk about ducks, because it’s kind of related, and this picture of a duck is really nice. So, what is a duck? (follow points)
  • Now I’m gonna mix metaphors pretty badly here, and talk about ducks, because it’s kind of related, and this picture of a duck is really nice. So, what is a duck? (follow points)
  • Now I’m gonna mix metaphors pretty badly here, and talk about ducks, because it’s kind of related, and this picture of a duck is really nice. So, what is a duck? (follow points)
  • Now I’m gonna mix metaphors pretty badly here, and talk about ducks, because it’s kind of related, and this picture of a duck is really nice. So, what is a duck? (follow points)
  • That works great in some cases, but most of the time, we don’t really care what something is deep down, we just care that it gives us what we want. Another way to look at it is like this:
  • That works great in some cases, but most of the time, we don’t really care what something is deep down, we just care that it gives us what we want. Another way to look at it is like this:
  • That works great in some cases, but most of the time, we don’t really care what something is deep down, we just care that it gives us what we want. Another way to look at it is like this:
  • That works great in some cases, but most of the time, we don’t really care what something is deep down, we just care that it gives us what we want. Another way to look at it is like this:
  • That works great in some cases, but most of the time, we don’t really care what something is deep down, we just care that it gives us what we want. Another way to look at it is like this:
  • what youer’ really doing is registering a module, not instantiating it. You’re saying “you can use this thing”, and telling YUI how to attach it.
  • what youer’ really doing is registering a module, not instantiating it. You’re saying “you can use this thing”, and telling YUI how to attach it.
  • Right. So, here's a pretty picture of the AC architecture.
    So, as you can see, it's very extremely straightforward, with no problems whatsoever. When the plugin gets plugged into a node, it attaches to the keydown event, and when the user presses a key, we know that something has been entered, so
  • In some languages, a single keypress event is not the same as a single character being entered. Unfortunately, there isn’t any DOM event for “onCharacterEntered”



    Also, if you’ve ever tried to do much of anything on keydown or keypress, you quickly find that it’s easy to bog down the UI and users get annoyed because they type and this thing freezes up as they’re doing it.



    What about onchange?
  • well, onchange doesn’t happen until the user blurs the field.
  • Wouldn't it be nice if the DOM had some kind of event that would tell you that the data has changed, and did so asynchronously so that it didn't get all laggy and awful?



    Thankfully, YUI gives us a facility for filling in the missing holes in the DOM.
  • Wouldn't it be nice if the DOM had some kind of event that would tell you that the data has changed, and did so asynchronously so that it didn't get all laggy and awful?



    Thankfully, YUI gives us a facility for filling in the missing holes in the DOM.
  • Wouldn't it be nice if the DOM had some kind of event that would tell you that the data has changed, and did so asynchronously so that it didn't get all laggy and awful?



    Thankfully, YUI gives us a facility for filling in the missing holes in the DOM.
  • Wouldn't it be nice if the DOM had some kind of event that would tell you that the data has changed, and did so asynchronously so that it didn't get all laggy and awful?



    Thankfully, YUI gives us a facility for filling in the missing holes in the DOM.
  • Wouldn't it be nice if the DOM had some kind of event that would tell you that the data has changed, and did so asynchronously so that it didn't get all laggy and awful?



    Thankfully, YUI gives us a facility for filling in the missing holes in the DOM.
  • In fact, if you use the focusIn and focusOut events exposed by the Node API, you’re already using custom events. The really nice thing is that, when an event can be done natively, you can do it that way, and when it’s not available, you can sort of roll your own based on other events that do exist.
  • There’s just a very slight change that you have to make to your code if you’re using a custom event vs a regular DOM event.



    Here we see a click handler being attached to a YUI Node object. Notice the stopPropagation and preventDefault that you know and love from the DOM.
  • And, here’s the same Node object listening to a custom event.
  • Talk about : namespaced events vs node/dom events
  • Talk about : namespaced events vs node/dom events
  • Talk about : namespaced events vs node/dom events
  • Talk about : namespaced events vs node/dom events
  • Oh, I can see the blog posts going out now “Much Hyped AutoComplete Module Doesn’t Even Work”. So, I put this scary warning here for a reason. There’s a good chance that this is pretty close to what the final code will look like, but this is a slide deck, not an API doc. You can be sure that, this being YUI, there’ll be more documentation than you can shake a stick at once it’s done.
  • So, if we just pull in the AutoComplete node plugin, and attach it to a dataSource, we’ve got a way to very explicitly decide what happens at each point. Of course, the “doSomething” function here would be connecting up to our ACWidget.



    But while it’s good to be able to use AC however you want, it’s also a bit of a pain to have to do all this for just the simple/common use cases.
  • What if there was a way to take the common use cases, and make them simple?



    Set some defaults, package it up nice, and then when I just want the basic/common autocomplete, I can instantiate it without all the hassle. That means that you don’t need to know how autocomplete works in order to have it work for you.
  • yui2 was a modular system, which of course is better than a single monolithic library. However, if you want any part of a module, you have to get the whole thing. YUI3 is sub-modular, breaking up modules into even smaller pieces, even more granularity
  • yui2 was a modular system, which of course is better than a single monolithic library. However, if you want any part of a module, you have to get the whole thing. YUI3 is sub-modular, breaking up modules into even smaller pieces, even more granularity
  • yui2 was a modular system, which of course is better than a single monolithic library. However, if you want any part of a module, you have to get the whole thing. YUI3 is sub-modular, breaking up modules into even smaller pieces, even more granularity
  • Remember when I talked about how DataSource is so much smaller in YUI3? This is why. YUI3 gives you very fine-grained control over which pieces of functionality you wish to pull in, giving you a lot of control over the balance between convenience and customization.
  • Chances are that this will be part of the YUI 3.1 which if I’m not mistaken will be out in Q1 of 2010.
  • If you really can’t wait, then you can always fork yui3 and follow the progress there. Also, YUI 2 has a great AutoComplete widget that works, and is in use all over the place. I highly recommend it.
  • Solving Problems with YUI3: AutoComplete

    1. 1. Solving Problems: AutoComplete Isaac Z. Schlueter isaacs@yahoo-inc.com @izs YUICONF 2009 http://github.com/isaacs
    2. 2. hi.
    3. 3. “real world”
    4. 4. “solving”
    5. 5. “not very much effort” = he’s lazy.
    6. 6. The Problem
    7. 7. Shopping List
    8. 8. Shopping List • a way to find out when the user types something into the form element
    9. 9. Shopping List • a way to find out when the user types something into the form element • a generic way to get data from a server, or from anywhere
    10. 10. Shopping List • a way to find out when the user types something into the form element • a generic way to get data from a server, or from anywhere • a way to display the list of items
    11. 11. Shopping List • a way to find out when the user types something into the form element • a generic way to get data from a server, or from anywhere • a way to display the list of items • a simple thing to wire it all together
    12. 12. invention is harder than assembly
    13. 13. Like the man said, very lazy.
    14. 14. The Requirements
    15. 15. small
    16. 16. accessible
    17. 17. these ones?
    18. 18. these ones?
    19. 19. omg, this all sounds like work!
    20. 20. you can solve your problems like this, too (and get props for it)
    21. 21. A brief survey of our tools
    22. 22. Node: The API that the DOM Should Have Been
    23. 23. Browser DOM API
    24. 24. Browser DOM API
    25. 25. // If you're LUCKY! var f = document.getElementsByClassName("foo") for ( var i = 0, l = f.length; i < l; i ++ ) { f[i].addEventListener("click", fn); }
    26. 26. // If you're LUCKY! var f = document.getElementsByClassName("foo") for ( var i = 0, l = f.length; i < l; i ++ ) { f[i].addEventListener("click", fn); } // oh wait, that doesn't work in ie... fml.
    27. 27. Node API
    28. 28. Y.all(".foo") .on("click", fn);
    29. 29. Node developer.yahoo.com /yui/3/node
    30. 30. Shopping List • a way to find out when the user types something into the form element • a generic way to get data from a server, or from anywhere • a way to display the list of items • a simple thing to wire it all together
    31. 31. Data Source: because data is weird
    32. 32. Data Source: because data is weird
    33. 33. Caching, data normalization, and this thing is TINY in YUI 3!
    34. 34. Data Source developer.yahoo.com /yui/3/datasource
    35. 35. Shopping List • a way to find out when the user types something into the form element • a generic way to get data from a server, or from anywhere • a way to display the list of items • a simple thing to wire it all together
    36. 36. Not so similar…
    37. 37. Not so similar…
    38. 38. Not so similar…
    39. 39. Not so similar…
    40. 40. Not so similar…
    41. 41. Not so similar…
    42. 42. Not so similar…
    43. 43. Display
    44. 44. Display • Bounding box - need to manage position, even when the window changes height
    45. 45. Display • Bounding box - need to manage position, even when the window changes height • Must support many different looks
    46. 46. Display • Bounding box - need to manage position, even when the window changes height • Must support many different looks • Overlapping anything (iframes, scrollbars, select elements, other nasty creatures)
    47. 47. Display • Bounding box - need to manage position, even when the window changes height • Must support many different looks • Overlapping anything (iframes, scrollbars, select elements, other nasty creatures) • Keyboard navigation
    48. 48. Widget
    49. 49. Widget developer.yahoo.com /yui/3/widget
    50. 50. with Widget you can:
    51. 51. with Widget you can: • Fix the position of the box
    52. 52. with Widget you can: • Fix the position of the box • Skin it and change the contents easily
    53. 53. with Widget you can: • Fix the position of the box • Skin it and change the contents easily • Overlap iframes and select elements without any hassles
    54. 54. with Widget you can: • Fix the position of the box • Skin it and change the contents easily • Overlap iframes and select elements without any hassles • Easily extend to support keyboard and focus events.
    55. 55. Shopping List • a way to find out when the user types something into the form element • a generic way to get data from a server, or from anywhere • a way to display the list of items • a simple thing to wire it all together
    56. 56. Plugins: Form like Voltron
    57. 57. Plugins: Form like Voltron
    58. 58. Decorator Pattern
    59. 59. Decorator Pattern GoF FTW!
    60. 60. Y.one("#foo") .plug(Y.Plugins.Foo) .foo.doSomeFoo();
    61. 61. Y.one("#foo") .plug(Y.Plugins.Foo) .foo.doSomeFoo(); so, not quite Voltron, but still, pretty cool.
    62. 62. Plugin developer.yahoo.com /yui/3/plugin
    63. 63. Shopping List • a way to find out when the user types something into the form element • a generic way to get data from a server, or from anywhere • a way to display the list of items • a simple thing to wire it all together
    64. 64. Loose Coupling
    65. 65. What is a duck?
    66. 66. What is a duck? • Water Bird
    67. 67. What is a duck? • Water Bird • Bird
    68. 68. What is a duck? • Water Bird • Bird • Vertebrate
    69. 69. What is a duck? • Water Bird • Bird • Vertebrate • Animal
    70. 70. What is a duck? • Water Bird • Bird • Vertebrate • Animal • Organism
    71. 71. What is a duck? • Water Bird • Bird • Vertebrate • Animal • Organism • Thing
    72. 72. What is a duck?
    73. 73. What is a duck? • Swims
    74. 74. What is a duck? • Swims • Flies
    75. 75. What is a duck? • Swims • Flies • Quacks
    76. 76. What is a duck? • Swims • Flies • Quacks • Sits on eggs
    77. 77. What is a duck? • Swims • Flies • Quacks • Sits on eggs • Mixes metaphors
    78. 78. Loose Coupling
    79. 79. Loose Coupling • Pieces should provide enough value to be used alone or in other contexts
    80. 80. Loose Coupling • Pieces should provide enough value to be used alone or in other contexts • Pieces should work with any other piece that exposes the expected API
    81. 81. Loose Coupling • Pieces should provide enough value to be used alone or in other contexts • Pieces should work with any other piece that exposes the expected API • “Don’t call me, I’ll call you” events > method calls
    82. 82. That’s nice and all, but how do you make it reusable?
    83. 83. YUI.add() YUI.add("my-module", function (Y) { // your code here. }, "1.0.2", { requires : [ "node", "plugin", "widget" ] });
    84. 84. YUI.add()
    85. 85. YUI.add() • Call add() on the YUI global YUI.add(), not YUI().add()
    86. 86. YUI.add() • Call add() on the YUI global YUI.add(), not YUI().add() • This adds your module to the list of things that can be loaded with use()
    87. 87. YUI.add()
    88. 88. YUI.add() and then later:
    89. 89. YUI.add() and then later: YUI().use("my-module", function (Y) { // do something with it } );
    90. 90. So... AutoComplete, remember? You were gonna talk about that?
    91. 91. AutoComplete: AutoComplete AutoComplete Node Plugin Renderer Widget DOM YUI Node node Wrapper Data Source
    92. 92. Oh, wait, there’s a problem.
    93. 93. “user presses a key” !== “data has been entered”
    94. 94. onchange is too late for our purposes
    95. 95. DOM Events
    96. 96. keydown DOM Events
    97. 97. keydown DOM keyup Events
    98. 98. keydown DOM keyup Events keypress
    99. 99. keydown DOM keyup Events keypress change
    100. 100. keydown DOM keyup Events keypress change something is missing!
    101. 101. Custom Events: Implement the Missing
    102. 102. myThing.on("click", function (e) { doSomething(); e.stopPropagation(); e.preventDefault() // etc. } )
    103. 103. myThing.on("myEvent", function (e) { doSomething(); e.stopPropagation(); e.preventDefault() // etc. } )
    104. 104. Making a New Node Event: it’s like creating your own DOM
    105. 105. Try not to let the power go to your head.
    106. 106. myEvent = { on : function () { ... }, detach : function () { ... } }; Y.Env.evt.plugins.myEvent = myEvent; Y.Node.DOM_EVENTS.myEvent = myEvent; // function bodies removed, but // that really is the whole thing.
    107. 107. Signs you should add a new Node event:
    108. 108. Signs you should add a new Node event: • Generic need related to a single element
    109. 109. Signs you should add a new Node event: • Generic need related to a single element • DOM has something like what you want, but not quite
    110. 110. Signs you should add a new Node event: • Generic need related to a single element • DOM has something like what you want, but not quite • It “fills a hole” in the DOM API
    111. 111. Signs you should add a new Node event: • Generic need related to a single element • DOM has something like what you want, but not quite • It “fills a hole” in the DOM API • In other words, please don’t create your own “click” event.
    112. 112. AutoComplete: AutoComplete AutoComplete Node Plugin Renderer Widget DOM YUI Node node Wrapper Data Source
    113. 113. AutoComplete: AutoComplete AutoComplete valueChange Node Plugin Renderer Widget DOM YUI Node node Wrapper Data Source
    114. 114. AutoComplete: valueChange
    115. 115. AutoComplete: valueChange Listen to key events
    116. 116. AutoComplete: valueChange Listen to key events Use Y.later() to defer value check.
    117. 117. AutoComplete: valueChange Listen to key events Use Y.later() to defer value check. See if the value has changed
    118. 118. AutoComplete: valueChange Listen to key events Use Y.later() to defer value check. See if the value has changed If the value is different than last time, fire “valueChange”
    119. 119. AutoComplete: AutoComplete Node Plugin
    120. 120. AutoComplete: AutoComplete Node Plugin Plug into a Node object
    121. 121. AutoComplete: AutoComplete Node Plugin Plug into a Node object It gets some settings
    122. 122. AutoComplete: AutoComplete Node Plugin Plug into a Node object It gets some settings Listens to the valueChange event
    123. 123. AutoComplete: AutoComplete Node Plugin Plug into a Node object It gets some settings Listens to the valueChange event Fires “ac:query” event when appropriate
    124. 124. AutoComplete: AutoComplete Node Plugin Data Source
    125. 125. AutoComplete: AutoComplete Node Plugin “ac:query” has default behavior Data Source
    126. 126. AutoComplete: AutoComplete Node Plugin If not canceled, it “ac:query” has tells the data source default behavior to get some data. Data Source
    127. 127. AutoComplete: AutoComplete Node Plugin If not canceled, it “ac:query” has tells the data source default behavior to get some data. Data Source When/if the data returns, it fires the “ac:load” event.
    128. 128. AutoComplete: AutoComplete Renderer Widget
    129. 129. AutoComplete: Extends the Widget class AutoComplete Renderer Widget
    130. 130. AutoComplete: Extends the Widget class AutoComplete When the user clicks on an item, call Renderer Widget myNode.ac.set("queryValue", selection)
    131. 131. AutoComplete: Widget gives it a bounding AutoComplete box, an easy way to mange Renderer Widget position, and a render() function to make it visible.
    132. 132. AutoComplete: AutoComplete AutoComplete valueChange Node Plugin Renderer Widget DOM YUI Node node Wrapper Data Source
    133. 133. AutoComplete:
    134. 134. AutoComplete: Preview What you are about to see is not even beta yet. This is a slide deck, not an API doc. Stay tuned at http://yuilibrary.com/yui3/ and http://developer.yahoo.com/yui/3/
    135. 135. AutoComplete: YUI().use("ac-plugin", function (Y) { var myAC = Y.one("#ac"), myDS = new Y.DataSource(...); myAC.plug(Y.Plugins.ACPlugin, { dataSource : myDS }).ac.on("ac:load", function (results) { doSomething(results); }); });
    136. 136. AutoComplete: YUI().use("ac-plugin", function (Y) { var myAC = Y.one("#ac"), myDS = new Y.DataSource(...); myAC.plug(Y.Plugins.ACPlugin, { dataSource : myDS }).ac.on("ac:load", function (results) { doSomething(results); }); }); // wow, that’s a mouthful
    137. 137. defaults === win
    138. 138. Roll-up
    139. 139. Roll-up
    140. 140. Roll-up • YUI 2 was a modular system, but each module is all or nothing
    141. 141. Roll-up • YUI 2 was a modular system, but each module is all or nothing • YUI 3 is sub-modular — more granular
    142. 142. Roll-up • YUI 2 was a modular system, but each module is all or nothing • YUI 3 is sub-modular — more granular • Roll-ups provide an easy way to trade the customizability for the convenience
    143. 143. Just take the bits you like, leave the rest behind.
    144. 144. AutoComplete: AutoComplete AutoComplete valueChange Node Plugin Renderer Widget DOM YUI Node node Wrapper Data Source
    145. 145. AutoComplete: AutoComplete AutoComplete valueChange Node Plugin Renderer Widget DOM YUI Node AutoComplete roll-up node Wrapper Data Source
    146. 146. AutoComplete:
    147. 147. AutoComplete: Preview What you are about to see is not even beta yet. This is a slide deck, not an API doc. Stay tuned at http://yuilibrary.com/yui3/ and http://developer.yahoo.com/yui/3/
    148. 148. AutoComplete: YUI().use("autocomplete", function (Y) { var myAC = new Y.AutoComplete({ node : "#ac", dataSource : new Y.DataSource(...) }); });
    149. 149. In the final tally...
    150. 150. In the final tally... • Less than 4kb of new code, mostly for the custom DOM event. (< 2kb over the wire)
    151. 151. In the final tally... • Less than 4kb of new code, mostly for the custom DOM event. (< 2kb over the wire) • Most of the work consisted of arranging and assembling
    152. 152. In the final tally... • Less than 4kb of new code, mostly for the custom DOM event. (< 2kb over the wire) • Most of the work consisted of arranging and assembling • Good solutions don’t have to be hard
    153. 153. AutoComplete: Coming soon to a YUI Library NEAR YOU!
    154. 154. AutoComplete: http://github.com/yui/yui3 http://github.com/isaacs/yui3
    155. 155. fin
    156. 156. ( questions )

    ×