Of course, now that I'm at Yahoo!, I'm supposed to get a firm grasp on the library. Unlike other web devs at Yahoo!, I haven't taken any classes on YUI. So, this series of entries will be a "fresh eyes" approach to YUI.
It's not a difficult library to learn and it's definitely not as comprehensive with it's controls/widgets as Bindows.
As you probably know, I think Bindows is great. IMHO, it's one of the best ( if not the best ) traditional front-end frameworks out there. You can do a lot with it ( just check my archives for examples or visit my site ).
YUI also contains other things like CSS files that help with layout, font sizes and other troubling difficult to solve cross-browser issues.
What's interesting about YUI is that it's a mixture of things --
- Utilities that help with DOM manipulation and event handling
- CSS for cross-browser visual consistency
- A few "hard to do by yourself" controls/widgets
One advantage to the YUI approach is that it's a lot easier to add functionality to pre-existing systems. This is because you directly manipulate DOM elements. So, you basically load the library and then pass nodes, ids, etc. to helper methods which performs the magic.
Because YUI is an a la carte system, you'll only pick and choose what you want. It's easy for you to control the "size" of your library.
Like Ajax technologies, you can gradually introduce it into your system. For example, if you're interested in cross-browser event handling, you'd just pull in event.js which includes the YAHOO.util.Event class. You can throw one away home grown solutions like my own.
For now, we're just going to look at two of the utility components. In the future, we'll look at the core components and some of the handful of YUI controls/widgets.
About the Example
I'm really fond of DnD. People are still amazed that you can drag and drop in the browser. So, our first example will use the dragdrop library with a little sprinkle of animation.
Here's the example -- we'll drag a little box around and as we drag it, we'll provide visual indicators of the location of the box. Once we stop, we can undo our current position ( see it full screen here ) --
So, the very first thing we do is take care of all the visual pieces. For us, it's the little draggable box, the "Undo Button" ( which is initially is not shown ), the left and the top positional markers which result in this simple structure --
The CSS is just as simple --
Note that yahoo-dom-event.js is used by both libraries.
Next, the fun begins! The general sequence for DnD is --
- Get the element you want to drag
- Instantiate a YAHOO.util.DD object with that element
- Override the drag event handlers ( typically onDrag, but in our case we also overrode startDrag and endDrag as well; note that you can find a slew of event handlers as well as other information here; the dragdrop library is pretty comprehensive; you can even drop to targets; here's one of my examples )
YAHOO.util.DD is the wrapper around the object that's being dragged. So, if you need to get the object, you'll need to do this --
var dragEl = this.getDragEl();
dragEl is the node with ID "ThingToDrag". You'll also notice that we can use the node to get position information relative to the entire HTML document --
The x and y positions are tucked away in object literals which are pushed on an array. This is a stack of starting positions which we pop when we undo ( we'll talk more about this in the animation section ).
The handler that does most of the **work** is onDrag. It basically handles all the visual updates like --
- The information on the position of the dragged element
- Positions both the top and left grid markers so that they move with the element
Once we've completed the drag, we can undo it. Undo starts the animation.
We'll instantiate the YAHOO.util.Motion object for the ThingToDrag node, subscribe to ( listen for ) the onTween and onComplete event handlers and then start the animation --
onTween is fired for each frame of the animation ( for each movement of ThingToDrag ) and onComplete is fired when the animation is finished ( ThingToDrag no longer moves ).
In this example the onTween handler, handleTween is the same handler as onDrag. Likewise, the onComplete handler, handleComplete is the same as endDrag.
This makes sense. There's a symmetry to undoing what you just did so it's no surprise that these event handlers are the same!
In the handler, handleComplete, we also unhook our event handlers. It's good practice to free up resources like this when they're not needed to avoid nasty memory leaks.
That's it! You can read more about the YUI dragdrop and the animation library here and here.
Feel free to study and use the example anyway you like.