Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Rapid implementation with YUI + YQL
- 1. Rapid Implementation with YUI + YQL ‘cause it’s your code that’s important
- 2. Me.
- 3. YUI • 2 • Around for a while • Many widgets • Adding scripts manually • Bigger initial load time • 3 • Small loader, pull in the modules you need • Granular • Fewer “native” widgets • Gallery 2-in-3: best of both!
- 4. YQL • Cloud data store • SQL-like syntax (select * from internet) • REST • YUI3 module built in • Console
- 5. Puppies! <html> <head> <title>YUI/YQL Flickr</title> </head> <body> <div id="puppyBox"> <ul id="puppies"></ul> </div> </body> </html> http://www.flickr.com/photos/archangel_raphael/ http://www.flickr.com/photos/fazen/
- 6. <body class="yui3-skin-sam"> <div id="puppyBox"> <ul id="puppies"></ul> </div> <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui- min.js"></script> <script> YUI().use('console', function(Y) { new Y.Console().render(); }); </script> </body>
- 7. <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui- min.js"></script> <script> YUI().use('yql', 'console', 'dump', function(Y) { new Y.Console().render(); Y.YQL('select * from flickr.photos.search(0,15) where text="puppy"', function(r) { Y.each(r.query.results.photo, function(photo) { puppy = Y.log('<li><img src="' + Y.dump(photo) + ‘" height="75" width="75"></li>'); }); }); }); </script>
- 8. YUI().use('node', 'yql', 'substitute', function(Y) { var flickr = { template: 'http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_s.jpg', createLink: function(pieces) { return(Y.substitute(this.template, pieces)); }, }; Y.YQL('select * from flickr.photos.search(0,15) where text="puppy"', function(r) { var puppies = Y.one('#puppies'); Y.each(r.query.results.photo, function(photo) { puppy = Y.Node.create('<li><img src="' + flickr.createLink(photo) + '" height="75" width="75"></li>'); puppies.appendChild(puppy); }); }); });
- 9. YUI().use('node', 'yql', 'substitute', function(Y) { var flickr = { template: 'http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_s.jpg', createLink: function(pieces) { return(Y.substitute(this.template, pieces)); }, createCarousel: function() { Y.use('yui2-carousel', function(YC) { var YAHOO = YC.YUI2, carousel = new YAHOO.widget.Carousel("puppyBox", { selectOnScroll: false, isCircular: true, carouselEl: 'UL' }); carousel.render(); carousel.show(); }); } }; ….
- 10. <html> <head> <title>YUI/YQL Flickr</title> <style type="text/css"> .yui-carousel-element li { height: 75px; width: 75px; } .yui-carousel-element .yui-carousel-item-selected { border: none; } </style> </head> <body class="yui3-skin-sam"> <div class="yui-skin-sam"> <div id="puppyBox"> <ul id="puppies"></ul> </div> </div>
- 11. <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script> <script> YUI().use('node', 'yql', 'substitute', 'console', function(Y) { … Y.YQL('select * from flickr.photos.search(0,15) where text="puppy"', function(r) { var puppies = Y.one('#puppies'); Y.each(r.query.results.photo, function(photo) { puppy = Y.Node.create('<li><img src="' + flickr.createLink(photo) + '" height="75" width="75"></li>'); puppies.appendChild(puppy); }); flickr.createCarousel(); }); }); </script>