Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Yui mixer

1,005 views

Published on

Quick i

Published in: Technology, Art & Photos
  • Be the first to comment

Yui mixer

  1. 1. YUI<br />Open Hack Day mixer session<br />Harsha Vashisht<br />mail@harsharv.comhttp://www.harsharv.com<br />
  2. 2.
  3. 3. THOMAS ALVA EDISON<br />NIKOLA TESLA<br />
  4. 4. The web is a total mess!<br />
  5. 5.
  6. 6. Auto Complete<br />Data Table<br />Interface Widgets<br />Button<br />Layout<br />Menu<br />Calendar<br />Rich Text<br />Charts<br />Tab View<br />Container<br />
  7. 7. Everything is fully documented with around 300 examples!<br />
  8. 8. 1. Documentationhttp://developer.yahoo.com/yui/docs/2. Exampleshttp://developer.yahoo.com/yui/examples/ <br />
  9. 9. Now, lets have a look at what YUI has to offer.<br />
  10. 10. 1. Data Sourcehttp://developer.yahoo.com/yui/3/datasource/<br />
  11. 11. The DataSource Utility provides a consistent API for the retrieval of data from arbitrary sources over a variety of supported protocols.<br />
  12. 12. Remote sources<br />Polling<br />Caching<br />Events<br />
  13. 13. http://developer.yahoo.com/yui/3/examples/datasource/datasource_get.html<br />
  14. 14. YUI allows you to fetch data from YQL directly!<br />
  15. 15. http://developer.yahoo.com/yui/3/examples/yql/simple-yql.html<br />
  16. 16. 2. Auto complete<br />
  17. 17. http://developer.yahoo.com/yui/3/examples/autocomplete/ac_datasource.html<br />
  18. 18. 3. Data Charts<br />
  19. 19. Now.. I want to draw a graph..<br />
  20. 20. Duck.. There will be code<br />Duck.. There will be code<br />
  21. 21. My code..<br />YUI().use('charts', function (Y) <br />{ <br />varmyDataValues = [ <br /> {category:"5/1/2010", values:2000}, <br /> {category:"5/2/2010", values:50}, <br /> {category:"5/3/2010", values:400}, <br /> {category:"5/4/2010", values:200}, <br /> {category:"5/5/2010", values:5000}<br /> ];<br />varmychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart"});<br />});<br />
  22. 22. Ain’t that kick ass???<br />
  23. 23. Let us look at the examples page…<br />http://developer.yahoo.com/yui/3/examples/<br />
  24. 24. Harsha R. Vashishtmail@harsharv.com<br />http://www.harsharv.comhttp://twitter.com/harsharv<br />http://www.facebook.com/harsharvhttp://www.slideshare.net/harsharv<br />

×