What are the methods we need to override while working with Custom Component in ActionScript?

What are the methods we need to override while working with Custom Component in ActionScript?

Give me some sample snippet such that it should cover all the UIComponent methods to be implemented.

Also provide me the flow of the program execution.

Regards,
Naveen.
naveenm_006Asked:
Who is Participating?
 
jayasainathsConnect With a Mentor Commented:
Hi Naveen,

Firstly, create a actionScript Class file that extends the component you want to build.

Then you need to override some protected methods like
1. createChildren();
2.measure()
3.commitProperties()
4.updateDisplayList(unscaledWidth:Number, unscaledHeight:Number)


then, include this file in your main application...

Hmmm, bored right???


Here is the sample code...

//CODE FOR SuperPanel.as

package
{
      import flash.events.MouseEvent;
      
      import mx.containers.Panel;
      import mx.controls.Button;
      
      public class SuperPanel extends Panel
      {
            public function SuperPanel()
            {
                  super();
            }
            
            public var btn:Button;
            public var btn2:Button;
            
            override protected function createChildren():void
            {
                  super.createChildren();
                  
                  btn = new Button();
                  btn.width = 50;
                  btn.height = 15;
                  btn.x = this.width - 110;
                  btn.y = this. height - 290;
                  btn.label = 'min';
                  btn.addEventListener(MouseEvent.CLICK, onbtnClick);
                  
                  btn2 = new Button();
                  btn2.width = 50;
                  btn2.height = 15;
                  btn2.x = this.width - 60;
                  btn2.y = this. height - 290;
                  btn2.label = 'max';
                  btn2.addEventListener(MouseEvent.CLICK, onbtn2Click);
                  
                  
                  this.rawChildren.addChild(btn);
                  this.rawChildren.addChild(btn2);
            }
            override protected function measure():void
            {
                  super.measure();
            }
            override protected function commitProperties():void
            {
                  super.commitProperties();
            }
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                  super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
            
            
            protected function onbtnClick(e:MouseEvent):void
            {
                  this.height = 30;
            }
            protected function onbtn2Click(e:MouseEvent):void
            {
                  this.height = 300;
            }
            
      }
}




//CODE for the main application


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" xmlns:local="*">
      
      <local:SuperPanel width="300" height="300" x="150" y="150"/>
</mx:Application>




Please Comment...

0
 
deepanjandasCommented:
The methods that needs to be implemented in a Custom Component that extends UIComponent depends on your requirements.
The most common methods that needs to be overridden are
createChildren();
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number);

Some available good tutorials for understanding UIComponent flow are here:
http://jwopitz.wordpress.com/2008/08/22/life-of-a-uicomponent/
http://danorlando.com/?p=122
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt5.html
http://www.adobepress.com/articles/article.asp?p=778932&seqNum=2
http://livedocs.adobe.com/flex/3/html/help.html?content=components_04.html
http://www.scribd.com/doc/136930/Creating-and-Extending-Flex-Components
http://www.dremsus.com/index.php/tag/uicomponent/
http://jwopitz.wordpress.com/2008/08/22/life-of-a-uicomponent/#comment-5298

Warm Regards
Deepanjan Das
0
 
naveenm_006Author Commented:
Can you provide sample custom component.

Regards,
Naveen.
0
Worried about phishing attacks?

90% of attacks start with a phish. It’s critical that IT admins and MSSPs have the right security in place to protect their end users from these phishing attacks. Check out our latest feature brief for tips and tricks to keep your employees off a hackers line!

 
naveenm_006Author Commented:
Can u briefly explain me abt these methods.ie., when to override etc., also tell me your code flow.

Regards,
Naveen.
0
 
naveenm_006Author Commented:
What is this two lines tells about:

 this.rawChildren.addChild(btn);
 this.rawChildren.addChild(btn2);
0
 
jayasainathsCommented:
To create a custom component, that has a button (min) on the top of a panel, it is to be created just when the panel creates itself.

For instance, Panel gets created when the method createChildren() is called from its base class, UIComponent.

So, to add a button to the panel, it should be created along with the panel and when both of the components are still in their raw state, they are to be added to the display list.

Regarding the flow, as compiler uses the sequence that is similar to the one I have used in the above example.

Hope your doubt is clarified, if not, please drop a mail at jayasainaths@gmail.com

Dont forget to reward me... :)
0
 
deepanjandasCommented:
This link will give you complete flow/life-cycle of UIComponent:
http://jwopitz.wordpress.com/2008/08/22/life-of-a-uicomponent/

Warm Regards
Deepanjan Das
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.