Right Align the drop down of the Flex DropDownList/ComboBox

In the previous post, I have tried to play around with the width of the drop down popup of the Flex DropDownList. An interesting observation is that the drop down is always aligned to the left edge of the open button of the DropDownList. Now it could be a requirement to open it aligned to the right edge or even centered with respect to the open button. So how to achieve that?

For this we need to dig into the DropDownListSkin. We can see that the component opens the drop down popup using a PopUpAnchor which is aligned with left = 0. Now this causes, the popup to stick to the left edge. So, in order to right align it we need to clear the left constraint and make right = 0. For clearing the left constraint, all that we have to do is to set it to undefined! 

Now, it works fine if we have fixed width for the drop down but in a previous post, we have seen that we can have the width of the drop down to auto expand as well. This auto expansion breaks our alignment and the popup does not remain aligned to the right edge.

A simple solution that I have employed is to keep track of the popup width by using Binding and whenever the width changes, I just re-position the popup. The same method can be used to position the popup in the center. All you have to do is to calculate the left/right constraint position from where the popup needs to open up.

A sample application showing both the auto expanding and the fixed width DropDownList is shown below. Three buttons are provided to change the alignment of the drop down on the fly. You can also see the behavior of the lists when they are placed near the edges of the screen as well.


Since the drop down uses PopUpAnchor, it has a built in functionality which does not allow the popup to go out of bounds of the screen and that works perfectly well for us!

So here is my CustomDropDownList, which can be used to position the drop down to either align with the left edge, right edge or be centrally aligned.

package com.codedebugged.dropdown.alignment
{
    import mx.binding.utils.BindingUtils;
    import mx.binding.utils.ChangeWatcher;
    import mx.events.FlexEvent;
    import spark.components.DropDownList;
    import spark.components.PopUpAnchor;

    public class CustomDropDownList extends DropDownList
    {

        public static const JUSTIFIED : String = "JUSTIFIED";

        public static const LEFT_EDGE_ALIGNED : String = "LEFT_EDGE_ALIGNED";

        public static const RIGHT_EDGE_ALIGNED : String = "RIGHT_EDGE_ALIGNED";

        public function CustomDropDownList()
        {
            super();
            setStyle( "skinClass", CustomDropDownListSkin );
        }

        [SkinPart]
        public var popUp : PopUpAnchor;

        private var _changeWatcher : ChangeWatcher;

        private var _dropDownWidth : Number = NaN;

        private var _popupPosition : String = LEFT_EDGE_ALIGNED;

        private var dropDownWidthChanged : Boolean;

        private var popupPositionChanged : Boolean;

        [Bindable]
        public function get dropDownWidth() : Number
        {
            return _dropDownWidth;
        }

        public function set dropDownWidth( value : Number ) : void
        {
            if (_dropDownWidth != value)
            {
                _dropDownWidth = value;
                dropDownWidthChanged = true;
                invalidateProperties();
            }
        }

        [Inspectable( enumeration = "LEFT_EDGE_ALIGNED,JUSTIFIED,RIGHT_EDGE_ALIGNED" )]
        [Bindable]
        public function get popupPosition() : String
        {
            return _popupPosition;
        }

        public function set popupPosition( value : String ) : void
        {
            if (_popupPosition != value)
            {
                _popupPosition = value;
                popupPositionChanged = true;
                invalidateDisplayList();
            }
        }

        override protected function commitProperties() : void
        {
            super.commitProperties();

            if (dropDownWidthChanged)
            {
                dropDownWidthChanged = false;
                setDropDownWidth();
            }
        }

        override protected function partAdded( partName : String, instance : Object ) : void
        {
            super.partAdded( partName, instance );

            if (instance == popUp)
            {
                popUp.addEventListener( FlexEvent.CREATION_COMPLETE, handlePopupCreation );
            }
            else if (instance == dropDown)
            {
                setDropDownWidth();
            }
        }

        override protected function partRemoved( partName : String, instance : Object ) : void
        {
            super.partRemoved( partName, instance );

            if (instance == popUp)
            {
                popUp.removeEventListener( FlexEvent.CREATION_COMPLETE, handlePopupCreation );
                if (_changeWatcher)
                {
                    _changeWatcher.unwatch();
                    _changeWatcher = null;
                }
            }
        }

        override protected function updateDisplayList( unscaledWidth : Number, unscaledHeight : Number ) : void
        {
            super.updateDisplayList( unscaledWidth, unscaledHeight );

            if (popupPositionChanged)
            {
                popupPositionChanged = false;
                setPopupPosition();
            }
        }

        private function handlePopupCreation( event : FlexEvent ) : void
        {
            setPopupPosition();
        }

        private function justifyPopup() : void
        {
            if (popUp && popUp.popUp)
            {
                popUp.left = (this.width - popUp.popUp.width) / 2;
            }
        }

        private function leftifyPopup() : void
        {
            if (popUp && popUp.popUp)
            {
                popUp.left = (this.width - popUp.popUp.width);
            }
        }

        private function refreshPopup( obj : Object = null ) : void
        {
            if (popUp)
            {
                if (popupPosition == JUSTIFIED)
                {
                    justifyPopup();
                }
                else if (popupPosition == RIGHT_EDGE_ALIGNED)
                {
                    leftifyPopup();
                }
                popUp.updatePopUpTransform();
            }
        }

        private function setDropDownWidth() : void
        {
            if (dropDown && !isNaN( dropDownWidth ))
            {
                dropDown.width = dropDownWidth;
            }
        }

        private function setPopupPosition( object : Object = null ) : void
        {
            if (popUp)
            {
                if (!_changeWatcher)
                {
                    _changeWatcher = BindingUtils.bindSetter( refreshPopup, popUp, [ "popUp", "width" ], false, true );
                }

                if (popupPosition == LEFT_EDGE_ALIGNED)
                {
                    popUp.right = 0;
                    popUp.left = 0;
                }
                else if (popupPosition == JUSTIFIED)
                {
                    justifyPopup();
                    popUp.right = undefined;
                }
                else if (popupPosition == RIGHT_EDGE_ALIGNED)
                {
                    leftifyPopup();
                    popUp.right = undefined;
                }
            }
        }
    }
}

A small modification is required to the skin as well for which I have created my CustomDropDownListSkin which has this minor modification :

    
<s:PopUpAnchor id="popUp"
                   displayPopUp.normal="false"
                   displayPopUp.open="true"
                   includeIn="open"
                   bottom="0"
                   popUpPosition="below"
                   itemDestructionPolicy="never"
                   top="{height}"
                   popUpWidthMatchesAnchorWidth="false">

The component provides a popupPosition property which can be set to LEFT_EDGE_ALIGNED, RIGHT_EDGE_ALIGNED or JUSTIFIED depending on the your requirement. Easy as that!

The same trick can be used to achieve any kind of custom alignment as well. All you have to figure out is the starting position of your popup and position the popupAnchor to it.

Download the source code.

How to specify the width of the drop down popup in a Flex DropDownList

In a previous post, it has been seen that it is quite easy to make the drop down of the DropDownList auto expand to the size of the contents. But we have also seen that it is a bit flaky, in the sense, the width of the popup jumps around when it encounters content that is longer than any it has been displaying previously. This is because the drop down uses the DataGroup which creates itemRenderers judicially on a "as needed" basis. In some cases, it might be better if the popup opens up to a fixed width to give a consistent UI performance. Again, the standard DropDownList does not allow for it and we have to make a simple tweak to make this happen.

The DropDownList which essentially extends from SkinnableDataContainer, defines a optional SkinPart - dropDown which defines the drop down list area  to be displayed when the list is open. If you have a look at the DropDownListSkin, we can see that this SkinPart is very much present and is actually the wrapper for our drop down contents. So all we need to do is to give it a fixed width and our work is done.

This can be achieved easily by extending the current DropDownList and using a property which can be used to specify the width of the drop down. The simple solution would look something like below:

package com.codedebugged.dropdown.fixedwidth
{
    import spark.components.DropDownList;
    import spark.components.PopUpAnchor;

    public class AutoExpandOrFixedWidthDropDownList extends DropDownList
    {

        [SkinPart]
        public var popUp : PopUpAnchor;

        private var _dropDownWidth : Number = NaN;

        private var dropDownWidthChanged : Boolean;

        [Bindable]
        public function get dropDownWidth() : Number
        {
            return _dropDownWidth;
        }

        public function set dropDownWidth( value : Number ) : void
        {
            if (_dropDownWidth != value)
            {
                _dropDownWidth = value;
                dropDownWidthChanged = true;
                invalidateProperties();
            }
        }

        override protected function commitProperties() : void
        {
            super.commitProperties();

            if (dropDownWidthChanged)
            {
                dropDownWidthChanged = false;
                setDropDownWidth();
            }
        }

        override protected function partAdded( partName : String, instance : Object ) : void
        {
            super.partAdded( partName, instance );

            if (instance == popUp)
            {
                popUp.popUpWidthMatchesAnchorWidth = false;
            }
            else if (instance == dropDown)
            {
                setDropDownWidth();
            }
        }

        private function setDropDownWidth() : void
        {
            if (dropDown && !isNaN( dropDownWidth ))
            {
                dropDown.width = dropDownWidth;
            }
        }
    }

}

The component provides a simple property - dropDownWidth which can be set by the user and it sets the width of the drop down to it. If this property is not set, the list behaves like an auto expanding one as seen in the previous post. A sample application to show the working of the list can be seen below.



Sometimes, it might be difficult to guess the exact width of the drop down but you would still want it open up to a fixed width encompassing even your largest element in the dataprovider. This is where you can use the typicalItem property of the DropDownList. The List based controls use this property to guess their initial width. If you don't specify it, it takes the first item of the dataProvider. You can use it to your benefit by iterating through the dataProvider and finding your largest content. Specify this item as the typicalItem and it would calculate its size depending on it. I will try to post an example of it later.

The same patch should be applicable for a ComboBox as well.

Still, I think the list can be bettered. As you would have noticed, the drop down always opens up aligned to left edge. There could be a need to open the drop down aligned to the right edge or open it up so that is centered to the open button of the DropDownList. I will take this up in another post.

Download the source code

Auto Expand the width of drop down popup of Flex Spark DropDownList / ComboBox

I am pretty sure many people would have run into this kind of requirement many times. The problem is that when using the Spark controls like the DropDownList, the actual drop down that displays the list of options is defaulted to the width of the DropDownList component. If the length of options are greater than the width of the component, then a horizontal scroll bar appears automatically. Now, horizontal scroll bars are a bit of pain and never look good on a GUI. However, there is a very easy way in which the DropDownList can be made to auto expand to the length of the options it displays.

The key lies in the skin of the DropDownList - DropDownListSkin which uses a PopUpAnchor to control the opening and closing of the drop down options. Here in lies the problem. By default, it sets the popUpWidthMatchesAnchorWidth=true on the PopUpAnchor. To make the DropDownList auto expanding, all that needs to be done is to create a new skin which would be an exact copy of the DropDownListSkin and just set the popUpWidthMatchesAnchorWidth=false as shown below:

    <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
        left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
        popUpPosition="below" popUpWidthMatchesAnchorWidth="false">

As easy as that! Another way of doing it would be through ActionScipt. For this, you need to create a new component extending from the DropDownList and set the popUpWidthMatchesAnchorWidth false in the new component. The source is shown below:

package com.codedebugged.dropdown.autoexpand
{
    import spark.components.DropDownList;
    import spark.components.PopUpAnchor;

    public class AutoExpandDropDownList extends DropDownList
    {

        [SkinPart]
        public var popUp : PopUpAnchor;

        override protected function partAdded( partName : String, instance : Object ) : void
        {
            super.partAdded( partName, instance );

            if (instance == popUp)
            {
                popUp.popUpWidthMatchesAnchorWidth = false;
            }
        }
    }
}

A sample application to show the difference between the normal DropDownList and the auto expanding one :


Notice that the drop down of the list on the right automatically grows. However, the auto expansion is a bit flaky as it jumps around in size when it encounters a lengthier data in the dataprovider. A better way would be to possibly give the drop down a fixed width which I will try to look into in another post. Since the ComboBox and the DropDownList basically work on the same principle, the same trick can be applied to get a auto expanding ComboBox as well.

Download the source