0
Hacking with YUI 03.17.2009 Jenny Han Donnelly
YUI for building rich, interactive applications.... <ul><li>Send and receive data </li></ul><ul><li>Build interfaces </li>...
YUI for Sending & Receiving Data <ul><li>Connection Manager </li></ul><ul><li>Get Utility </li></ul><ul><li>DataSource </l...
YQL Data
YQL Data with YUI Get Utility <ul><li>YAHOO.util.Get.script(&quot;http://query.yahooapis.com/v1/public/yql?...&format=json...
YQL Data
YQL Data with YUI Get Utility <ul><li>YAHOO.util.Get.script(&quot;http://query.yahooapis.com/v1/public/yql?...&format=json...
YQL Data with YUI Get Utility
<ul><li>YUI for </li></ul><ul><li>Building Interfaces </li></ul>
CSS Foundation <ul><li>Reset </li></ul><ul><li>Base </li></ul><ul><li>Fonts </li></ul><ul><li>Grids </li></ul><ul><li>YUI ...
Dialog <ul><li>var myDlg = new YAHOO.widget.SimpleDialog(&quot;myContainer&quot;, { </li></ul><ul><li>fixedcenter: true, <...
 
A Modal Dialog <ul><li>var myDlg = new YAHOO.widget.SimpleDialog(&quot;myContainer&quot;, { </li></ul><ul><li>fixedcenter:...
 
TabView
TabView <ul><li>var tabView = new YAHOO.widget.TabView();  </li></ul><ul><li>tabView.addTab( new YAHOO.widget.Tab({ </li><...
TabView
Menu
Layout Manager
YUI for Displaying Data
Charts
TreeView
Calendar
DataTable <ul><li>// Server outputs an HTML table </li></ul><ul><li><div  id=&quot;myContainer&quot; > </li></ul><ul><li><...
DataTable
DataTable <ul><li>// Enhance your boring HTML into a DataTable widget </li></ul><ul><li>var myDS = new YAHOO.util.LocalDat...
DataTable <ul><li>// Add more functionality </li></ul><ul><li>var formattingFn = function() { </li></ul><ul><li>}; </li></...
DataTable
YUI for Modifying Data
Connection Manager <ul><li>var myForm = YAHOO.util.Dom.get('myForm');  </li></ul><ul><li>YAHOO.util.Connect.setForm(myForm...
Dialog
DataTable
Rich Text Editor
Calendar <ul><li>// Users can select dates easily </li></ul><ul><li>var myCalendar = new YAHOO.widget.Calendar(&quot;myCon...
Calendar
Resources
YDN Userguides, Examples, & API Docs http :// developer.yahoo.com/yui/
YUI Dependency Configurator http://developer.yahoo.com/yui/articles/hosting/
YUI CSS Grids Builder http://developer.yahoo.com/yui/grids/builder/
<ul><li>User Group </li></ul><ul><li>[email_address] </li></ul>
Photo Credits <ul><li>http://www.sxc.hu/browse.phtml?f=view&id=207291 </li></ul><ul><li>http://www.sxc.hu/photo/24508 </li...
Upcoming SlideShare
Loading in...5
×

Hacking with YUI

1,193

Published on

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

No Downloads
Views
Total Views
1,193
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • idease of depth and breadth of library for your hacks and rapid prototypes sample code
  • Transcript of "Hacking with YUI"

    1. 1. Hacking with YUI 03.17.2009 Jenny Han Donnelly
    2. 2. YUI for building rich, interactive applications.... <ul><li>Send and receive data </li></ul><ul><li>Build interfaces </li></ul><ul><li>Display data </li></ul><ul><li>Edit data </li></ul>
    3. 3. YUI for Sending & Receiving Data <ul><li>Connection Manager </li></ul><ul><li>Get Utility </li></ul><ul><li>DataSource </li></ul><ul><li>In-page AJAX transactions with XmlHttpRequest </li></ul><ul><li>Dynamically loaded cross-domain script and CSS </li></ul><ul><li>Managed data retrieval with caching, polling, and widget normalization </li></ul>
    4. 4. YQL Data
    5. 5. YQL Data with YUI Get Utility <ul><li>YAHOO.util.Get.script(&quot;http://query.yahooapis.com/v1/public/yql?...&format=json&callback=cbfunc&quot;); </li></ul><ul><li>var cbfunc = function(o) { </li></ul><ul><li>}; </li></ul>
    6. 6. YQL Data
    7. 7. YQL Data with YUI Get Utility <ul><li>YAHOO.util.Get.script(&quot;http://query.yahooapis.com/v1/public/yql?...&format=json&callback=cbfunc&quot;); </li></ul><ul><li>var cbfunc = function(o) { </li></ul><ul><li>if (o.query.results.channel) { </li></ul><ul><li>var data = o.query.results.channel, </li></ul><ul><li>div = YAHOO.util.Dom.get(&quot;myOutput&quot;); </li></ul><ul><li>div.innerHTML+=&quot;<h6>&quot;+data.description+&quot;</h6>&quot;; </li></ul><ul><li>myOutput.innerHTML+=&quot;<p>&quot;+data.item.description +&quot;</p>&quot;; </li></ul><ul><li>} </li></ul><ul><li>}; </li></ul>
    8. 8. YQL Data with YUI Get Utility
    9. 9. <ul><li>YUI for </li></ul><ul><li>Building Interfaces </li></ul>
    10. 10. CSS Foundation <ul><li>Reset </li></ul><ul><li>Base </li></ul><ul><li>Fonts </li></ul><ul><li>Grids </li></ul><ul><li>YUI skins: <body class=&quot;yui-skin-sam&quot;> </li></ul>
    11. 11. Dialog <ul><li>var myDlg = new YAHOO.widget.SimpleDialog(&quot;myContainer&quot;, { </li></ul><ul><li>fixedcenter: true, </li></ul><ul><li>buttons: [ </li></ul><ul><li>{ text:&quot;Totally!&quot;, handler:function() { </li></ul><ul><li>this.hide(); </li></ul><ul><li>}}, </li></ul><ul><li>{ text:&quot;Not Yet...&quot;, handler:function() { </li></ul><ul><li>this.hide(); </li></ul><ul><li>}, isDefault:true } </li></ul><ul><li>] </li></ul><ul><li>}); </li></ul><ul><li>myDlg.setHeader(&quot;What is your Hack status?&quot;); </li></ul><ul><li>myDlg.setBody(&quot;Are you ready to <em>rock</em> the Hack?&quot;); </li></ul><ul><li>myDlg.render(); </li></ul>
    12. 13. A Modal Dialog <ul><li>var myDlg = new YAHOO.widget.SimpleDialog(&quot;myContainer&quot;, { </li></ul><ul><li>fixedcenter: true, </li></ul><ul><li>modal: true, </li></ul><ul><li>close: false, </li></ul><ul><li>visible: false </li></ul><ul><li>}); </li></ul><ul><li>myDlg.setBody(&quot;Loading, please wait....&quot;); </li></ul><ul><li>myDlg.render(); </li></ul><ul><li>// Show when ready </li></ul><ul><li>myDlg.show(); </li></ul><ul><li>// Hide when ready </li></ul><ul><li>setTimeout(function() { </li></ul><ul><li>myDlg.hide(); </li></ul><ul><li>}, 3000); </li></ul>
    13. 15. TabView
    14. 16. TabView <ul><li>var tabView = new YAHOO.widget.TabView(); </li></ul><ul><li>tabView.addTab( new YAHOO.widget.Tab({ </li></ul><ul><li>label: 'lorem', </li></ul><ul><li>content: '<p>Lorem ipsum...</p>', </li></ul><ul><li>active: true </li></ul><ul><li>})); </li></ul><ul><li>... </li></ul><ul><li>tabView.addTab( new YAHOO.widget.Tab({ </li></ul><ul><li>label: 'dolor', </li></ul><ul><li>content: '<form action=&quot;#&quot;><fieldset><legend>Lorem Ipsum</legend><label for=&quot;foo&quot;> <input id=&quot;foo&quot; name=&quot;foo&quot;></label><input type=&quot;submit&quot; value=&quot;submit&quot;></fieldset></form>' </li></ul><ul><li>})); </li></ul><ul><li>tabView.appendTo('myContainer'); </li></ul>
    15. 17. TabView
    16. 18. Menu
    17. 19. Layout Manager
    18. 20. YUI for Displaying Data
    19. 21. Charts
    20. 22. TreeView
    21. 23. Calendar
    22. 24. DataTable <ul><li>// Server outputs an HTML table </li></ul><ul><li><div id=&quot;myContainer&quot; > </li></ul><ul><li><table id=&quot;myTable&quot; > </li></ul><ul><li>< thead > </li></ul><ul><li><tr> </li></ul><ul><li><th>Name</th><th>Quiz</th><th>Test</th><th>Term Paper</th> </li></ul><ul><li></tr> </li></ul><ul><li></thead> </li></ul><ul><li>< tbody > </li></ul><ul><li><tr><td>Adams</td><td>88</td><td>99</td><td>94</td></tr> </li></ul><ul><li><tr><td>Baker</td><td>83</td><td>93</td><td>87</td></tr> </li></ul><ul><li>... </li></ul><ul><li></tbody> </li></ul><ul><li></table> </li></ul><ul><li></div> </li></ul>
    23. 25. DataTable
    24. 26. DataTable <ul><li>// Enhance your boring HTML into a DataTable widget </li></ul><ul><li>var myDS = new YAHOO.util.LocalDataSource( </li></ul><ul><li>YAHOO.util.Dom.get(&quot;myTable&quot;)); </li></ul><ul><li>myDS.responseSchema = { fields: [ </li></ul><ul><li>{key:&quot;Name&quot;}, </li></ul><ul><li>{key:&quot;Quiz&quot;, parser:&quot;number&quot;}, </li></ul><ul><li>{key:&quot;Test&quot;, parser:&quot;number&quot;}, </li></ul><ul><li>{key:&quot;Paper&quot;, parser:&quot;number&quot;} </li></ul><ul><li>]}; </li></ul><ul><li>var myCols = [ {key:&quot;Name&quot;}, {key:&quot;Quiz&quot;}, {key:&quot;Test&quot;}, {key:&quot;Paper&quot;} </li></ul><ul><li>]; </li></ul><ul><li>var myDT = new YAHOO.widget.DataTable( </li></ul><ul><li>&quot;myContainer&quot;, myCols, myDS); </li></ul>
    25. 27. DataTable <ul><li>// Add more functionality </li></ul><ul><li>var formattingFn = function() { </li></ul><ul><li>}; </li></ul><ul><li>var myCols = [ {key:&quot;Name&quot;, sortable:true }, {key:&quot;Quiz&quot;, hidden:true }, {key:&quot;Test&quot;, resizeable:true }, {key:&quot;Paper&quot;, formatter:formattingFn } </li></ul><ul><li>]; </li></ul>
    26. 28. DataTable
    27. 29. YUI for Modifying Data
    28. 30. Connection Manager <ul><li>var myForm = YAHOO.util.Dom.get('myForm'); </li></ul><ul><li>YAHOO.util.Connect.setForm(myForm); </li></ul><ul><li>YAHOO.util.Connect.asyncRequest('POST', './submitHandler.php', {success: function(o){}, failure: function(o){} }); </li></ul>
    29. 31. Dialog
    30. 32. DataTable
    31. 33. Rich Text Editor
    32. 34. Calendar <ul><li>// Users can select dates easily </li></ul><ul><li>var myCalendar = new YAHOO.widget.Calendar(&quot;myContainer&quot;); </li></ul><ul><li>myCalendar.selectEvent.subscribe( </li></ul><ul><li>function(type, args) { </li></ul><ul><li>var year = args[0][0][0], </li></ul><ul><li>month = args[0][0][1], </li></ul><ul><li>date = args[0][0][2]; </li></ul><ul><li>alert(&quot;You selected &quot; + month + &quot;/&quot; + date + &quot;/&quot; + year); </li></ul><ul><li>}); </li></ul><ul><li>myCalendar.render(); </li></ul>
    33. 35. Calendar
    34. 36. Resources
    35. 37. YDN Userguides, Examples, & API Docs http :// developer.yahoo.com/yui/
    36. 38. YUI Dependency Configurator http://developer.yahoo.com/yui/articles/hosting/
    37. 39. YUI CSS Grids Builder http://developer.yahoo.com/yui/grids/builder/
    38. 40. <ul><li>User Group </li></ul><ul><li>[email_address] </li></ul>
    39. 41. Photo Credits <ul><li>http://www.sxc.hu/browse.phtml?f=view&id=207291 </li></ul><ul><li>http://www.sxc.hu/photo/24508 </li></ul><ul><li>http://www.sxc.hu/photo/983153 </li></ul><ul><li>http://www.sxc.hu/photo/1001964 </li></ul><ul><li>http://www.flickr.com/photos/sscornelius/484528233/ </li></ul><ul><li>http://www.sxc.hu/photo/1005800 </li></ul><ul><li>http://www.flickr.com/photos/ian_munroe/3132594347 </li></ul><ul><li>http://www.sxc.hu/photo/843641 </li></ul><ul><li>http://www.sxc.hu/photo/960692 </li></ul>
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×