6 Replies Latest reply on May 29, 2007 2:29 PM by fuzzarooO

    Passing Variable data between Tabs in TabNavigator?

    fuzzarooO
      Hi guys, i'm having like such a major issue with this even though figuring it out shouldn't be so complicated and would in fact help me with my app completely.

      i got one textInput on one tab and I want the data to be stored in a variable where I can pass it to a text Input in another tab?

      and what if I have a Main app, and two components? How do i pass a variable value from Component A to Component B?
        • 1. Re: Passing Variable data between Tabs in TabNavigator?
          peterent Level 2
          You could do it with data-binding like this:

          <mx:TabNavigator ... >
          <mx:Canvas label="Tab 1">
          <mx:TextInput id="input1" />
          ...
          </mx:Canvas>
          <mx:Canvas label="Tab 2">
          <mx:TextInput id="input2" text="{input1.text}" />
          ...
          </mx:Canvas>
          </mx:TabNavigator>
          • 2. Re: Passing Variable data between Tabs in TabNavigator?
            fuzzarooO Level 1
            thanks for the response, Peter, but you see, we're really looking at it in a simple way in the sense that whatever i have in text Input 1 will be in text Input 2.

            What If I'm going to do some kind of calculation to text Input 1 and the result of that will be in text Input 2? What I find myself dealing with all the time is the "referencing null object error".

            If I'm not being clear, I'll try to post an example, but thanks again.
            • 3. Re: Passing Variable data between Tabs in TabNavigator?
              peterent Level 2
              You can still use data binding:

              <mx:TextInput id="input2" text="{calcResult}" />

              <mx:Script>
              [Bindable] public var calcResult:String;
              ...
              // function here to take input1.text, perform a calculation, turn it into a String, and put it into calcResult
              </mx:Script>
              • 4. Re: Passing Variable data between Tabs in TabNavigator?
                BLXWebMaster Level 1
                You mention that you have two components in a tabnavigator.

                Although the previous answers may work, I belive that it is not best practice to impliment via binding across components. Componenets should not know about eachother. Using bindings and traversing via dot notation goes against best practices. Best practices is to raise events. "Loosely Coupled Applications".

                Here is an example of raising events to accomplish what you are trying to do.


                Here Is The Application File:
                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application
                pageTitle="Events"
                layout="vertical"
                xmlns:comp="*"
                xmlns:mx=" http://www.adobe.com/2006/mxml">
                <mx:Script>
                <![CDATA[
                public function doSyncText( event:SyncTextEvent ):void
                {
                cvsSync1.content = event.content;
                }
                ]]>
                </mx:Script>
                <mx:HBox width="100%" height="100%">
                <mx:TabNavigator creationPolicy="all" id="Test" width="100%" height="100%">
                <comp:SyncTextCanvas
                id="cvsSync1"
                width="100%"
                height="100%"
                label="Canvas 1"
                syncText="cvsSync2.content = event.content" backgroundColor="#ffffff"/>
                <comp:SyncTextCanvas
                id="cvsSync2"
                width="100%"
                height="100%"
                label="Canvas 2"
                syncText="doSyncText( event )" backgroundColor="#ffff00"/>
                </mx:TabNavigator>
                </mx:HBox>
                </mx:Application>


                SyncTextCanvas.mxml
                <?xml version="1.0" encoding="utf-8"?>
                <mx:Canvas width="400" height="300" xmlns:mx=" http://www.adobe.com/2006/mxml">
                <mx:Metadata>
                [Event( name="syncText", type="SyncTextEvent" )]
                </mx:Metadata>

                <mx:Script>
                <![CDATA[
                public function doChange( event:Event ):void
                {
                var dispatch:SyncTextEvent = new SyncTextEvent( SyncTextEvent.SYNC_TEXT, content );

                dispatchEvent( dispatch );
                }

                [Bindable]
                public function get content():String
                {
                return txtContent.text;
                }

                public function set content( content:String ):void
                {
                txtContent.text = content;
                }
                ]]>
                </mx:Script>

                <mx:Label left="20" top="3" text="{label}" styleName="white" />
                <mx:VBox horizontalCenter="0" verticalCenter="0">
                <mx:Label text="Enter some text:" />
                <mx:TextInput id="txtContent" change="doChange( event )" />
                </mx:VBox>
                </mx:Canvas>

                SyncTextEvent.as
                package
                {
                import flash.events.Event;

                public class SyncTextEvent extends Event
                {
                public static const SYNC_TEXT:String = "syncText";

                public var content:String = null;

                public function SyncTextEvent( type:String, content:String )
                {
                super( type );

                this.content = content;
                }

                override public function clone():Event
                {
                return new SyncTextEvent( type, content );
                }
                }
                }

                • 5. Re: Passing Variable data between Tabs in TabNavigator?
                  fuzzarooO Level 1
                  thanks to the both of you for your different approaches. I will try out both and respond to the approach i went about even though I'm certain both get the job done.
                  • 6. Re: Passing Variable data between Tabs in TabNavigator?
                    fuzzarooO Level 1
                    hi guys, ok this event bubbling thing is picking up, however, everywhere i look i see these alert examples and that's fine but nothing goes beyond that.

                    so please bear with me as I'm sure this thread will help out many others.

                    I've got three custom components in a Tab Navigator.
                    - CC_1 is in TAB 1 and is simply a text Input box.
                    - CC_2 is in TAB 2 and contains two input boxes.
                    - CC_3 is also in TAB 2 and contains a line graph.
                    CC_3 has a public variable, chartProvider which is bindable to the dataProvider of the chart.

                    - the input box in CC1 determines the y-axis of CC_3's line graph.
                    -The two input boxes in CC2 determine the x-axis of CC_3's line graph.

                    What I'm having trouble doing is combining both results at a meeting point so i can run a function that takes all 3 inputs and actually gives me the ArrayCollection to set the DataProvider.

                    Now I'm certain the way i have my event bubbling is working out because I've tried the following with Alerts and it is responding correctly, but what I'm feeling is that I'm drifting away from event bubbling once I reach the parent.

                    my main app looks like this:

                    <mx:Script>
                    <![CDATA[
                    import mx.collections.ArrayCollection;
                    import events.*;

                    private function dateChangedHandler(event:dateChangedEvent):void {
                    //event only has a myDate string variable because thats what calculated in the component.
                    // I need to be able to bring in currentCount and endCount from CC2 so I can call my chart maker function.
                    // CC_3.chartProvider = chartMaker();
                    };

                    private function countChangedHandler(event:countChangedEvent):void {
                    //event only returns currentCount and endCount variable because thats whats being calculated in textInput.
                    // I need to be able to bring in myDate from the first event handler above so i can call my chartMaker function.
                    // CC_3.chartProvider = chartMaker();
                    };
                    ]]>
                    </mx:Script>

                    <mx:TabNavigator x="0" y="10" width="1024" height="758" creationPolicy="all">
                    <mx:Canvas label="Tab 1" width="100%" height="726">
                    <mx:HBox x="0" y="10" width="100%">
                    <customComps:CC1 id="CC_1" dateChanged= "dateChangedHandler(event);"></customComps:CC1>
                    </mx:HBox>
                    </mx:Canvas>

                    <mx:Canvas label="Tab 2" width="100%" height="725">
                    <mx:VBox x="10" y="10" height="100%" width="400">
                    <mx:HBox width="100%">
                    <customComps:CC2 id = "CC_2" countChanged= "countChangedHandler(event);"></customComps:CC2>
                    </mx:HBox>
                    </mx:VBox>
                    <mx:VBox x="418" y="10" height="100%" width="594">
                    <customComps:CC3 id="CC_3" width="592"></CC3>
                    </mx:VBox>
                    </mx:Canvas>
                    </mx:TabNavigator>