10 Replies Latest reply on Dec 16, 2010 11:00 AM by jmandawg

    Can't change the color of item renderer component when color.selected is set

    jmandawg Level 1

      Hi all,

       

      I'm trying to do something extremely simple.  I have a list control, initially all the items have a background color of white.

      When the user clicks (selects) an item, i want the background to be green to show it is currently selected.

      When they deselect it i want the background to turn blue to show that they previously selected it.

       

      Should be simple, here is the code (Sorry don't see a code tags in this forum text editor)  Does not do what is expected.  The first click to select the item turns green then blue very quickly, subsequent clicks on the same item only turn it green.

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      autoDrawBackground="false"
                      width="100%"  >
          <fx:Script>
              <![CDATA[
                  import mx.events.FlexEvent;
                 
                  import spark.components.List;
                 
                  [Bindable]
                  private var bgColor:int = 0xFFFFFF;
                 
                 
              private function bcClick(event:MouseEvent):void
              {
                  bgColor = 0x0000FF;
              }
              ]]>
          </fx:Script>
          <s:states>
              <s:State name="normal"  />
              <s:State name="hovered"  />
              <s:State name="selected"  />
          </s:states>
         
         
          <s:BorderContainer id="bc" borderColor="#FFFFFF" width="100%" backgroundColor="{bgColor}" backgroundColor.selected="0xFF000" height="30" click="{bcClick(event)}"  >
             
              <s:HGroup left="3" right="3" top="3" bottom="3" width="100%" paddingTop="3" paddingBottom="3">   
                  <s:Label id="lblDesc" text="{data.description}" width="100%" verticalAlign="middle" textAlign="center" />
              </s:HGroup>
          </s:BorderContainer>
      </s:ItemRenderer>
        • 1. Re: Can't change the color of item renderer component when color.selected is set
          saisri2k2 Level 4

          do this.invalidatedisplaylist after you set the color.

           

          or why not do bc.setStyle('backgroundColor',color)? in the event handler?

          • 2. Re: Can't change the color of item renderer component when color.selected is set
            jmandawg Level 1

            I've tried doing both of those things, and neither work.

            • 3. Re: Can't change the color of item renderer component when color.selected is set
              SashaKeith Adobe Employee

              How about maintaining a boolean or something in your data to indicate that an item has been selected before?

              • 4. Re: Can't change the color of item renderer component when color.selected is set
                jmandawg Level 1

                I can maintain a boolean after the click event, but that does not answer the originial question how do i change the BorderContainers background color after it's been clicked on so the user knows it's already been clicked?

                • 5. Re: Can't change the color of item renderer component when color.selected is set
                  SashaKeith Adobe Employee

                  You can override set data and set the style in there based on the Boolean.

                  • 6. Re: Can't change the color of item renderer component when color.selected is set
                    saisri2k2 Level 4

                    on click set data['color'] = some color

                     

                    and in override set data() do - >component.setStyle('bgcoor",data['color']);

                     

                    Message was edited by: saisri2k2

                    • 7. Re: Can't change the color of item renderer component when color.selected is set
                      jmandawg Level 1

                      Sorry guys, neither solution worked.  Why is something so trivial so hard to do?  here is the complete code so you can try for yourself.  To reiterate i want initially all items to have white background color, the selected item will show green, once an item has been selected the background color should be blue when it is not selected to show the user it has previously been selected:

                       

                      Flex 4.0.1 build 477662

                       

                      Main app

                      <?xml version="1.0" encoding="utf-8"?>
                      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                     xmlns:s="library://ns.adobe.com/flex/spark"
                                     xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
                                     creationComplete="cc()">
                          <fx:Declarations>
                              <!-- Place non-visual elements (e.g., services, value objects) here -->
                          </fx:Declarations>
                          <fx:Script>
                              <![CDATA[
                                  import mx.collections.ArrayCollection;
                                  [Bindable]
                                  var myData:ArrayCollection = new ArrayCollection();
                                  private function cc():void
                                  {
                                      var obj:Object = new Object();
                                      obj.name = "John"
                                      myData.addItem(obj);
                                      obj = new Object();
                                      obj.name = "Mark"
                                      myData.addItem(obj);
                                      obj = new Object();
                                      obj.name = "Davy"
                                      myData.addItem(obj);
                                      obj = new Object();
                                      obj.name = "Cassandra"
                                      myData.addItem(obj);
                                      obj = new Object();
                                      obj.name = "Poetry"
                                      myData.addItem(obj);
                                      obj = new Object();
                                      obj.name = "Josie"
                                      myData.addItem(obj);
                                     
                                  }
                              ]]>
                          </fx:Script>
                          <s:List
                              itemRenderer="TestItemRenderer" dataProvider="{myData}">
                              <s:layout>
                                  <s:VerticalLayout/>
                              </s:layout>
                          </s:List>

                      </s:Application>

                       

                      TestItemRenderer.mxml

                      <?xml version="1.0" encoding="utf-8"?>
                      <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                      xmlns:s="library://ns.adobe.com/flex/spark"
                                      xmlns:mx="library://ns.adobe.com/flex/mx"
                                      autoDrawBackground="false"
                                      width="100%"  >
                          <fx:Script>
                              <![CDATA[
                                  import mx.events.FlexEvent;
                                 
                                  import spark.components.List;
                                 
                                  [Bindable]
                                  private var bgColor:int = 0xFFFFFF;
                                 
                                 
                                  private function bcClick(event:MouseEvent):void
                                  {
                                      //bgColor = 0x0000FF;
                                      data.color = 0x0000FF;
                                  }
                                  override public function set data(value:Object):void {
                                      super.data = value;
                                      if(data.color != null)
                                          bc.setStyle("backgroundColor",data.color);
                                     
                                  }
                              ]]>
                          </fx:Script>
                          <s:states>
                              <s:State name="normal"  />
                              <s:State name="hovered"  />
                              <s:State name="selected"  />
                          </s:states>
                         
                         
                          <s:BorderContainer id="bc" borderColor="#000000" width="100%" backgroundColor="{0xFFFFFF}" backgroundColor.selected="0xFF000" height="30" click="{bcClick(event)}"  >
                             
                              <s:HGroup left="3" right="3" top="3" bottom="3" width="100%" paddingTop="3" paddingBottom="3">   
                                  <s:Label id="lblDesc" text="{data.name}" width="100%" verticalAlign="middle" textAlign="center" />
                              </s:HGroup>
                          </s:BorderContainer>
                      </s:ItemRenderer>

                      • 8. Re: Can't change the color of item renderer component when color.selected is set
                        saisri2k2 Level 4

                        Well.. there was a problem with the spark list .. it does not has the invalidateList(); we need to redraw the item renderers ourself.  see the code below for the whole application. it is workin fine.

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                          xmlns:s="library://ns.adobe.com/flex/spark" 
                                          xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
                                          creationComplete="cc()" xmlns:local="*">
                             <fx:Declarations>
                                  <!-- Place non-visual elements (e.g., services, value objects) here -->
                             </fx:Declarations>
                             <fx:Script>
                                  <![CDATA[
                                       import mx.collections.ArrayCollection;
                                       [Bindable]
                                       var myData:ArrayCollection = new ArrayCollection();
                                       private function cc():void
                                       {
                                            var obj:Object = new Object();
                                            obj.name = "John"
                                            myData.addItem(obj);
                                            obj = new Object();
                                            obj.name = "Mark"
                                            myData.addItem(obj);
                                            obj = new Object();
                                            obj.name = "Davy"
                                            myData.addItem(obj);
                                            obj = new Object();
                                            obj.name = "Cassandra"
                                            myData.addItem(obj);
                                            obj = new Object();
                                            obj.name = "Poetry"
                                            myData.addItem(obj);
                                            obj = new Object();
                                            obj.name = "Josie"
                                            myData.addItem(obj);
                                            
                                       }
                                       
                                       public function testitemrenderer1_clickHandler(event:MouseEvent):void
                                       {
                                            for each(var obj:Object in myData){
                                                 if(obj.color != null){
                                                      obj.color = 0x0000ff;
                                                 }else{
                                                      //do nothing
                                                 }
                                            }
                                            lstData.selectedItem['color'] = 0x00ff00; 
                                            lstData.invalidateList();
                                       }
                                  ]]>
                             </fx:Script>
                             <local:ListExtension id="lstData"
                                   dataProvider="{myData}"> 
                                  <local:layout>
                                       <s:VerticalLayout/>
                                  </local:layout>
                                  <local:itemRenderer>
                                       <fx:Component>
                                            <local:TestItemRenderer click="outerDocument.testitemrenderer1_clickHandler(event)"/>
                                       
                                       </fx:Component>
                                  </local:itemRenderer>
                             </local:ListExtension>
                             
                        </s:Application>
                        

                         

                        TestItemRenderer.mxml

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                            xmlns:s="library://ns.adobe.com/flex/spark" 
                                            xmlns:mx="library://ns.adobe.com/flex/mx" 
                                            autoDrawBackground="false" 
                                            width="100%"  >
                             <fx:Script>
                                  <![CDATA[
                                       import mx.events.FlexEvent;
                                       
                                       import spark.components.List;
                                       
                                       [Bindable]
                                       private var bgColor:int = 0xFFFFFF;
                                       
                                       
                                       private function bcClick(event:MouseEvent):void
                                       {
                                            //bgColor = 0x0000FF;
                                            //data.color = 0x0000FF;
                                       }
                                       override public function set data(value:Object):void { 
                                            super.data = value;
                                            if(data.color != null)
                                                 bc.setStyle("backgroundColor",data.color);
                                            
                                       }
                                  ]]>
                             </fx:Script>
                             <s:states>
                                  <s:State name="normal"  />
                                  <s:State name="hovered"  />
                                  <s:State name="selected"  />
                             </s:states>
                             
                             
                             <s:BorderContainer id="bc" borderColor="#000000" width="100%" height="30" click="{bcClick(event)}"  >
                                  
                                  <s:HGroup left="3" right="3" top="3" bottom="3" width="100%" paddingTop="3" paddingBottom="3">    
                                       <s:Label id="lblDesc" text="{data.name}" width="100%" verticalAlign="middle" textAlign="center" />
                                  </s:HGroup>
                             </s:BorderContainer>
                        </s:ItemRenderer>
                        

                         

                        ListExtension.mxml

                        <?xml version="1.0" encoding="utf-8"?>
                        <s:List xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx">
                             <fx:Declarations>
                                  <!-- Place non-visual elements (e.g., services, value objects) here -->
                             </fx:Declarations>
                             <fx:Script>
                                  <![CDATA[
                                       public function invalidateList():void
                                       {
                                            var _itemRenderer:IFactory = itemRenderer;
                                            itemRenderer = null;
                                            itemRenderer = _itemRenderer;
                                       }
                                  ]]>
                             </fx:Script>
                             
                        </s:List>
                        
                         
                        

                        1 person found this helpful
                        • 9. Re: Can't change the color of item renderer component when color.selected is set
                          jmandawg Level 1

                          Thanks, this solution works, but it is not the solution i'm looking for.

                           

                          I wanted to use the view states "backgroundColor.selected" and a data binding to backgroundColor.  I don't want to loop through EVERY element in the list everytime the user clicks an item in the list.  Our final appilcation will have hundreds to a thousand elements in the list, and i don't want to have to run that loop every time the user clicks on an item.

                           

                          Is there a reason why I can't use databinding?

                          Is there a bug with the Spark List control?

                          • 10. Re: Can't change the color of item renderer component when color.selected is set
                            jmandawg Level 1

                            Upon further testing i discovered that if i change my original example in the TestItemRenderer from:

                             

                            <s:BorderContainer id="bc" borderColor="#000000" width="100%" backgroundColor="{bgColor}" backgroundColor.selected="{0x00FF00}" height="30" click="{bcClick(event)}"   >

                             

                            _TO_

                             

                            <s:BorderContainer id="bc" borderColor="#000000" width="100%" backgroundColor.normal="{bgColor}" backgroundColor.hovered="{bgColor}" backgroundColor.selected="{0x00FF00}" height="30" click="{bcClick(event)}"   >

                             

                            IT WORKS!.  I think the issue is changing the default "backgroundColor" while it is in state "backgroundColor.selected"

                            This is seems like bug to me.

                             

                            Thanks for all the help guys.