Flex: draggable tool-box button using the directional pop-up button

As promised at the previous post, here is how i used the PopUpButton that can position its pop up.
I have a “tool box” button that can be dragged around, but it is restrained to stick to the borders of the container.
Depending on which side this tool-box-button is residing i determine its pop up opening direction.

Inside the tool-box itself the”full screen”, “legend” and slider works and manipulate the chart.

(i really liked this restrained dragging).

Demo is here (right click for source)
Source is here

Flex: popupbutton that opens in all directions

I find the PopUpButton to be a very useful component, and I think it is underrated. Thus it is rarely used by developers/designers.
A PopUpButton can open any UIComponent by a simple click of a button, it saves the developer the hassle of dealing with the PopUpManager and locating the pop-up at the exact point to match it opener.
Try it; it is really a great component.

What I lack in this PopUpButton is the ability to open the pop-up in all directions.
Actually it can open its pop-up only in one direction – downward.

Introducing my PopUpButtonPositioned!

I borrowed all the functionality, logic, events, styles, etc… from the original PopUpButton.
Deleted some stuff I didn’t need, added some new code to handle the positioning.
And most important – I have added a new property called popUpPosition.

Depending on the string given to popUpPosition (bottom,top,left,right) the pop-up will open at any direction!

It will also always stay in view, meaning that if in its opened position the pop-up could get out of view and be clipped it will open itself to the opposite side.

On the next post I will show what I used it for.

Demo is here (right click for source)
Source is here