jQuery-style Flex 4 component

I kept seeing this component on: http://www.ericmmartin.com/projects/simplemodal-demos/ (click on basic modal)  image gallerys and other sites.  I even started to see it on msn.com and wondered  if I could make this component with a little bit of ActioncSript and some Fireworks and then extending one of the Flex components. I think I nailed it, but you guys be the judge.  Hopefully this helps someone else.  I built this using the 4.5 SDK

First lets start by the displaying the custom component.

package
{
 import flash.events.Event;
 import flash.events.MouseEvent;
 
 import mx.controls.Image;
 import mx.states.SetStyle;
 
 import spark.components.Group;
 import spark.components.SkinnableContainer;


[Event(name="ClosethisContainer", type="flash.events.Event")]
 public class ButtonGroup extends SkinnableContainer
 {
  
  private var CloseButton:Image;
  
  private static const DEFAULT_HEIGHT :Number = 400;
  private static const DEFAULT_WIDTH  :Number = 400;
 
  public function ButtonGroup()
  {
   super();
  }
 
 
  protected override function createChildren():void
  {
   
   super.createChildren();
   CloseButton = new Image();
   CloseButton.source = 'CloseButon.png';
   CloseButton.buttonMode = true;
   this.addElement(CloseButton);
  
  
  }
 
  protected override function updateDisplayList(unscaledWidth:Number,
               unscaledHeight:Number):void{
   super.updateDisplayList(unscaledWidth, unscaledHeight);
   
   
 
   this.setStyle('backgroundColor','Black');
      
   var pixelsRight:int =15;
   var pixelsTop:int = -15;
   //set x and y properties to be used for positioning of button
   var x:Number = unscaledWidth - pixelsRight;
   var y:Number = pixelsTop;
   //position the button in the panel
   CloseButton.move(x, y);
   CloseButton.addEventListener(MouseEvent.CLICK,RemoveThisContainer);
   
   
   
   
   
  }
  
  
  protected override function measure():void{
   super.measure();
   //short circuit the component to add a default height and width
  //in case we forget to put a height and widht on the component.
  
   measuredMinHeight = measuredHeight = DEFAULT_HEIGHT;
   measuredMinWidth  = measuredWidth  = DEFAULT_WIDTH;
  
  }
  
  
  
  private function RemoveThisContainer(event:MouseEvent):void
  {
    
   //let the application know we are ready to be removed.
   var eventObj:Event = new Event("ClosethisContainer");
   dispatchEvent(eventObj); 
  
  
  
  }
  
   
         }
 }

now for the application

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      minWidth="955"
      minHeight="600"
      xmlns:local="*"
      >
 
 <fx:Script>
  <![CDATA[
   import mx.controls.Text;
   import mx.managers.PopUpManager;
   
   import spark.components.TextArea;
  
   
   private var Jcontainer:ButtonGroup; 
  
   protected function removeFromStage(event:Event):void
   {
    PopUpManager.removePopUp(Jcontainer);
   }
   
   protected function button1_clickHandler(event:MouseEvent):void
   {
    //create a sample element for instructional purposes.
    var textValue:TextArea = new TextArea();
    
    textValue.text = 'yup i popped-wooo-whoo';
    textValue.alpha = .5;
    Jcontainer= new ButtonGroup;
    //Jcontainer.id = 'Jcon';
    Jcontainer.addEventListener('ClosethisContainer',removeFromStage);
   
    Jcontainer.addElement(textValue);
    
    
    
    PopUpManager.addPopUp(Jcontainer,this,true );
    PopUpManager.centerPopUp(Jcontainer);
   
   
   
   
   
   }
   
  ]]>
 </fx:Script>
 
 
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 
 
<s:Button label="openPopUp" click="button1_clickHandler(event)"/>
 
</s:Application>

Very simple!  Here is a quick walkthrough:

First create the custom component. override the create children method to add our button.  Then override the update displaylist function to place our button, we also pimped our component a bit and overrode the measure method so that we can allow for constant height and width in case we forget to put one in.  Also we set the min to be a  width of 400 px and a height of 400 px. We also set the background color to a black by using the setstyle method.

if you like to see the component in action just go to:

http://www.miguelontheweb.com/JqueryComps/CreatingJqueryStyleComponent.html