4 Replies Latest reply on Sep 5, 2009 9:47 AM by TheFlexGuy

    Binding variables back/forth between flex 3 components.

    Luke Immes

      blogN in comps:recommBlgs gets read properly, I can see the value: 7, in when displayed (code not here).

      I can also locally change this value and it shows the change, e.g., to 1 (code not shown here).

      How do I get this new value of blogN from recommBlgs.mxml to be reflected in variable newBlogN in home.mxml (initialized to 0).

      show(...) does not work, even with namespace prefix.

      Thanks.

       

      Both files compile OK.

      home.mxml

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Canvas width="100%" height="100%"

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

      label="HOME"

      xmlns:cmps="components.hm.*">

      <mx:XML id="dataXML" source="data/blogs.xml"/>

       

      <mx:VBox>

      <cmps:recommBlgs dataXML="{dataXML}" rblogN="{blogN}"/>

      <mx:HBox>

      <mx:Label text="New blogN"/>

      <mx:Label text="{newBlogN}"/>

      </mx:HBox>

      <cmps:scoreDrgDrop/>

      <cmps:editSummary dataXML="{dataXML}" blogN="{blogN}" y="391" height="281" width="760"/>

      </mx:VBox>

       

      <mx:Script>

      [Bindable] public var newBlogN:int = 0;

      [Bindable] public var blogN:int=7; // initial, no change from recommBlgs

      </mx:Script>

       

      </mx:Canvas>

       

      ----

      recommdBlgs.mxml

      <mx:Script>

      [Bindable] public var dataXML:XML;

      [Bindable] public var rblogN:int;

      import flash.events.MouseEvent;

       

      private function show(event:MouseEvent, n:int):void {

      rblogN=n;

      trace(rblogN);

      }

      </mx:Script>

      ...more...

        • 1. Re: Binding variables back/forth between flex 3 components.
          TheFlexGuy Level 2

          The best way would be to have a class that holds the data to be shared between the two files.  I'd create Model.as to hold my "data model".

          package com.domain.model
          {
               public class Model
               {
                    [Bindable]
                    public var myData:String;
                    
                    public function Model()
                    {
                    }
               }
          }
          

          This way you can just import this class into any component file you need to access the data and have the ability to set and retrieve (and bind to) the data you want shared.

           

          Helpful?

          • 2. Re: Binding variables back/forth between flex 3 components.
            Luke Immes Level 1

            OK, great, I will this out...(after some sleep).

            Thanks so much, I expect that it will work.

            I will certainly let you know.

            Luke

            • 3. Re: Binding variables back/forth between flex 3 components.
              Luke Immes Level 1

              The value of 'q' != 0, appears as it should when it changes value, trace confirms this.

              But, we have 0 in <mx:Label text="{myModel.getN()}"/> in home.mxml.

              Any ideas would help me a lot. Thanks.

              Luke

               

              home.mxml

              <?xml version="1.0" encoding="utf-8"?>

              <mx:Canvas width="100%" height="100%"

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

              label="HOME"

              xmlns:cmps="components.hm.*">

              <mx:XML id="dataXML" source="data/blogs.xml"/>

               

              <mx:VBox>

              <cmps:recommBlgs dataXML="{dataXML}" rblogN="{blogN}" myModel="{myModel}" />

              <mx:HBox>

              <mx:Label text="New blogN"/>

              <mx:Label text="{myModel.getN()}"/>

              </mx:HBox>

              <cmps:scoreDrgDrop/>

              <cmps:editSummary dataXML="{dataXML}" blogN="{blogN}" y="391" height="281" width="760"/>

              </mx:VBox>

               

              <mx:Script>

              import MyUtil.MyModel;

              [Bindable] public var myModel:MyModel = new MyModel();

              [Bindable] public var newBlogN:int = 0;

              [Bindable] public var blogN:int=7; // initial, no change from recommBlgs

              </mx:Script>

               

              </mx:Canvas>

               

               

              recommBlgs.mxml

              <?xml version="1.0" encoding="utf-8"?> 

              <!-- In this case we DO need canvas, to make caller layout happy -->

              <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:es="components.hm.editSummary">

                

              <mx:Script>

              [Bindable] public var dataXML:XML;

              [Bindable] public var rblogN:int;

              import flash.events.MouseEvent;

              import MyUtil.MyModel;

              [Bindable] public var myModel:MyModel;

              [Bindable] public var q:int;

               

              private function show(event:MouseEvent, n:int):void {

              myModel.setN(n);

              rblogN=n;

              q=myModel.getN();

              trace(rblogN);

              }

              </mx:Script>

               

              <mx:VBox

              height="100%" width="100%"

              backgroundColor="#FFFFFF" >

              <mx:HBox>

              <mx:Label text="q: "/>

              <mx:Label text="{q}"/>

              </mx:HBox>

              ... more...

               

              MyModel.as

              package MyUtil

              {

               

              public class MyModel

              {

              [Bindable] public var N:int = 0;

               

              public function MyModel()

              {

              N=0;

              }

               

              public function getN():int

              {

              trace("getN: " + N);

              return N;

              }

               

              public function setN(q:int): void

              {

              N=q;

              }

               

              }

              }

              • 4. Re: Binding variables back/forth between flex 3 components.
                TheFlexGuy Level 2

                Ok, so I hope you don't mind, but I'm going to give you some help in a few areas.

                Number 1: Making the Model a Singleton.

                I'm a big fan of Singleton data models.  It's a way to make sure you're always referring to the same instance of your data, no matter where in the program you're referencing it.

                myUtil / MyModel.as

                 

                package myUtil
                {
                     public class MyModel
                     {
                          [Bindable] public var N:int = 0;
                
                
                          //all variables above this line
                /*******Singleton enforcement************************/
                
                        // Single Instance of Our ModelLocator
                        private static var __instance:MyModel = null;
                
                        public function MyModel(enforcer:SingletonEnforcer):void
                        { 
                             if (enforcer == null) {
                                throw new Error( "You Can Only Have One Model" );
                            }
                        }
                
                        // Returns the Single Instance
                        public static function getInstance():MyModel
                        {               
                            if (__instance == null)
                            {
                                __instance = new MyModel( new SingletonEnforcer );
                            }
                            return __instance;
                        }
                    }
                }
                
                // Utility Class to Deny Access to Constructor
                class SingletonEnforcer {}
                

                 

                I won't go into detail on how it works, you can find lot's of tutorials on the web about Singletons.  All you need to know is you use getInstance() to retrieve the one instance of the data model.  There's also a lot of slightly different ways of creating Singletons, but the concept will be the same.  This will probably be something you'll want to save and use over and over in future projects. (At least I do)

                 

                Lesson 2: Binding.  You can bind to variables.  To bind to functions, you need to add events and that's all unnecessary in this case.

                 

                Here's a slightly reworked recommBlgs.mxml

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
                     xmlns:es="components.hm.editSummary">
                
                 <mx:Script>
                      <![CDATA[
                           import myUtil.MyModel;
                          import flash.events.MouseEvent;
                          import MyUtil.MyModel;
                          
                          [Bindable] public var dataXML:XML;
                          [Bindable] public var rblogN:int;
                          [Bindable] public var myModel:MyModel = MyModel.getInstance();
                          [Bindable] public var q:int;
                
                          private function show(event:MouseEvent, n:int):void {
                               myModel.N = n;
                               rblogN = myModel.N;
                //               q=myModel.getN();
                               trace(rblogN);
                          }
                      
                      ]]>
                 </mx:Script>
                
                
                     <mx:VBox height="100%" width="100%" backgroundColor="#FFFFFF" >
                          <mx:HBox>
                               <mx:Label text="q: "/>
                               <mx:Label text="{myModel.N}"/>
                          </mx:HBox>
                     </mx:VBox>
                </mx:Canvas>
                
                Notice that instead of binding to a function getN(), it's just binding to the variable N since you marked it [Bindable].  Whenever it changes, it'll make the change in the places you've bound to it.
                You probably don't need all the extra variable to hold rblogN, since you can just bind directly to it, but I didn't want to strip all your code.
                Home.mxml
                <?xml version="1.0" encoding="utf-8"?>
                <mx:Canvas width="100%" height="100%"
                             xmlns:mx="http://www.adobe.com/2006/mxml"
                             label="HOME"
                             xmlns:cmps="components.hm.*">
                 
                 <mx:Script>
                      <![CDATA[
                          import myUtil.MyModel;
                          
                          [Bindable] public var myModel:MyModel = MyModel.getInstance();
                          [Bindable] public var newBlogN:int = 0;
                          [Bindable] public var blogN:int=7; // initial, no change from recommBlgs
                      ]]>
                 </mx:Script>
                 
                     <mx:XML id="dataXML" source="data/blogs.xml"/>
                 
                     <mx:VBox>
                          <cmps:recommBlgs dataXML="{dataXML}" rblogN="{blogN}"/>
                          <mx:HBox>
                               <mx:Label text="New blogN"/>
                               <mx:Label text="{myModel.N}"/>
                          </mx:HBox>
                          <cmps:scoreDrgDrop/>
                          <cmps:editSummary dataXML="{dataXML}" blogN="{myModel.N}"
                               y="391" height="281" width="760"/>
                     </mx:VBox>
                     <!-- other components... -->
                 
                </mx:Canvas>
                
                Home has pretty much the same concepts since they are both binding to the same model and data.
                The magic of data binding is extrememly time saving since to managing all the events for changes and handling the changes has been done for you by the Flex team.  I think understanding this concept will make your Flex apps much easier to write!
                I hope that helped, or better yet, solved your problem.  If so, please let me know (mark it as such).