9 Replies Latest reply on May 4, 2011 5:45 AM by hamsterz

    Binding Styles in Actionscript

    flexisawesome
      Friends,
      I have a Actionscript component which ofcourse is completely developed in Actionscript ... no mxml.

      I need to bind the some of the styles like gutterLeft etc to variables. How would I do it?
      BindingUtils.bindProperty(myChartObject, "gutterLeft", this, "MyVariable); ... will not work.

        • 1. Re: Binding Styles in Actionscript
          Level 7

          "flexisawesome" <webforumsuser@macromedia.com> wrote in message
          news:gjcndi$eth$1@forums.macromedia.com...
          > Friends,
          > I have a Actionscript component which ofcourse is completely developed in
          > Actionscript ... no mxml.
          >
          > I need to bind the some of the styles like gutterLeft etc to variables.
          > How
          > would I do it?
          > BindingUtils.bindProperty(myChartObject, "gutterLeft", this, "MyVariable);
          > ... will not work.

          You'd "invent" properties that have setters that then actually do the work
          of setting the styles.

          HTH;

          Amy


          • 2. Re: Binding Styles in Actionscript
            flexisawesome Level 1
            Amy,
            Thanks for your response but it dosent help. I dont think I expressed my question very well. Let me try again.

            I have a Actionscript class that extends UIComponent and I am trying to add chart objects to it. Here is my code that should explain ...

            public class MyCharts extends UIComponent {
            private var lineChart:LineChart;
            private var someDataProvider:ArrayCollection = new ArrayCollection([1,2,3]);
            public var dynamicGutterLeft:int = 25;

            override protected createChildren():void {
            lineChart = new LineChart();
            lineChart.dataProvider = someDataProvider
            //now I need to bind a style to a variable
            BindingUtils.BindProperty(lineChart, "gutterLeft", this, "dynamicGutterLeft");
            //The above line will give an error because lineChart does not have a property called "gutterLeft"
            //question is how do I bind. This is a simple example to explain my problem.
            //I understand that I could have get/set for "dynamicGutterLeft" and in the set, I could do a setStyle.
            //but I really want to bind it.
            }


            }
            • 3. Re: Binding Styles in Actionscript
              Level 7

              "flexisawesome" <webforumsuser@macromedia.com> wrote in message
              news:gje2jh$95p$1@forums.macromedia.com...
              > Amy,
              > Thanks for your response but it dosent help. I dont think I expressed my
              > question very well. Let me try again.
              >
              > I have a Actionscript class that extends UIComponent and I am trying to
              > add
              > chart objects to it. Here is my code that should explain ...
              >
              > public class MyCharts extends UIComponent {
              > private var lineChart:LineChart;
              > private var someDataProvider:ArrayCollection = new
              > ArrayCollection([1,2,3]);
              > public var dynamicGutterLeft:int = 25;
              >
              > override protected createChildren():void {
              > lineChart = new LineChart();
              > lineChart.dataProvider = someDataProvider
              > //now I need to bind a style to a variable
              > BindingUtils.BindProperty(lineChart, "gutterLeft", this,
              > "dynamicGutterLeft");
              > //The above line will give an error because lineChart does not have a
              > property called "gutterLeft"
              > //question is how do I bind. This is a simple example to explain my
              > problem.
              > //I understand that I could have get/set for "dynamicGutterLeft" and
              > in
              > the set, I could do a setStyle.
              > //but I really want to bind it.
              > }
              >
              >
              > }
              >

              You can want all you want, but you can't force Flex to do something in a way
              that it isn't interested in doing it. When I was in college, one of my guy
              friends told me this story. He was out with some female friends of ours and
              the same guy kept asking one of them to dance. She kept saying no, and the
              guy finally said "But I really _want_ to dance with you. My friend stepped
              in and said "Yeah. We tend to want things."

              The only way to change a style is to call setStyle.
              http://livedocs.adobe.com/flex/3/html/databinding_9.html.


              HTH;

              Amy



              • 4. Re: Binding Styles in Actionscript
                flexisawesome Level 1
                Amy,
                Had a discussion with another Flex developer and now I understand what you were saying. It makes sense and that is what I am going to do.

                Thanks for your help
                • 5. Re: Binding Styles in Actionscript
                  rtalton Level 4
                  Gosh Amy, I only wanted to dance...
                  • 6. Re: Binding Styles in Actionscript
                    flexisawesome Level 1
                    Amy,
                    You are awesome. Thanks for confirming that I cannot bind styles in actionscript and that really sucks. I love Flex but these are things why I hate Flex sometimes. What I should be able to do in MXML, I should be able to do in actionscript. But unfortunately, that is the way it is.

                    Amy two questions ...

                    I have a MXML component that I am trying to convert to AS. In that MXML component, I am using a HSLIDER and a CANVAS
                    <mx:HSlider
                    ...
                    ...
                    values="{[arrColl.getItemAt(0), arrColl.getItemAt(1)]}" //need to do this binding in AS
                    />

                    <mx:Canvas
                    ...
                    ...
                    width="{getCanvasWidth(someVar1, someVar2)}" //need to do this binding in AS
                    />
                    How would I do these 2 bindings in AS if I created both these components and did a addChild.


                    thanks again.
                    Prashant Jain
                    • 7. Re: Binding Styles in Actionscript
                      Level 7

                      "flexisawesome" <webforumsuser@macromedia.com> wrote in message
                      news:gjed0u$lit$1@forums.macromedia.com...
                      > Amy,
                      > You are awesome. Thanks for confirming that I cannot bind styles in
                      > actionscript and that really sucks. I love Flex but these are things why I
                      > hate
                      > Flex sometimes. What I should be able to do in MXML, I should be able to
                      > do in
                      > actionscript. But unfortunately, that is the way it is.

                      I don't believe you can bind to them in MXML either. But if you can, it is
                      because under the hood that binding expression is calling setStyle.

                      > Amy two questions ...
                      >
                      > I have a MXML component that I am trying to convert to AS. In that MXML
                      > component, I am using a HSLIDER and a CANVAS
                      > <mx:HSlider
                      > ...
                      > ...
                      > values="{[arrColl.getItemAt(0), arrColl.getItemAt(1)]}" //need to do this
                      > binding in AS
                      > />
                      >
                      > <mx:Canvas
                      > ...
                      > ...
                      > width="{getCanvasWidth(someVar1, someVar2)}" //need to do this binding in
                      > AS
                      > />
                      > How would I do these 2 bindings in AS if I created both these components
                      > and
                      > did a addChild.

                      In the first case, I'd probably just add a listener for a collection change
                      and set the values in that (which is roughly what happens when binding code
                      fires, with a lot more overhead).

                      In the second case, I'd listen for the change event associated with each of
                      the variables and run the function getCanvasWidth based on the variables.
                      Again, this is what binding code does.

                      Maybe this presentation will help you find an approach you are happy with.
                      http://link.brightcove.com/services/player/bcpid1733261879?bclid=1729365228&bctid=17412126 60

                      Personally, I avoid binding where I can, because of the performance hit.


                      • 8. Re: Binding Styles in Actionscript
                        Level 7

                        "flexisawesome" <webforumsuser@macromedia.com> wrote in message
                        news:gje83m$fnj$1@forums.macromedia.com...
                        > Amy,
                        > Had a discussion with another Flex developer and now I understand what you
                        > were saying. It makes sense and that is what I am going to do.
                        >
                        > Thanks for your help

                        You're welcome :-)


                        • 9. Re: Binding Styles in Actionscript
                          hamsterz

                          Here's the trick (three years later...) :

                           

                                      BindingUtils.bindSetter(
                                          makeStyleSetter("targetStyle", target), sourceUIComp, "sourceStyle"
                                      );

                           

                          And further :

                           

                                  /**
                                   * Tricky trick to bind styles...
                                   */
                                  private function makeStyleSetter(style:String, target:UIComponent):Function
                                  {
                                      return function(value:Object):void
                                      {
                                          target.setStyle(style, value);
                                      }
                                  }