public
Created

Flex component to display modal popup windows that self-close on delay using the SkinnablePopUpContainer.

  • Download Gist
Main.mxml
XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
<?xml version="1.0" encoding="utf-8"?>
<!--
Michael Ritchie
mister@thanksmister.com
Copyright 2011 ThanksMister LLC
-->
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
 
<fx:Style source="style.css"/>
<fx:Script>
<![CDATA[
import com.thanksmister.controls.Toast;
protected function button1_clickHandler(event:MouseEvent):void
{
var toastDialog:Toast = new Toast();
toastDialog.width = this.width;
toastDialog.height = this.height;
toastDialog.popToast( "Here is some toast..." );
toastDialog.open(this, true);
}
]]>
</fx:Script>
<s:Button label="PopToast" click="button1_clickHandler(event)"/>
</s:WindowedApplication>
Toast.mxml
XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
<?xml version="1.0" encoding="utf-8"?>
<!--
 
Michael Ritchie
mister@thanksmister.com
Copyright 2011, ThanksMister LLC
 
-->
<s:SkinnablePopUpContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
backgroundAlpha="0"
skinClass="com.thanksmister.controls.ToastSkin">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
.toastTextStyle
{
fontSize: 22;
color: #FFFFFF;
}
</fx:Style>
<fx:Script>
<![CDATA[
import mx.events.EffectEvent;
import spark.effects.Animate;
import spark.effects.animation.MotionPath;
import spark.effects.animation.SimpleMotionPath;
[Bindable]
private var message:String = "";
/**
* Timer used to remove the toast
*/
private var toastTimer:Timer;
 
/**
* Open a new Toast
* @param message
*/
public function popToast(message:String, delay:Number = 2000):void
{
this.message = message;
toastTimer = new Timer(delay);
toastTimer.addEventListener(TimerEvent.TIMER, onToastTimer, false, 0, true);
toastTimer.start();
}
/**
* Clean up / destroy the Toast
*/
private function burnToast():void
{
toastTimer.stop();
toastTimer.removeEventListener(TimerEvent.TIMER, onToastTimer);
toastTimer = null;
messageDisplay.text = "";
this.close();
}
protected function onToastTimer(event:TimerEvent):void
{
// Stop the timer
toastTimer.stop()
// Build and play a fade out animateion
var motionPath:SimpleMotionPath = new SimpleMotionPath("alpha", 1, 0);
var fadeEffect:Animate = new Animate(this);
fadeEffect.addEventListener(EffectEvent.EFFECT_END, fadeEffectEndHandler, false, 0, true);
fadeEffect.target = this;
fadeEffect.duration = 500;
fadeEffect.motionPaths = new Vector.<MotionPath>();
fadeEffect.motionPaths.push(motionPath);
fadeEffect.play();
}
protected function fadeEffectEndHandler(event:EffectEvent):void
{
burnToast();
}
]]>
</fx:Script>
<s:Group horizontalCenter="0" verticalCenter="0">
<s:Rect width="{messageDisplay.width + 30}" height="{messageDisplay.height + 30}" radiusX="8" radiusY="8">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.8"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0xCCCCCC" alpha="0.5" pixelHinting="true" weight="1.5"/>
</s:stroke>
</s:Rect>
<s:Label id="messageDisplay" horizontalCenter="0" verticalCenter="0" color="0xFFFFFF" fontSize="13" text="{message}"/>
</s:Group>
 
</s:SkinnablePopUpContainer>
ToastSkin.mxml
XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
<?xml version="1.0" encoding="utf-8"?>
<!--
 
Michael Ritchie
mister@thanksmister.com
Copyright 2011, ThanksMister LLC
 
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.SkinnablePopUpContainer")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
// Push backgroundColor and backgroundAlpha directly.
// Handle undefined backgroundColor by hiding the background object.
if (isNaN(getStyle("backgroundColor")))
{
background.visible = false;
}
else
{
background.visible = true;
bgFill.color = getStyle("backgroundColor");
bgFill.alpha = getStyle("backgroundAlpha");
}
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
<s:State name="closed" stateGroups="closedGroup"/>
<s:State name="disabledAndClosed" stateGroups="closedGroup"/>
</s:states>
<!-- Transitions for open and close -->
<s:transitions>
<s:Transition fromState="closed" toState="normal" autoReverse="true">
<s:Fade duration="150" target="{chrome}"/>
</s:Transition>
 
<s:Transition fromState="disabledAndClosed" toState="disabled" autoReverse="true">
<s:Fade duration="150" target="{chrome}"/>
</s:Transition>
<s:Transition fromState="normal" toState="closed" autoReverse="true">
<s:Fade duration="150" target="{chrome}"/>
</s:Transition>
 
<s:Transition fromState="disabled" toState="disabledAndClosed" autoReverse="true">
<s:Fade duration="150" target="{chrome}"/>
</s:Transition>
</s:transitions>
<!--- Defines the background and content group used by this skin. -->
<s:Group id="chrome" left="0" right="0" top="0" bottom="0" visible.closedGroup="false">
 
<!--- Defines the appearance of the SkinnablePopUpContainer class's background. -->
<!--- Setting Background alpha to 0 does not have any effect. -->
<s:Rect id="background" left="0" right="0" top="0" bottom="0">
<s:fill>
<!--- @private -->
<s:SolidColor id="bgFill" color="#FFFFFF" alpha="0"/>
</s:fill>
</s:Rect>
<!--
Note: Setting the minimum size to 0 here so that changes to the host component's
size will not be thwarted by this skin part's minimum size. This is a compromise,
more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
-->
<!--- @copy spark.components.SkinnableContainer#contentGroup -->
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
<s:layout>
<s:BasicLayout/>
</s:layout>
</s:Group>
</s:Group>
</s:Skin>
style.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
@namespace thanksmister "com.thanksmister.controls.*";
 
thanksmister|Toast
{
modalTransparency: .25;
modalTransparencyBlur: .25;
modalTransparencyColor: #000000;
}
 
 
/*
global
{
modalTransparency: .25;
modalTransparencyBlur: .25;
modalTransparencyColor: #000000;
}
*/

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.