3 Replies Latest reply on Sep 23, 2010 10:05 PM by BhaskerChari

    How to write a custom component

    SiHoop Level 1

      I have 3 quick questions about how to write a component. Here is the code in my main file that I want to write as a component:

      buttonCanvas=new Canvas;

      buttonCanvas.addEventListener(MouseEvent.MOUSE_DOWN, buttonMouseDownHandler)

      buttonCanvas.addEventListener(FlexEvent.CREATION_COMPLETE,setcanvasPosition)

      buttonCanvas.width=300;

      buttonCanvas.height=30;

      if(i%2==0){

           buttonCanvas.setStyle('styleName','style1');

      }else{

           buttonCanvas.setStyle('styleName','style2');

      }


      Here's the component:


      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"  creationComplete="init()" >
          <mx:Script>
              <![CDATA[
                  public var i:int
                  public function init():void{
                      trace("i="+i)
                      this.width=300;
                      this.height=30;
                      if(i%2==0){
                          this.setStyle('styleName','style1');
                      }else{
                          this.setStyle('styleName','style2');
                      }
                      //this.addEventListener(MouseEvent.MOUSE_DOWN
                  }
              ]]>
          </mx:Script>   
      </mx:Canvas>

       

      Question 1: What is the best way to pass the value of the variable 'i' to the compoonent? Do I need to write:

      buttonCanvas.i=i;
      or can I pass the argument to the component as follows, and if so, how to I capture the value in the component?:

      buttonCanvas= new ButtonCanvas(i);


      Question 2: Where is the best place to put the listeners? Should I put them in the main file:

                      buttonCanvas.addEventListener(MouseEvent.MOUSE_DOWN, buttonMouseDownHandler)
                      buttonCanvas.addEventListener(FlexEvent.CREATION_COMPLETE,setcanvasPosition)
      or should I put them in the component like this:

      this.addEventListener(MouseEvent.MOUSE_DOWN, buttonMouseDownHandler)

       

      Question 3:If I put them in the component, how do I point to the function named 'buttonMouseDownHandler' in the main file?

       

      Thanks for your time!
       

        • 1. Re: How to write a custom component
          BhaskerChari Level 4

          Hi SiHoop,

           

          Well coming to your questions here are the solutions:

           

          Question 1: What is the best way to pass the value of the variable 'i' to the compoonent? Do I need to write:

          buttonCanvas.i=i;
          or can I pass the argument to the component as follows, and if so, how to I capture the value in the component?:

          buttonCanvas= new ButtonCanvas(i);


          A)  You can use the method buttonCanvas.i=i; but not buttonCanvas= new ButtonCanvas(i) as this corresponds to a constructor instantiation and you cannot specify a explicit constructor for your component as the Flex compiler automatically provides one at the time of compilation;


          By using the second approach you cannot pass i value but you can use this syntax to pass value i..


          buttonCanvas= new ButtonCanvas();


          buttonCanvas["i"] = i;


          Question 2: Where is the best place to put the listeners? Should I put them in the main file:

                          buttonCanvas.addEventListener(MouseEvent.MOUSE_DOWN, buttonMouseDownHandler)
                          buttonCanvas.addEventListener(FlexEvent.CREATION_COMPLETE,setcanvasPo sition)
          or should I put them in the component like this:


          this.addEventListener(MouseEvent.MOUSE_DOWN, buttonMouseDownHandler)

           

          A) This purely depends on your requirement if you want to listen for those events with in your component and do somechanges in your component itself and not in other components then you can define listeners for those events in the same component.

           

          But if you want to know or communicate with other components that an event in your component has occured then you will define the eventListeners in the other components as below and update data or make changes in the other component accordingly..

           

          buttonCanvas= new ButtonCanvas();

          buttonCanvas.addEventListener(MouseEvent.MOUSE_DOWN, buttonMouseDownHandler);
          buttonCanvas.addEventListener(FlexEvent.CREATION_COMPLETE,setcanvasPosition);

           

          Question 3:If I put them in the component, how do I point to the function named 'buttonMouseDownHandler' in the main file?

           

          A) If you put the eventListeners with in the component and if you want to point to the function named 'buttonMouseDownHandler' in the main file then you need to do the following:

           

          //In your component

          this.addEventListener(MouseEvent.MOUSE_DOWN, buttonMouseDownHandler);

          private function buttonMouseDownHandler(event:MouseEvent)

          {

               //Here you need to dispatch a custim event to let know the other components that thi event has been dispatched

               this.dispatchEvent(new Event("buttonMouseDownEvent"));

          }

           

          //Now in your main mxml you need to listen for this event as shown below:

           

          buttonCanvas= new ButtonCanvas();

          buttonCanvas.addEventListener("buttonMouseDownEvent", buttonMouseDownHandler);
          buttonCanvas.addEventListener(FlexEvent.CREATION_COMPLETE,setcanvasPosition);

           

          private function buttonMouseDownHandler(event:MouseEvent)

          {

               //this is the function in your main mxml file

          }

           

           

          Hope you understand most of it....If you have any doubts let me know...

          Thanks,

          Bhasker

           

          • 2. Re: How to write a custom component
            SiHoop Level 1

            Great answers-- thank you!

            Just for clarification, in question 1 it's ok to use

            buttonCanvas.i=i;

            because the property 'i' is public in the component.

            • 3. Re: How to write a custom component
              BhaskerChari Level 4

              Yes you can use that way and it is most often and commonly used way of approach..

               

              Thanks,

              Bhasker

               

              Message was edited by: BhaskerChari