4 Replies Latest reply on Nov 5, 2007 5:23 AM by xbiral

    binding to another component

    xbiral
      Hi there,

      Noob here, recently coding. Please excuse me if i'm using incorrect wording.
      I've only just started to understand binding variables and calling functions, however i've only managed to do this when all the pages are in one main mxml file or within states. This grew very messy with many views which have now been boken down to components some in a viewstack.
      My question is how to communicate from one component to another. For example having a tree or tilelist in one component and the selected results called in another component.
      Thanks for any help
      Larry
        • 1. Re: binding to another component
          Gregory Lafrance Level 6
          Here is some code for an app built with components. You can see how the pieces talk to each other a bit.

          ------------------------- ViewStack1.mxml ---------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:comp="components.*"
          layout="vertical" width="100%" height="100%" >
          <comp:TopBar />
          <mx:HBox width="100%" height="100%">
          <comp:LeftBar />
          <mx:VBox width="100%" height="100%">
          <mx:ViewStack id="myViewStack" borderStyle="none" width="100%" height="100%">
          <mx:VBox id="home" width="100%">
          <comp:MainIntroText />
          <mx:HRule width="50%" height="3" strokeColor="0xCC3333"/>
          <comp:MainSecondaryText />
          <mx:HRule width="50%" height="3" strokeColor="0xCC3333"/>
          <comp:MainFinalText />
          </mx:VBox>
          <mx:VBox id="about" width="100%">
          <comp:About />
          </mx:VBox>
          <mx:VBox id="contact" width="100%">
          <comp:Contact />
          </mx:VBox>
          </mx:ViewStack>
          </mx:VBox>
          </mx:HBox>
          </mx:Application>
          ------------------------------- About.mxml -----------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
          <mx:VBox width="65%">
          <mx:Text fontSize="14" width="100%" text="This page tells you about us." />
          </mx:VBox>
          </mx:HBox>

          ----------------------------------- Contact.mxml ---------------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
          <mx:VBox width="65%">
          <mx:Text fontSize="14" width="100%" text="This page tells you how to contact us." />
          </mx:VBox>
          </mx:HBox>

          ------------------- LeftBar.mxml -------------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="200" height="100%">
          <mx:LinkButton label="Adobe Labs - Flex"
          click="navigateToURL(new URLRequest(' http://labs.adobe.com/technologies/flex'), '_blank');"/>
          <mx:Spacer height="20"/>
          <mx:Label fontSize="16" text="Flex Blogs"/>
          <mx:LinkBar direction="vertical" width="90%" itemClick="navigateToURL(new URLRequest(event.item.data), '_blank');">
          <mx:Object label="Adobe Flex Team Blog" data=" http://weblogs.macromedia.com/flexteam/"/>
          <mx:Object label="Flex Blog Aggregator" data=" http://www.allyourflexarebelongtous.com/"/>
          <mx:Object label="Adobe Flex Blog Aggregator" data=" http://weblogs.macromedia.com/mxna/index.cfm?query=byCategory&#38;categoryId=5&#38;categor yName=Flex"/>
          </mx:LinkBar>
          <mx:Spacer height="20"/>
          <mx:Label fontSize="16" text="Example Flex Apps"/>
          <mx:LinkBar direction="vertical" id="addlRscList" width="90%" itemClick="navigateToURL(new URLRequest(event.item.data), '_blank');">
          <mx:Object label="Adobe Flex Store" data=" http://www.adobe.com/devnet/flex/samples/flex_store_v2/"/>
          <mx:Object label="Adobe Dashboard Example" data=" http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html"/>
          <mx:Object label="Buzzword Word Processor" data=" http://preview.getbuzzword.com/?s=true"/>
          <mx:Object label="Adobe Style Explorer" data=" http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html"/>
          <mx:Object label="Adobe Component Explorer" data=" http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html"/>
          </mx:LinkBar>
          </mx:VBox>

          ----------------------- MainFinalText.mxml ----------------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
          <mx:Text width="100%" fontSize="12"
          text="Here is the final text I want to show you." />
          </mx:VBox>

          --------------------------- MainIntroText.mxml -------------------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
          <mx:Text width="100%" fontSize="12"
          text="Here is the main text I want to show you." />
          </mx:VBox>

          ----------------------- MainSecondaryText.mxml --------------------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
          <mx:Text width="100%" fontSize="12"
          text="Here is the secondary text I want to show you." />
          </mx:VBox>

          --------------- TopBar.mxml --------------------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
          <mx:Script>
          <![CDATA[
          private function goToViews(view:String):void {
          if(view == "home"){
          this.parentApplication.myViewStack.selectedChild=this.parentApplication.home;
          }
          if(view == "about"){
          this.parentApplication.myViewStack.selectedChild=this.parentApplication.about;
          }
          if(view == "contact"){
          this.parentApplication.myViewStack.selectedChild=this.parentApplication.contact;
          }
          }
          ]]>
          </mx:Script>
          <mx:LinkButton label="MySnazzyLogo" fontSize="20" click="goToViews('home');" />
          <mx:VBox width="100%">
          <mx:HBox width="100%">
          <mx:Spacer width="100%" />
          <mx:LinkBar fontSize="14" itemClick="goToViews(String(event.item.data));">
          <mx:Array>
          <mx:Object label="About Us" data="about"/>
          <mx:Object label="Contact Us" data="contact"/>
          </mx:Array>
          </mx:LinkBar>
          </mx:HBox>
          <mx:HBox width="100%">
          <mx:Spacer width="150" />
          <mx:Label fontSize="25" text="Here is Some Additional Text" />
          </mx:HBox>
          </mx:VBox>
          </mx:HBox>

          • 2. Re: binding to another component
            Gregory Lafrance Level 6
            Here is a short answer in case you have problems with all the code I posted. To communicate to the app containing a ViewStack in which a custom component has been placed:

            this.parentApplication.myViewStack.selectedChild=this.parentApplication.home;
            To communicate between components, give them IDs, and then use this.parentApplication. and the ids to communicate between components.

            This won't solve all your needs, but check the FB2 help for other info on components and interaction.
            • 3. Re: binding to another component
              ntsiii Level 3
              Communicating between Components:

              Note: for "loose coupling" use events. But that is another topic.

              A non-trivial flex application is "component" based. While all of the built in controls are components, the question of

              communicating between components really only arises when you are using a custom component. A custom component, whether

              implemented in mxml or ActionScript, has its own "scope". Within that component (Application is a component too!), all

              sibling child controls share the same scope, so you can refer to controls by their id. If the controls(components) have

              public properties or methods, you can refernce those members directly through the id:
              <mx:TextInput id="textinput1" text="test value" .../>
              <mx:Text id="text1" ... text="{textinput1.text}" .../>

              Ok, so far, its a "duh" right?

              When you use custom components in a Flex app, at run time they make a document object model hierarchy (DOM). Each

              subcomponent has its own scope and can't *directly* reference the member properties or methods of its sibling

              subcomponents.

              So again, within a component, you can refernce siblings directly, as in the example above. But there are two other cases

              inherent in a hierarchy. You might want to reference "up", to get to public members of the parent, or 'down", to get to

              public members of some child.

              Accessing members in the parent:
              On an ordinary component DOM, you can reference the parent component using the .parent property. Say that a control with

              id="textinput1" exists in the parent of the current component. then you could do:
              <mx:Text id="text1" ... text="{parent.textinput1.text}" .../>

              Accessing members in the main application:
              Components can be nested, sometimes very deeply. If the reference you want is all the way at the top-level, main

              application (the one with the <mx:Application> tag), you could do {parent.parent.parent.textinput1.text}, but you would

              have to count the component levels just right. Instead, you can use Application.application to get to that scope:
              <mx:Text id="text1" ... text="{Application.application.textinput1.text}" .../>
              You can shoretn this style of reference by importing mx.core.Application, and assigning Application.application to a

              variable, like _app, the doing (_app.textinput1.text)

              Accessing members of a child component:
              Say that in this case, a child component has the TextInput control you want to reference. First, make sure the child

              component has an id:
              <myComp:MyCustomComp id="mycc1" .../>
              Then, in the same scope (the same component/file that contains as the tag above) you can say:
              <mx:Text id="text1" ... text="{mycc1.textinput1.text}" .../>

              Accessing a nested component:
              As mentioned above you can go "up" the hierarchy using "parent.parent...". You can als go "down" the hirearchy using id

              references:
              <mx:Text id="text1" ... text="{mycc1.mycc11.mycc.12.textinput1.text}" .../>

              Additional notes:
              If you are using SWFLoader to load an entire Application, you can reference the immediate parent application using

              "parentDocument". You can also use Application.application to reach the main app, as shown above.

              Accessing members of an application loaded by SWFLoader is a bit more complicated. See the example here:
              http://www.cflex.net/showFileDetails.cfm?ObjectID=690

              • 4. Re: binding to another component
                xbiral Level 1
                Thanks very much guys for the clear indepth and understandable answers.
                Very happy now and grateful.
                Larry