410 likes | 512 Views
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
E N D
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 Dynamically loaded cross-domain script and CSS Managed data retrieval with caching, polling, and widget normalization YUI for Sending & Receiving Data
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) { };
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>"; } };
YUI for Building Interfaces
CSS Foundation Reset Base Fonts Grids YUI skins:<body class="yui-skin-sam">
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();
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);
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');
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>
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);
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} ];
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){} });
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();
YDN Userguides, Examples, & API Docshttp://developer.yahoo.com/yui/
YUI Dependency Configuratorhttp://developer.yahoo.com/yui/articles/hosting/
YUI CSS Grids Builderhttp://developer.yahoo.com/yui/grids/builder/
User Group yui-users@yahoo-inc.com
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