1
Using YUI to get things done



                               Natarajan  Kannan
                                Web Devel...
Demo time




3
Overview

    • YUI is a Javascript/CSS library
    • Highly modular, extensible and heavily 
      documented
    • Lets ...
What can you do with YUI? 

    •   Create websites/templates
    •   Manipulate web pages easily
    •   Fetch data from ...
Creating website templates

    • First task in creating a website
      –   select a layout
    • YUI CSS grids builder
 ...
Manipulate web pages

    • Locate elements on web pages
      –   Using CSS selectors
    • Update portions of web pages
...
Examples – Using Simple YUI
    // get an element reference, add a click handler
    Y.one('#demo').on('click', function(e...
Examples – Using Simple YUI
    // fade #demo off to full opacity, then remove it from 
    the dom:
    Y.one('#demo').tr...
Fetch data from remote sources

 • Allows you to fetch data from different sources
     –   Local functions
     –   Remot...
Examples – Using Simple YUI
     // Make an HTTP request to 'get.php'.
     Y.io('get.php', {
         on: {
             ...
YUI makes YQL very easy




12
Examples – Using stock YUI 3
     YUI().use('yql', function(Y) {
      
         Y.YQL('select * from weather.forecast whe...
Using pre­built UI widgets – YUI 3

 • YUI 3 (default)
     –   Overlays
     –   Sliders
     –   Tab views
     –   Rich...
Using pre­built UI widgets – YUI 2
 • YUI 2 (default)
     –   Overlays
     –   Sliders
     –   Tab views
     –   Rich ...
YUI with Greasemonkey

 • Greasemonkey lets you add functionality to 
   existing web pages
     –   http://diveintogrease...
Choosing your YUI
 • Simple YUI (based on YUI 3)
     –   Start fast
     –   Basic AJAX and DOM manipulation
     –   htt...
Links for you
 •   http://developer.yahoo.com/yui/3/
 •   http://developer.yahoo.com/yui/3/examples/
 •   http://yuilibrar...
Upcoming SlideShare
Loading in...5
×

YUI - HackU 2010 IIT Mumbai

798

Published on

YUI presentation at HackU 2010

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
798
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

YUI - HackU 2010 IIT Mumbai

  1. 1. 1
  2. 2. Using YUI to get things done Natarajan  Kannan Web Developer twitter: @knutties `
  3. 3. Demo time 3
  4. 4. Overview • YUI is a Javascript/CSS library • Highly modular, extensible and heavily  documented • Lets you do a lot with less code • Very suitable for hacks • Probably the only javascript library that comes  with its own package management 4
  5. 5. What can you do with YUI?  • Create websites/templates • Manipulate web pages easily • Fetch data from remote sources • Interact with YQL • Use pre­built UI widgets 5
  6. 6. Creating website templates • First task in creating a website – select a layout • YUI CSS grids builder – Interface to create layout – http://developer.yahoo.com/yui/grids/builder/ • Default CSS styling with YUI base 6
  7. 7. Manipulate web pages • Locate elements on web pages – Using CSS selectors • Update portions of web pages – By adding/removing/changing content • Change styling of elements – hide/resize/overlay elements 7
  8. 8. Examples – Using Simple YUI // get an element reference, add a click handler Y.one('#demo').on('click', function(e) {/*handle  click*/}); // add content to an element Y.one('#demo').append(" Additional content added to  #demo."); // move #demo to the location of any click on the  document Y.one('document').on('click', function(e) {      Y.one('#demo').setXY([e.pageX, e.pageY]); } ); 8
  9. 9. Examples – Using Simple YUI // fade #demo off to full opacity, then remove it from  the dom: Y.one('#demo').transition({     easing: 'ease­out',     duration: 2, // seconds     opacity: 0 }, function() {     this.remove(); }); 9
  10. 10. Fetch data from remote sources • Allows you to fetch data from different sources – Local functions – Remote sources over http • Helps you work around cross­domain restrictions  • Y.io and Y.DataSource are your friends 10
  11. 11. Examples – Using Simple YUI // Make an HTTP request to 'get.php'. Y.io('get.php', {     on: {         complete: function (id, response) {             var id = id, // Transaction ID.                 data = response.responseText; // Response  data.             // ... handle the response ...         }     } }); 11
  12. 12. YUI makes YQL very easy 12
  13. 13. Examples – Using stock YUI 3 YUI().use('yql', function(Y) {       Y.YQL('select * from weather.forecast where  location=90210', function(r) {        // r now contains the result of the YQL Query // use the YQL Developer console to learn // what data is coming back in this object // and how that data is structured.     });   }); 13
  14. 14. Using pre­built UI widgets – YUI 3 • YUI 3 (default) – Overlays – Sliders – Tab views – Rich Text Editor • YUI 3 (gallery) – Accordion – Tree view – Resize 14
  15. 15. Using pre­built UI widgets – YUI 2 • YUI 2 (default) – Overlays – Sliders – Tab views – Rich Text Editor – Image Cropper – Image loader – Progress bar – Tree view – Charts  – Colour picker 15
  16. 16. YUI with Greasemonkey • Greasemonkey lets you add functionality to  existing web pages – http://diveintogreasemonkey.org/ • YUI 3 with greasemonkey – http://blog.davglass.com/files/yui3/greasemonkey/ 16
  17. 17. Choosing your YUI • Simple YUI (based on YUI 3) – Start fast – Basic AJAX and DOM manipulation – http://ericmiraglia.com/yui/demos/quickyui.php • YUI 3  – Performance – Sand­boxing • YUI 2  – For its widget collection – If you are already used to it 17
  18. 18. Links for you • http://developer.yahoo.com/yui/3/ • http://developer.yahoo.com/yui/3/examples/ • http://yuilibrary.com/gallery/ • http://developer.yahoo.com/yui/2 • http://blog.davglass.com/files/yui3/greasemonkey 18
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×