7 Replies Latest reply on May 12, 2009 8:45 PM by SiHoop

    Passing a variable to a component

    SiHoop Level 1

      I'm using the code below to create and format a chart. The main file draws the columns in the chart. The component serves as an itemRenderer to format the columns. I want to be able to control the width of the columns by using a slider. The slider would set a variable and the variable would be passed to the component. However, I don't know how to send the variable to the component. So my question is this: How to I change the value of the variable that is tied to the slider and pass it to the component?

       

      Component:

       

      <?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 columnWidth:Number=5;          
                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
                      super.updateDisplayList(unscaledWidth, unscaledHeight);
                      aheight = unscaledHeight;               
                      }
              ]]>
          </mx:Script>

      <!-- Fill the bar chart columns.sh  -->
          <fills>
               <LinearGradientFill  id="green2" angle="90">
                   <GradientStop alpha=".9" color="#3333ff"/>
               </LinearGradientFill>
          </fills>
         <strokes>
               <SolidStroke id="darkStroke" color="#000" weight="1" alpha=".8"/>
         </strokes>
         <geometry>
              <!-- Draw the barchart columns.sh  -->
              <RoundedRectangleComplex     fill="{green2}" width="{columnWidth}" height="{aheight}"/>       
         </geometry>
      </GraphicBorderSkin>

       

      Main file:

      <?xml version="1.0"?>
      <mx:Application backgroundGradientColors="[0xA30900, 0xE22B03]" xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="myService.send()">           
      <mx:Script>
          <![CDATA[
          import mx.rpc.events.ResultEvent
          [Bindable] public var myData:XML ;
          [Bindable]public var xx:Number;          
         
          private function resultHandler(event:ResultEvent):void {
              //myData = event.result as XML   
              myData=
      <TABLE>
         <SAMPLE1>
            <score> 55 </score>
            <freq> 3 </freq>
         </SAMPLE1>
         <SAMPLE1>
            <score> 56 </score>
            <freq> 4 </freq>
         </SAMPLE1>
         <SAMPLE1>
            <score> 57 </score>
            <freq> 7 </freq>
         </SAMPLE1>
      </TABLE>   
          }
          private function updateInformation():void {
              trace("update")
          }
          ]]>
      </mx:Script>
      <mx:Style source="assets/css/cde.css"/>
      <mx:HTTPService id="myService" url="sample1.xml" result="resultHandler(event)" resultFormat="e4x"/> 
      <!-- Clear all background elements in the chart  -->
      <mx:Array id="bge"/>
      <mx:Canvas     id="whiteCanvas" backgroundColor="0xffffff" height="500" width="1000">                            
          <mx:ColumnChart id="myCChart"
                          height="400"
                          width="900"
                           dataProvider="{myData.SAMPLE1}"
                           type="overlaid"
                           showDataTipTargets="false"
                           showDataTips="false"
                           backgroundElements="{bge}"
                           horizontalCenter="0"
                           seriesFilters="[]">
              <mx:horizontalAxis>
                 <mx:CategoryAxis id="c1" dataProvider="{myData.SAMPLE1}" categoryField="score"/>
              </mx:horizontalAxis>
              <mx:series>               
                 <!-- The columns -->
                 <mx:ColumnSeries itemRenderer="skins.barChartRenderer"  yField="freq" alpha=".2"/>
              </mx:series>
           </mx:ColumnChart>   
               <mx:VSlider id="mySlider" x="10" y="91" minimum="0" maximum="100" enabled="true" liveDragging="true" change="updateInformation()" height="222"/>
      </mx:Canvas>
      </mx:Application>

        • 1. Re: Passing a variable to a component
          Gregory Lafrance Level 6

          For a truely loosely coupled system, the change to the slider value would fire off a custom event containing the new value as a property of the custom event, and the chart would listen for the event.

           

          If you don't want to use custom events, just bind the relevant chart variable to an mx.core.Application.application variable.

          • 2. Re: Passing a variable to a component
            run,ryan! Level 3

            Revert~~~~~~~~

            trigger change event on slider

            changeHandler():void

            {

                 myCChart.width = mySlider.value;

            }

             

            to answer your question about Passing a variable to a component

            you can create another singleton model and everyone get value from that model or

            refer to Application.application.root.mySlider.value in your component or

            google for it, this is a faq

            • 3. Re: Passing a variable to a component
              Michael Borbor Level 4

              In your component declare a public variable and make it bindable and 

              you'll be able to acces it from your main app.

               

              Sincerely,

               

              Michael

               

              El 11/05/2009, a las 16:18, SiHoop <forums@adobe.com> escribió:

               

              >

              I'm using the code below to create and format a chart. The main file 

              draws the columns in the chart. The component serves as an 

              itemRenderer to format the columns. I want to be able to control the 

              width of the columns by using a slider. The slider would set a 

              variable and the variable would be passed to the component. However, 

              I don't know how to send the variable to the component. So my 

              question is this: How to I change the value of the variable that is 

              tied to the slider and pass it to the component?

              >

              Component:

              >

              <?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[

                          private var awidth:Number=0;

                          private var aheight:Number=0;

                          private var columnWidth:Number=5;

                          override protected function 

              updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

                              super.updateDisplayList(unscaledWidth, 

              unscaledHeight);

                              aheight = unscaledHeight;

                              }

                      ]]>

                  </mx:Script>

              <!-- Fill the bar chart columns.sh  -->

                  <fills>

                       <LinearGradientFill  id="green2" angle="90">

                           <GradientStop alpha=".9" color="#3333ff"/>

                       </LinearGradientFill>

                  </fills>

                 <strokes>

                       <SolidStroke id="darkStroke" color="#000" weight="1" 

              alpha=".8"/>

                 </strokes>

                 <geometry>

                      <!-- Draw the barchart columns.sh  -->

                      <RoundedRectangleComplex     fill="

              width="" height=""/>

                 </geometry>

              </GraphicBorderSkin>

              >

              Main file:

              <?xml version="1.0"?>

              <mx:Application backgroundGradientColors="[0xA30900, 0xE22B03]" 

              xmlns:mx="http://www.adobe.com/2006/mxml

              creationComplete="myService.send()">

              <mx:Script>

                  <![CDATA[

                  import mx.rpc.events.ResultEvent

                  public var myData:XML ;

                  public var xx:Number;

              >

                  private function resultHandler(event:ResultEvent):void {

                      //myData = event.result as XML

                      myData=

              <TABLE>

                 <SAMPLE1>

                    <score> 55 </score>

                    <freq> 3 </freq>

                 </SAMPLE1>

                 <SAMPLE1>

                    <score> 56 </score>

                    <freq> 4 </freq>

                 </SAMPLE1>

                 <SAMPLE1>

                    <score> 57 </score>

                    <freq> 7 </freq>

                 </SAMPLE1>

              </TABLE>

                  }

                  private function updateInformation():void {

                      trace("update")

                  }

                  ]]>

              </mx:Script>

              <mx:Style source="assets/css/cde.css"/>

              <mx:HTTPService id="myService" url="sample1.xml" 

              result="resultHandler(event)" resultFormat="e4x"/>

              <!-- Clear all background elements in the chart  -->

              <mx:Array id="bge"/>

              <mx:Canvas     id="whiteCanvas" backgroundColor="0xffffff" 

              height="500" width="1000">

                  <mx:ColumnChart id="myCChart"

                                  height="400"

                                  width="900"

                                   dataProvider="{myData.SAMPLE1}"

                                   type="overlaid"

                                   showDataTipTargets="false"

                                   showDataTips="false"

                                   backgroundElements=""

                                   horizontalCenter="0"

                                   seriesFilters="[]">

                      <mx:horizontalAxis>

                         <mx:CategoryAxis id="c1" dataProvider="{myData.SAMPLE1}" 

              categoryField="score"/>

                      </mx:horizontalAxis>

                      <mx:series>

                         <!-- The columns -->

                         <mx:ColumnSeries itemRenderer="skins.barChartRenderer"  

              yField="freq" alpha=".2"/>

                      </mx:series>

                   </mx:ColumnChart>

                       <mx:VSlider id="mySlider" x="10" y="91" minimum="0" 

              maximum="100" enabled="true" liveDragging="true" 

              change="updateInformation()" height="222"/>

              </mx:Canvas>

              </mx:Application>

              >

              • 4. Re: Passing a variable to a component
                SiHoop Level 1

                Michael,

                I'm not sure I understand-- how would I access the public variable from the main application? For example, in the code below, www is public: How could I access it's value from the main app?

                Thanks for your help.

                 

                <?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] public var www:Number=110;
                            [Bindable] private var awidth:Number=0;
                            [Bindable]private var aheight:Number=0;          
                            [Bindable]private var columnWidth:Number=5;          
                            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
                                super.updateDisplayList(unscaledWidth, unscaledHeight);
                                aheight = unscaledHeight;               
                                }
                        ]]>
                    </mx:Script>

                 

                <!-- Fill the bar chart columns.sh  -->
                    <fills>
                         <LinearGradientFill  id="green2" angle="90">
                             <GradientStop alpha=".9" color="#3333ff"/>
                         </LinearGradientFill>
                    </fills>
                   <strokes>
                         <SolidStroke id="darkStroke" color="#000" weight="1" alpha=".8"/>
                   </strokes>
                   <geometry>
                        <!-- Draw the barchart columns.sh  -->
                        <RoundedRectangleComplex     fill="{green2}" width="{columnWidth}" height="{aheight}"/>       
                   </geometry>
                </GraphicBorderSkin>

                • 5. Re: Passing a variable to a component
                  Gregory Lafrance Level 6

                  In your main app you create an instance of the component:

                   

                  private var myComp:MyFancyComponent = new MyFancyComponent();

                   

                  or in MXML:

                   

                  <comp:MyFancyComponent id="myComp"/>

                   

                  And then in AS refer to id like so:

                   

                  myComp.myCompVar = "New Value Here";

                  • 6. Re: Passing a variable to a component
                    SiHoop Level 1

                    I still cannot pass a variable to a component. Although the value of myComp.newWidth changes when the slider is used in the main mxml file, the value does not update in the component.How can I make the variable update in the component so that the width of RoundedRectangleComplex will change?

                     

                            <RoundedRectangleComplex     fill="{green2}" width="{newWidth}" height="{aheight}"/>

                     

                    Here's the main file:

                     

                    <?xml version="1.0"?>
                    <mx:Application backgroundGradientColors="[0xA30900, 0xE22B03]" xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="myService.send()">           
                    <mx:Script>
                        <![CDATA[
                        import mx.rpc.events.ResultEvent
                        import skins.barChartRenderer
                        private var myComp:barChartRenderer = new barChartRenderer();
                        [Bindable] public var myData:XML;
                        private function resultHandler(event:ResultEvent):void {
                            //myData = event.result as XML   
                            myData=
                    <TABLE>
                       <SAMPLE1>
                          <score> 55 </score>
                          <freq> 3 </freq>
                       </SAMPLE1>
                       <SAMPLE1>
                          <score> 56 </score>
                          <freq> 4 </freq>
                       </SAMPLE1>
                       <SAMPLE1>
                          <score> 57 </score>
                          <freq> 7 </freq>
                       </SAMPLE1>
                    </TABLE>   
                        }
                    private function changeHandler():void{
                       myComp.newWidth=mySlider1.value
                       trace(myComp.newWidth)
                    }
                        ]]>
                    </mx:Script>
                    <mx:Style source="assets/css/cde.css"/>
                    <mx:HTTPService id="myService" url="sample1.xml" result="resultHandler(event)" resultFormat="e4x"/> 
                    <!-- Clear all background elements in the chart  -->
                    <mx:Array id="bge"/>
                    <mx:Canvas     id="whiteCanvas" backgroundColor="0xffffff" height="500" width="1000">                            
                        <mx:ColumnChart id="myCChart"
                                        height="400"
                                        width="900"
                                         dataProvider="{myData.SAMPLE1}"
                                         type="overlaid"
                                         showDataTipTargets="false"
                                         showDataTips="false"
                                         backgroundElements="{bge}"
                                         horizontalCenter="0"
                                         seriesFilters="[]">
                            <mx:horizontalAxis>
                               <mx:CategoryAxis id="c1" dataProvider="{myData.SAMPLE1}" categoryField="score"/>
                            </mx:horizontalAxis>
                            <mx:series>               
                               <!-- The columns -->
                               <mx:ColumnSeries itemRenderer="skins.barChartRenderer"  yField="freq" alpha=".2"/>
                            </mx:series>
                         </mx:ColumnChart>   
                        <mx:VSlider id="mySlider1" x="10" y="91" minimum="0" maximum="100" enabled="true" liveDragging="true" change="changeHandler()" height="222"/>
                    </mx:Canvas>
                    </mx:Application>

                     

                    Here's the component:

                    <?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[
                                import mx.controls.VSlider
                                [Bindable] public var newWidth:Number=10;
                                [Bindable] private var awidth:Number=0;
                                [Bindable] private var aheight:Number=0;          
                                [Bindable] private var columnWidth:Number=5;          
                                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
                                    super.updateDisplayList(unscaledWidth, unscaledHeight);
                                    aheight = unscaledHeight;               
                                    }
                            ]]>
                        </mx:Script>

                     

                    <!-- Fill the bar chart columns.sh  -->
                        <fills>
                             <LinearGradientFill  id="green2" angle="90">
                                 <GradientStop alpha=".9" color="#3333ff"/>
                             </LinearGradientFill>
                        </fills>
                       <strokes>
                             <SolidStroke id="darkStroke" color="#000" weight="1" alpha=".8"/>
                       </strokes>
                       <geometry>
                            <!-- Draw the barchart columns.sh  -->
                            <RoundedRectangleComplex     fill="{green2}" width="{newWidth}" height="{aheight}"/>       
                       </geometry>
                    </GraphicBorderSkin>

                    • 7. Re: Passing a variable to a component
                      SiHoop Level 1

                      I'm trying to pass a variable to a component. I think I'm getting closer to the solution, but I'm not there yet. I am now using getter/setter methods, and these seem to be partially working. Here's my main file. When I use the VSlider, myComp.initialCount is triggered.

                       

                      <?xml version="1.0"?>
                      <mx:Application backgroundGradientColors="[0xA30900, 0xE22B03]" xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="resultHandler()">           
                      <mx:Script>
                          <![CDATA[
                          private var myComp:barChartRenderer_test = new barChartRenderer_test();
                          [Bindable] public var myData:XML;
                          private function resultHandler():void {
                              myData=
                      <TABLE>
                         <SAMPLE1>
                            <score> 55 </score>
                            <freq> 3 </freq>
                         </SAMPLE1>
                         <SAMPLE1>
                            <score> 56 </score>
                            <freq> 4 </freq>
                         </SAMPLE1>
                         <SAMPLE1>
                            <score> 57 </score>
                            <freq> 7 </freq>
                         </SAMPLE1>
                      </TABLE>   
                          }
                      public function changeHandler():void{
                         myComp.initialCount=mySlider1.value
                      }
                          ]]>
                      </mx:Script>
                      <!-- Clear all background elements in the chart  -->
                      <mx:Array id="bge"/>
                      <mx:Canvas     id="whiteCanvas" backgroundColor="0xffffff" height="500" width="1000">                            
                          <mx:ColumnChart id="myCChart"
                                          height="400"
                                          width="900"
                                           dataProvider="{myData.SAMPLE1}"
                                           type="overlaid"
                                           showDataTipTargets="false"
                                           showDataTips="false"
                                           backgroundElements="{bge}"
                                           horizontalCenter="0"
                                           seriesFilters="[]">
                              <mx:horizontalAxis>
                                 <mx:CategoryAxis id="c1" dataProvider="{myData.SAMPLE1}" categoryField="score"/>
                              </mx:horizontalAxis>
                              <mx:series>               
                                 <!-- The columns -->
                                 <mx:ColumnSeries   itemRenderer="barChartRenderer_test"  yField="freq" alpha=".2"/>
                              </mx:series>
                           </mx:ColumnChart>   
                          <mx:VSlider id="mySlider1" x="10" y="91" minimum="0" maximum="100" enabled="true" liveDragging="true" change="changeHandler()" height="222"/>
                      </mx:Canvas>
                      </mx:Application>

                       

                      Next, in my component (i.e. barChartRenderer_test), I have created get and set methods. When myComp.initialCount changes its value in the main file, the trace statement in the set method fires, but the value of the width (i.e. width="{newWidth}") does not change. See the following line in the code below:

                      <RoundedRectangleComplex     fill="{green2}" width="{newWidth}" height="{aheight}"/>  

                       

                      Why is the value of width not changing?

                       

                      barChartRenderer_test.mxml is below

                       

                      <?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 newWidth:Number;
                                  [Bindable] private var awidth:Number=0;
                                  [Bindable] private var aheight:Number=0;          
                                  [Bindable] private var columnWidth:Number=5;          
                                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
                                      super.updateDisplayList(unscaledWidth, unscaledHeight);
                                      aheight = unscaledHeight;             
                                  }
                      // Define internal private variable.
                      private var _initialCount:uint = 42;

                       

                      // Define public getter.
                      public function get initialCount():uint {
                          return _initialCount;
                      }
                      // Define public setter.
                      public function set initialCount(value:uint):void {  
                          newWidth = value;
                             trace("newWidth="+newWidth)
                      }
                              ]]>
                          </mx:Script>
                      <!-- Fill the bar chart columns.sh  -->
                          <fills>
                               <LinearGradientFill  id="green2" angle="90">
                                   <GradientStop alpha=".9" color="#3333ff"/>
                               </LinearGradientFill>
                          </fills>
                         <strokes>
                               <SolidStroke id="darkStroke" color="#000" weight="1" alpha=".8"/>
                         </strokes>
                         <geometry>
                              <!-- Draw the barchart columns.sh  -->
                              <RoundedRectangleComplex     fill="{green2}" width="{newWidth}" height="{aheight}"/>       
                         </geometry>
                      </GraphicBorderSkin>