yui introduction to build hack interfaces

The Yahoo User Interface Library

(YUI)

Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org

Delhi, India, University Hack Day, January 2009

Let’s take a walk...

...on the client side

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!

The reason is that things seemingly work.

However, you are not the web and neither is your

computer.

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.

AutoComplete

Button

Calendar

Charts

Container

DataTable

Layout

Menu

Rich Text

TabView

Interface W

idg

ets

Everything is fully documented.

http://developer.yahoo.com/yui/docs/

And there are almost 300 examples to look at.

http://developer.yahoo.com/yui/examples/

The controls are driven by custom events to allow for extending and monitoring

them.

Say for example you want to make sure to securely chain

animation sequences...

//This is the first animation; this one will //fire when the button is clicked. var move = new YAHOO.util.Anim("animator", { left: {from:0, to:75} }, 1); //This is the second animation; it will fire //when the first animation is complete. var changeColor = new YAHOO.util.ColorAnim( "animator", { backgroundColor: {from:"#003366", to:"#ff0000"} }, 1); //Here's the chaining glue: We subscribe to the //first animation's onComplete event, and in //our handler we animate the second animation: move.onComplete.subscribe(function() { changeColor.animate(); });

//Here we set up our YUI Button and subcribe to //its click event. When clicked, it will //animate the first animation: var start = new YAHOO.widget.Button("startAnim"); start.subscribe("click", function() { //reset the color value to the start so that //the animation can be run multiple times: YAHOO.util.Dom.setStyle("animator", "backgroundColor", "#003366"); move.animate(); });

//You can also make use of the onStart and onTween //custom events in Animation; here, we'll log all //of changeColor's custom events and peek at their //argument signatures: changeColor.onStart.subscribe(function() { YAHOO.log("changeColor animation is starting.", "info", "example"); }); changeColor.onTween.subscribe(function(s, o) { YAHOO.log("changeColor onTween firing with these arguments: " + YAHOO.lang.dump(o), "info", "example"); }); changeColor.onComplete.subscribe(function(s, o) { YAHOO.log("changeColor onComplete firing with these arguments: " + YAHOO.lang.dump(o), "info", "example"); });

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.

Built on agreed standards

Separated into modules each dealing with one task

Constant reporting of what is going on

Own Debugging environment

Let’s hack using YUI!

Step 1: Get the page structure built for you.

http://developer.yahoo.com/yui/grids/builder/

Step 2: Get some nice data, for example photos from

Delhi.

http://developer.yahoo.com/yql/console/

Step 3: Find a nice way to display it – for example a

Carousel

http://developer.yahoo.com/yui/examples/carousel/csl_circular.html

Step 4: Add tabs for more content

http://developer.yahoo.com/yui/tabview/

Step 5: Add a menu for other pages

http://developer.yahoo.com/yui/menu/

Step 6: Add a Map!

http://developer.yahoo.com/maps/ajax/

And...

FAIL

http://yuiblog.com/blog/2006/12/14/maps-plus-yui/

After you fixed that:

http://isithackday.com/hacks/delhi/

Of course this is a mashup, not a hack.

It is also not creative at all and has been done to death!

But it shows you how you can build a working interface

Christian Heilmann

http://wait-till-i.com

http://scriptingenabled.org

http://twitter.com/codepo8

THANKS!