Your SlideShare is downloading. ×
Hacking with YUI
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Hacking with YUI

1,161
views

Published on

Published in: Technology, News & Politics

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • idease of depth and breadth of library for your hacks and rapid prototypes sample code
  • Transcript

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