2 Replies Latest reply on May 28, 2011 9:19 AM by Shongrunden

    Decorator not changing when you click on listitem

    HeylenThibault

      Dear,

       

      I'm developing a mobile application for my thesis and I was working with flash builder burrito. I now installed the new SDK and flashbuilder 4.5.

      I changed my code a little bit so it would work with the new SDK.

       

      But there's one problem I can't solve.

      I have a list with objects in it. When the element is not checked you can see a gray V, when you click on it it should become a green V. So the user can see wich one is checked and wich not. Here for I use a list with an itemrenderer.

       

      The problem is when he loads the page he can set the decorator correctly. But when you click on a listitem he doesn't change the decorator.

      I've allready tried to debug , and the debugger is going to the itemrenderer and setting the decorator but de decorator doesn't change in my list.

      I made a small example to show:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" title="Home"
                initialize="init()">
      
           <fx:Script>
                <![CDATA[
                     import mx.collections.ArrayCollection;
                     
                     [Bindable]
                     private var m_list:ArrayCollection = new ArrayCollection();
                     
                     private function init():void
                     {
                               for(var i:int = 0 ; i<5 ; i++)
                               {
                                    var test:SelectableItem = new SelectableItem("Item"+i);
                                    m_list.addItem(test);
                               }
                     }
      
                     protected function list1_clickHandler(event:MouseEvent):void
                     {
                          SelectableItem(m_list.getItemAt(listID.selectedIndex)).toggleSelection();                              
                     }
                     
                ]]>
           </fx:Script>
      
           <s:List id="listID"
                     x="0" y="99" width="480" height="596"
                     dataProvider="{m_list}"
                     itemRenderer="views.ListItemRenderer"
                     click="list1_clickHandler(event)"/>
           
      </s:View>
      
      

       

      This is my class:

       

      package views
      {
           public class SelectableItem
           {
                private var m_name:String;
                private var m_selected:Boolean;
                
                public function SelectableItem(name:String,selected:Boolean = false)
                {
                     m_name = name;
                     m_selected = selected;
                }
      
                public function get name():String
                {
                     return m_name;
                }
      
                public function set name(value:String):void
                {
                     m_name = value;
                }
                [Bindable]
                public function get selected():Boolean
                {
                     return m_selected;
                }
      
                public function set selected(value:Boolean):void
                {
                     m_selected = value;
                }
                
                public function toggleSelection():void
                {
                     selected = !selected;
                }
      
           }
      }
      

       

      and here is my itemrenderer:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                               xmlns:s="library://ns.adobe.com/flex/spark"  iconWidth="64" iconHeight="64" 
                               labelFunction="itemLabelFunction">
           <fx:Script>
                <![CDATA[
                     
                     [Embed(source="checked.png")]  
                     public var checked:Class;
                     
                     [Embed(source="unchecked.png")] 
                     public var unchecked:Class;
                     
                     override public function set data(value:Object):void
                     {
                          super.data = value;
                          if(value != null)
                          {
                               if(value.selected)
                               {
                                    decorator = checked;
                                    setStyle("color", "red");
                               }
                               else
                               {
                                    decorator = unchecked;
                                    setStyle("color", "black");
                               }
                          }
                     }
                     
                     
                     
                     private function itemLabelFunction(item:Object):String
                     {
                          return item.name;
                     }
                ]]>
           </fx:Script>
           
      </s:IconItemRenderer>
      
      

       

      As you can see I also use setStyle and change the color when you click it. This is because that works. This is only temporary offcourse.

      And I think that's a strange thing that setStyle does work but setting the decorator to a new image doesn't.

       

      I hope my question was clear and that someone can help me.

       

      Thanks in advance.

       

      Kind regards,

       

      Thibault Heylen