28 Replies Latest reply on Aug 19, 2008 4:23 PM by Newsgroup_User

    Refreshing Graphical Component

    Developer504 Level 1
      I am using an open source bulletChart component I found, very simple (attached). I'm displaying it on my form, and I want to set the width of the chart programmatically with data from an XML file.

      I'm getting my XML data into the program, (I'm already using it in some other graphical objects) and it's displaying in the label for this object, but it is not reflected in the size of the graph or in the toolTip, which shows Null.

      I'm setting the value during the init function, which is triggered onCompletion. But it seems like the bulletGraph is being drawn before the HTTPService call pulls in the data. Again, I can display the variable ("actualPercentage") in a Label on my form, and it shows the right value, but in the graphical component and the component tooltip, it's Null.

      I wanted to put a refresh of the graphical object (bulletGraph) into my ResultEvent handler for the HTTPService, but this component apparently doesn't allow a .refresh. I get an error 1061 "Call to a possibly undefined method refresh with static type buttonGraph".

      How can I redraw this component? Do I need to change something within the component or is there another way I can just force it to re-draw itself to reflect the value of the data? Or am I coming at this all wrong?

      M.
        • 1. Re: Refreshing Graphical Component
          Gregory Lafrance Level 6
          invalidateDisplayList ?
          • 2. Refreshing Graphical Component
            Developer504 Level 1
            I'm sorry can you elaborate on that a bit? I don't understand.

            EDIT: I tried putting in bulletGraph.updateDisplayList(); but it gave me an error 1195 saying it was an inaccessible method.

            bulletGraph.invalidateDisplayList() compiles but the values are still NaN.

            • 3. Re: Refreshing Graphical Component
              Gregory Lafrance Level 6
              I don't know if I would expect updateDisplayList() to work, but I would think invalidateDisplayList() would, which should lead to updateDisplayList() being called.
              • 4. Refreshing Graphical Component
                Developer504 Level 1
                Ah, I see. So this is a way to force a refresh.

                Like I said, that compiles but I still don't seem to get my value.

                The odd thing is, if I set the value hard-coded where I declare my variable in my main program, i.e. [Bindable]
                public var actualPercentage:Number = 75;

                ...it shows up in the component at run-time, it displays at whatever width I set and shows the right number in the toolTip.

                However If I set this value during my main init function (which runs onCompletion) or in my WS event handler, it doesn't seem to go across - all I get is "NaN".

                M.
                • 5. Re: Refreshing Graphical Component
                  Gregory Lafrance Level 6
                  In my other post on this topic from you, I set the actualPercentage, highGoalPercentage, and lowGoalPercentage in the app where the componnent is created, like this:

                  <comp:MyComp actualPercentage="45" highGoalPercentage="75" lowGoalPercentage="25"/>

                  Does this not work?
                  • 6. Refreshing Graphical Component
                    Developer504 Level 1
                    That works if I send a fixed value, if I send the value from a variable which is set during the HTTPService event handler, I get Null, even though that same variable is displaying in a Label on my main form with the correct value at runtime.

                    Thats why I thought it was a refresh issue, it's like it's drawing the component first and then getting the XML data afterward, but I can't subsequently get it to redraw with the correct data.

                    M.
                    • 7. Re: Refreshing Graphical Component
                      Level 7

                      "Developer504" <webforumsuser@macromedia.com> wrote in message
                      news:g826e9$90h$1@forums.macromedia.com...
                      > That works if I send a fixed value, if I send the value from a variable
                      > which
                      > is set during the HTTPService event handler, I get Null, even though that
                      > same
                      > variable is displaying in a Label on my main form with the correct value.
                      >
                      > Thats why I thought it was a refresh issue, it's like it's drawing the
                      > component first and then getting the XML data afterword, but I can't
                      > subsequently get it to redraw with the correct data.

                      Instead of using public variables, use setters. This gives you a chance to
                      reset things.

                      HTH;

                      Amy


                      • 8. Re: Refreshing Graphical Component
                        Gregory Lafrance Level 6
                        I'm surprised binding is not working in this case. Maybe put these values in an ArrayCollection, then after their values have been updated from HTTPService, call myArrayCollection.refresh();
                        • 9. Refreshing Graphical Component
                          Developer504 Level 1
                          Ok thanks, I'll try that and let you know if it works, I have to look up ArrayCollection etc.

                          When I read your post I thought maybe some of the variables might have been declared as private but they are all public and bindable in both the main program and the component.

                          M.
                          • 10. Refreshing Graphical Component
                            Developer504 Level 1
                            quote:

                            Originally posted by: Newsgroup User


                            Instead of using public variables, use setters. This gives you a chance to
                            reset things.

                            HTH;

                            Amy





                            Hi Amy,

                            I'm unfamiliar with setters. Is this what you mean?:

                            http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Live Docs_Book_Parts&file=mxmlcomponents_advanced_145_07.html
                            • 11. Re: Refreshing Graphical Component
                              Level 7

                              "Developer504" <webforumsuser@macromedia.com> wrote in message
                              news:g829e9$c39$1@forums.macromedia.com...
                              >
                              quote:

                              Originally posted by: Newsgroup User
                              >
                              >
                              > Instead of using public variables, use setters. This gives you a chance
                              > to
                              > reset things.
                              >
                              > HTH;
                              >
                              > Amy
                              >
                              >
                              >

                              >
                              > Hi Amy,
                              >
                              > I'm unfamiliar with setters. Is that related to Bindable Metadata
                              > Tagging?

                              change

                              public var lowGoalPercentage:Number;

                              to something more like:

                              private var _lowGoalPercentage:Number;
                              //by setting this to true initially, you can get rid of your function call
                              in creationComplete
                              _invalidateFlag:Boolean = true;

                              public function set public var lowGoalPercentage(value:Number):void{
                              _lowGoalPercentage= value;
                              _invalidateFlag=true;
                              //this will cause the updateDisplayList function to run after all
                              //properties are set
                              invalidateDisplayList();
                              }

                              public function get public var lowGoalPercentage():Number{
                              return _lowGoalPercentage;
                              }

                              override protected function updateDisplayList(unscaledWidth:Number,
                              unscaledHeight:Number){
                              super.updateDisplayList(unscaledWidth, unscaledHeight);
                              //all of your setters will set this flag, but the updateDisplayList
                              function will
                              //run only once, refreshing your display after all properties are set
                              if (_invalidateFlag) {
                              update();
                              }
                              }

                              HTH;

                              Amy





                              • 12. Re: Refreshing Graphical Component
                                Developer504 Level 1
                                Thanks Amy.

                                Should this code be mostly in the bullet-graph component or in the main program? Or duplicated in both?

                                J
                                • 13. Re: Refreshing Graphical Component
                                  Level 7

                                  "Developer504" <webforumsuser@macromedia.com> wrote in message
                                  news:g84816$gsr$1@forums.macromedia.com...
                                  > Thanks Amy.
                                  >
                                  > Should this code be mostly in the bullet-graph component or in the main
                                  > program? Or duplicated in both?

                                  This should be in the component.


                                  • 14. Refreshing Graphical Component
                                    Developer504 Level 1
                                    Amy, couple of questions:

                                    in your example, is _invalidateFlag a variable or part of lowGoalPercentage? If so, should _invalidateFlag be bindable?

                                    Also, I don't understand this part:

                                    public function set public var lowGoalPercentage(value:Number):void{
                                    actualPercentage= value;
                                    _invalidateFlag=true;

                                    Would this function have a name? Would I need to invoke this on CreationComplete?

                                    M.

                                    • 15. Re: Refreshing Graphical Component
                                      Level 7

                                      "Developer504" <webforumsuser@macromedia.com> wrote in message
                                      news:g84k0f$75$1@forums.macromedia.com...
                                      > Amy, couple of questions:
                                      >
                                      > in your example, is _invalidateFlag a variable or part of
                                      > lowGoalPercentage?

                                      _invalidateFlag is a variable that is telling your component that one or
                                      more properties have changed so that you can then take steps at a later
                                      point to react to the change.

                                      > If so, should _invalidateFlag be bindable?
                                      >
                                      > Also, I don't understand this function:
                                      >
                                      > public function set public var lowGoalPercentage(value:Number):void{
                                      > actualPercentage= value;
                                      > _invalidateFlag=true;

                                      sorry, that should have been

                                      public function set lowGoalPercentage(value:Number):void

                                      I started out copying your line because I was too lazy to type that long
                                      variable name, and I forgot to take out the parts that aren't relevant.

                                      > Does this function have a name? Do I need to invoke this on
                                      > CreationComplete?

                                      This function will be invoked any time your logic outside the component does
                                      this:

                                      bulletChartInstance.lowGoalPercentage=8;

                                      That is why you need to change _all_ your public variables to setters that
                                      call invalidateProperties() and set the flag. When _any_ property changes,
                                      your function will run on the next invalidation pass.

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

                                      HTH;

                                      Amy


                                      • 16. Refreshing Graphical Component
                                        Developer504 Level 1
                                        quote:

                                        > Also, I don't understand this function:
                                        >
                                        > public function set public var lowGoalPercentage(value:Number):void{
                                        > actualPercentage= value;
                                        > _invalidateFlag=true;

                                        sorry, that should have been

                                        public function set lowGoalPercentage(value:Number):void


                                        I am getting an error with this.

                                        It gives me an error 1021 "Duplicate function definition" and 1023 "Incompatable override"

                                        I don't have any other functions I can see this would be the duplicate of... but which part of this declaration is the name? "lowGoalPercentage"? or "set lowGoalPercentage"? Is it a namespace conflict with the variable name? Or is it supposed to be "setlowGoalPercentage"

                                        Also in this section:

                                        quote:

                                        override protected function updateDisplayList(unscaledWidth:Number,
                                        unscaledHeight:Number){
                                        super.updateDisplayList(unscaledWidth, unscaledHeight);
                                        //all of your setters will set this flag, but the updateDisplayList function will
                                        //run only once, refreshing your display after all properties are set
                                        if (_invalidateFlag) {
                                        update();
                                        }
                                        }


                                        Where is it getting "unscaledWidth" and "unscaledHeight"? It is giving me an error 1023 "incompatable override" here.

                                        M.
                                        • 17. Re: Refreshing Graphical Component
                                          Level 7

                                          "Developer504" <webforumsuser@macromedia.com> wrote in message
                                          news:g8cnt9$si1$1@forums.macromedia.com...
                                          > [quote]> Also, I don't understand this function:
                                          > >
                                          > > public function set public var lowGoalPercentage(value:Number):void{
                                          > > actualPercentage= value;
                                          > > _invalidateFlag=true;
                                          >
                                          > sorry, that should have been
                                          >
                                          > public function set lowGoalPercentage(value:Number):void [/quote]
                                          >
                                          > I am getting an error with this, and I still don't see where the name of
                                          > the
                                          > function is.
                                          >
                                          > It gives me an error 1021 "Duplicate function definition" and 1023
                                          > "Incompatable override"

                                          did you actually get rid of the public variable and _replace_ it with the
                                          getter/setter?
                                          http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_3.html

                                          about halfway down the page...


                                          • 18. Re: Refreshing Graphical Component
                                            Developer504 Level 1
                                            quote:


                                            >
                                            > It gives me an error 1021 "Duplicate function definition" and 1023
                                            > "Incompatable override"

                                            did you actually get rid of the public variable and _replace_ it with the
                                            getter/setter?
                                            http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_3.html

                                            about halfway down the page...



                                            Yes, as far as I can tell. Evidently I have made some mistake.

                                            This is my code. The only change I made is that I am working with "actualPercentage" instead of "lowGoalPercentage" since that is the value I need to be able to set programattically. When I get this working I'll do the setters and getters for all three variables as you suggested.

                                            • 19. Re: Refreshing Graphical Component
                                              Developer504 Level 1
                                              I'm getting three errors, "incompatable override" on the override protected function line, and two "access of undefined property" on the ToolTip function.
                                              • 20. Re: Refreshing Graphical Component
                                                Level 7

                                                "Developer504" <webforumsuser@macromedia.com> wrote in message
                                                news:g8ekc2$d11$1@forums.macromedia.com...
                                                > I'm getting three errors, "incompatable override" on the override
                                                > protected function line, and two "access of undefined property" on the
                                                > ToolTip function.

                                                I think I just left out the void on the type declaration of
                                                updateDisplayList(). I was doing it off the top of my head ;-). A search
                                                in the Help for override protected function updatedisplaylist actually pulls
                                                up quite a few examples of what the correct syntax for this is.

                                                Of course you are getting access of undefined property. You didn't
                                                implement the private variable and getter! Please go back and reread the
                                                links I posted, not just skim over them. You need to understand what
                                                getters and setters are doing and why the private variable is needed.


                                                • 21. Refreshing Graphical Component
                                                  Developer504 Level 1
                                                  Amy,

                                                  I have read them, several times (including before you ever linked to those, they were already bookmarked in my browser) but I lack the context to make much sense of the details. I'm used to very different software development environment, I only understand the paradigm for this (very common) type of progamming language about 5% now.

                                                  which is up considerbaly from more like 1% last month.

                                                  I'll read them again.
                                                  • 22. Re: Refreshing Graphical Component
                                                    Developer504 Level 1
                                                    Ok I found the syntax issue with the updatedisplaylist override (the void)

                                                    I'll try to implement the private variable and getter now.
                                                    • 23. Re: Refreshing Graphical Component
                                                      Level 7

                                                      "Developer504" <webforumsuser@macromedia.com> wrote in message
                                                      news:g8epq4$jrm$1@forums.macromedia.com...
                                                      > Amy,
                                                      >
                                                      > I have read them, several times (including before you ever linked to
                                                      > those,
                                                      > they were already bookmarked) but I lack the context to make much sense of
                                                      > the
                                                      > details. I'm used to very different software development environment, I
                                                      > only
                                                      > understand the paradigm for this (very common) type of progamming language
                                                      > about 5%
                                                      >
                                                      > which is up considerbaly from more like 1% last month.

                                                      There is nothing I'd like more than to take each and every person I help by
                                                      the hand and lead them through this stuff. But have you seen the traffic on
                                                      here? ;-) Instead, I try tough love LOL.


                                                      • 24. Refreshing Graphical Component
                                                        Developer504 Level 1
                                                        I think there is a mid-point between writing somebodies code for them and telling them to re-read things. I appreciate any help I can get, what is most valuable is explaining the basic concepts and making the key 'gotchas' in the syntax clear.

                                                        The help screens and online pages aren't always clear or complete about the specific details of syntax which can derail everything..
                                                        • 25. Refreshing Graphical Component
                                                          Developer504 Level 1
                                                          Can you expalain the naming between the Set, Get, and private variable declaration? Do they need to have the same name or do you make one name for the variable and another (with an underline?) for the Getter and Setter, in which case how are they linked?

                                                          I managed to get it to compile if I make the names of Set and Get different from my variable, but it doesn't reset the value from the XML list.

                                                          http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_3.html
                                                          In this example the names are different but I don't understand how the alternative name reflects back to the source.

                                                          If I define my Setter as "actualValue", and my variable as "_actualValue", what do I call it in my main program so that I can 'actually' pass the value?
                                                          • 26. Re: Refreshing Graphical Component
                                                            Level 7

                                                            "Developer504" <webforumsuser@macromedia.com> wrote in message
                                                            news:g8f15j$t6l$1@forums.macromedia.com...
                                                            > Can you expalain the naming between the Set, Get, and private variable
                                                            > declaration? Do they need to have the same name or do you make one name
                                                            > for
                                                            > the variable and another (with an underline?) for the Getter and Setter,
                                                            > in
                                                            > which case how are they linked?

                                                            The accepted convention in Flex is to use an underscore at the beginning of
                                                            the name of a private variable. This helps clarify which is which. If you
                                                            name the private variable the same as the getter and setter, it is clear
                                                            that the internal storage for that public property is the private variable.
                                                            However, they don't need to match if you don't want to follow the
                                                            convention.

                                                            For instance, this should work just fine:

                                                            private var gorillaNads:String;

                                                            public function set labelString(value:String):void{
                                                            gorillaNads=value;
                                                            }
                                                            public function get labelString():String{
                                                            return gorillaNads;
                                                            }

                                                            > I managed to get it to compile if I make the names of Set and Get
                                                            > different
                                                            > from my variable, but it doesn't set the value. In this example the names
                                                            > are
                                                            > different but I don't understand how the alternative name reflects back to
                                                            > the
                                                            > source.
                                                            >
                                                            > If I define my Setter as "actualValue", and my variable as "_actualValue",
                                                            > what do I set in my main program so that I actually can pass the value?

                                                            if your setter is

                                                            public function set actualValue(value:Number):void{
                                                            _actualValue=value;
                                                            }

                                                            and your getter is

                                                            public function get actualValue():Number{
                                                            return _actualValue;
                                                            }

                                                            then from the main app, you should be able to do something like this:

                                                            var yc:yourComponent=new yourComponent();
                                                            yc.actualValue=1;
                                                            trace(yc.actualValue);//1

                                                            or

                                                            <yourNameSpace:yourComponent actualValue="1" />

                                                            Conversely, when you are referring to actualValue _inside_ yourComponent,
                                                            you should refer to the private storage of the value, _actualValue, _unless_
                                                            there is specific logic in the getter (if you're just reading it) or the
                                                            setter (if you're modifying it) that you need to have run.

                                                            HTH;

                                                            Amy


                                                            • 27. Refreshing Graphical Component
                                                              Developer504 Level 1
                                                              Thanks a lot Amy, that really helps me understand how to link them up and how the naming conventions work (where the conventions end and the syntax begins can be tricky for rank newbs like me).


                                                              I found another bulletgraph component which is much more complete that i was able to use:
                                                              http://agileui.blogspot.com/2008/05/bullet-graph-free-flex-component.html

                                                              Learning to use getters and setters in this way will be very useful, I know it's such a basic thing with this kind of programming, now I'll have a hope of getting it strait next time I have to do it. Thanks again,

                                                              M.
                                                              • 28. Re: Refreshing Graphical Component
                                                                Level 7
                                                                You're welcome.

                                                                "Developer504" <webforumsuser@macromedia.com> wrote in message
                                                                news:g8fc5b$em0$1@forums.macromedia.com...
                                                                > Thanks a lot Amy, that really helps me understand how to link them up and
                                                                > how
                                                                > the naming conventions work (where the conventions end and the syntax
                                                                > begins
                                                                > can be tricky some times).
                                                                >
                                                                >
                                                                > I found another bulletgraph component which is much more complete that i
                                                                > was
                                                                > able to use:
                                                                > http://agileui.blogspot.com/2008/05/bullet-graph-free-flex-component.html
                                                                >
                                                                > Learning how to use getters and setters in this way is extremely valueable
                                                                > to
                                                                > me though, I know it's such a basic thing with this kind of programming,
                                                                > now
                                                                > I'll have a hope of getting it strait next time I have to do it. Thanks
                                                                > again,
                                                                >
                                                                > M.
                                                                >