Hacking with YUI
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,810
On Slideshare
1,810
From Embeds
0
Number of Embeds
0

Actions

Shares
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