Your SlideShare is downloading. ×
0
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
Hacking with YUI
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,183

Published on

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

No Downloads
Views
Total Views
1,183
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
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

    ×