Speech Bubble Component in flex:
CustomContainerBorderSkin.as
-------------------------------------
package {
import flash.display.Graphics;
import mx.graphics.RectangularDropShadow;
import mx.skins.RectangularBorder;
public class CustomContainerBorderSkin extends RectangularBorder {
private var dropShadow:RectangularDropShadow;
// Constructor.
public function CustomContainerBorderSkin() {
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var cornerRadius:Number = getStyle("cornerRadius");
var backgroundColor:int = getStyle("backgroundColor");
var backgroundAlpha:Number = getStyle("backgroundAlpha");
graphics.clear();
// Background
drawRoundRect(0, 0, unscaledWidth, unscaledHeight,
{tl: cornerRadius, tr:cornerRadius, bl: cornerRadius, br: cornerRadius},
backgroundColor, backgroundAlpha);
// Shadow
if (!dropShadow)
dropShadow = new RectangularDropShadow();
dropShadow.distance = 8;
dropShadow.angle = 45;
dropShadow.color = 0;
dropShadow.alpha = 0.4;
dropShadow.tlRadius = cornerRadius;
dropShadow.trRadius = cornerRadius;
dropShadow.blRadius = cornerRadius;
dropShadow.brRadius = cornerRadius;
dropShadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight);
graphics.beginFill(0xCCCC99,0.8);
graphics.moveTo(this.x-80, this.height/2+45);
graphics.lineTo(this.x, this.height/2-20);
graphics.lineTo(this.x, this.height/2+20);
}
}
}
Usage of the above component:
----------------------------------------------
<?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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:VBox height="100%" width="100%" verticalAlign="middle" horizontalAlign="center">
<mx:VBox id="vb1"
borderSkin="CustomContainerBorderSkin"
backgroundColor="0xCCCC99"
backgroundAlpha="0.8"
cornerRadius="70"
paddingLeft="20"
paddingTop="20"
paddingRight="20"
paddingBottom="20"
verticalAlign="middle" horizontalAlign="center"
>
<mx:Label text="Speech Bubble" fontSize="24" fontWeight="bold"/>
<mx:Form horizontalCenter="0" verticalCenter="0" verticalGap="5" horizontalGap="5">
<mx:FormItem horizontalAlign="center" label="User Name" styleName="loginFormItem">
<mx:TextInput id="tipUsername" fontWeight="normal" width="180" height="29" maxChars="15"/>
</mx:FormItem>
<mx:FormItem horizontalAlign="center" label="Password" styleName="loginFormItem">
<mx:TextInput id="tipPassword" maxChars="8" fontWeight="normal" displayAsPassword="true" height="29" width="180"/>
</mx:FormItem>
<mx:FormItem direction="horizontal" x="71" y="59" horizontalGap="5">
<mx:Button id="btnLogin" label="Login" />
<mx:Button id="btnCancel" paddingLeft="5" label="Cancel"/>
</mx:FormItem>
</mx:Form>
</mx:VBox>
</mx:VBox>
</s:Application>
Output:
---------------
CustomContainerBorderSkin.as
-------------------------------------
package {
import flash.display.Graphics;
import mx.graphics.RectangularDropShadow;
import mx.skins.RectangularBorder;
public class CustomContainerBorderSkin extends RectangularBorder {
private var dropShadow:RectangularDropShadow;
// Constructor.
public function CustomContainerBorderSkin() {
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var cornerRadius:Number = getStyle("cornerRadius");
var backgroundColor:int = getStyle("backgroundColor");
var backgroundAlpha:Number = getStyle("backgroundAlpha");
graphics.clear();
// Background
drawRoundRect(0, 0, unscaledWidth, unscaledHeight,
{tl: cornerRadius, tr:cornerRadius, bl: cornerRadius, br: cornerRadius},
backgroundColor, backgroundAlpha);
// Shadow
if (!dropShadow)
dropShadow = new RectangularDropShadow();
dropShadow.distance = 8;
dropShadow.angle = 45;
dropShadow.color = 0;
dropShadow.alpha = 0.4;
dropShadow.tlRadius = cornerRadius;
dropShadow.trRadius = cornerRadius;
dropShadow.blRadius = cornerRadius;
dropShadow.brRadius = cornerRadius;
dropShadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight);
graphics.beginFill(0xCCCC99,0.8);
graphics.moveTo(this.x-80, this.height/2+45);
graphics.lineTo(this.x, this.height/2-20);
graphics.lineTo(this.x, this.height/2+20);
}
}
}
Usage of the above component:
----------------------------------------------
<?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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:VBox height="100%" width="100%" verticalAlign="middle" horizontalAlign="center">
<mx:VBox id="vb1"
borderSkin="CustomContainerBorderSkin"
backgroundColor="0xCCCC99"
backgroundAlpha="0.8"
cornerRadius="70"
paddingLeft="20"
paddingTop="20"
paddingRight="20"
paddingBottom="20"
verticalAlign="middle" horizontalAlign="center"
>
<mx:Label text="Speech Bubble" fontSize="24" fontWeight="bold"/>
<mx:Form horizontalCenter="0" verticalCenter="0" verticalGap="5" horizontalGap="5">
<mx:FormItem horizontalAlign="center" label="User Name" styleName="loginFormItem">
<mx:TextInput id="tipUsername" fontWeight="normal" width="180" height="29" maxChars="15"/>
</mx:FormItem>
<mx:FormItem horizontalAlign="center" label="Password" styleName="loginFormItem">
<mx:TextInput id="tipPassword" maxChars="8" fontWeight="normal" displayAsPassword="true" height="29" width="180"/>
</mx:FormItem>
<mx:FormItem direction="horizontal" x="71" y="59" horizontalGap="5">
<mx:Button id="btnLogin" label="Login" />
<mx:Button id="btnCancel" paddingLeft="5" label="Cancel"/>
</mx:FormItem>
</mx:Form>
</mx:VBox>
</mx:VBox>
</s:Application>
Output:
---------------