Фоновое изображение, которое показывает, когда список пуст во Flex

Question

Как бы я отобразил backgroundImage на List, когда List пуст?

В данный момент список заполняется, когда элементы помещаются внутрь после перетаскивания, но я бы предпочел решение, которое проверяет любые изменения данных, чтобы определить, является ли список пустым.

List наследует backgroundImage от ScrollControlBase, но как лучше всего отобразить его, когда список пуст, и исчезнуть при добавлении элемента.

Есть предложения?

Спасибо!

Answer 1

В прошлом я делал это с состояниями для компонента. Быстрый и грязный пример будет выглядеть примерно так в вашем пользовательском компоненте:

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

// anything else you need

</mx:List>

и, конечно, создание этих состояний в компоненте, когда NoItemsStates изменяет фоновое изображение, или если ваш компонент является контейнером, таким как Canvas, тогда вы можете иметь состояние, не отображающее List вообще.

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>

Вот как я подхожу к этому, проверяя длину dataProvider. В вашем случае вы сделаете это, когда сброс будет завершен.

Answer 3

Вы можете расширить элемент управления List и переопределить updateDisplayList (). Нарисуйте backgroundImage, если dataProvider.length == 0, иначе вызовите super.updateDisplayList () для получения нормального поведения List Это облегчит повторное использование нового элемента управления List.

Answer 4

Используйте то же свойство, установите изображение равным нулю, когда у вас есть какие-либо данные Вы также можете взглянуть на пользовательский ItemRenderers.