1 / 41

Hacking with YUI

Hacking with YUI. 03.17.2009 Jenny Han Donnelly. YUI for building rich, interactive applications. Send and receive data Build interfaces Display data Edit data. Connection Manager Get Utility DataSource. In-page AJAX transactions with XmlHttpRequest

maxima
Download Presentation

Hacking with YUI

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation 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. 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 YUI for Sending & Receiving Data

  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+="<h6>"+data.description+"</h6>"; myOutput.innerHTML+="<p>"+data.item.description +"</p>"; } };

  8. YQL Data with YUI Get Utility

  9. YUI for Building Interfaces

  10. CSS Foundation Reset Base Fonts Grids YUI skins:<body class="yui-skin-sam">

  11. Dialog var myDlg = new YAHOO.widget.SimpleDialog("myContainer", { fixedcenter: true, buttons: [ { text:"Totally!", handler:function() { this.hide(); }}, { text:"Not Yet...", handler:function() { this.hide(); }, isDefault:true } ] }); myDlg.setHeader("What is your Hack status?"); myDlg.setBody("Are you ready to <em>rock</em> the Hack?"); myDlg.render();

  12. A Modal Dialog var myDlg = new YAHOO.widget.SimpleDialog("myContainer", { fixedcenter: true, modal: true, close: false, visible: false }); myDlg.setBody("Loading, please wait...."); myDlg.render(); // Show when ready myDlg.show(); // Hide when ready setTimeout(function() { myDlg.hide(); }, 3000);

  13. TabView

  14. 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="#"><fieldset><legend>Lorem Ipsum</legend><label for="foo"> <input id="foo" name="foo"></label><input type="submit" value="submit"></fieldset></form>' })); tabView.appendTo('myContainer');

  15. TabView

  16. Menu

  17. Layout Manager

  18. YUI for Displaying Data

  19. Charts

  20. TreeView

  21. Calendar

  22. DataTable // Server outputs an HTML table <div id="myContainer"> <table id="myTable"> <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>

  23. DataTable

  24. DataTable // Enhance your boring HTML into a DataTable widget var myDS = new YAHOO.util.LocalDataSource( YAHOO.util.Dom.get("myTable")); myDS.responseSchema = { fields: [ {key:"Name"}, {key:"Quiz", parser:"number"}, {key:"Test", parser:"number"}, {key:"Paper", parser:"number"} ]}; var myCols = [{key:"Name"},{key:"Quiz"},{key:"Test"},{key:"Paper"} ]; var myDT = new YAHOO.widget.DataTable( "myContainer", myCols, myDS);

  25. DataTable // Add more functionality var formattingFn = function() { }; var myCols = [{key:"Name", sortable:true},{key:"Quiz", hidden:true},{key:"Test", resizeable:true},{key:"Paper", formatter:formattingFn} ];

  26. DataTable

  27. YUI for Modifying Data

  28. 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){} });

  29. Dialog

  30. DataTable

  31. Rich Text Editor

  32. Calendar // Users can select dates easily var myCalendar = new YAHOO.widget.Calendar("myContainer"); myCalendar.selectEvent.subscribe( function(type, args) { var year = args[0][0][0], month = args[0][0][1], date = args[0][0][2]; alert("You selected " + month + "/" + date + "/" + year); }); myCalendar.render();

  33. Calendar

  34. Resources

  35. YDN Userguides, Examples, & API Docshttp://developer.yahoo.com/yui/

  36. YUI Dependency Configuratorhttp://developer.yahoo.com/yui/articles/hosting/

  37. YUI CSS Grids Builderhttp://developer.yahoo.com/yui/grids/builder/

  38. User Group yui-users@yahoo-inc.com

  39. 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

More Related