9 Replies Latest reply on Jun 18, 2009 1:37 PM by ProjectedSurplus

    Bindings/Events between components

    ProjectedSurplus Level 1

      I have the following simplified mxml application but want to know how to move the label to a new component and the Button to a different component (both components then being in the application).  More specifically I cannot determine how to "address" the variable names and/or event listeners between components (ie component A event bubbles up to application but then does not "bubble" down to component B).  Thanks in advance.

      <?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" 
                                 minWidth="1024" minHeight="768" xmlns:components="components.*">
              
              <fx:Script>
              <![CDATA[
                      
                      import vos.BoringVO1;
                      
                      [Bindable]
                      public var vo : BoringVO1;
                      
                      public function button1_clickHandler(event:MouseEvent):void
                      {
                              vo = new BoringVO1;                    
                      }

              ]]>
              </fx:Script>
              
              <mx:Label id="theLabel" text="{vo.wall}"/>
              <s:Button click="button1_clickHandler(event)" x="82" y="3"/>
              
      </s:Application>

      ------------------------

      package vos
      {
              public class BoringVO1
              {
                      [Bindable]
                      public var wall : String = "Hello World";
              }
      }

        • 1. Re: Bindings/Events between components
          rtalton Level 4

          It's not clear to me what you are trying to do, but I think you're looking at creating a custom event which can pass any data you wish along with it to any component listening for it.

          1 person found this helpful
          • 2. Re: Bindings/Events between components
            ProjectedSurplus Level 1

            What I am attempting to determine is how to bind/send events from component A to component B without involving "relay code" on say the Main.mxml application.

             

            In other words, if Main.mxml contains componentA and componentB can say componentA declare a Metatag event that can be received by componentB directly or does it have to be received by code in Main which then dispatches another event which componentB then recieves and acts on? 

             

            And/or can "html type name chains be used such that a <mx:Binding> could have say source="componentA.input1.text" destination="main.componentB.label.text" />    ????  TIA

            • 3. Re: Bindings/Events between components
              Flex harUI Adobe Employee

              Model/View and MVC architectures generally avoid these problems.

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              • 4. Re: Bindings/Events between components
                ProjectedSurplus Level 1

                Thanks, that is pretty much what I thought/wanted confirmed.

                 

                Fwiw I am looking at various frameworks and seem to like the simplicity of mate.  Do you have any thoughts?

                 

                Also, in my research I came across flex modules.  I don't know much about them at the moment but as I understand it modules are akin to "components which would be called/downloaded only upon demand rather than built into part of the main application.  As such, might you have any links to outline how modules communicate with the main app?

                 

                TIA

                • 5. Re: Bindings/Events between components
                  rtalton Level 4

                  btw, if all you need to do is bind one component's text property with another component's text property, you can easily do this in the component's MXML tags within the main application.

                  • 6. Re: Bindings/Events between components
                    rtalton Level 4

                    The bigger question is how can I post code in a reply without it looking like dog poop? This new Forum has me befuddled.

                     

                    But today I had time to cook up an example of passing data between custom components without using "relay" code in the parent application.

                     

                    Before I give you the (temporary) url to the example, I must make a disclaimer:

                    1. Yes, I know the solution probably violates best practices.
                    2. Yes, I know the solution probably violates Model/View/Controller principles.

                     

                    But hey, Flex doesn't have an simple way to do this, and the original poster needs a fix for a very specific case, so there.

                     

                    Now, the good points. This solution demonstrates:

                    1. Creating a custom event, which you can easily extend yourself.
                    2. How to pass any data you wish along with the custom event. (Great for passing data from a custom component back to the parent application - a technique people ask about constantly).
                    3. How to clone the custom event using override. You may not need to know this now, but you will at some point.

                     

                    Anyways, here's the url, with source-view enabled.

                     

                    Enjoy!

                    1 person found this helpful
                    • 7. Re: Bindings/Events between components
                      ProjectedSurplus Level 1

                      Awesome response, thanks greatly, your effort is sincerely appreciated.

                       

                      A great reference to know IMHO is the:

                                  this.parentApplication.addEventListener(MyCustomEvent.CUSTOM_EVENT,handleItB);

                       

                      That said, I've spent the last night with Mate (I know, awesome social life) and to my uneducated eye it seems they do much the same things you outline in your code.

                      • 8. Re: Bindings/Events between components
                        rtalton Level 4

                        Yeah, the line:

                        this.parentApplication.addEventListener(MyCustomEvent.CUSTOM_EVENT,handleItB);

                        ...is kind of a work-around I did because you didn't want that code in the parent app, which is probably where it really should be. But we can get all theoretical at this point and argue over what's best practice, blah blah blah and I don't want to go there.

                         

                        My example could just as easily have been accomplished by binding CompB's text property to the CompA's text prop, all right in the parent app's MXML declaration of these two components:

                        <ns1:ComponentA id="compA"/>
                        <ns1:ComponentB id="compB" text="{compA.text}"/>

                        Nothing could be easier!

                         

                        But eventually you'll need to make a custom event to return different kinds of data to a parent, and that's all I wanted to show you. Like, say, some values from a pop-up window--a custom event can carry tons of information (XML, computed values from actionscript functions, the current state of a video being played, etc.) and return it to anything listening for it, not just simple text values.

                         

                        Glad it helped you.

                        Have fun!

                        • 9. Re: Bindings/Events between components
                          ProjectedSurplus Level 1

                          Definitely.  IMHO the "proper" way to do things debate is kind of holding back my learning flex (especially as there are 8 different proper ways yet pretty much every newbie tutorial ignores them completely in order to convey the "easy" way) but that is a digression.

                           

                          Frankly this.parentApplication.addEventListener(MyCustomEvent.CUSTOM_EVENT,handleItB);     IS still on the main application page even if written in a component but the point I was looking for is just that.  Specifically what I have taken out of this is that (due to bubbling up) everything goes through the main application page anyway (ie Mate has an event map which must be instantiated on the main mxml)   BUT (thanks to you) that there are ways to separate code if desired. 

                           

                          So thanks again.