Your SlideShare is downloading. ×
0
The Next Step, Part 2
Where have we been?
SimpleYUI, inline JS
External JS file via <script>
Plugin for Node objects
Simple Widget
Why continue?
Then where are we going?
Widget provides some structure
initializer : function(config) {
var node = this.get("node");
if(node) {
if(!this.get("content")) {
this.set("content",
no...
renderUI
bindUI
bindUI : function() {
var node = this.get("node");
this._handlers = node.on({
mouseenter : {
fn : function() {
this.get('b...
syncUI
syncUI : function() {
this.publish("sync", {
defaultFn : Y.bind(function() {
this.get('contentBox')
.setContent(this.get('...
YUI().use("gallery-tooltip", function(Y) {
var tooltip = new Y.Tooltip({
visible : false,
render : true,
node : Y.one("a")...
Now what?
Plugins for new behaviors
new Y.Tooltip({
visible : false,
render : true,
node : Y.one("a"),
plugins : [ Y.Plugin.TooltipSimpleDisplay ]
});
//or
va...
Simple Plugin
Y.Base.create("TooltipSimpleDisplay", Y.Plugin.Base, [], {
initializer : function() {
var host = this.get("host");
host.on...
Powered by Custom Events
That call to preventDefault is important
syncUI : function() {
this.publish("sync", {
//Now we see why this slightly
//odd syntax was important
//it lets this meth...
We can go further
http://www.flickr.com/photos/st3f4n/4501172754/
Transitions Module
Adding some flash
new Y.Tooltip({
visible : false,
render : true,
node : Y.one("a"),
plugins : [
//from gallery
Y.Plugin.TransitionOverlay
]...
Still, not really all that useful
http://www.flickr.com/photos/zen/1174874997/
WidgetIO
YQL
WidgetYQL
Y.Base.create("WidgetYQL", Y.Plugin.Base, [], {
_yql : null,
initializer : function() {
this.after([
"queryChange", "forma...
tooltip.plug(Y.Plugin.WidgetYQL, {
query : "SELECT * FROM ...",
formatter : function(r) {
host._yqlData = r.query.results....
Repeating yourself sucks
Plugins are full JS objects
Plugins on top of plugins
http://idont/have/a/source/its/just/funny
initializer : function() {
var host = this.get("host");
host.plug(Y.namespace("Plugin").WidgetYQL, {
query : "SELECT * FRO...
Multiple plugins
new Y.Tooltip({
visible : false,
render : true,
node : Y.one('a'),
plugins : [
Y.Plugin.TransitionOverlay,
Y.Plugin.Toolti...
Done? Not so fast.
Prove it works, use tests
Widget & YUITest
var test = new Y.Test.Case({
name : "Simple Tooltip Test",
"tooltip should render without errors" :
function() {
var toolt...
Didn’t do anything too dumb
(yet)
Not very useful though
http://www.flickr.com/photos/sewitsforyou/3466154372/
Event simulation adds utility
new Y.Test.Case({
name : "Tooltip Event Simulation Test",
"tooltip should show on mouseenter" :
function() {
//create tool...
Lots of JS is async though
Sync tests don’t solve everything
this.wait()
this.resume()
"tooltip should transition to visible" : function() {
var tooltip = ...
//resume the test once the transition has finished...
Inline JS, great for prototyping
Bad for more complicated testing
Scaling up the testing
new Y.Test.Case({
name : "Advanced Tests",
//set up a tooltip before every test, clean it up
setUp : function() { ... },
t...
YUI Gallery
You’ve been meaning to share more anyways, right?
One way to flesh out your idea
Definitely not the only one
Patrick Cavit
@tivac on twitter
“tivac” in IRC
http://patcavit.com
http://lanyrd.com/people/tivac/
Upcoming SlideShare
Loading in...5
×

The next step, part 2

2,632

Published on

YUIConf 2010 talk about how to go from a simple widget to one that can do all sorts of tricks, all without cluttering up the simple base widget.

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,632
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • http://www.flickr.com/photos/st3f4n/4501172754/
  • http://www.flickr.com/photos/zen/1174874997/
  • http://www.flickr.com/photos/sewitsforyou/3466154372/
  • Transcript of "The next step, part 2"

    1. 1. The Next Step, Part 2
    2. 2. Where have we been?
    3. 3. SimpleYUI, inline JS
    4. 4. External JS file via <script>
    5. 5. Plugin for Node objects
    6. 6. Simple Widget
    7. 7. Why continue?
    8. 8. Then where are we going?
    9. 9. Widget provides some structure
    10. 10. initializer : function(config) { var node = this.get("node"); if(node) { if(!this.get("content")) { this.set("content", node.getAttribute("title")); } node.removeAttribute("title"); } }, destructor : function() { this._handlers.detach(); this._handlers = null; },
    11. 11. renderUI
    12. 12. bindUI
    13. 13. bindUI : function() { var node = this.get("node"); this._handlers = node.on({ mouseenter : { fn : function() { this.get('boundingBox').setStyles({ left : e.pageX + 5, top : e.pageY + 5 }); this.show(); }, context : this }, mouseleave: Y.bind(this.hide, this) }); },
    14. 14. syncUI
    15. 15. syncUI : function() { this.publish("sync", { defaultFn : Y.bind(function() { this.get('contentBox') .setContent(this.get('content')); }, this) }).fire(); }
    16. 16. YUI().use("gallery-tooltip", function(Y) { var tooltip = new Y.Tooltip({ visible : false, render : true, node : Y.one("a") }); });
    17. 17. Now what?
    18. 18. Plugins for new behaviors
    19. 19. new Y.Tooltip({ visible : false, render : true, node : Y.one("a"), plugins : [ Y.Plugin.TooltipSimpleDisplay ] }); //or var tooltip = New Y.Tooltip({ visible : false, render : true, node : Y.one("a") }); tooltip.plug(Y.Plugin.TooltipSimpleDisplay);
    20. 20. Simple Plugin
    21. 21. Y.Base.create("TooltipSimpleDisplay", Y.Plugin.Base, [], { initializer : function() { var host = this.get("host"); host.on("sync", function(e) { //prevent default sync method e.preventDefault(); var content = host.get('content') + " + plugin"; host.get("contentBox").setContent(content); }, this); } }, { NS : 'TooltipSimpleDisplay' });
    22. 22. Powered by Custom Events That call to preventDefault is important
    23. 23. syncUI : function() { this.publish("sync", { //Now we see why this slightly //odd syntax was important //it lets this method be //overriden by plugins defaultFn : Y.bind(function() { this.get('contentBox') .setContent(this.get('content')); }, this) }).fire(); }
    24. 24. We can go further http://www.flickr.com/photos/st3f4n/4501172754/
    25. 25. Transitions Module Adding some flash
    26. 26. new Y.Tooltip({ visible : false, render : true, node : Y.one("a"), plugins : [ //from gallery Y.Plugin.TransitionOverlay ] });
    27. 27. Still, not really all that useful http://www.flickr.com/photos/zen/1174874997/
    28. 28. WidgetIO
    29. 29. YQL
    30. 30. WidgetYQL
    31. 31. Y.Base.create("WidgetYQL", Y.Plugin.Base, [], { _yql : null, initializer : function() { this.after([ "queryChange", "formatterChange", "configChange" ], this._createYQL, this); }, _ _createYQL : function() { attrs = this.getAttrs([ "query", "formatter", "config" ]); this._yql = new Y.YQLRequest( attrs.query, Y.bind(attrs.formatter, this), attrs.config ); }, sendQuery : function() { return this._yql.send(); }
    32. 32. tooltip.plug(Y.Plugin.WidgetYQL, { query : "SELECT * FROM ...", formatter : function(r) { host._yqlData = r.query.results.quote; host.set("content", r.query...LastTradePriceOnly); host.fire("yqlResponse", r); } });
    33. 33. Repeating yourself sucks
    34. 34. Plugins are full JS objects
    35. 35. Plugins on top of plugins http://idont/have/a/source/its/just/funny
    36. 36. initializer : function() { var host = this.get("host"); host.plug(Y.namespace("Plugin").WidgetYQL, { query : "SELECT * FROM ...", formatter : function(r) { host.set("content", r.query.res...); host.fire("yqlResponse"); } } host.on(["visibleChange", "renderedChange"], function(e) { host.YQL.sendQuery(); }, this); host.on("yqlResponse", function() { host.syncUI(); }); }
    37. 37. Multiple plugins
    38. 38. new Y.Tooltip({ visible : false, render : true, node : Y.one('a'), plugins : [ Y.Plugin.TransitionOverlay, Y.Plugin.TooltipYQL, Y.Plugin.TooltipDisplay ] });
    39. 39. Done? Not so fast.
    40. 40. Prove it works, use tests
    41. 41. Widget & YUITest
    42. 42. var test = new Y.Test.Case({ name : "Simple Tooltip Test", "tooltip should render without errors" : function() { var tooltip = new Y.Tooltip({ visible : false, render : true, node : Y.one('a') }); } }); //add & run test Y.Test.Runner.add(test); Y.Test.Runner.run();
    43. 43. Didn’t do anything too dumb (yet)
    44. 44. Not very useful though http://www.flickr.com/photos/sewitsforyou/3466154372/
    45. 45. Event simulation adds utility
    46. 46. new Y.Test.Case({ name : "Tooltip Event Simulation Test", "tooltip should show on mouseenter" : function() { //create tooltip var tooltip = ... //simulate mousing over the link Y.one("a").simulate("mouseover"); //fail if the tooltip isn't visible Y.assert( tooltip.get("visible"), "Tooltip wasn't visible“ ); } });
    47. 47. Lots of JS is async though Sync tests don’t solve everything
    48. 48. this.wait()
    49. 49. this.resume()
    50. 50. "tooltip should transition to visible" : function() { var tooltip = ... //resume the test once the transition has finished tooltip.transitionPlugin.on("end", function(visible) { this.resume(function() { Y.assert(visible && tooltip.get("visible"), "Tooltip wasn't visible"); }); }, this); //show the overlay, triggering the transition tooltip.show(); //wait for a bit for the transition to end this.wait(1000); }
    51. 51. Inline JS, great for prototyping Bad for more complicated testing
    52. 52. Scaling up the testing
    53. 53. new Y.Test.Case({ name : "Advanced Tests", //set up a tooltip before every test, clean it up setUp : function() { ... }, tearDown : function() { ... }, //multiple tests "tooltip should render without errors" : function() { ... }, "tooltip should show on mouseenter" : function() { ... }, "tooltip should transition to visible" : function() { ... }, "YQL plugin should get data from YQL" : function() { ... } });
    54. 54. YUI Gallery You’ve been meaning to share more anyways, right?
    55. 55. One way to flesh out your idea Definitely not the only one
    56. 56. Patrick Cavit @tivac on twitter “tivac” in IRC http://patcavit.com http://lanyrd.com/people/tivac/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×