2011-05-22 4 views
0

У меня есть datagrid с указанием места и списка действий Наблюдение за птицами, катание на лодках, кемпинг. Datagrid заполняется на основе простого да или нет, если действие предлагается в этом месте. Я хочу заменить yes/no отдельным изображением для каждого действия. Я создал imagerender, и я могу получить изображение для изменения, но только для наблюдения за птицами. Мой вопрос в том, как я могу заставить его прокручивать этот файл данных и отображать изображение в соответствии со значением?Flex imagerender на основе значения datagrid

Спасибо.

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

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

+0

Я бы не стал сделайте это так лично. Вы создаете объект изображения для каждого вида деятельности, даже если это не нужно. Это не очень эффективно для памяти. Я бы переопределил функцию 'set data', чтобы проверить значения передаваемых данных, а затем добавьте изображения в контейнер с помощью actionscript. –

+0

Что касается меня, это гораздо более эффективный способ для новичков, чем использование некоторых современных методов с помощью ActionScript. – Constantiner

+0

@Constantiner Вы абсолютно правы, это более легкое решение и будет работать в его ситуации , поэтому я не ответил на ваш ответ. Я подумал, что важно также указать на потенциальные проблемы с этим решением, если он захочет d, чтобы изучить более продвинутые методы. Разве это не то, как мы помогаем выпускникам-новичкам получить статус новичков? :) –

2

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

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

Смежные вопросы