6 Replies Latest reply on Oct 29, 2009 11:59 AM by MikisM87

    Refer to something in a sibling component?

    Handycam Level 1

      I have 2 components, compA and comB. Both of them are instanced in the main app, siblings.

       

      In compB, I need to get the value of something in compA.

       

      For example, compA has anXMLListCollection "myColl".  In the parent (main) app, this is simply compA.myColl

       

      But what about "inside" compB?  What's the syntax?  This has always escaped me.

        • 1. Re: Refer to something in a sibling component?
          David_F57 Level 5

          Hi,

           

          try compA.mycollection =  parent.compB.mycollection,  vars need to be declared as public

           

          David

          • 2. Re: Refer to something in a sibling component?
            David_F57 Level 5

            Hi Steve,

             

            disregard my last post, should do posts when i'm half asleep

             

            in compA

             

            myArr = parent["CompB"].myArr;

             

            -now sleep time..(36 hours straight coding is way to long.)

             

            David.

             

            • 3. Re: Refer to something in a sibling component?
              Handycam Level 1

              Thanks, but it doesn't work, gives me an error:

               

              ReferenceError: Error #1069: Property step1 not found on

              spark.components.Group and there is no default value.

               

               

              When I try to use parent["step1"].itemChosenColl

              • 4. Re: Refer to something in a sibling component?
                David_F57 Level 5

                Hi,

                 

                been in fb3 mode for a day or 2 thats why it didn't work.

                 

                call an array in CompA from CompB

                 

                var myArray:ArrayCollection=FlexGlobals.topLevelApplication.CompA.myArray;

                 

                this should work.

                 

                 

                • 5. Re: Refer to something in a sibling component?
                  mewk Level 3

                  Another approach is to use parentDocument. Like FlexGlobals.topLevelApplication, parentDocument returns a generic object, so you can access properties you know will exist (like myCompA).

                   

                  Here is an example:

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/halo"
                    xmlns:comp="components.*">
                  
                    <s:VGroup verticalCenter="0" horizontalCenter="0">
                      <comp:BorderWithButton backgroundColor="red" alpha=".8"/>
                      <s:Border id="mySib" backgroundColor="blue" alpha=".8"
                                width="200" height="200"/>
                    </s:VGroup>
                  
                  </s:Application>
                  

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Border xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/halo" width="200" height="200">
                  
                    <fx:Script>
                      <![CDATA[
                        private function changeSiblingColor():void {
                          var mySibling:* = parentDocument.mySib;
                          mySibling.setStyle("backgroundColor", myTI.text);
                        }
                      ]]>
                    </fx:Script>
                  
                    <s:VGroup left="0" top="0">
                      <mx:Form defaultButton="{myButton}">
                        <s:TextInput id="myTI" width="100" text="gray" />
                        <s:Button id="myButton" label="change sib's color"
                                  click="changeSiblingColor()"/>
                      </mx:Form>
                    </s:VGroup>
                  
                  </s:Border>
                  

                  However, before going down this route you should really consider your design because you are violating a few oo principles here. You'd be creating a tightly-coupled system and really you should consider encapsulating your classes a little better. If some data (like your XMLListCollection) is going to be shared by multiple classes does it really make sense for any one component to have ownership of the data??

                   

                  Recommend you encapsulate the data into its own class -- you see this a lot in flex apps with manager classes (singletons) taking ownership of data shared between multiple components. You don't really need to use a singleton, just create one instance and give all the classes that need access to the data a reference to the managing class on startup.

                   

                  - e

                  • 6. Re: Refer to something in a sibling component?
                    MikisM87 Level 1

                    mewk is absolutely right. You should avoid navigating your application through parentDocument, FlexGlobals.topLevelApplication properties or whatever. You might want to consider Cairngorm-like design of your application. In particular, ModelLocator patter could solve your problem elegantly.

                    I'm not saying you should adopt everything from Cairngorm to your app: use only those parts that make sense in your situation.