Date post: | 18-Dec-2014 |
Category: |
Technology |
Upload: | knutties |
View: | 754 times |
Download: | 0 times |
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 prebuilt 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: 'easeout',
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 crossdomain 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 prebuilt 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 prebuilt 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– Sandboxing
• 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