6 Replies Latest reply on Jul 21, 2009 8:47 PM by Gregory Lafrance

    dynamically add component question?

    cpthk0

      Hi:

       

      Here is part of my code in short:

      public class TextInputWithAutoComplete extends TextInput
      {
      
      
      private function addComp():void{
      
      
      list = new List();
      list.id = "autoCompleteList";
      list.x = 0;
      list.y = 20;
      list.addEventListener(MouseEvent.MOUSE_UP, handleMouseDown);
      
      
      parentDocument.addChild(autoCompleteList); OR addChild(autoCompleteList); //my question is here
      
      
      }
      
      
      private function handleMouseDown():void{
      //TODO
      }
      
      
      }
      

       

       

      I realized that if I do addChild, I can't really see the dynamically added component, since flex did not reserve space for my List to display. So I do parentDocument.addChild, and then the component appears no problem. My question is since it's being added in the parentDocument, so it is suppose to be a component belong to parentDocument, so is that component still be able to call this handleMouseDown?

       

      From my experience, it's still able to, but which doesn't make sense to me.

       

      Can someone explain a little about why it can still work, or any better approach other than parentDocument.addChild

       

      Thanks.

        • 1. Re: dynamically add component question?
          leybniz

          you don't have to assign an Id for your list,

          just use this line addChild(list);

          and you'll get going

          • 2. Re: dynamically add component question?
            cpthk0 Level 1

            1. That is not my quesiton is.

            2. As I mentioned earlier, if I only do addChild(), the component will not show up. Flex did not reserve space for this component, so it has been hide underneeth other components.

            • 3. Re: dynamically add component question?
              Flex harUI Adobe Employee

              In Flex there is a lifecycle that represents the contract between the component and its parent.  See the chapters on creating custom components and the lifecycle methods createChildren, commitProperties, measure and updateDisplayList.

               

              Some components size to content like Containers.  When you add a child to a container it will measure the child and make room for it or add scrollbars if there isn't enough room.

               

              If you add a child to TextInput, it doesn't expect additional children so it will not make room for it.  You can subclass and override its measure and updateDisplayList methods to make room for an additional child.

               

              I would not recommend adding another interactive control to an interactive control since that will make managing focus and accessibility much harder.  It is better to group these in a container in most cases.

               

              The reason the mouse handler still gets called is because a handler can be on any object whether it is a child or sibling or parent and will be called by the object dispatching the event if the handler is listening to that object.  If you had attached the handler to "this" it would not get called when the List is not a child of "this".

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

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

              • 4. Re: dynamically add component question?
                Gregory Lafrance Level 6

                If you just use addChild, it will be added to the TextInputWithAutoComplete object. Did you also add that object (the TextInputWithAutoComplete instance)?

                 

                If this post answered your question or helped, please mark it as such.

                • 5. Re: dynamically add component question?
                  cpthk0 Level 1

                  I think I understand right now

                  But my explanation is that the event handler is like an method to the "TextInputWithAutoComplete" object. So when I initiate the object, I could call its method any where.

                   

                  Just like in Java, I do:

                  TextInputWithAutoComplete i = new TextInputWithAutoComplete();
                  i.handleMouseDown();
                  

                   

                  Is this the idea you were saying? Can you confirm for me?

                   

                  Thanks.

                  • 6. Re: dynamically add component question?
                    Gregory Lafrance Level 6

                    No this is what I mean:

                     

                    private var myComp:TextInputWithAutoComplete = new {TextInputWithAutoComplete ();

                    this.addChild(myComp);  // 'this' is the parent of the TextInputWithAutoComplete instance


                    Then inside the TextInputWithAutoComplete  class:

                    this.addChild(autoCompleteList);

                     

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