YUI - HackU 2010 IIT Mumbai

  • 749 views
Uploaded on

YUI presentation at HackU 2010

YUI presentation at HackU 2010

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
749
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 1
  • 2. Using YUI to get things done Natarajan  Kannan Web Developer twitter: @knutties `
  • 3. Demo time 3
  • 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. 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. 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. 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. 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. 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. 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. 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. YUI makes YQL very easy 12
  • 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. 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. 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. 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. 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. 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