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

Flex Popup as a UIComponent

One of the things that I don't like about the Flex Popup's is that despite it being a "view", I can not declare it within mxml. I have to create a separate class for the popup component and then use the PopUpManager API to display it and remove it. Wouldn't be so nice if I could just declare the component to opened up, within my mxml  and I could easily pass/get data from the component using bindings etc.

It is especially useful when creating Skinnable components as I can declare some component as a SkinPart and in the skin declare it to be opened up in a popup.

As I was looking to do something like that, I came across another Flex component - PopUpAnchor.
This is a very useful component which can be used to position a popup control. What this control doesn't do, is to open the popup in modal and centered manner. So I decided to create my own PopUpUIComponent component by stripping this PopUpAnchor of all the positioning code and use it only to open centered/ modal popups.

I quickly hatched a sample application which allows user to input text and then the text is passed onto the popup using bindings. The application can be seen below.


The PopUpUIComponent looks like this:

package
{
    import flash.display.DisplayObject;
    import flash.events.Event;
    import mx.core.FlexGlobals;
    import mx.core.IFlexDisplayObject;
    import mx.core.IUIComponent;
    import mx.core.UIComponent;
    import mx.managers.PopUpManager;
    import mx.styles.ISimpleStyleClient;

    [DefaultProperty( "popUp" )]
    public class PopUpUIComponent extends UIComponent
    {

        public function PopUpUIComponent()
        {
            addEventListener( Event.ADDED_TO_STAGE, addedToStageHandler );
            addEventListener( Event.REMOVED_FROM_STAGE, removedFromStageHandler );
        }

        [Bindable]
        public var isCentered : Boolean = true;

        [Bindable]
        public var isModal : Boolean = true;

        [Bindable]
        public var parentOfPopup : DisplayObject = FlexGlobals.topLevelApplication as DisplayObject;

        private var _displayPopUp : Boolean = false;

        private var _popUp : IFlexDisplayObject;

        public function get displayPopUp() : Boolean
        {
            return _displayPopUp;
        }

        /**
         *  If <code>true</code>, adds the <code>popUp</code> control to the PopUpManager.
         *  If <code>false</code>, it removes the control.
         *
         *  @default false
         */
        public function set displayPopUp( value : Boolean ) : void
        {
            if (_displayPopUp == value)
            {
                return;
            }

            _displayPopUp = value;
            addOrRemovePopUp();
        }

        public function get popUp() : IFlexDisplayObject
        {
            return _popUp
        }

        [Bindable( "popUpChanged" )]

        /**
         *  The IFlexDisplayObject to add to the PopUpManager when the PopupUIComponent is opened.
         *  If the <code>popUp</code> control implements IFocusManagerContainer, the
         *  <code>popUp</code> control will have its
         *  own FocusManager. If the user uses the Tab key to navigate between
         *  controls, only the controls in the <code>popUp</code> control are accessed.
         */
        public function set popUp( value : IFlexDisplayObject ) : void
        {
            if (_popUp == value)
            {
                return;
            }

            _popUp = value;

            if (_popUp is ISimpleStyleClient)
            {
                ISimpleStyleClient( _popUp ).styleName = this;
            }

            dispatchEvent( new Event( "popUpChanged" ));
        }

        private function addOrRemovePopUp() : void
        {
            if (popUp == null)
            {
                return;
            }

            if (DisplayObject( popUp ).parent == null && displayPopUp)
            {
                PopUpManager.addPopUp( popUp, parentOfPopup, isModal );
                if (isCentered)
                {
                    PopUpManager.centerPopUp( popUp );
                }
                if (popUp is IUIComponent)
                {
                    IUIComponent( popUp ).owner = this;
                }
            }
            else if (DisplayObject( popUp ).parent != null && displayPopUp == false)
            {
                removeAndResetPopUp();
            }
        }

        private function addedToStageHandler( event : Event ) : void
        {
            addOrRemovePopUp();
        }

        private function removeAndResetPopUp() : void
        {
            PopUpManager.removePopUp( popUp );
        }

        private function removedFromStageHandler( event : Event ) : void
        {
            if (popUp != null && DisplayObject( popUp ).parent != null)
            {
                removeAndResetPopUp();
            }
        }
    }

}

The opening and the closing of the popup is controlled by displayPopup var (same as in PopUpAnchor).

It is not the most perfect component but it does make things easier for me to use popups in mxml skins.Of course, there are some good alternatives out there if you are using frameworks like Cairngorm which has a nice popup library.

Hope it helps!

Download the source code

Flex Sort.compareFunction and ListCollectionView.getItemIndex trap

I have run into this peculiar problem twice now and to be fair I should have been careful the second time around. But of course my memory failed me and I ended up committing the same mistake again (stupid me :( ). So I decided to document it and hope others don't end making the same error.

To illustrate my case, let me paste a simple application that can be run locally.

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx"

               minWidth="955"

               minHeight="600"

               creationComplete="application1_creationCompleteHandler(event)">

    <fx:Script>

        <![CDATA[

            import mx.collections.ArrayCollection;

            import mx.events.FlexEvent;

            import spark.collections.Sort;

            import spark.events.IndexChangeEvent;

            private var srcArray : Array = [ "Black", "Yellow", "Red", "Green", "White" ];

            [Bindable]

            private var srcCollection : ArrayCollection;

            protected function application1_creationCompleteHandler( event : FlexEvent ) : void

            {

                srcCollection = new ArrayCollection( srcArray );

                var sort : Sort = new Sort();

                sort.compareFunction = colorSort;

                srcCollection.sort = sort;

                srcCollection.refresh();

            }

            protected function combobox1_changeHandler( event : IndexChangeEvent ) : void

            {

                if (comboBox.selectedItem)

                {

                    slctdLbl.text = srcCollection.getItemIndex( comboBox.selectedItem ).toString();

                }

            }

            private function colorSort( a : Object, b : Object, fields : Array = null ) : int

            {

                if (a == "Black")

                {

                    return 1;

                }

                if (b == "Black")

                {

                    return -1;

                }

                return 0;

            }

        ]]>

    </fx:Script>

    <s:VGroup gap="20">

        <s:ComboBox id="comboBox"

                    width="100"

                    change="combobox1_changeHandler(event)"

                    dataProvider="{srcCollection}"/>

        <s:Label id="slctdLbl"/>

    </s:VGroup>

</s:Application>

It is a simple application which creates a collection of colors and gives it to combobox. When you select any item in the combobox, it displays the index of that item in the collection. The only special thing required here is that I need a special order for the colors in which I want the "Black" color to be at the bottom always. So I do the normal thing , create a Sort object and assign to it my special colorSort function and refresh the collection. All good and done. 

I now fire up the application and select different colors and see the index in the collection. 

The Problem:

When I select the color "Black", it gives me index of -1!!!

Which means that Black can not be found in my collection. But how is this possible?? As can be seen in the code above, Black is definitely part of my collection and also is displayed in the combobox. So what has gone wrong?

The problem actually lies in my colorSort method. For some strange reason, Flex actually uses the compareFunction of the Sort to find items in the collection as well! Since my colorSort does not return 0 for Black color ever, the getItemIndex returns -1 for it.

The ASDoc on the compareFunction of mx.collections.Sort says :

This function must return the following value:

• -1, if the Object a should appear before the Object b in the sorted sequence
• 0, if the Object a equals the Object b
• 1, if the Object a should appear after the Object b in the sorted sequence 

This looks a bit strange to me. The values -1 and 1 refer to a sorted sequence. But the value of 0 talks about equality of the objects not just in terms of equality of precedence in the sort order.
This can be very confusing to people as well as very easy to overlook as I have done in the past. Also the consequences might never be noticed in a testing phase and can actually occur straightaway in the production environment. For me, this a very dangerous situation and this needs to be fixed by the Apache Flex team.

In my view, sorting and fetching are two very different things and they should be kept seperate from each other. There is a flex bug also raised for the same - FLEX-22649

The Solution:

The solution for this issue is very simple. All you have to do is to add the following snippet to the compareFunction at the beginning:

                if (a == b)

                {

                    return 0;

                }

Although it sounds silly, that every sortCompare Function in the world needs to have this piece of code. But atleast, you can be sure that your application will not throw up surprises on just a simple call to getItemIndex.

Hope this post helps someone out there.