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
September 9, 2008 at 17:15 |
Hi Shemesh, Nice job!
I am using the PopUpButtonPositioned with no label just the icon property.
How do i avoid making it appear as a button (i dont want the border)?
It should just appear as an image but function as a button.
I tried extending the Image rather than Button but i was ending up in trouble.
September 9, 2008 at 22:59 |
Vijay, tnx.
i suggest you use the button’s skins to do what you want.
you can make your own skin thus making the button look like what needed.
November 12, 2008 at 18:42 |
myButton.setStyle(“skin”, null);
Thanks for the tip!
January 23, 2009 at 16:25 |
Any idea why i would get this error in the constructor of my subclassed version of PopupButtonDirectional:
If i remove this line the error goes away ==> popUp = new Panel();
Error
at mx.managers::SystemManager/updateLastActiveForm()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\SystemManager.as:5087]
at mx.managers::SystemManager/activateForm()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\SystemManager.as:2352]
at mx.managers::SystemManager/activate()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\SystemManager.as:2307]
at mx.managers::FocusManager/creationCompleteHandler()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\FocusManager.as:1592]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:9298]
at mx.core::UIComponent/set initialized()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:1169]
at mx.managers::LayoutManager/doPhasedInstantiation()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:718]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8628]
at mx.core::UIComponent/callLaterDispatcher()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8568]
February 6, 2009 at 00:41 |
Great post! I’ve been looking all over for something like this.
March 5, 2009 at 22:57 |
Love using the PopUpButton myself.
Is it possible to make the popped up UIComponent so it displays modally like and Alert?
I know you can use PopUpManager, but what a pain
March 6, 2009 at 09:47 |
Ian,
i don’t really understand what you are trying to do.
a modal alert that come out of a PopUpButton?
these are 2 totally different things and intended for different use cases.
the PopUpButton is intended to use as a “fly-out”.
if you need help, plz elaborate.
March 6, 2009 at 12:15 |
Sorry Shemesh, that didn’t make a lot of sense did it?
Basically, I have a TitleWindow that slides down with settings the user can change. Is it possible to make the TitleWindow modal using this method?
I.e. once pop-open, do not allow the user to click outside of it to close it and to give the background application the blur effect. This would make the user forced to click a button on the TitleWindow to close it, and then you can force the data they change to be validated before it closes.
I.e. once it slides down, don’t allow the window to close until they click an “OK” button on that TitleWindow. In effect making it act just like an Alert.
Hope that is clearer
Cheers
Ian
March 6, 2009 at 16:42 |
Ian, try these
1. The TitleWindow ( if showCloseButton=true)dispatches a DropdownEvent.CLOSE event and we need to listen for it and invoke the close() method on subclass of PopUpButtonDirectional
popUpTitleWindow.addEventListener(DropdownEvent.CLOSE,close());
2. override the PopUpButtonDirectional.focusOutHandler
March 6, 2009 at 17:02 |
Brilliant, thank you Vijay.
That works a treat. I was able to catch the close events using the X button, and clicking the PopUpButton, it was the clicking outside the control I couldn’t get, so the hint to override the .focusOut event was spot on.
Thank you again.
Cheers
Ian
April 9, 2009 at 20:53 |
it breaks the moment you drag the panel off-stage slightly so the scrollbars appear.