Flex Popup Button Question

Question

Banging my head against the wall here. I don't want to reinvent the wheel.

The default Flex 3 classs for PopupButton is a combination of two buttons. One is a normal button with label and/or icon, and the second is the arrow which opens the popup.

My struggle here is that I just want a button with an icon that opens the popup directly, without having to write all the popup handling code all over again. The plan was to override the PopupButton class with, say, a new class called SimplePopupButton. This class would just hide the arrow, and point the button click handler to open the popup.

Seems simple, but I don't see an easy way to do this. Suggestions? Alternatives?

---

[Edit] I want a 16x16 icon button that opens a popup. PopupButton shipped with flex has two buttons: "It contains a main button and a secondary button, called the pop-up button, which pops up any UIComponent object when a user clicks the pop-up button." (source). I want the main button to open the popup, and hide the popup-button. (or vice-versa)

Answer 1

It's been a while since I did some work with Flex, but here's my idea:
Create a new component consisting of a classic button and a list. The component should have two view states. The list should not be visible in the base state, but should become visible when the component enters the other state. The other state is, of course, entered on the click of the button. You can set the list to be initially positioned so that it's bottom left corner is aligned with the buttons's bottom left corner. Then create a transition from base state to the other state that would make the list do a "slide down" as it does in a standard PopuButton control. You can do this by simultaneously using a wipeup effect and a move effect in which you move the list on its y axis until it's top left corner is where it's bottom left corner was. Name the component MyPopupButton or whatever you wish to call it. For returning to the base state simply do a reverse on these effects. As for the handling code - your app, of course, only needs to know what the user chose from the list, so that's no more code than usual.
Hope this was helpful.

Answer 2

Um, I may be being a total idiot here, but why can't you just use a ComboBox? I mean the action on it is essentially the same as a popup button without the arrow button separation? Or am I being daft here.

Answer 3

Try the popup property found here. It should be set to your popup.

print(</mx:Script>
    <![CDATA[
          import mx.controls.Alert;
          public var myAlert:Alert = new Alert();
     ]]>
    </mx:Script>
    <mx:popUpButton popUp="{myAlert}" label="Button"/>

);

Answer 4

Have you tried setting a new skin? Not sure if it would work but it would be far easier than trying to write a new control.

Answer 5

Glen, did you ever figure out how best to do this? I'm looking to do the exact same thing, and am curious what worked best for you.

Answer 6

this is sort of a designer hack, but I just set the following properties on my popUp button... (or you could create a style if you want to reuse)

Assuming you just want a 16x16 icon to popUp a menu when clicked...

<mx:PopUpButton icon="@Embed(source='pathToIcon.png')" arrowButtonWidth="16" paddingLeft="0" paddingRight="0" width="16" height="16" popUp="{menu}"/>

Answer 7

kind of a nasty hack but I did something much like Matt above that seems to work/look alright.

in CSS.

.camButtons
{
    padding-left:0;
    padding-right:1;
    up-skin: Embed(source="/assets/images/skins.swf", symbol="Button_ChatRoomControlsOver");
    over-skin: Embed(source="/assets/images/skins.swf", symbol="Button_ChatRoomControls");
    down-skin: Embed(source="/assets/images/skins.swf", symbol="Button_ChatRoomControls");
    disabled-skin: Embed(source="/assets/images/skins.swf", symbol="Button_ChatRoomControls");

    pop-up-up-skin: Embed(source="/assets/images/skins.swf", symbol="Button_ChatRoomControlsOver");
    pop-up-down-skin: Embed(source="/assets/images/skins.swf", symbol="Button_ChatRoomControls");
    pop-up-over-skin: Embed(source="/assets/images/skins.swf", symbol="Button_ChatRoomControls");
}

<mx:PopUpButton width="38" popUpGap="0" paddingLeft="37" arrowButtonWidth="38" id="flirts_btn" popUp="{flirts_menu}" styleName="camButtons" icon="@Embed(source='/assets/images/skins.swf', symbol='Icon_WinkOver')" downIcon="@Embed(source='/assets/images/skins.swf', symbol='Icon_WinkOver')" disabledIcon="@Embed(source='/assets/images/skins.swf', symbol='Icon_Wink')" toolTip="Send Flirt to User" buttonMode="true" useHandCursor="true" />

.... the important parts...

pop-up-up-skin: Embed(source="/assets/images/skins.swf", symbol="Button_ChatRoomControlsOver");
    pop-up-down-skin: Embed(source="/assets/images/skins.swf", symbol="Button_ChatRoomControls");
    pop-up-over-skin: Embed(source="/assets/images/skins.swf", symbol="Button_ChatRoomControls");


width="38" popUpGap="0" paddingLeft="37" arrowButtonWidth="38"

Answer 8

In Flex 3.4, the PopUpButton control has an attribute called "openAlways", which, if set to true, allows the main button to open the popUp as well. Then, as mentioned before, simply set the skin of the button to hide the down-arrow.