<?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:floatPaneControlBar="ardisia.components.floatPaneControlBar.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:scroller="ardisia.components.scroller.*"
xmlns:pane="ardisia.components.pane.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
import mx.graphics.SolidColor;
import spark.effects.easing.Bounce;
import spark.effects.easing.Elastic;
import spark.effects.easing.Linear;
import spark.effects.easing.Power;
import spark.effects.easing.Sine;
import spark.primitives.Rect;
import ardisia.components.pane.Pane;
protected var paneCounter:int = 0;
protected var panes:Array;
public function creationComplete():void
{
panes = [];
}
public function animatedIn():void
{
button1_clickHandler(true);
}
protected function button1_clickHandler(start:Boolean = false):void
{
var pane:Pane = new PaneFactory();
pane.includeInControlBar = includeInControlBarSelect.selected;
pane.title = "Floated Pane #" + String(paneCounter);
var rect:Rect = new Rect();
rect.depth = 0;
rect.percentHeight = rect.percentWidth = 100;
var fill:SolidColor = new SolidColor();
rect.fill = fill;
fill.color = Math.round(Math.random() * 255 * 255 * 255);
fill.alpha = 0.2;
pane.addElement(rect);
var screenRect:Rectangle = systemManager.screen;
if (!start)
{
var xRange:Number = Math.max(mouseX + 20, Math.round(Math.random() * screenRect.width - 300));
var yRange:Number = Math.max(0, Math.round(Math.random() * screenRect.height - 400 - floatBar.height));
}
else
{
xRange = 295;
yRange = 250;
}
pane.move(xRange, yRange)
pane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), false, false, true, null, moduleFactory);
paneCounter++;
panes.push(pane);
}
protected function removedFromStageHandler(event:Event):void
{
for each (var pane:Pane in panes)
{
pane.closeFloatedPane(true);
}
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Component className="PaneFactory">
<pane:Pane width="100%" height="100%"
draggable="{basicDraggableSelect1.selected}"
boundingMode="{basicBoundingModeSelect1.selectedItem.mode}"
icon="{iconSelect.selectedItem.icon}"
displayCloseButton="{basicCanBeClosedSelect1.selected}"
displayMaximizedButton="{basicCanBeMaximizedSelect1.selected}"
displayMinimizedButton="{basicCanBeMinimizedSelect1.selected}">
<scroller:Scroller width="100%" height="100%"
depth="2">
<s:Group>
<s:Form top="20" right="20" bottom="20" left="20">
<s:FormHeading label="API:" />
<s:FormItem label="Title">
<s:TextInput id="titleSelect"
width="100"
text="{title}" change="title=titleSelect.text"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The Pane title."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Include Icon">
<s:DropDownList id="iconSelect"
width="130"
selectedIndex="0"
labelField="label">
<s:dataProvider>
<s:ArrayCollection>
<fx:Object label="No Icon" icon="{null}" />
<fx:Object label="Task Icon" icon="@Embed(source='icons/open-iconic-master/task-2x.png')" />
<fx:Object label="Cross Icon" icon="@Embed(source='icons/cross.png')" />
<fx:Object label="Folder" icon="@Embed(source='icons/folder-open.png')" />
<fx:Object label="Home Icon" icon="@Embed(source='icons/open-iconic-master/home-2x.png')" />
<fx:Object label="Plus Icon" icon="@Embed(source='icons/plus.png')" />
<fx:Object label="Delete Icon" icon="@Embed(source='icons/cross-red.png')" />
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The Pane icon."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Draggable">
<s:CheckBox id="basicDraggableSelect1"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to allow the Pane to be dragged while floated."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{basicDraggableSelect1.selected}"
label="Bounding Mode">
<s:DropDownList id="basicBoundingModeSelect1"
width="130"
selectedIndex="1"
labelField="label">
<s:dataProvider>
<s:ArrayCollection>
<fx:Object label="None" mode="none"/>
<fx:Object label="Entire Pane" mode="boundEntirePane"/>
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Set to bound the entire floated Pane to the screen, just the drag region part to the screen, or no bounding at all."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Close Button">
<s:CheckBox id="basicCanBeClosedSelect1"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to allow the Pane to be closed via mouse interaction while floated."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Maximized Button">
<s:CheckBox id="basicCanBeMaximizedSelect1"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to allow the Pane to be maximized via mouse interaction while floated."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Minimized Button">
<s:CheckBox id="basicCanBeMinimizedSelect1"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to allow the Pane to be minimized via mouse interaction while floated."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Center Floated Pane">
<s:Button label="Center"
click="center();" />
</s:FormItem>
</s:Form>
</s:Group>
</scroller:Scroller>
</pane:Pane>
</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="FloatPaneControlBar Description"
description="This component is an extended version of the Ardisia ButtonBar that serves multiple purposes for the Pane class. First, it automatically detects when a Pane is floated and creates a button that can be used to minimize/restore/focus the Pane. Second, the float bar handles maximizing panes by filling the screen with the Pane and keeping its position and size locked to the screen. Third, the control bar can be used to close Panes. This component is designed to be very easy to implement. Simply add the control bar to the application at any location and when a Pane is floated, a button will automatically be created. Works similarly to the Windows OS taskbar."
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="Button Gap:">
<s:HSlider id="gapSelect"
minimum="-20" maximum="20" value="4" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The gap between the buttons in the control bar."/>
</s:helpContent>
</s:FormItem>
<s:FormHeading label="ControlBar Padding"/>
<s:FormItem label="Top:">
<s:HSlider id="paddingTopSelect"
minimum="0" maximum="100" value="6" />
</s:FormItem>
<s:FormItem label="Right:">
<s:HSlider id="paddingRightSelect"
minimum="0" maximum="100" value="6" />
</s:FormItem>
<s:FormItem label="Bottom:">
<s:HSlider id="paddingBottomSelect"
minimum="0" maximum="100" value="6" />
</s:FormItem>
<s:FormItem label="Left:">
<s:HSlider id="paddingLeftSelect"
minimum="0" maximum="100" value="6" />
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Maximized Pane Padding"/>
<s:FormItem label="Top:">
<s:HSlider id="maximizeTopSelect"
minimum="0" maximum="100" value="0" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The offset from the top of the screen when a Pane is maximized."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Right:">
<s:HSlider id="maximizeRightSelect"
minimum="0" maximum="100" value="0" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The offset from the right of the screen when a Pane is maximized."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Bottom:">
<s:HSlider id="maximizeBottomSelect"
minimum="0" maximum="100" value="40" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The offset from the bottom of the screen when a Pane is maximized."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Left:">
<s:HSlider id="maximizeLeftSelect"
minimum="0" maximum="100" value="0" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The offset from the left of the screen when a Pane is maximized."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Animation Properties"/>
<s:FormItem label="Easer:">
<s:DropDownList id="animationEaserSelect"
width="100"
labelField="name"
selectedIndex="2">
<s:ArrayCollection>
<fx:Object name="Sine" easer="{new Sine()}"/>
<fx:Object name="Linear" easer="{new Linear()}"/>
<fx:Object name="Power" easer="{new Power(0.5, 3)}"/>
<fx:Object name="Bounce" easer="{new Bounce()}"/>
<fx:Object name="Elastic" easer="{new Elastic()}"/>
</s:ArrayCollection>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Duration of the minimize / restore animation."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Duration:">
<s:HSlider id="durationSelect"
minimum="0" maximum="10000" value="350" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Easer to use for the minimize / restore animation."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Example</data:tabLabel>
<data:exampleDescription>Use the button below to create new panes and float them. Notice that a control bar button will automatically be added to the control bar below with the same title and icon as the Pane. Also, the control bar will select the button that corresponds to the focused and active Pane automatically. Try opening several panes using the button below and experiment with using the control bar: select different panes, minimize/maximize, close them, drag and re-arrange the buttons in the control bar, etc.</data:exampleDescription>
<data:toolbarContent>
<s:Form>
<s:FormItem label="Include in Control Bar">
<s:CheckBox id="includeInControlBarSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="False to signal that the FloatPaneControlBar below should not manage this new Pane."/>
</s:helpContent>
</s:FormItem>
<s:Button id="openButton"
label="Open New Window"
click="button1_clickHandler()" />
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:Image source="@Embed(source='images/arrows.png')"
bottom="75" left="100"/>
<floatPaneControlBar:FloatPaneControlBar id="floatBar"
bottom="-1" right="-1" left="-1"
maximizeTop="{maximizeTopSelect.value}"
maximizeRight="{maximizeRightSelect.value}"
maximizeBottom="{maximizeBottomSelect.value}"
maximizeLeft="{maximizeLeftSelect.value}"
animationDuration="{durationSelect.value}"
paneEaser="{animationEaserSelect.selectedItem.easer}"
gap="{gapSelect.value}"
paddingTop="{paddingTopSelect.value}"
paddingBottom="{paddingBottomSelect.value}"
paddingRight="{paddingRightSelect.value}"
paddingLeft="{paddingLeftSelect.value}"/>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>