3 Replies Latest reply on May 8, 2009 11:11 AM by Gregory Lafrance

    Controlling an itemRenderer

    SiHoop Level 1

      I'm using an itemRenderer (class barChartRenderer0.mxml shown below) to style columns for a ColumnChart. The itemRenderer uses the function updateDisplayList, but I don't know when the function is executed or where the parameters (i.e. unscaledWidth and unscaledHeight) come from.Where do the paraments come from and how can I control the values that are passed to the function?

       

      Also, I'd like to pass the itemRenderer a value that controls the width of the columns, but am not sure how to do so (it's tied to the variable myVar)-- can I set myVar to be public and then have it act as a global variable? I believe that this would make the column widths change automatically when the value of myVar changes.

       

      Please note that the itemRenderer uses the Degrapha class and the Degrapha_Beta3.swc has been placed into into my libs folder (I'll elaborate if this does not make sense).

       

      Main file:

      <?xml version="1.0"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">           
      <mx:Script>
          <![CDATA[
          [Bindable] public var myData:XML ;
          private function init():void {
              myData=
      <TABLE>
         <EXAMPLE1>
            <difficulty> 0.8 </difficulty>
            <discrimination> 0.4 </discrimination>
            <item> 1 </item>
         </EXAMPLE1>
         <EXAMPLE1>
            <difficulty> 0.8 </difficulty>
            <discrimination> 0.3 </discrimination>
            <item> 2 </item>
         </EXAMPLE1>
         <EXAMPLE1>
            <difficulty> 0.5 </difficulty>
            <discrimination> 0.7 </discrimination>
            <item> 3 </item>
         </EXAMPLE1>
      </TABLE>   
          }
          ]]>
      </mx:Script>
      <!-- Clear background elements in the chart  -->
      <mx:Array id="clear"/>
      <mx:Canvas     id="whiteCanvas" backgroundColor="0xffffff" height="500" width="1000">                            
          <mx:ColumnChart id="chart1"
                          height="400"
                          width="600"
                           dataProvider="{myData.EXAMPLE1}"
                           type="overlaid"
                           backgroundElements="{clear}"
                           horizontalCenter="0"
                           seriesFilters="[]">
              <mx:horizontalAxis>
                 <mx:CategoryAxis id="c1" dataProvider="{myData.EXAMPLE1}" categoryField="item"/>
              </mx:horizontalAxis>
              <mx:series>               
                 <!-- The columns -->
                 <mx:ColumnSeries itemRenderer="barChartRenderer0"  yField="difficulty" alpha=".2"/>
                <mx:ColumnSeries itemRenderer="barChartRenderer0"  yField="discrimination" alpha=".6"/>
              </mx:series>
           </mx:ColumnChart>   
      </mx:Canvas>
      </mx:Application>

       

      barChartRenderer0.mxml:

       

      <?xml version="1.0" encoding="utf-8"?>
      <GraphicBorderSkin  xmlns:mx="http://www.adobe.com/2006/mxml"  xmlns="http://www.degrafa.com/2007">
          <mx:Script>
              <![CDATA[
                  [Bindable] private var awidth:Number=0;
                  [Bindable] private var aheight:Number=0;          
                  [Bindable] private var myVar:Number=0;          
                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
                      super.updateDisplayList(unscaledWidth, unscaledHeight);
                      awidth = unscaledWidth;
                      aheight = unscaledHeight;
                      myVar=10;
                      trace("sizes="+aheight+" "+awidth)               
                      }
              ]]>
          </mx:Script>
      <!-- Fill for the bar chart columns  -->
          <fills>
               <LinearGradientFill  id="color1" >
                   <GradientStop color="#548301"/>
              </LinearGradientFill>
          </fills>
          <geometry>
              <!-- Draw the barchart columns  -->
              <RoundedRectangleComplex     fill="{color1}" width="{myVar}" height="{aheight}"/>       
          </geometry>
      </GraphicBorderSkin>

        • 1. Re: Controlling an itemRenderer
          Gregory Lafrance Level 6

          updateDisplayList() will have its parameters passed in automatically by Flex, you just need to modify what goes on in the method if necessary.

           

          updateDisplayList() is executed at various times by Flex, for example if a dataProvider changes and that will affect the UI, it gets called. If you resize the browser and have auto-layout, it gets called. You can force it to be called using validateNow(), which you may need to do as sometimes your code will not take effect until the next redraw, and you may want to force that to occur sooner with validateNow().

          1 person found this helpful
          • 2. Re: Controlling an itemRenderer
            SiHoop Level 1

            What are the parameters unscaledWidth and unscaledHeight that get sent to the method?

            • 3. Re: Controlling an itemRenderer
              Gregory Lafrance Level 6

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

               

               

              unscaledWidth 

              Specifies the width of the component, in pixels, in the  component's coordinates, regardless of the value of the scaleX property of the  component. This is the width of the component as determined by its parent  container.

               

               

               

              unscaledHeight 

              Specifies the height of the component, in pixels, in the  component's coordinates, regardless of the value of the scaleY property of the component. This is the height of the  component as determined by its parent container.

               

               

               

              Scaling occurs in Flash Player or AIR, after updateDisplayList() executes. For example, a component with  an unscaledHeight value of  100, and with a scaleY property of 2.0, appears 200  pixels high in Flash Player or AIR.