?
Solved

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

Posted on 2011-02-22
7
Medium Priority
?
988 Views
Last Modified: 2012-05-11
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.
0
Comment
Question by:naveenm_006
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 17

Expert Comment

by:deepanjandas
ID: 34949347
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
 

Author Comment

by:naveenm_006
ID: 34950003
Can you provide sample custom component.

Regards,
Naveen.
0
 

Accepted Solution

by:
jayasainaths earned 1000 total points
ID: 34963801
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
Need protection from advanced malware attacks?

Look no further than WatchGuard's Total Security Suite, providing defense in depth against today's most headlining attacks like Petya 2.0 and WannaCry. Keep your organization out of the news with protection from known and unknown threats.

 

Author Comment

by:naveenm_006
ID: 34967092
Can u briefly explain me abt these methods.ie., when to override etc., also tell me your code flow.

Regards,
Naveen.
0
 

Author Comment

by:naveenm_006
ID: 34967349
What is this two lines tells about:

 this.rawChildren.addChild(btn);
 this.rawChildren.addChild(btn2);
0
 

Expert Comment

by:jayasainaths
ID: 34968888
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
 
LVL 17

Expert Comment

by:deepanjandas
ID: 34968962
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

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
Introducing Priority Question, our latest feature.
In this video, Percona Director of Solution Engineering Jon Tobin discusses the function and features of Percona Server for MongoDB. How Percona can help Percona can help you determine if Percona Server for MongoDB is the right solution for …
In this video, Percona Solution Engineer Rick Golba discuss how (and why) you implement high availability in a database environment. To discuss how Percona Consulting can help with your design and architecture needs for your database and infrastr…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question