Downloaded 20 times
![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();](https://image.slidesharecdn.com/hacking-with-yui-090801074729-phpapp01/85/Hacking-with-YUI-11-320.jpg)
![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);](https://image.slidesharecdn.com/hacking-with-yui-090801074729-phpapp01/85/Hacking-with-YUI-26-320.jpg)
![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 } ];](https://image.slidesharecdn.com/hacking-with-yui-090801074729-phpapp01/85/Hacking-with-YUI-27-320.jpg)
![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();](https://image.slidesharecdn.com/hacking-with-yui-090801074729-phpapp01/85/Hacking-with-YUI-34-320.jpg)
![User Group [email_address]](https://image.slidesharecdn.com/hacking-with-yui-090801074729-phpapp01/85/Hacking-with-YUI-40-320.jpg)
Uploaded byelliando dias
Hacking with YUI
This document discusses using the Yahoo! User Interface (YUI) library to build rich interactive web applications. It covers using YUI to send and receive data via AJAX, build interfaces with components like tabs and dialogs, display data visually with charts and calendars, and modify data by connecting forms to backends. Examples show integrating YUI widgets like the DataTable and Calendar into pages to enhance functionality and interactivity. Resources listed at the end provide documentation, examples and support for further YUI development.
More Related Content
Hacking with YUI
- 1. Hacking with YUI03.17.2009 Jenny Han Donnelly
- 2. YUI for buildingrich, 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.
- 5. YQL Data withYUI Get Utility YAHOO.util.Get.script("http://query.yahooapis.com/v1/public/yql?...&format=json&callback=cbfunc"); var cbfunc = function(o) { };
- 6.
- 7. YQL Data withYUI 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 withYUI Get Utility
- 9. YUI for BuildingInterfaces
- 10. CSS Foundation ResetBase 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.
- 13. A Modal Dialogvar 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);
- 14.
- 15.
- 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="#"><fieldset><legend>Lorem Ipsum</legend><label for="foo"> <input id="foo" name="foo"></label><input type="submit" value="submit"></fieldset></form>' })); tabView.appendTo('myContainer');
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24. DataTable // Serveroutputs 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>
- 25.
- 26. DataTable // Enhanceyour 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);
- 27. DataTable // Addmore functionality var formattingFn = function() { }; var myCols = [ {key:"Name", sortable:true }, {key:"Quiz", hidden:true }, {key:"Test", resizeable:true }, {key:"Paper", formatter:formattingFn } ];
- 28.
- 29.
- 30. Connection Manager varmyForm = YAHOO.util.Dom.get('myForm'); YAHOO.util.Connect.setForm(myForm); YAHOO.util.Connect.asyncRequest('POST', './submitHandler.php', {success: function(o){}, failure: function(o){} });
- 31.
- 32.
- 33.
- 34. Calendar // Userscan 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();
- 35.
- 36.
- 37. YDN Userguides, Examples,& API Docs http :// developer.yahoo.com/yui/
- 38. YUI Dependency Configuratorhttp://developer.yahoo.com/yui/articles/hosting/
- 39. YUI CSS GridsBuilder http://developer.yahoo.com/yui/grids/builder/
- 40.
- 41. Photo Credits http://www.sxc.hu/browse.phtml?f=view&id=207291http://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
Editor's Notes
- #2 idease of depth and breadth of library for your hacks and rapid prototypes sample code