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

Hacking with YUI

on

  • 1,721 views

 

Statistics

Views

Total Views
1,721
Slideshare-icon Views on SlideShare
1,721
Embed Views
0

Actions

Likes
1
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • idease of depth and breadth of library for your hacks and rapid prototypes sample code

Hacking with YUI Hacking with YUI Presentation Transcript

  • 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
  • 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
  • YQL 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
  • 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;;
    • }
    • };
  • YQL Data with YUI Get Utility
    • YUI for
    • Building Interfaces
  • CSS Foundation
    • Reset
    • Base
    • Fonts
    • Grids
    • YUI skins: <body class=&quot;yui-skin-sam&quot;>
  • 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();
  •  
  • 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);
  •  
  • TabView
  • 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');
  • TabView
  • Menu
  • Layout Manager
  • YUI for Displaying Data
  • Charts
  • TreeView
  • Calendar
  • 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>
  • DataTable
  • 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);
  • 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 }
    • ];
  • DataTable
  • YUI for Modifying Data
  • 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){} });
  • Dialog
  • DataTable
  • Rich Text Editor
  • 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();
  • Calendar
  • Resources
  • YDN Userguides, Examples, & API Docs http :// developer.yahoo.com/yui/
  • YUI Dependency Configurator http://developer.yahoo.com/yui/articles/hosting/
  • YUI CSS Grids Builder http://developer.yahoo.com/yui/grids/builder/
    • User Group
    • [email_address]
  • 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