6 Replies Latest reply on Dec 8, 2010 9:40 AM by Chris Callaghan

    Referencing custom child components and their properties from the parent

    Chris Callaghan Level 2

      I'm trying to replicate the iphone style search box where the field says "Search" but when you click the text input the "Search" text disappears and a cancel button appears to the right of the input box.

       

      To achieve this, I have a custom border container which has a custom text input component and a custom button component inside it. The text input has the border disabled and focusAlpha set to 0, so all looks good.

       

      I have the custom text input dispatch two custom events (SearchEnter and SearchExit) which is being captured up throughout my application and works great for everything else. However, I need the custom cancel button (a sibling of the text input) to capture the events too, but it doesnt seem to work.

       

      My next approach was to have the custom border container capture the event (which it does), but I dont know how to reference the visible property of the custom cancel button (the child of the custom border container).

       

      The cancel button component is called "SearchCancel" and its id is "searchCancel".... I was hoping that in the border contained base class I could reference it with this.searchCancel.visible = true;

       

      I'm not looking for a new approach to my problem, more the way to access the properties of a child component from the base class of a custom container.

       

      Any help would be greatly appreciated

        • 1. Re: Referencing custom child components and their properties from the parent
          Devtron Level 3

          You need to setup an Event class that can dispatch events between parent/children objects.

           

          This is an enormous pain in the ***. It's not hard, its just tedious.

           

          For example, when you click the cancel button, you need the parent to be notified, right? You must dispatch an event that the parent listens for. Then the parent can react when that event is handled.

           

          To me, this is hand holding and this is where FLEX gets annoying. You're explicitly forcing UI components to speak to one another. But they shouldnt have to in this fashion, events should be exposed automatically and I should be able to access children/parent properties, regardless of scope. I understand your pain.

           

          I do not understand how event dispatching is considered Object Oriented programming. To me, its very procedural.

          • 2. Re: Referencing custom child components and their properties from the parent
            SashaKeith Adobe Employee

            Can you post some sample code of the structure of your custom BorderContainer?

            • 3. Re: Referencing custom child components and their properties from the parent
              Chris Callaghan Level 2

              Yeah, I've made the Event class andI can recieve the event in the borderContainer - its just the accessing of

              the borderContainers child once its got the event.

               

              Summarised files below (the trace statement works)

               

               

              SearchBoxContainer.mxml

               

              <addUnitBase:SearchBoxContainerBase>

               

                   <addUnit:SearchInput id="searchInput" width="100%" text="Search" focusAlpha="0"/>

               

                   <addUnit:SearchCancel id="searchCancel" width=20" visible="false"/>

               

              </addUnitBase:SearchBoxContainerBase>

               

               

               

              SearchBoxContainerBase.as

               

              pacakge etc....

              {

                   imports etc.....

               

                   public class SearchBoxContainerBase extends BorderContainer

                        {

                             public function SearchBoxContainerBase()

                             super();

                             addEventListener(SearchInputEvent.ENTER_SEARCHBOX, this.enterSearchBox_Handler);

                        }

               

                   private function enterSearchBox_Handler( event:SearchInputEvent ):void

                        {

                             trace("success"))

                             <!-- How do I change SearchCancel.visible from here? -->

                        }

              }

              • 4. Re: Referencing custom child components and their properties from the parent
                Devtron Level 3

                I think your handler function needs to be in SearchBoxContainer.mxml.

                 

                Instead of listening in the class, it should be in the component's AS3 code. Then it can directly reference anything defined in the MXML, such as your child component.

                • 5. Re: Referencing custom child components and their properties from the parent
                  SashaKeith Adobe Employee

                  Try something like this:

                   

                  this.contentGroup.getChildAt(0).visible = false;
                  

                   

                  Not sure if it's best practice but that will work I think. You can also try using states to control visibility.

                  1 person found this helpful
                  • 6. Re: Referencing custom child components and their properties from the parent
                    Chris Callaghan Level 2

                    Here's how you do it....

                     

                     

                    private function enterSearchBox_Handler( event:SearchInputEvent ):void

                    {

                         // "visibility" works as searchCancel is a displayobject

                         this.contentGroup.getChildByName("searchCancel").visible = true;    

                     

                         // we need to do a little more work here as we need to change the text of the object

                         var searchInput:SearchInput = this.contentGroup.getChildByName("searchInput") as SearchInput;

                         searchInput.text = "";

                    }

                     

                     

                    private function exitSearchBox_Handler( event:SearchInputEvent ):void

                    {

                     

                         this.contentGroup.getChildByName("searchCancel").visible = false;    

                     

                         var searchInput:SearchInput = this.contentGroup.getChildByName("searchInput") as SearchInput;

                         searchInput.text = "Search";

                    }

                     

                    ps - you need to define the value of the name property in the MXML