11 Replies Latest reply on Jul 29, 2009 2:43 AM by zakabalt

    Pass values between components

    zakabalt

      Hello, this is my first questions in this forum and I hope that somebody can help me.

       

      I'm using components in my application and I want to get one value that I create in one component in another component. I know that exist more than i can do in differents forms, but I want to choose the best. Here the code to explain better my questions.

       

      Component1:

      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="164" height="36"> 
         <mx:Script>
            <![CDATA[
               
             //Metemos el id de la cuenta que queramos cargar
             public function queCuenta():Number {
                  var idAccount:Number = Number(accountnumber.text);
                  return idAccount;
             }
            ]]>
         </mx:Script>
         <mx:TextInput id="accountnumber" x="74" y="8" width="36"/>
         <mx:Label x="25" y="10" text="Cuenta" width="62"/>
         <mx:Button x="118" y="8" label="OK" width="42" click="queCuenta()"/>
         
      </mx:Canvas>

      I want to use idAccount in another component. I want to print this number in another component label. Which is the best code to do that?

       

      Thanks and sorry, but my english is not very good.

        • 1. Re: Pass values between components
          Madhav Subedi Level 4

          use setter and getter methods:

           

          <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="164" height="36">

             <mx:Script>

                <![CDATA[

           

          private var _idAccount:Number;


          public function set idAccount(value:Number):void

          {

          this._idAccount = value;

          }


          public function get idAccount():Number

          {

          return this._idAccount;

          }

                   

                 //Metemos el id de la cuenta que queramos cargar

                 public function queCuenta():Number {

                      //var idAccount:Number = Number(accountnumber.text);

                      //return idAccount;

          this._idAccount = Number(accountnumber.text);

                 }

                ]]>

             </mx:Script>

             <mx:TextInput id="accountnumber" x="74" y="8" width="36"/>

             <mx:Label x="25" y="10" text="Cuenta" width="62"/>

             <mx:Button x="118" y="8" label="OK" width="42" click="queCuenta()"/>

             

          </mx:Canvas>

           

          However, if you want to get the value everytime the value is changed, you need to use custom events.

          • 2. Re: Pass values between components
            zakabalt Level 1

            I want to use this value when change also. I have one function in another component and when the idAccount is one the function get one String and when the numer is 2 another, when is 3 other...

             

            Which is the code of the second component? I don't know how can I get the number.

             

            Component2:

             

            <canvas...>

            <Script...>

                 private function treeLoaded():void
                    {
                       srv.getCarpeta(idAccount);

                      //this the code when I had the 2 components in 1. But now I have 2 components and I don't know what put it here, or why.
                                
                    }

            </Script>

            .......

            </canvas>

            • 3. Re: Pass values between components
              Madhav Subedi Level 4

              You need to fire an event when value is changed.

              this is done using dispatchEvent(); method.

               

               

              MyComponent.mxml

              <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="164" height="36">

                 <mx:Script>

                    <![CDATA[

              private var _idAccount:Number;


              public function set idAccount(value:Number):void

              {

              this._idAccount = value;

              }


              public function get idAccount():Number

              {

              return this._idAccount;

              }

                      

                     //Metemos el id de la cuenta que queramos cargar

                     public function queCuenta():Number {

                          //var idAccount:Number = Number(accountnumber.text);

                          //return idAccount;

              this._idAccount = Number(accountnumber.text);

              dispatchEvent(new Event('valueChanged'));

                     }

                    ]]>

                 </mx:Script>

                 <mx:TextInput id="accountnumber" x="74" y="8" width="36"/>

                 <mx:Label x="25" y="10" text="Cuenta" width="62"/>

                 <mx:Button x="118" y="8" label="OK" width="42" click="queCuenta()"/>

                

              </mx:Canvas>

               

              application where this component is used.

               

              <local:MyComponent id="mc" valueChanged="Alert.show(mc.idAccount.toString())">

              • 4. Re: Pass values between components
                zakabalt Level 1

                Thanks for your help. I understand what i have to do.

                 

                Thanks

                • 5. Re: Pass values between components
                  Gregory Lafrance Level 6

                  You are best off using custom events because that will lead to a more loosely coupled application and is a best practice.

                   

                  Here is my Flex 3 Cookbook post on using custom events in a simple MVC application:

                   

                  http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postI d=11246

                   

                  If this post answers your question or helps, please mark it as such.

                  • 6. Re: Pass values between components
                    zakabalt Level 1

                    <local:MyComponent id="mc" valueChanged="Alert.show(mc.idAccount.toString())">

                     

                    Which is the library of valueChanged? "Cannot resolve attribute 'valueChanged' for component type comp.MyComponent"


                    And if I want use the same _idAccount in other component and not in the application, how can I do it? Here you have the code of MyComponent2 , but I don't know how I have to initialize or registry _idAccount in this component. I have tested in different logical forms(logical for me), but I haven't get. I hope that someone can complete this code to work with the code of MyComponent.

                     

                    MyComponent2:

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="20">

                     

                    <mx:Script>
                            <![CDATA[
                       
                            public function estaCuenta():void {
                                label.text = _idAccount;
                           }
                            ]]>
                    </mx:Script>
                       
                        <mx:Label id="label" width="100%" height="100%"/>

                     

                    </mx:Canvas>

                     

                    Thanks!

                    • 7. Re: Pass values between components
                      zakabalt Level 1

                      Someone can help with these two problems?

                      • 8. Re: Pass values between components
                        Madhav Subedi Level 4

                        you need to put a meta tag in the component, to show which events is the component going to dispatch.

                         

                        [Event(name="eventName", type="package.eventType")]
                        
                        

                        in your case:

                         

                        [Event(name="valueChanged", type="flex.events.Event")]

                        1 person found this helpful
                        • 9. Re: Pass values between components
                          zakabalt Level 1

                          I never use an expression like this. I don't know where I have to put. I put it in the <Script>.... but I have one error 'metadata requires an associated deffiniton'. Probably I'm putting in the wrong place I don't know.

                           

                          An the other question? Where or why I have to import or declarate the components?

                          • 10. Re: Pass values between components
                            Madhav Subedi Level 4

                            it is placed before the script tag, i mean inside the main tag.

                             

                            like:

                            <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="164" height="36">

                                 [Event(name="valueChanged", type="flex.events.Event")]

                               <mx:Script>

                                  <![CDATA[

                                           .

                            .

                            .

                            .

                             

                            seems that you need to study a bit more about custom events:

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

                            • 11. Re: Pass values between components
                              zakabalt Level 1

                              Thanks. With your link I get it. In your code you have an small error. It's flash.events.Event, not flex.events.Event, but with the link I have get.

                               

                              And I have had put <Metadata>[Event(name.....]</Metadata>

                               

                              Thanks!