3 Replies Latest reply on Sep 11, 2009 3:39 PM by njadobe2

    state transitions within components

    Luke Pearce

      Hi

       

      Im having troubling getting a button within a custom component to change the state of another custom component. For example, I have custom component A and custom component B within a page of my application. I want a button in custom component A to change the state of custom component B. When i try to select the state to transition to its not in the drop down list. Is there a way I can edit the source code to make this work?

       

      thanks,

       

      Luke.

        • 1. Re: state transitions within components
          njadobe2 Adobe Employee

          Hi Luke,

           

          There isn't a way to do this from the Flash Catalyst UI currently. If you import the project into Flash Builder, there are a number of ways you can do it in code. Here's the simplest way:

           

          1. In your Main.mxml file, assign an id to the instance of the component you want to control (in your example, Component B), like this:

           

          <components:ComponentB x="100" y="100" id="compB"/>

           

          (If it already has an id, just note it down and go to the next step.)

           

          2. In the ComponentA.mxml file (which should be in the "components" folder in your project), add a click handler to the button, like this

           

          <s:Button label="Click me!" x="100" y="100" click="FlexGlobals.topLevelApplication.compB.currentState='StateName'"/>

           

          where StateName is the name of the ComponentB state you want to switch to when the button is clicked. (If the instance of the component in Main.mxml already had some other id, just use that here instead of "compB".)

           

          Note that while this is the easiest way to do it, it's not the cleanest. A better way to do it is to have ComponentA dispatch an event when the button is clicked, and then have the application handle the event by changing ComponentB's state. That's a little more code though.

           

          Let me know if this doesn't work for you.

           

          Thanks,

           

          nj

          • 2. Re: state transitions within components
            Luke Pearce Level 1

            thanks for your help Narciso. I had a play around with the code and ended up using:

             

            protected function Button081_rollOver():void
                        {
                            mx.core.FlexGlobals.topLevelApplication.customcomponent21.currentState='n081';

             

            is that the way you said would be cleaner but a bit more code?

             

            thanks,

            luke.

            • 3. Re: state transitions within components
              njadobe2 Adobe Employee

              Hi,

               

              That works too, but that's not quite what I meant. The "cleaner" version wouldn't directly call up to the top-level application and talk directly to another component. This isn't really important if you just have one-off components that you aren't reusing elsewhere in the app--in that case, it's fine to just access the other component directly. It's more of an issue if you're trying to build a component that's reusable in different contexts.

               

              Thanks,

               

              nj