• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to YUI - IIT Kharagpur
 

Introduction to YUI - IIT Kharagpur

on

  • 1,080 views

Using YUI for hacks.

Using YUI for hacks.

Statistics

Views

Total Views
1,080
Views on SlideShare
1,079
Embed Views
1

Actions

Likes
0
Downloads
15
Comments
0

1 Embed 1

http://us-w1.rockmelt.com 1

Accessibility

Categories

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
  • How many have used YUI?How many have done FE dev?Design Patterns - Use
  • You can control on Server side..
  • 1. Used Banking and Share sites…
  • Crow Parrot

Introduction to YUI - IIT Kharagpur Introduction to YUI - IIT Kharagpur Presentation Transcript

  • YUI
    Hack U – IIT Kharagpur
    Harsha Vashisht
    mail@harsharv.comhttp://www.harsharv.com
  • The client side is where strange things happen.
  • Browsers render in fascinating and totally wrong ways.
  • Random code from dubious sources interferes with your godlike, clean and high quality code....and you fix more than you develop.
  • The web is a total mess!
  • To make things work for Yahoo! we needed to find a way to abstract these issues away from us.
  • And this is why we built the YUI.
  • YUI is a framework to build working web applications.
  • It includes CSS solutions to create layouts that work across browsers and allow for predictable typography.
  • And it takes the pain out of writing JavaScript.
  • Last but very much not least it allows you to create applications using tested and working widgets that extend what HTML gives us.
  • Auto Complete
    Data Table
    Interface Widgets
    Button
    Layout
    Menu
    Calendar
    Rich Text
    Charts
    Tab View
    Container
  • Everything is fully documented with around 300 examples!
  • 1. Documentationhttp://developer.yahoo.com/yui/docs/2. Exampleshttp://developer.yahoo.com/yui/examples/
  • All YUI components come as a debug version which log everything that is going on to the logger.
  • All in all YUI allows you to build web interfaces without having to know all the pain that goes on in the browser world.
  • Now, lets have a look at what YUI has to offer.
  • 1. Data Sourcehttp://developer.yahoo.com/yui/3/datasource/
  • The DataSource Utility provides a consistent API for the retrieval of data from arbitrary sources over a variety of supported protocols.
  • Remote sources
    Polling
    Caching
    Events
  • http://developer.yahoo.com/yui/3/examples/datasource/datasource_get.html
  • YUI allows you to fetch data from YQL directly!
  • http://developer.yahoo.com/yui/3/examples/yql/simple-yql.html
  • 2. Auto complete
  • http://developer.yahoo.com/yui/3/examples/autocomplete/ac_datasource.html
  • 3. Data Charts
  • Now.. I want to draw a graph..
  • Duck.. There will be code
    Duck.. There will be code
  • My code..
    YUI().use('charts', function (Y)
    {
    varmyDataValues = [
    {category:"5/1/2010", values:2000},
    {category:"5/2/2010", values:50},
    {category:"5/3/2010", values:400},
    {category:"5/4/2010", values:200},
    {category:"5/5/2010", values:5000}
    ];
    varmychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart"});
    });
  • Ain’t that kick ass???
  • Let us look at the examples page…
    http://developer.yahoo.com/yui/3/examples/
  • Questions???
  • Some people I need to thank…
    Christian Heilmann
    GopalrathnamVenkatesan
  • Harsha R. Vashishtmail@harsharv.com
    http://www.harsharv.comhttp://twitter.com/harsharv
    http://www.facebook.com/harsharv