Flex imagerender на основе значения сетки данных - PullRequest
Новая
       40

Flex imagerender на основе значения сетки данных

0 голосов
/ 22 мая 2011

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

Спасибо. 

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

                }
            }


        }

    }
}

Ответы [ 2 ]

2 голосов
/ 22 мая 2011

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

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

2 голосов
/ 22 мая 2011

Самый простой способ сделать это в 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() метод отображения и позиционирования подкомпонентов.

...