YUI Library

From Fishcakes Wiki

YUI Library

This page contains information about the Yahoo! User Interface (YUI) Library.

About YUI

The YUI Library is a set of utilities and controls written in JavaScript and including several core CSS resources. It can be utilised for building web applications using techniques such as DOM scripting, DHTML and AJAX. All components in the YUI Library have been released as open source under a BSD license and are free for all uses!

• developer.yahoo.com/yui — developer's website with downloads and such.
• yahoo groups: ydn-javascript — developer's mailing list

YUI is fully tested for all A-Grade browsers:

See yahoo.com YUI Browser Support.

Below are details of some useful YUI applications that have been released:

YUI Slideshow

A simple slideshow that handles both images and HTML. Allows you to choose transition effect (slide, fade, squeeze) and choose to load on demand.

• http://www.madb.net/slideshow/

slideshow2 = new YAHOO.myowndb.slideshow("yui-sldshw-displayer2",
   [ { type: 'remote_html',
   value: 'http://www.madb.net/slideshow/remoteslide.html', id: "re1"}],
   YAHOO.myowndb.slideshow.effects.slideRight);

Javascript and CSS

You need to load the following javascript and css files:

• YUI Files:
  • yahoo.js
  • dom.js
  • event.js
  • connection.js — for remote html slides
  • animation.js
• Slideshow files:
  • slideshow.js
  • slideshow.css

Container DIV

Define a container for the slideshow with the yui-sldshw-displayer class (inline):

<div id="yui-sldshw-displayer2" class="yui-sldshw-displayer" style="height:300px;width:350px;">

Slides

Define the slides on the page:

• html slides — div elements children of the container, with the class yui-sldshw-frame<code/>. The first slide should also have the class <code>yui-sldshw-active.
• images slides — img elements children of the container, with the class yui-sldshw-frame. The first slide should also have the class yui-sldshw-active.

Remote HTML content is put in a containing div when loaded. Remote images loaded on demand have class applied to them prior to their insertion in the DOM tree.

Javascript

The slideshow is constructed by initiating the class YAHOO.myowndb.slideshow. The constructor takes 2 arguments:

• id — of the container.
• Configuration object, with the following fields:
  • frames — an array of objects representing the remote slides to load on demand (see below for details),
  • effect — to apply when transitioning to the next slide. Available effects are:
    • YAHOO.myowndb.slideshow.effects.slideUp
    • YAHOO.myowndb.slideshow.effects.slideRight
    • YAHOO.myowndb.slideshow.effects.slideLeft
    • YAHOO.myowndb.slideshow.effects.squeezeLeft
    • YAHOO.myowndb.slideshow.effects.squeezeRight
    • YAHOO.myowndb.slideshow.effects.squeezeUp
    • YAHOO.myowndb.slideshow.effects.squeezeDown
    • YAHOO.myowndb.slideshow.effects.fadeOut
    • YAHOO.myowndb.slideshow.effects.fadeIn
  • slide_selector — function taking 2 parameters that returns an integer being the index of the next frame:
    • number_of_slides
    • current frame index
  • interval — in milliseconds between 2 transitions when loopint through slides.

Here's the code for a random slide selector:

function(number_of_slides, current_index)
{
   return Math.floor( Math.random()*number_of_slides);
}

Remote slide objects have 3 fields:

• type — can be remote_html (for html content) or image_url
• value — the url where the remote slide can be found
• id — the id to give to the slide.

Here is how the slideshow on the homepage was defined:

slideshow2 = new YAHOO.myowndb.slideshow("yui-sldshw-displayer2",
   { frames: [ { type: 'remote_html', value: 'http://www.madb.net/slideshow/remoteslide.html', id: "re1"}],
      effect: YAHOO.myowndb.slideshow.effects.slideRight
}
);

You can start the looping by calling the loop method, like this:

slideshow2.loop()

New effects

Effects are simple objects with following fields:

• setup — a function that prepares the next slide for the transition (argument is the next frame)
• get_animation — a function taking the active element (to which the effect will apply) as argument, and returning the YAHOO.util.anim or YAHOO.util.motion instance built with that element

Here is the definition of the slideUp effect:

YAHOO.myowndb.slideshow.effects.slideUp={
   setup: function(frame){
      YAHOO.util.Dom.setStyle(frame, 'top', '0');
      YAHOO.util.Dom.setStyle(frame, 'left', '0');
   },
   get_animation: function(frame){
      region = YAHOO.util.Dom.getRegion(frame);
      return new YAHOO.util.Motion(frame, { points: { by: [0,region.top-region.bottom] } }, 1, YAHOO.util.Easing.easeOut);
   }
}

YUI Resources

Official Resources

• developer.yahoo.com/yui — developer documentation.
• yuiblog.com — developer's blog.
• groups.yahoo.com/group/ydn-javascript — user group and mailing list.

Unofficial Resources

• Davs Blog — loads of YUI code samples.
• YUI Grids Builder — excellenttool to layout the page for you.
• EXT YUI Javascript Library — very good application layer for web app developers.