<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:popUpButton="ardisia.components.popUpButton.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:sparklines="ardisia.charts.sparklines.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import flashx.textLayout.elements.TextFlow;
public function creationComplete():void
{
}
protected function dataTipFormatFunction(value:Object):Object
{
var textFlow:TextFlow = new Tf();
Object(textFlow).data = value;
return textFlow;
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Component className="Tf">
<s:TextFlow>
<fx:Script>
<![CDATA[
public function set data(item:Object):void
{
title.text = item.type + ": ";
val.text = item.value;
}
]]>
</fx:Script>
<s:span id="title" fontWeight="bold" fontSize="11"></s:span> <s:span id="val" fontSize="11"></s:span>
</s:TextFlow>
</fx:Component>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
width="100%" height="100%"
westRegionTitle="PopUpButton Description"
description="The PopUpButton component combines both a basic button and a popup button that will display content when clicked. Popup content can be defined in MXML as a child of the PopUpButton, which is very convenient. Designed to deliver similar functionality to the Flex Halo PopUpButton while supporting the Spark skinning architecture. Keyboard interaction is supported via the spacebar."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:FormItem label="Label:">
<s:TextInput id="labelSelect"
width="100"
text="Main Button Label"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Text to appear on the main button skin part."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Close On Activity:">
<s:CheckBox id="closeOnActivitySelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="If true, the popup will be closed when mouse/resize activity occurs that is not related to the popup. If false, close() must be called manually to remove the popup content."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Open Always:">
<s:CheckBox id="openAlwaysSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="If true, will pop up the popup content when the openButtonPart is clicked. If false, open() must be called manually to display the popup content."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Open/Close:">
<s:HGroup verticalAlign="middle">
<s:Button label="Open"
click="popUpButtonA.open();popupButtonB.open();popupButtonC.open();"/>
<s:Button label="Close"
click="popUpButtonA.close();popupButtonB.close();popupButtonC.close();"/>
</s:HGroup>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Example</data:tabLabel>
<data:exampleDescription>The PopUpButtons below each have different types of popup content. Illustrates how flexible the PopUpButton is regarding what type of content can be popped up.</data:exampleDescription>
<data:primaryContent>
<s:BorderContainer horizontalCenter="0" verticalCenter="0">
<s:HGroup top="20" right="20" bottom="20" left="20"
gap="50">
<!--- button #1 -->
<s:VGroup gap="20">
<s:HGroup verticalAlign="middle">
<s:Label text="Pie Chart Popup Example:"
fontSize="12"/>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Example using a SparklinePie chart as the popup content.">
<s:filters>
<s:DropShadowFilter color="#000000"
alpha="0.35"
distance="3"
blurX="6" blurY="6"/>
</s:filters>
</s:Image>
</s:HGroup>
<popUpButton:PopUpButton id="popUpButtonA"
verticalCenter="0"
label="{labelSelect.text}"
closeOnActivity="{closeOnActivitySelect.selected}"
openAlways="{openAlwaysSelect.selected}"
click="Alert.show('Popup Example A', 'Main Button Clicked', 4, null, null, null, 4, this.moduleFactory);">
<s:BorderContainer>
<sparklines:SparklinePie width="139" height="150"
seriesField="value"
dataTipFormatFunction="dataTipFormatFunction">
<s:ArrayCollection>
<fx:Object type="Stage A" value="10"/>
<fx:Object type="Stage B" value="20"/>
<fx:Object type="Stage C" value="30"/>
<fx:Object type="Stage D" value="60"/>
<fx:Object type="Stage E" value="90"/>
<fx:Object type="Stage F" value="80"/>
</s:ArrayCollection>
</sparklines:SparklinePie>
</s:BorderContainer>
</popUpButton:PopUpButton>
</s:VGroup>
<!--- button #2 -->
<s:VGroup gap="20">
<s:HGroup verticalAlign="middle">
<s:Label text="List Popup Example:"
fontSize="12"/>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Example using a List as the popup content. List selection is persistent but will not affect the main button for the PopUpButton and the popup will close on selection. Popup content is defined in MXML.">
<s:filters>
<s:DropShadowFilter color="#000000"
alpha="0.35"
distance="3"
blurX="6" blurY="6"/>
</s:filters>
</s:Image>
</s:HGroup>
<popUpButton:PopUpButton id="popupButtonB"
verticalCenter="0"
label="{labelSelect.text}"
closeOnActivity="{closeOnActivitySelect.selected}"
openAlways="{openAlwaysSelect.selected}"
click="Alert.show('Popup Example B', 'Main Button Clicked', 4, null, null, null, 4, this.moduleFactory);">
<s:BorderContainer borderAlpha="1">
<s:RectangularDropShadow id="dropShadow"
top="0" right="0" bottom="0" left="0"
blurX="20" blurY="20"
alpha="0.45"
distance="7"
angle="90"
color="#000000"/>
<s:List top="5" right="3" bottom="3" left="3"
borderVisible="true"
change="popupButtonB.close();">
<s:ArrayCollection>
<fx:String>Selection A</fx:String>
<fx:String>Selection B</fx:String>
<fx:String>Selection C</fx:String>
<fx:String>Selection D</fx:String>
<fx:String>Selection E</fx:String>
<fx:String>Selection F</fx:String>
<fx:String>Selection G</fx:String>
<fx:String>Selection H</fx:String>
<fx:String>Selection I</fx:String>
<fx:String>Selection J</fx:String>
<fx:String>Selection K</fx:String>
</s:ArrayCollection>
</s:List>
</s:BorderContainer>
</popUpButton:PopUpButton>
</s:VGroup>
<!--- button #3 -->
<s:VGroup gap="20">
<s:HGroup verticalAlign="middle">
<s:Label text="Combination Popup Example:"
fontSize="12"/>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Example using a combination of content as the popup content. Popup will not close automatically when an item is selected. Popup content is defined in MXML.">
<s:filters>
<s:DropShadowFilter color="#000000"
alpha="0.35"
distance="3"
blurX="6" blurY="6"/>
</s:filters>
</s:Image>
</s:HGroup>
<popUpButton:PopUpButton id="popupButtonC"
verticalCenter="0"
label="{labelSelect.text}"
closeOnActivity="{closeOnActivitySelect.selected}"
openAlways="{openAlwaysSelect.selected}"
click="Alert.show('Popup Example C', 'Main Button Clicked', 4, null, null, null, 4, this.moduleFactory);" >
<s:BorderContainer>
<s:VGroup top="5" right="3" bottom="3" left="3">
<s:Label text="Sample Text:"
fontWeight="bold"/>
<s:NumericStepper />
<s:List>
<s:ArrayCollection>
<fx:String>Selection A</fx:String>
<fx:String>Selection B</fx:String>
<fx:String>Selection C</fx:String>
</s:ArrayCollection>
</s:List>
<s:Button click="popupButtonC.close();"
label="Close"/>
</s:VGroup>
</s:BorderContainer>
</popUpButton:PopUpButton>
</s:VGroup>
</s:HGroup>
</s:BorderContainer>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>