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

Advertisements

15 Responses to Flex: popupbutton that opens in all directions

  1. Vijay Anand Mareddy says:

    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.

  2. shemesh says:

    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.

  3. Vijay Anand Mareddy says:

    myButton.setStyle(“skin”, null);

    Thanks for the tip!

  4. Vijay Anand Mareddy says:

    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]

    • Henry says:

      Hi Vijay,

      Have you got any reply for this error? Or you figured out yourself?

      I got exactly same error and no clue so far.

      Thanks,
      Henry

      • Hi Henry, No i did not resolve the problem so i just didn’t extend at all. See if mx.controls.PopupButton resolves your problem. Also one piece of caveat, i always declare my PopUpButton using a mxml rather actionscript coz i see popup reference becomes null when you resize the browser.

  5. slum says:

    Great post! I’ve been looking all over for something like this.

  6. Ian says:

    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 😉

  7. shemesh says:

    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.

  8. Ian says:

    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

  9. Vijay Anand Mareddy says:

    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

  10. Ian says:

    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

  11. Alex says:

    it breaks the moment you drag the panel off-stage slightly so the scrollbars appear.

  12. gabe says:

    is there an easy way to listen for events on the buttons in the ToolBoxVertical when they are clicked???

    Thank you!!!

  13. kavitha says:

    Hi,

    Is there any way to make the button as visible always…

    For Ex: I have the button in the name of “Submit”, when i click the submit button state has been changed to unvisible ..

    How can i make the button is visible always whether i click or not…

    I need the result as when i click the submit button popup window should appear.. But at the same time submit button will not be in unvisible status..

    can anyone please stell this

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: