YUI Sparkline Widget « Chicken of the Web

YUI Sparkline Widget « Chicken of the Web

If your into cutting edge, this is a nice example of subclassing YUI 2.7 charts to create sparklines in <canvas> and javascript.

Blogged with the Flock Browser

YUI 3: Design Goals and Architecture -Satyen Desai » Garuna Web Designer

YUI 3: Design Goals and Architecture -Satyen Desai » Garuna Web Designer

Satyen Desai goes over lessones learned from YUI 2.7, and the design goals for YUI3. YUI 2 users have expressed the need for more from YUI3

1. Lighter
1. Finer Granularity
2. Code reuse, common base class, easier to create plugins and extensions
2. Easier
1. Conistant API
   
1. Selector, Widget class, Base
2. Convenience - each, bind, chaining, syntax sugar
3. Faster
1. Opportunity to re-factor performance (drag and drop etc)

These are all valid points. In YUI 2, if I want to use a specific util or widget, I would get alot of code that I really didn't need all the time. In YUI 3 you get the option to only include parts of the components you need. This makes sense when building plugins, and widgets of your own, as well as how the core objects relate. A Tooltip widget for instance does not need all the code for an Overlay or dialog box even though they may use some of the same code for making shims or floating elements.

Satyen also goes over application instances with YUI().use() and how it is protected, and self populating. For exmaple YUI().use("anim") will attach optimal dependencies for the anim library, and attach anim to Y. var $anim = new Y.Anim(). This version of anim is garunteed to be the version of the library you are working with, and will never conflict with other widgets on the page.

The custom event handling in YUI 3 has grown quite mature with Event Facades for Dom events and Custom events. 

Custom Events:

slider.on('valueChange', function(e){
  if(e.newVal < 200) {
     alert("New Value " + e.newVal + " is less than 200");
  } 
});

Over all this is a wonderful introduction in getting developers up to speed with the changes from YUI 2 to YUI 3.

Blogged with the Flock Browser

Using Prototype and YUI

Using prototype and YUI

There are many reasons why you might use prototype.js with yui. You may be moving to Yahoo User Interface, or vice versa, or you may just prefer some flexibility. Whatever the reason, there are some good points to using the two together. I have pointed out several times on this blog and Practical Prototype that I personally prefer this method. I use YUI for the widgets, and use prototype for setting up classes, events, and other low level organization. Let's see a quick example:

MySimpleDialog = Class.create({
  initialize: function($div_id, $options){
    this.defaults = {
      width: "20em",
      fixedcenter: true,
      visible: false,
      draggable: true
    };
    Object.extend(this.defaults, $options || {});
    this.dialog = new YAHOO.widget.SimpleDialog($div_id, this.defaults);
   
  },
 
  render: this.dialog.render,
  show: this.dialog.show,

  setTitle: function($title){ this.dialog.setHeader($title);}
  setBody: function($body){ this.dialog.setBody($body); }
});

To initialize a new MySimpleDialog all we have to do now is:

var $mydialog = new MySimpleDailog('my div id');

Notice we do not have to send any options to the SimpleDialog constructor, and if we had, they would override the defaults. To get Fancy, we could create a Template class to be used by our "overridden" setBody method. Keeping things generic helps you to reuse scripts.