15 Replies Latest reply on Sep 5, 2010 1:20 AM by bryant_16

    How to add graphics to a List or TextArea

    bryant_16 Level 1

      Hi guys,

       

      I have this circle which I used to draw a simple graphics circle:

       

      graphics.beginFill(5597999);

      graphics.drawCircle(0,0,1);

      graphics.endFill();

       

      I want to add this circle into the list besides the text, which means something like this:

       

      circle1 Legend1

      circle2 Legend2

      circle3 Legend3

       

      Basically it is like a legend list which I need the circle to be the legend for the point markers on my application (map).

       

      Anyone can help me on this?

        • 1. Re: How to add graphics to a List or TextArea
          Subeesh Arakkan Level 4

          Hi,

           

          Create a custom ItemRenderer and do the drawing inside the renderer.

          • 2. Re: How to add graphics to a List or TextArea
            bryant_16 Level 1

            Hi there,

             

            I'm currently lost at how to go about doing it.

             

            I have this:

             

            <mx:Canvas x="887" y="21" width="269" height="253">

            <mx:List x="19" y="14" height="229" id="dynamicLegend" editable="false"

            width="240"/>

            </mx:Canvas>

             

            How do you add the ItemRenderer and do the drawing inside?

             

            Thanks and regards,

            Bernard

            • 3. Re: How to add graphics to a List or TextArea
              Subeesh Arakkan Level 4

              Hi,

               

              Check this simple test.

               

              <mx:List width="200"
                        itemRenderer="ListRenderer">
                        <mx:dataProvider>
                             <mx:Array>
                                  <mx:Object label="AL" data="Montgomery"/>
                                  <mx:Object label="AK" data="Juneau"/>
                                  <mx:Object label="AR" data="Little Rock"/>
                             </mx:Array>
                        </mx:dataProvider>
                   </mx:List>
              

               

               

              and herer is the renderer

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="190" height="30">
                   <mx:Script>
                        <![CDATA[
                             override public function set data(value:Object):void
                             {
                                  super.data = value;
                                  invalidateDisplayList();
                             }
                             
                             override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                             {
                                  super.updateDisplayList(unscaledWidth,unscaledHeight);
                                  draw();
                             }
                             
                             private function draw():void
                             {
                                  graphics.clear();
                                  graphics.beginFill(5597999);
                                  graphics.drawCircle(5,15,5);
                                  graphics.endFill();
                             }
                        ]]>
                   </mx:Script>
                   <mx:Label verticalCenter="0" text="{data.label}" left="20"/>
              </mx:Canvas>
              
              • 4. Re: How to add graphics to a List or TextArea
                bryant_16 Level 1

                Can I check with you because the List is dynamic and it will only trigger

                when I want to add a legend (circle and text) to it. So I can't use the

                dataproviders with it right?

                 

                Meaning to say, I got this event to trigger the adding of the legends to the

                list, so the list got to be dynamic, is it possible? And by the way, how do

                you trigger the adding of legends?

                 

                Thanks and regards,

                Bernard

                • 5. Re: How to add graphics to a List or TextArea
                  Subeesh Arakkan Level 4

                  You can set the dataProvider dynamically.

                   

                  list.dataProvider = your new dataprovider;
                  
                  • 6. Re: How to add graphics to a List or TextArea
                    Subeesh Arakkan Level 4
                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                         layout="horizontal" minWidth="955" minHeight="600">
                         
                         <mx:Script>
                              <![CDATA[
                                   import mx.collections.ArrayCollection;
                                   
                                   [Bindable]private var dp:ArrayCollection = new ArrayCollection();
                                   
                                   private function addItem():void
                                   {
                                        var item:Object = new Object();
                                        item.label = "New item";
                                        dp.addItem(item);
                                   }
                              ]]>
                         </mx:Script>
                         <mx:Button label="Add Item" click="addItem()"/>
                         <mx:List width="200" dataProvider="{dp}" itemRenderer="ListRenderer">
                         </mx:List>
                         
                    </mx:Application>
                    
                    
                    • 7. Re: How to add graphics to a List or TextArea
                      bryant_16 Level 1

                      Hi there, just saw your post of the dynamic dataprovider, able to pass in a dynamic String into the List!

                       

                      For now, how do I pass in the colors of the circle?

                       

                       

                      private function draw():void

                      {

                      graphics.clear();

                      graphics.beginFill(5597999);

                      graphics.drawCircle(5,15,5);

                      graphics.endFill();

                      }

                       

                       

                      For this part here, graphics.beginFill(pass in color here); so that I can decide on what color to pass in, as a Number inside graphics.beginFill(number)

                      • 8. Re: How to add graphics to a List or TextArea
                        bryant_16 Level 1

                        For this: list.dataProvider = your new dataprovider;

                         

                        Where do I put it in?

                        • 9. Re: How to add graphics to a List or TextArea
                          Subeesh Arakkan Level 4

                          Check the above sample with the arraycollection. Since it is bound to the dataprovider of the list, the list will updated automatically whenever the arraycollection is changed.

                           

                          Check for the Binding with arrays in the following docs page

                           

                          http://livedocs.adobe.com/flex/3/html/help.html?content=databinding_4.html

                          • 10. Re: How to add graphics to a List or TextArea
                            bryant_16 Level 1

                            Hi there,

                             

                            This is what I'm trying to achieve.

                             

                            I got this main.mxml and ListRenderer.mxml which I have created from the

                            codes that you gave me earlier.

                             

                            On trigger, I will need to pass in a "String" and a color code to add to the

                            List which will appear something like this:

                            circle(color of the circle:color code) "String"

                            circle(different color from the previous  one) "String2(different from the

                            first String)"

                             

                            In this way, in the List, I will have different colored circles with

                            different String and it will add on, when the trigger is triggered.

                             

                            How do I achieve this?

                             

                            Thanks.

                             

                            Hope to hear from you soon.

                             

                            Regards,

                            Bernard

                            • 11. Re: How to add graphics to a List or TextArea
                              bryant_16 Level 1

                              Erm okay, but how do you add the circle graphics into the array collection?

                              For the circle to change dynamically.

                              • 12. Re: How to add graphics to a List or TextArea
                                Subeesh Arakkan Level 4

                                Main application.

                                <?xml version="1.0" encoding="utf-8"?>
                                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                                     layout="horizontal" minWidth="955" minHeight="600">
                                     
                                     <mx:Script>
                                          <![CDATA[
                                               import mx.collections.ArrayCollection;
                                               
                                               [Bindable]private var dp:ArrayCollection = new ArrayCollection();
                                               
                                               private function addItem():void
                                               {
                                                    var item:Object = new Object();
                                                    item.label = "New item";
                                                    item.color = getRandomColor()// apply your logic to get the correct color here 
                                                    dp.addItem(item);
                                               }
                                               
                                               private function getRandomColor():uint
                                               {
                                                    var redBias:Number = 0xFF;
                                                    var greenBias:Number = 0xFF;
                                                    var blueBias:Number = 0xFF;
                                                    
                                                    var ct:ColorTransform = new ColorTransform(1,1,1,1,Math.random()*redBias,Math.random()*greenBias,Math.random()*blueBias);
                                                    var color:uint = ct.color;
                                                    return color;
                                               }
                                          ]]>
                                     </mx:Script>
                                     <mx:Button label="Add Item" click="addItem()"/>
                                     <mx:List width="200" dataProvider="{dp}" itemRenderer="ListRenderer">
                                     </mx:List>
                                     
                                </mx:Application>
                                
                                

                                 

                                 

                                Renderer.

                                 

                                <?xml version="1.0" encoding="utf-8"?>
                                <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="190" height="30">
                                     <mx:Script>
                                          <![CDATA[
                                               override public function set data(value:Object):void
                                               {
                                                    super.data = value;
                                                    invalidateDisplayList();
                                               }
                                               
                                               override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                                               {
                                                    super.updateDisplayList(unscaledWidth,unscaledHeight);
                                                    if(data)
                                                         draw();
                                               }
                                               
                                               private function draw():void
                                               {
                                                    graphics.clear();
                                                    graphics.beginFill(data.color);
                                                    graphics.drawCircle(5,15,5);
                                                    graphics.endFill();
                                               }
                                          ]]>
                                     </mx:Script>
                                     <mx:Label verticalCenter="0" text="{data.label}" left="20"/>
                                </mx:Canvas>
                                
                                
                                • 13. Re: How to add graphics to a List or TextArea
                                  bryant_16 Level 1

                                  Hi there,

                                   

                                  I tested it out and it's working fine but when I traced the application, I

                                  came across this:

                                  warning: unable to bind to property 'label' on class 'Object' (class is not

                                  an IEventDispatcher)

                                   

                                  Is there anything that I can rectified it?

                                  • 14. Re: How to add graphics to a List or TextArea
                                    Subeesh Arakkan Level 4

                                    That is due to the binding on the label. You can get rid of the warning by setting it dynamically.

                                     

                                    <?xml version="1.0" encoding="utf-8"?>
                                    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="190" height="30">
                                         <mx:Script>
                                              <![CDATA[
                                                   
                                                   private var _dataChanged:Boolean;
                                                   override public function set data(value:Object):void
                                                   {
                                                        if(!value)
                                                             return;
                                                        super.data = value;
                                                        _dataChanged = true;
                                                        invalidateDisplayList();
                                                   }
                                                   
                                                   override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                                                   {
                                                        super.updateDisplayList(unscaledWidth,unscaledHeight);
                                                        if(_dataChanged)
                                                        {
                                                             _dataChanged = false;
                                                             draw();
                                                             lbl.text = data.label;
                                                        }
                                                   }
                                                   
                                                   private function draw():void
                                                   {
                                                        graphics.clear();
                                                        graphics.beginFill(data.color);
                                                        graphics.drawCircle(5,15,5);
                                                        graphics.endFill();
                                                   }
                                              ]]>
                                         </mx:Script>
                                         <mx:Label id="lbl" verticalCenter="0" left="20"/>
                                    </mx:Canvas>
                                    
                                    
                                    • 15. Re: How to add graphics to a List or TextArea
                                      bryant_16 Level 1

                                      Hi there, now the part is working that when I checked on a checkbox, it will trigger the ListRenderer.mxml and create a circle followed by a string in the List. Now, how do I when unchecked on the checkbox, removed the corresponding data in the List?