SplitPane Control :: YUI

One of the basic controls is the split pane control. YUI doesn't have one right out of the box. So, we'll build one.

Note that Jack Slocum created one based on YUI about a year ago for his ExtJS library. He called his a "SplitBar Component."

Of course, Bindows has a **pure** JavaScript one.

We'll base ours off of the YAHOO.widget.Slider. We'll take advantage of its ability to slide horizontally and vertically. This also means that whatever YUI pieces that the YAHOO.widget.Slider uses, we'll use those as well.

Here it is in action --



Like the YAHOO.widget.Slider, we'll retrieve a horizontal and vertical split pane by doing it the static way --

var horzSplitPane = MySplitPane.getHorizSplitPane("SliderBg", "Thumb", 145, 200, "LeftContainer", "RightContainer");

var vertSplitPane = MySplitPane.getVertSplitPane("SliderBg", "Thumb", 194, 250, "TopContainer", "BottomContainer");

So, we'll mimic the YAHOO.widget.Slider API --

var horzSlider = YAHOO.widget.Slider.getHorizSlider(sBGElId, sHandleEId, iLeft, iRight);

var verSlider = YAHOO.widget.Slider.getVertSlider(sBGElId, sHandleEId, iUp, iDown);

With the exception of the additional two panels, we'll keep the arguments the same. Leveraging what YUI users already know allows them to easily learn your API.

We'll use these two methods to get the split panes --

MySplitPane.getHorizSplitPane(sBGElId, sHandleEId, iLeft, iRight, leftContainer, rightContainer)

MySplitPane.getVertSplitPane(sBGElId, sHandleEId, iUp, iDown, topContainer, bottomContainer)

where

• sBGElId is the ID of the slider background
• sHandleEId is the ID of the slider thumb
• iLeft/iUp is the number of pixels the slider can move left or up
• iRight/iDown is the number of pixels the slider can move right or down
• leftContainer/topContainer is the ID of the left or top pane
• rightContainer/bottomContainer is the ID of the right or bottom pane

The actual augmentation isn't based on prototype inheritance. MySplitPane is really a wrapper around the getHorzSlider and getVertSlider methods --



Each method, getHorzSplitPane and getVertSplitPane, is treated as an object in an object literal which is returned within the Singleton method/object MySplitPane. The end result are two public methods.

We subscribe to the "change" event which through the handler, handleChange, resizes the panels.

You of course can add more functionality by subscribing to your own "change" event and then using the handler to do something else like update the text in the panels --



Two of the more interesting utility methods are YAHOO.util.Dom.setStyle and YAHOO.util.Dom.getStyle. They're used instead of node.style so that you can get "style" name/value pairs even if they're not defined inline or via JavaScript.

The YUI documentation notes that getStyle "normalizes currentStyle and ComputedStyle."

That's it!

You can view MySplitPane here. Visual examples for everything above are found here and here.

Feel free to use or modify the code.

Have lotsa fun!

Yahooooooooooooooo!

Two weeks ago, I joined Yahoo!.

If you're a front-end web engineer, it's the best place to be. They have some of the best front-end engineers in the world in an environment where you can become a better cloud developer.

If you're smirking ( or laughing ), you've probably haven't noticed what Yahoo! has contributed to the world of front-end development.

A few years ago, I would have thought the same. Do you remember the *old* front page? Or, how about the pre-OddPost Yahoo! mail? Or, how about Yahoo! photo ( thank goodness for Flickr! ). Those things are legacies of Web 1.0.

Then, something happened. A couple of years ago, Yahoo! published their Design Pattern Library which catered to the user interface design and interaction folks. The Bill Scott led project really struck me as something that was useful and came at a critical time when Web 2.0 and Ajax concepts were coming into popularity.

Having a set of UI interaction patterns was only one piece of the solution. Creating a *free* library that implemented ( or at least allowed you to easily implement ) those patterns was the other. Having a library bridged the knowledge of the UI designer with the implementation skills of the front-end developer.

It demonstrated a commitment by Yahoo! to take *theoretical* concepts ( ok, some people would say "fluff" ) and introduce them to the web development community with tools to help implementation.

As an outsider, I heard Yahoo! say --

OK, here's some UI patterns that we think are really valuable and will help with usability. We've focused on interaction because that's the most important thing. UI designers will dig this stuff.

Oh and by the way, we've created a library that your web devs can easily use to supplement their code and slowly introduce these patterns into their application.

And yes, it's all free!

Then, they wanted to train all those folks to use these libraries. As a first step, Yahoo! introduced an amazing series of talks on JavaScript and the DOM by Douglas Crockford.

In fact, on YUI Theater, you'll find a complete program or "web polytechnic" for the front-end developer. You'll see talks on improving web performance, accessibility, using the YUI library, Firebug and an amazing array of web related things.

It's just amazing what they offer to cloud programmers who don't work for Yahoo!.

Since I've started, I've attended a front-end development class by CSS and JavaScript expert Natt Koechley and attended a meeting with accessibility expert Victor Tsaran.

On my immediate team, I'm working with some equally amazing people one of whom created the "Personal Assistant" ( here's my imitation. I even blogged about it. It's humbling to meet the guy that did it! ).

Last week, there was a long internal thread on sprites ( or tiling ) and whether stacked were better performing than horizontal images. Going through the responses, I realized how deep and thorough my colleagues were in their thinking and how much I still have to learn.

This is really going to be a fun ride. I've buckled my seat belt.

Yahooooooooooooooo!