Background image that shows when list is empty in Flex

Question

How would I display a backgroundImage on a List when the List is empty?

At the moment the list is populated when items are dropped inside after a drag-and-drop but I would prefer a solution that checks for any change to the data to determine if the list is empty.

The List inherits a backgroundImage from its ScrollControlBase but what would be the best way to make it appear when the list is empty and disappear when an item is added.

Any suggestions?

Thanks!

Answer 1

In the past, I've done it with states for a component. Quick and dirty example would be something like this in your custom component:

<mx:List currentState="{(listItemsDataProvider.length > 0) ? 'HasItemsState' : 'NoItemsState'}">

// anything else you need

</mx:List>

and of course creating those states in the component, with the NoItemsStates changing the background image, or if your component is a container, like a Canvas , then you can have the state not display the List at all.

Answer 2

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable] public var listItems:ArrayCollection = new ArrayCollection();

            private function removeAllItemsFromList():void
            {
                this.listItems.removeAll();
                backgroundCheck()
            }

            private function addItemToList():void
            {
                this.listItems.addItem({data:null,label:"test"});
                backgroundCheck()
            }

            private function backgroundCheck():void
            {
                if(this.listItems.length>0)
                {
                    this.myList.setStyle("backgroundImage", null)
                }
                else
                {
                    this.myList.setStyle("backgroundImage", "me.png")
                }               
            }
        ]]>
    </mx:Script>
    <mx:VBox width="100%" height="100%">
        <mx:List id="myList" width="100%" height="100%" backgroundImage="me.png" dataProvider="{this.listItems}"/>
        <mx:HBox width="100%">
            <mx:Button id="addItemButton" click="addItemToList()" label="add item"/>
            <mx:Button id="removeItemsButton" click="removeAllItemsFromList()" label="remove all items"/>
        </mx:HBox>
    </mx:VBox>
</mx:Application>

This is how I would approach it, checking the dataProvider length. In your case you'd do so when the drop is complete.

Answer 3

You could extend the List control and override updateDisplayList(). Draw the backgroundImage if dataProvider.length == 0 else call super.updateDisplayList() to get normal List behavior. This will make the new List control easy to reuse if you need to.

Answer 4

Use the same property, set the image to null when you have some data. You may take a look at custom ItemRenderers as well.