3 Replies Latest reply on Oct 5, 2009 6:41 AM by jake_flex

    Component design question

    jake_flex

      Hi,

       

      I have a question regarding component design.

       

      Let's say I have two component A and B, and one main container that loads them. I need to do some operations in component B when an event happens in component A. Previously I have made the connection so that I add a eventlistener for A in the main container and then access the B component properties from the main app. Something like below

       

      private function init(event:Event) : void
      {
           // a is instance of A component, created with MXML
           a.addEventListener(someEvent, aEventHandler)
      }
      
      private function aEventHandler(someEvent) : void
      {
           // b is instance of B component, create with MXML
           b.someProperty = someValue
      }
      

      This works just fine, but it's breaking the encapsulation and also makes the code hard to read/follow. In this case, A and B components are mainly for the presentation, all the logic is concentrated on the container which they belong to.

       

      My idea would be to have the event listener for someEvent in component A and then dispatch a custom event from there for the main container to handle. For component B, I'd probably create setters and getters and define the public interface with those.

       

      What do you more flexperienced programmer think? Will this work? Is there a better way to achieve the functionality?

       

      Thanks.

        • 1. Re: Component design question
          JeffryHouser Level 4

          I would say this does not break encapsulation.  You have made both a and b loosely typed by using events and properties for them to communicate.

           

          Their container component is less loosely typed because it relies on both a and b.

           

          If you're worried about putting business logic in the container component, then wrap that business logic up in a public method on a or b and expose it as a property.  Additionally you could tie into the component lifecycle to coordinate property changes in commitProperties.

          1 person found this helpful
          • 2. Re: Component design question
            Gregory Lafrance Level 6

            Best way is to use custom events to pass data among components.

             

            Here is my Flex 3 Coobook post.

             

            http://cookbooks.adobe.com/index.cfm?event=showdetails&postId=15466

             

            Here are my tutorials, there are several on custom events:

             

            http://www.chikaradev.com/

             

            If this post answers your question or helps, please mark it as such.

            1 person found this helpful
            • 3. Re: Component design question
              jake_flex Level 2

              Thanks for the replies.

               

              In my case, the custom events seem to fit best, so I'll use them.

               

              I realized now few days later that my example was probably not the best to describe the case. It's more like that I'm accessing the components inside compmonent a from the main app. Something like this

               

              a.button.addEventListener(...)
              

              So, for cases like this, I'll handle the events of button inside a component, and the dispatch a custom event from a that can be handled in the main.