<?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:mx="library://ns.adobe.com/flex/mx"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:reflectionContainer="ardisia.components.reflectionContainer.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.PropertyChangeEvent;
import spark.events.IndexChangeEvent;
public function creationComplete():void
{
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, function(event:IndexChangeEvent):void
{
if (demoAppWrapper.tabBar.selectedItem.label == "Complex Example")
{
reflectionContainerD.addEventListener(Event.ENTER_FRAME, updateComplexHandler);
}
else
{
reflectionContainerD.removeEventListener(Event.ENTER_FRAME, updateComplexHandler);
}
});
}
protected function updateComplexHandler(event:Event):void
{
reflectionContainerD.update();
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<s:Rotate3D id="rotate3dEffect"
autoCenterTransform="true"
angleYFrom="0" angleYTo="360" angleZFrom="0" angleZTo="360"
duration="1000" />
<s:Fade id="fadeEffect"
duration="500"
alphaFrom="1" alphaTo="0"
effectEnd="reflectionContainerC.alpha=1"/>
</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="ReflectionContainer Description"
description="The ReflectionContainer provides an easy way to create a persistent and dynamic reflection for any element that implements IBitmapDrawable (includes UIComponent). Simply wrap the reflected element in a ReflectionContainer and you are done. The actual reflection does not participate in layout but the reflection does update when the reflected element updates. Updates are applied intelligently so the reflection is performant."
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="Blur X:">
<s:HSlider id="blurXSelect"
width="100"
minimum="0" maximum="100" snapInterval="1" value="10"/>
</s:FormItem>
<s:FormItem label="Blur Y:">
<s:HSlider id="blurYSelect"
width="100"
minimum="0" maximum="100" snapInterval="1" value="10"/>
</s:FormItem>
<s:FormItem label="Alpha From:">
<s:HSlider id="alphaFromSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="1"/>
</s:FormItem>
<s:FormItem label="Alpha To:">
<s:HSlider id="alphaToSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="0"/>
</s:FormItem>
<s:FormItem label="Alpha To Ratio:">
<s:HSlider id="alphaToRatioSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="0.8"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The percentage of the reflection's height at which to apply the 'alphaTo' alpha value.">
<s:filters>
<s:GlowFilter color="#000000"
alpha="0.35"
blurX="6" blurY="6"/>
</s:filters>
</s:Image>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Vertical Scale:">
<s:HSlider id="verticalScaleSelect"
width="100"
minimum="-2" maximum="2" snapInterval="0" value="1"/>
</s:FormItem>
<s:FormItem label="Skew Degrees:">
<s:HSlider id="skewDegreesSelect"
width="100"
minimum="-180" maximum="180" snapInterval="1" value="0"/>
</s:FormItem>
<s:FormItem label="Vertical Offset:">
<s:HSlider id="verticalOffsetSelect"
width="100"
minimum="-100" maximum="100" snapInterval="1" value="0"/>
</s:FormItem>
<s:FormItem label="Hide Reflection:">
<s:CheckBox id="hideReflectionSelect"
selected="false"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Image Example</data:tabLabel>
<data:exampleDescription>Example of a reflection applied to a large image. The image is of Laika with her signature crazy eyes.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup gap="20">
<s:Label text="Click the button to the right to trigger an animation and observe that the reflection will also rotate along with the reflected element."
maxWidth="400"
lineHeight="140%"/>
<s:Button label="Play Animation"
click="rotate3dEffect.target=reflectionContainerA;rotate3dEffect.play();"/>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<reflectionContainer:ReflectionContainer id="reflectionContainerA"
top="50"
mouseEnabled="false" mouseChildren="false"
horizontalCenter="0"
blurX="{blurXSelect.value}"
blurY="{blurYSelect.value}"
alphaFrom="{alphaFromSelect.value}"
alphaTo="{alphaToSelect.value}"
alphaToRatio="{alphaToRatioSelect.value}"
verticalScale="{verticalScaleSelect.value}"
hideReflection="{hideReflectionSelect.selected}"
skewDegrees="{skewDegreesSelect.value}"
verticalOffset="{verticalOffsetSelect.value}">
<s:Image source="@Embed(source='images/crazy-eyes.jpg')"
height="250"/>
</reflectionContainer:ReflectionContainer>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Tile List</data:tabLabel>
<data:exampleDescription>ReflectionContainer wrapping the item renderers in a Tile List. Notice that the actual reflection does not participate in layout and is not mouse enabled.</data:exampleDescription>
<data:toolbarContent>
<s:VGroup>
<s:Form top="10" bottom="10" left="10">
<s:FormHeading label="List Properties"/>
<s:FormItem label="Horizontal Gap:">
<s:HSlider id="hgapSelect"
width="100"
minimum="0" maximum="40" snapInterval="1" value="32" />
</s:FormItem>
<s:FormItem label="Vertical Gap:">
<s:HSlider id="vgapSelect"
width="100"
minimum="0" maximum="40" snapInterval="1" value="32" />
</s:FormItem>
</s:Form>
</s:VGroup>
</data:toolbarContent>
<data:primaryContent>
<s:List id="tileList"
horizontalCenter="0" verticalCenter="0"
borderVisible="false"
contentBackgroundColor="#FFFFFF"
creationComplete="tileList.dataGroup.clipAndEnableScrolling=false;">
<s:layout>
<s:TileLayout requestedColumnCount="6"
horizontalGap="{hgapSelect.value}" verticalGap="{vgapSelect.value}"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="48" height="48"
autoDrawBackground="false"
rollOver="if (rotate3dEffectZ.isPlaying) return;;rotate3dEffectZ.play();">
<fx:Declarations>
<s:Rotate3D id="rotate3dEffectZ"
target="{reflectionContainer}"
autoCenterTransform="true"
angleYFrom="0" angleYTo="360"
duration="350" />
</fx:Declarations>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor alpha="0" alpha.selected="1" />
</s:fill>
</s:Rect>
<reflectionContainer:ReflectionContainer id="reflectionContainer"
horizontalCenter="0" verticalCenter="0"
hideReflection="{outerDocument.hideReflectionSelect.selected}"
blurX="{outerDocument.blurXSelect.value}"
blurY="{outerDocument.blurYSelect.value}"
alphaFrom="{outerDocument.alphaFromSelect.value}"
alphaTo="{outerDocument.alphaToSelect.value}"
alphaToRatio="{outerDocument.alphaToRatioSelect.value}"
verticalScale="{outerDocument.verticalScaleSelect.value}"
skewDegrees="{outerDocument.skewDegreesSelect.value}"
verticalOffset="{outerDocument.verticalOffsetSelect.value}">
<s:Group>
<s:BitmapImage source="{data.icon}"/>
</s:Group>
<reflectionContainer:filters>
<s:ColorMatrixFilter matrix.selected="[
1, 0, 0, 0, 255,
0, 1, 0, 0, 255,
0, 0, 1, 0, 255,
0, 0, 0, 1, 0
]"/>
</reflectionContainer:filters>
</reflectionContainer:ReflectionContainer>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
<s:ArrayCollection>
<fx:Object icon="@Embed(source='icons/48x48/1.png')" />
<fx:Object icon="@Embed(source='icons/48x48/2.png')" />
<fx:Object icon="@Embed(source='icons/48x48/3.png')" />
<fx:Object icon="@Embed(source='icons/48x48/4.png')" />
<fx:Object icon="@Embed(source='icons/48x48/5.png')" />
<fx:Object icon="@Embed(source='icons/48x48/6.png')" />
<fx:Object icon="@Embed(source='icons/48x48/7.png')" />
<fx:Object icon="@Embed(source='icons/48x48/8.png')" />
<fx:Object icon="@Embed(source='icons/48x48/9.png')" />
<fx:Object icon="@Embed(source='icons/48x48/10.png')" />
<fx:Object icon="@Embed(source='icons/48x48/11.png')" />
<fx:Object icon="@Embed(source='icons/48x48/12.png')" />
<fx:Object icon="@Embed(source='icons/48x48/13.png')" />
<fx:Object icon="@Embed(source='icons/48x48/14.png')" />
<fx:Object icon="@Embed(source='icons/48x48/15.png')" />
<fx:Object icon="@Embed(source='icons/48x48/16.png')" />
<fx:Object icon="@Embed(source='icons/48x48/17.png')" />
<fx:Object icon="@Embed(source='icons/48x48/18.png')" />
<fx:Object icon="@Embed(source='icons/48x48/19.png')" />
<fx:Object icon="@Embed(source='icons/48x48/20.png')" />
<fx:Object icon="@Embed(source='icons/48x48/21.png')" />
<fx:Object icon="@Embed(source='icons/48x48/22.png')" />
<fx:Object icon="@Embed(source='icons/48x48/23.png')" />
<fx:Object icon="@Embed(source='icons/48x48/24.png')" />
<fx:Object icon="@Embed(source='icons/48x48/25.png')" />
<fx:Object icon="@Embed(source='icons/48x48/26.png')" />
<fx:Object icon="@Embed(source='icons/48x48/27.png')" />
<fx:Object icon="@Embed(source='icons/48x48/28.png')" />
<fx:Object icon="@Embed(source='icons/48x48/29.png')" />
<fx:Object icon="@Embed(source='icons/48x48/30.png')" />
<fx:Object icon="@Embed(source='icons/48x48/31.png')" />
<fx:Object icon="@Embed(source='icons/48x48/32.png')" />
<fx:Object icon="@Embed(source='icons/48x48/33.png')" />
<fx:Object icon="@Embed(source='icons/48x48/34.png')" />
<fx:Object icon="@Embed(source='icons/48x48/35.png')" />
<fx:Object icon="@Embed(source='icons/48x48/36.png')" />
</s:ArrayCollection>
</s:List>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #3 -->
<data:PrimaryContentData>
<data:tabLabel>Complex Example</data:tabLabel>
<data:exampleDescription>All that was required to create a reflection for this complex component was wrapping it in an ReflectionContainer. Grid can be edited and the reflection will change in real-time.</data:exampleDescription>
<data:primaryContent>
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#000000"/>
</s:fill>
</s:Rect>
<reflectionContainer:ReflectionContainer id="reflectionContainerD"
width="75%"
horizontalCenter="0" verticalCenter="0"
blurX="{blurXSelect.value}"
blurY="{blurYSelect.value}"
alphaFrom="{alphaFromSelect.value}"
alphaTo="{alphaToSelect.value}"
alphaToRatio="{alphaToRatioSelect.value}"
verticalScale="{verticalScaleSelect.value}"
skewDegrees="{skewDegreesSelect.value}"
verticalOffset="{verticalOffsetSelect.value}"
hideReflection="{hideReflectionSelect.selected}">
<s:DataGrid width="100%"
variableRowHeight="true"
editable="true">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="product"
headerText="Product"
editable="true"/>
<s:GridColumn dataField="revenue"
headerText="Moola (calculator enabled)"
editable="true"/>
<s:GridColumn dataField="color"
headerText="color"
editable="true"/>
</s:ArrayList>
</s:columns >
<s:dataProvider>
<s:ArrayCollection>
<fx:Object product="Gumballs" revenue="100" color="red"/>
<fx:Object product="Suckers" revenue="200" color="green"/>
<fx:Object product="Candy Bars" revenue="10" color="blue"/>
<fx:Object product="Cookies" revenue="5000" color="yellow"/>
<fx:Object product="Biscuits" revenue="15000" color="purple"/>
<fx:Object product="Gummy" revenue="165" color="orange"/>
</s:ArrayCollection>
</s:dataProvider>
</s:DataGrid>
</reflectionContainer:ReflectionContainer>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #4 -->
<data:PrimaryContentData>
<data:tabLabel>Text Example</data:tabLabel>
<data:exampleDescription>Example of how a reflection can be applied to a non-image component. In this case, a TextArea control. Click the text below to make edits and observe how the reflection updates automatically.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup gap="20">
<s:Label text="FadeEffect. Notice that effect applies to the reflection along with the TextArea."
maxWidth="400"
lineHeight="140%"/>
<s:Button label="Play Effect"
click="fadeEffect.target=reflectionContainerC;fadeEffect.play();"/>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<s:VGroup top="100"
horizontalCenter="0"
horizontalAlign="justify">
<s:Label text="Click in the text below to make edits and scroll and observe how the reflection updates automatically."
fontWeight="bold"/>
<separators:HSeparator width="100%"/>
<reflectionContainer:ReflectionContainer id="reflectionContainerC"
blurX="{blurXSelect.value}"
blurY="{blurYSelect.value}"
alphaFrom="{alphaFromSelect.value}"
alphaTo="{alphaToSelect.value}"
alphaToRatio="{alphaToRatioSelect.value}"
verticalScale="{verticalScaleSelect.value}"
skewDegrees="{skewDegreesSelect.value}"
verticalOffset="{verticalOffsetSelect.value}"
hideReflection="{hideReflectionSelect.selected}">
<s:RichEditableText id="ret"
width="400" heightInLines="8"
lineHeight="140%"
text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
creationComplete="ret.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, function(event:Event):void {
reflectionContainerC.update();
})"/>
</reflectionContainer:ReflectionContainer>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>