Solved

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

Posted on 2011-02-22
7
973 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 250 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
Surfing Is Meant To Be Done Outdoors

Featuring its rugged IP67 compliant exterior and delivering broad, fast, and reliable Wi-Fi coverage, the AP322 is the ideal solution for the outdoors. Manage this AP with either a Firebox as a gateway controller, or with the Wi-Fi Cloud for an expanded set of management features

 

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

Now Available: Firebox Cloud for AWS and FireboxV

Firebox Cloud brings the protection of WatchGuard’s leading Firebox UTM appliances to public cloud environments. It enables organizations to extend their security perimeter to protect business-critical assets in Amazon Web Services (AWS).

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Flex Builder 4.5 3 420
Crossdomain Policy 3 697
Flex Mobile - Problems with returning array results 5 484
Flex Mobile - check current view 2 912
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…
Facebook has became the #1 social media platform. People share many funny videos there, yet you don't know how to download them? Now you can download Videos from Facebook in just 3 simple steps.
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …
How to Install VMware Tools in Red Hat Enterprise Linux 6.4 (RHEL 6.4) Step-by-Step Tutorial

733 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