Рендеринг изображения Flex на основе значения сетки данных

У меня есть сетка данных с местоположением и списком занятий: наблюдение за птицами, катание на лодках, кемпинг. Сетка данных заполняется на основе простого ответа «да» или «нет», если действие предлагается в этом месте. Я хочу заменить да/нет отдельным изображением для каждого действия. Я создал изображение, и я могу изменить изображение, но только на изображение наблюдения за птицами. Мой вопрос: как я могу заставить его проходить через эту сетку данных и отображать изображение в соответствии со значением?

Спасибо.

package widgets.Samples.CononGeocoder2
{
    import mx.containers.HBox;
    import mx.controls.Image;
    import mx.controls.Label;
    import mx.controls.dataGridClasses.*;

    public class ImageRenderer extends HBox
    {
        private var imageReference:Image = null;
        private var imageReference2:Image = null;
        private var imageReference3:Image = null;
        private var lbl:Label = new Label();
        private var img:Image = new Image();
        private var img2:Image = new Image();
        private var img3:Image = new Image();

        override public function set data(value:Object):void
        {
            //if(value != null && imageReference == null)
            {

                for each(data in value)
                {

                if(value.Birdwatching == "yes") {
                    img.source = "assets/images/Birdwatching.png";
                    addChild(img)
                    lbl.text = "(" + value.Birdwatching + ")";
                    img.toolTip = "Birdwatching";
                    imageReference = img;
                    setStyle("verticalAlign", "middle");
                    setStyle("paddingLeft","5");
                }
                if(value.Boating == "yes"){
                    img2.source = "assets/images/Boating.png";
                    addChild(img2)
                    lbl.text = "(" + value.Boating + ")";
                    img2.toolTip = "Boating";
                    imageReference2 = img2;
                    setStyle("verticalAlign", "middle");
                    setStyle("paddingLeft","5");
                }
                if(value.Camping == "yes"){
                    img3.source = "assets/images/Camping.png";
                    addChild(img3)
                    lbl.text = "(" + value.Camping + ")";
                    img3.toolTip = "Camping";
                    imageReference3 = img3;
                    setStyle("verticalAlign", "middle");
                    setStyle("paddingLeft","5");
                }
                //Place

                }
            }


        }

    }
}

person Tristan Forward    schedule 22.05.2011    source источник


Ответы (2)


Самый простой способ — сделать это в MXML. Что-то вроде этого:

<mx:HBox>
    <mx:Image source="assets/images/Birdwatching.png" visible="{data. Birdwatching == 'yes'}" includeInLayout="{data.Birdwatching == 'yes'}" toolTip="Birdwatching" />
    <mx:Image source="assets/images/Boating.png" visible="{data. Boating == 'yes'}" includeInLayout="{data.Boating == 'yes'}" toolTip="Boating" />
    <mx:Image source="assets/images/Camping.png" visible="{data. Camping == 'yes'}" includeInLayout="{data.Camping == 'yes'}" toolTip="Camping" />
    <mx:Label text="{'(' + (data.Birdwatching == 'yes') ? 'Birdwatching' : '' + (data.Boating == 'yes') ? 'Boating' : '' + (data. Camping == 'yes') ? 'Camping' : '' +  ')'}" />
</mx:HBox>

Обратите внимание, что это всего лишь черновик, поэтому вам нужно настроить его для себя.

Если вы предпочитаете использовать ActionScript, изучите жизненный цикл компонентов Flex и переопределить метод updateDisplayList() для отображения и позиционирования подкомпонентов.

person Constantiner    schedule 22.05.2011
comment
Я бы не стал так делать лично. Вы создаете объект изображения для каждого действия, даже если это не нужно. Это не очень эффективно для памяти. Я бы переопределил функцию set data, чтобы проверить значения передаваемых данных, а затем добавить изображения в контейнер с помощью сценария действий. - person Jason Towne; 23.05.2011
comment
Как по мне, для новичка это гораздо более эффективный способ, чем использование некоторых продвинутых техник с ActionScript. - person Constantiner; 23.05.2011
comment
@Constantiner Вы абсолютно правы, это более простое решение, и оно сработает в его ситуации, поэтому я не понизил ваш ответ. Я подумал, что важно также указать на потенциальные проблемы с этим решением на случай, если он захочет изучить и более продвинутые методы. Разве не так мы помогаем новичкам выйти из их статуса новичка? :) - person Jason Towne; 23.05.2011
comment
Вот почему я упомянул жизненный цикл компонентов Flex и updateDisplayList() :) - person Constantiner; 23.05.2011
comment
@Constantiner А, я пропустил эту часть внизу. Хорошие очки и +1. :) - person Jason Towne; 23.05.2011
comment
Я думаю, что я собираюсь пойти трудным путем, используя ActionScript. База данных содержит около 40 действий, я хочу, чтобы код был эффективным, т.к. используется онлайн. Я собираюсь прочитать о жизненном цикле компонентов Flex. Если есть какая-либо другая информация, которую вы могли бы указать мне, чтобы узнать больше о том, что я пытаюсь сделать, это было бы очень признательно. - person Tristan Forward; 25.05.2011

Прежде чем я отвечу на ваш вопрос, я хочу указать на несколько моментов. Рендереры предметов потенциально могут использоваться тоннами, поэтому вы должны быть уверены, что они максимально компактны. Например, вы каждый раз создаете 3 экземпляра компонента изображения. Если вам нужно больше, вы можете создать их по мере необходимости. Кроме того, вы можете захотеть изучить использование Canvas или UIComponent в качестве суперкласса, если вы планируете часто использовать его повторно.

Далее, ваш цикл for не нужен. Вы не перебираете объект значения. Вам просто нужно проверить, правильно ли установлены свойства. Кроме этого, ваш пример должен работать нормально (хотя оптимизация будет отдельным обсуждением. Если по какой-то причине он все еще не работает, используйте отладчик, чтобы увидеть значения для данного элемента.

person dtuckernet    schedule 22.05.2011