1

`

Using YUI to get things done

Natarajan  KannanWeb Developer

twitter: @knutties

Demo time

3

• 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

Overview

4

• Create websites/templates• Manipulate web pages easily• Fetch data from remote sources• Interact with YQL• Use pre­built UI widgets

What can you do with YUI? 

5

• 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

Creating website templates

6

• 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

Manipulate web pages

7

// 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]);

}

);

Examples – Using Simple YUI

8

// 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();

});

Examples – Using Simple YUI

9

• 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

Fetch data from remote sources

10

// 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 ...

        }

    }

});

Examples – Using Simple YUI

11

YUI makes YQL very easy

12

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.

    });

 

});

Examples – Using stock YUI 3

13

• YUI 3 (default)– Overlays– Sliders– Tab views– Rich Text Editor

• YUI 3 (gallery)– Accordion– Tree view– Resize

Using pre­built UI widgets – YUI 3

14

• YUI 2 (default)– Overlays– Sliders– Tab views– Rich Text Editor– Image Cropper– Image loader– Progress bar– Tree view– Charts – Colour picker

Using pre­built UI widgets – YUI 2

15

• Greasemonkey lets you add functionality to existing web pages– http://diveintogreasemonkey.org/

• YUI 3 with greasemonkey– http://blog.davglass.com/files/yui3/greasemonkey/

YUI with Greasemonkey

16

• 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

Choosing your YUI

17

• 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

Links for you

18