The document discusses the creation and implementation of a tooltip widget using YUI, detailing its initializer, rendering, and the use of plugins. It emphasizes the importance of custom events, handles synchronization, and suggests methods for testing the functionality of the tooltip. Additionally, it touches on integrating data retrieval using YQL and highlights the need for proper testing techniques, including event simulation.

1. The Next Step, Part 2

2. Where have we been?

3. SimpleYUI, inline JS

4. External JS file via <script>

5. Plugin for Node objects

6. Simple Widget

7. Why continue?

8. Then where are we going?

9. Widget provides some structure

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. renderUI

12. bindUI

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. syncUI

15. syncUI : function() {
this.publish("sync", {
defaultFn : Y.bind(function() {
this.get('contentBox')
.setContent(this.get('content'));
}, this)
}).fire();
}

16. YUI().use("gallery-tooltip", function(Y) {
var tooltip = new Y.Tooltip({
visible : false,
render : true,
node : Y.one("a")
});
});

17. Now what?

18. Plugins for new behaviors

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. Simple Plugin

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. Powered by Custom Events
That call to preventDefault is important

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. We can go further
http://www.flickr.com/photos/st3f4n/4501172754/

25. Transitions Module
Adding some flash

26. new Y.Tooltip({
visible : false,
render : true,
node : Y.one("a"),
plugins : [
//from gallery
Y.Plugin.TransitionOverlay
]
});

27. Still, not really all that useful
http://www.flickr.com/photos/zen/1174874997/

28. WidgetIO

29. YQL

30. WidgetYQL

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. 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. Repeating yourself sucks

34. Plugins are full JS objects

35. Plugins on top of plugins
http://idont/have/a/source/its/just/funny

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. Multiple plugins

38. new Y.Tooltip({
visible : false,
render : true,
node : Y.one('a'),
plugins : [
Y.Plugin.TransitionOverlay,
Y.Plugin.TooltipYQL,
Y.Plugin.TooltipDisplay
]
});

39. Done? Not so fast.

40. Prove it works, use tests

41. Widget & YUITest

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. Didn’t do anything too dumb
(yet)

44. Not very useful though
http://www.flickr.com/photos/sewitsforyou/3466154372/

45. Event simulation adds utility

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. Lots of JS is async though
Sync tests don’t solve everything

48. this.wait()

49. this.resume()

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. Inline JS, great for prototyping
Bad for more complicated testing

52. Scaling up the testing

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. YUI Gallery
You’ve been meaning to share more anyways, right?

55. One way to flesh out your idea
Definitely not the only one

56. Patrick Cavit
@tivac on twitter
“tivac” in IRC
http://patcavit.com
http://lanyrd.com/people/tivac/