ThomasBurleson
6/10/2011 - 3:40 PM

Popup Behavior for any Flex component

Popup Behavior for any Flex component

/**
 * Add Popup Behavior to any Flex UI!
 *
 * 1) Want to show UI Components in Popup?
 * 2) Want to use show/hide effects, autoClose, modality?
 * 3) Want to use anchor constraints (top, right, etc.) to position the popup anywhere relative to ANY parent?
 * 4) Want to position the popup relative to the mouse or any other specific location?
 * 5) Want to cache the popup content for super-fast reuse ?
 * 6) Want it super easy... with no need to worry about events or memory cleanup?
 *
 * Then <Popup /> is the SUPER tag for you. Use as a toolTip, use as traditional Popup. Popup anything without 
 * the content needing to know how it is used!
 *
 * Below is sample code snippet to demonstrate usage. 
 * 
 *
 * Source is available on GitHub: Flex-Extensions
 *              https://github.com/CodeCatalyst/flex-extensions/blob/develop/src/com/codecatalyst/component/behavior/ui/Popup.as
 * 
 */
 

 <mx:Script>
   <![CDATA[

   /**
    * Show the SecurityClearances as popup for the current Employee
    */
    protected function onShowEmployeeSecurity(e:Event):void {

     // WOW! Couldn't be easier. 
     // Or use Popup::showAt(loc, offset) for manual positioning.

     popup.show();
   }

   ]]>
 </mx:Script>


<ui:Popup   id="popup"
      parent="{employeeDataGrid}"
      autoClose="true" modal="false"
      showEffect="{new ClassFactory( FadeIn,null, {duration:600} )}"   
      hideEffect="{new ClassFactory( FadeOut,null, {duration:400} )}"   
      xmlns:ui="com.codecatalyst.component.behavior.ui.*">
      
    <mx:Component>
      <hovers:SecurityClearances 
          bottom="100" horizontalCenter="0"
          employee="{outerDocument.selectedEmployee}"
          xmlns:hovers="com.zyrion.traverse.status.views.hovers.*"   />
    </mx:Component>
    
</ui:Popup>