You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by jm...@apache.org on 2014/08/23 05:25:40 UTC
[04/51] [partial] Merged TourDeFlex release from develop
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
new file mode 100644
index 0000000..c130849
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<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" viewSourceURL="srcview/index.html">
+ <fx:Style>
+ #submitButton {
+ baseColor: #1E407E;
+ color: #FFFFFF;
+ }
+
+ </fx:Style>
+ <fx:Script>
+ <![CDATA[
+ private function clickHandler():void
+ {
+ text1.text = "Thank you " + firstName.text + " " + lastName.text;
+ }
+ private function resetClickHandler():void
+ {
+ firstName.text = "";
+ lastName.text = "";
+ }
+ ]]>
+ </fx:Script>
+
+ <s:Panel height="100%" width="100%"
+ horizontalCenter="0" verticalCenter="0"
+ title="Advanced CSS: ID Selector Example"
+ skinClass="skins.TDFPanelSkin">
+ <s:Label top="20" left="30" width="140" color="0x323232" verticalAlign="justify"
+ text="Only the Button with the id 'submitButton' will have custom colors."/>
+
+ <s:VGroup horizontalCenter="0" horizontalAlign="center" verticalCenter="0">
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="First Name:"/>
+ <s:TextInput id="firstName" width="100"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Last Name:"/>
+ <s:TextInput id="lastName" width="100"/>
+ </s:HGroup>
+ <s:HGroup>
+ <s:Button id="submitButton" label="Submit Form" click="clickHandler()"/>
+ <s:Button id="resetButton" label="Reset" click="resetClickHandler()"/>
+ </s:HGroup>
+ <s:Label id="text1"/>
+ </s:VGroup>
+
+ </s:Panel>
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml
new file mode 100644
index 0000000..b6dc266
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<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">
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+
+ List.blueTheme {
+ selectionColor: #7FACF6;
+ }
+
+ List.greenTheme {
+ selectionColor: #00CF3F;
+ }
+
+ Panel.blueTheme {
+ contentBackgroundColor: #9abbdc;
+
+ }
+
+ .blueTheme {
+ focusColor: #3D73EF;
+ symbolColor: #2A3982;
+
+ }
+ </fx:Style>
+
+ <s:Panel title="Advanced CSS: Type+Class Selector Sample" height="100%" width="100%"
+ styleName="blueTheme" skinClass="skins.TDFPanelSkin">
+ <s:HGroup horizontalCenter="0" top="15">
+ <s:Label width="270" color="0x323232" text="This Panel has a styleName, but the Lists and Panel have some different styles defined in a Type+Class selector. See the style section for the styles applied."/>
+ <s:ComboBox selectedIndex="0">
+ <s:ArrayCollection source="[Monday,Tuesday,Wednesday,Thursday,Friday]"/>
+ </s:ComboBox>
+ <s:VGroup horizontalCenter="0" top="8">
+ <s:Label text="Text:"/>
+ <s:TextInput text="some text" styleName="blueTheme"/>
+ <s:Label text="Units:"/>
+ <s:NumericStepper styleName="blueTheme"/>
+ <s:List id="carList" selectedIndex="2" styleName="blueTheme">
+ <s:dataProvider>
+ <mx:ArrayCollection source="[Civic, M3, Prius, Blazer, Tahoe]" />
+ </s:dataProvider>
+ </s:List>
+ </s:VGroup>
+ <s:List id="fruitList" selectedIndex="2" styleName="greenTheme">
+ <s:dataProvider>
+ <mx:ArrayCollection source="[Apples,Bananas,Grapes]" />
+ </s:dataProvider>
+ </s:List>
+ </s:HGroup>
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/css/skins/TDFPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/skins/TDFPanelSkin.mxml
new file mode 100644
index 0000000..539c4fb
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/css/skins/TDFPanelSkin.mxml
@@ -0,0 +1,171 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<!--- Custom Spark Panel Skin created for Tour de Flex.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
+ blendMode.disabled="layer">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Panel")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ /* Define the skin elements that should not be colorized.
+ For panel, border and title backround are skinned, but the content area and title text are not. */
+ static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+ static private const contentFill:Array = [];
+
+ /**
+ * @inheritDoc
+ */
+ override public function get contentItems():Array {return contentFill};
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ <s:State name="normalWithControlBar" />
+ <s:State name="disabledWithControlBar" />
+ </s:states>
+
+ <!-- drop shadow -->
+ <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11"
+ angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
+
+ <!-- layer 1: border -->
+ <s:Rect left="0" right="0" top="0" bottom="0">
+ <s:stroke>
+ <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- layer 2: background fill -->
+ <!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. -->
+ <s:Rect left="0" right="0" bottom="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: contents -->
+ <!--- contains the vertical stack of titlebar content and controlbar -->
+ <s:Group left="1" right="1" top="1" bottom="1" >
+ <s:layout>
+ <s:VerticalLayout gap="0" horizontalAlign="justify" />
+ </s:layout>
+
+ <s:Group id="topGroup" >
+ <!-- layer 0: title bar fill -->
+ <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
+ <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
+ <s:fill>
+ <s:SolidColor color="0x000000" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: title bar highlight -->
+ <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xEAEAEA" />
+ <s:GradientEntry color="0xD9D9D9" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- layer 2: title bar divider -->
+ <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+ <s:fill>
+ <s:SolidColor color="0xC0C0C0" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: text -->
+ <!--- Defines the appearance of the PanelSkin class's title bar. -->
+ <!-- Note: The title text display has been slightly modified for Tour de Flex. -->
+ <s:Label id="titleDisplay" lineBreak="explicit"
+ left="9" top="1" bottom="0" minHeight="30"
+ verticalAlign="middle" fontWeight="bold" color="#E2E2E2"/>
+
+ </s:Group>
+
+ <!--
+ 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
+ -->
+ <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+ </s:Group>
+
+ <s:Group id="bottomGroup" minWidth="0" minHeight="0"
+ includeIn="normalWithControlBar, disabledWithControlBar" >
+
+ <!-- layer 0: control bar background -->
+ <!-- Note: We are skinning this to be the gradient in case we do specify control
+ bar content, but it will only display if there's a controlBarContent
+ property specified.-->
+ <s:Rect left="0" right="0" bottom="0" top="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: control bar divider line -->
+ <s:Rect left="0" right="0" top="0" height="1" >
+ <s:fill>
+ <s:SolidColor color="0xCDCDCD" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 2: control bar -->
+ <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+ </s:Group>
+ </s:Group>
+ </s:Group>
+</s:SparkSkin>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
new file mode 100644
index 0000000..6082791
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<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"
+ viewSourceURL="srcview/index.html">
+
+ <!-- NOTE: This sample was compiled with Flex SDK version 4.0.0.13875 -->
+
+ <fx:Declarations>
+ <s:Animate id="a"
+ duration="750"
+ target="{tileGroup}"
+ repeatBehavior="reverse"
+ repeatCount="2">
+ <s:SimpleMotionPath valueFrom="1"
+ valueTo="15"
+ property="horizontalGap" />
+ <s:SimpleMotionPath valueFrom="1"
+ valueTo="15"
+ property="verticalGap" />
+ <s:SimpleMotionPath valueFrom="0"
+ valueTo="-50"
+ property="z" />
+ </s:Animate>
+ </fx:Declarations>
+
+ <s:layout>
+ <s:HorizontalLayout
+ horizontalAlign="center"
+ gap="100"
+ paddingTop="8"/>
+ </s:layout>
+
+ <s:TileGroup id="tileGroup"
+ horizontalGap="1"
+ verticalGap="1"
+ direction="ltr"
+ columnWidth="50"
+ rowHeight="50"
+ useHandCursor="true"
+ buttonMode="true">
+
+ <mx:Image source="@Embed('assets/images/2.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/3.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/4.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/5.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/6.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/7.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/8.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/9.jpg')" click="a.play()" />
+
+ </s:TileGroup>
+
+ <s:HGroup top="8" right="8">
+ <s:VGroup width="100%" >
+ <s:Label text="Animate Properties Sample"
+ fontSize="18"
+ color="#B7B6B6"/>
+
+ <s:Label width="250"
+ verticalAlign="justify"
+ color="#323232"
+ text="With the Spark Animate class, you can animate any arbitrary property of an object by using MotionPaths or SimpleMotionPaths. In this sample, the horizontalGap, verticalGap, and z properties of the TileGroup are being incremented over the course of the animation."/>
+
+ <s:Label text="{'horizontalGap = ' + tileGroup.horizontalGap}"/>
+ <s:Label text="{'verticalGap = ' + tileGroup.verticalGap}" />
+ </s:VGroup>
+ </s:HGroup>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
new file mode 100644
index 0000000..e6307a1
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
@@ -0,0 +1,116 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Declarations>
+ <s:AnimateTransform id="bounceEffect"
+ target="{myImage}">
+
+ <s:motionPaths>
+ <s:MotionPath property="translationX" >
+ <s:keyframes>
+ <s:Keyframe time="250" value="0"/>
+ <s:Keyframe time="550" value="60"/>
+ <s:Keyframe time="850" value="100"/>
+ <s:Keyframe time="1150" value="140"/>
+ <s:Keyframe time="1450" value="180"/>
+ <s:Keyframe time="1750" value="220"/>
+ <s:Keyframe time="2050" value="140"/>
+ <s:Keyframe time="2350" value="100"/>
+ <s:Keyframe time="2650" value="60"/>
+ <s:Keyframe time="2950" value="0"/>
+ </s:keyframes>
+ </s:MotionPath>
+
+ <s:MotionPath property="translationY" >
+ <s:keyframes>
+ <s:Keyframe time="250" value="100"/>
+ <s:Keyframe time="550" value="0"/>
+ <s:Keyframe time="850" value="100"/>
+ <s:Keyframe time="1150" value="0"/>
+ <s:Keyframe time="1450" value="100"/>
+ <s:Keyframe time="1750" value="0"/>
+ <s:Keyframe time="2050" value="100"/>
+ <s:Keyframe time="2350" value="0"/>
+ <s:Keyframe time="2650" value="100"/>
+ <s:Keyframe time="2950" value="0"/>
+ </s:keyframes>
+ </s:MotionPath>
+ </s:motionPaths>
+ </s:AnimateTransform>
+ </fx:Declarations>
+
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+
+ Button:up{
+ baseColor: #000000;
+ color: #FFFFFF;
+ fontWeight: "bold";
+ }
+ Button:over{
+ baseColor: #878787;
+ color: #FFFFFF;
+ fontWeight: "bold";
+ }
+ Button:down{
+ baseColor: #878787;
+ color: #000000;
+ fontWeight: "bold";
+ }
+ Button:disabled {
+ baseColor: #FFFFFF;
+ color: #878787;
+ fontWeight: "bold";
+ }
+ Label {
+ fontFamily: "Arial";
+ fontWeight: "bold";
+ }
+ </fx:Style>
+
+ <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+ source tabs for each sample. -->
+ <s:Panel title="AnimateTransform Effect Sample (Bounce)"
+ width="100%" height="100%"
+ skinClass="skins.TDFPanelSkin">
+
+ <s:Group left="3">
+ <mx:Image y="0" id="myImage"
+ source="@Embed(source='assets/ApacheFlexIcon.png')"
+ click="bounceEffect.end();bounceEffect.play();"/>
+ </s:Group>
+
+ <s:HGroup bottom="5" left="3">
+ <s:Label text="Click the Apache Flex logo to bounce it!" color="0x000000"/>
+ </s:HGroup>
+ <s:HGroup top="5" right="5">
+ <s:VGroup width="100%" >
+ <s:Label text="Cross Fade Sample" fontSize="18" color="#B7B6B6"/>
+ <s:Label width="250" verticalAlign="justify" color="#323232"
+ text="Unlike the Animate class, which you can use to animate any target property, the AnimateTransform effect only supports the animation of certain properties on the target. To use keyframes and motion paths with the AnimateTransform effect, use the MotionPath class to specify keyframes for one or more of the following properties of the AnimateTransform class:
+ movement (translationX, translationY, and translationZ), rotation (rotationX, rotationY, and rotationZ), scale (scaleX, scaleY, and scaleZ)."/>
+ </s:VGroup>
+ </s:HGroup>
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
new file mode 100644
index 0000000..4ce258e
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<s:Application
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <s:states>
+ <s:State name="default"/>
+ <s:State name="flipped"/>
+ </s:states>
+
+ <s:transitions>
+ <s:Transition id="t1" autoReverse="true">
+ <s:CrossFade
+ target="{holder}"
+ duration="1000" />
+ </s:Transition>
+ </s:transitions>
+
+ <s:Panel title="CrossFade Effect Sample with Transition"
+ width="100%" height="100%"
+ skinClass="skins.TDFPanelSkin">
+
+ <s:HGroup verticalCenter="0" horizontalCenter="0">
+ <s:VGroup>
+ <s:Group id="holder">
+ <s:BitmapImage
+ source="@Embed('assets/ApacheFlexLogo.png')"
+ visible="true" visible.flipped="false"/>
+ <s:BitmapImage
+ source="@Embed('assets/ApacheFlexLogo.png')"
+ visible="false" visible.flipped="true"/>
+
+ </s:Group>
+ <s:Button id="playButton" left="264" bottom="174"
+ label="Cross Fade"
+ click="currentState = (currentState == 'flipped') ? 'default' : 'flipped';" y.default="-33"/>
+ </s:VGroup>
+ <mx:Spacer width="50"/>
+ <s:VGroup width="100%" >
+ <s:Label text="Cross Fade Sample" fontSize="18" color="#B7B6B6"/>
+ <s:Label width="250" verticalAlign="justify" color="#323232"
+ text="The CrossFade effect performs a bitmap transition effect by running a crossfade between the first and second bitmaps.
+ The crossfade blends the two bitmaps over the duration of the animation."/>
+ </s:VGroup>
+ </s:HGroup>
+
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
new file mode 100644
index 0000000..54d62c4
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
@@ -0,0 +1,60 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Declarations>
+ <s:Fade id="fadeEffect" target="{targetImg}" alphaFrom="{Number(fromVal.text)}" alphaTo="{Number(toVal.text)}"
+ repeatCount="2" repeatBehavior="reverse" effectStart="playButton.enabled=false"
+ effectEnd="playButton.enabled=true;"/>
+ </fx:Declarations>
+
+ <s:Panel title="Fade Effect Sample"
+ width="100%" height="100%"
+ skinClass="skins.TDFPanelSkin">
+
+ <s:HGroup verticalCenter="0" horizontalCenter="0">
+ <s:VGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Fade alpha from:" verticalAlign="bottom"/>
+ <s:TextInput id="fromVal" text="1.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Fade alpha to:" verticalAlign="bottom"/>
+ <s:TextInput id="toVal" text="0.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:Button id="playButton"
+ left="5" bottom="5"
+ label="Fade" click="fadeEffect.play();"/>
+ </s:VGroup>
+
+ <s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+
+ <s:VGroup width="100%" >
+ <s:Label text="Fade Sample" fontSize="18" color="#B7B6B6"/>
+ <s:Label width="180" verticalAlign="justify" color="#323232"
+ text="The Fade effect changes the alpha of a target using the following parameters: alphaFrom, alphaTo. Click 'Fade' to watch the effect."/>
+ </s:VGroup>
+ </s:HGroup>
+
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml
new file mode 100644
index 0000000..b40ada6
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml
@@ -0,0 +1,99 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+ Label {
+ baseColor: #000000;
+ fontFamily: "Arial";
+ fontWeight: "bold";
+ fontSize: "11";
+ advancedAntiAliasing: true;
+ }
+
+ </fx:Style>
+
+ <fx:Declarations>
+ <s:Move3D id="moveEffect" target="{targetImg}"
+ xFrom="{targetImg.x}" xBy="{Number(xVal.text)}"
+ yFrom="{targetImg.y}" yBy="{Number(yVal.text)}"
+ zFrom="{targetImg.z}" zBy="{Number(zVal.text)}"
+ duration="{duration.value}"
+ repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}"
+ effectStart="this.targetImg.alpha=.7" effectEnd="this.targetImg.alpha=1.0;"/>
+ </fx:Declarations>
+
+ <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+ source tabs for each sample. -->
+ <s:Panel width="100%" height="100%"
+ horizontalCenter="0"
+ title="Move3D Effect Sample"
+ skinClass="skins.TDFPanelSkin">
+
+ <s:HGroup left="10" top="5" width="100%" height="100%" horizontalCenter="0">
+ <s:VGroup width="40%">
+
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Move X By" verticalAlign="bottom"/>
+ <s:TextInput id="xVal" text="40" widthInChars="3"/>
+ </s:HGroup>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Move Y By" verticalAlign="bottom"/>
+ <s:TextInput id="yVal" text="40" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Move Z By" verticalAlign="bottom"/>
+ <s:TextInput id="zVal" text="-150" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Repeat Num" verticalAlign="bottom"/>
+ <s:NumericStepper id="repeatCnt" width="35"
+ value="2" minimum="1"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Duration" verticalAlign="bottom"/>
+ <s:NumericStepper id="duration" width="58"
+ minimum="100" maximum="9999"
+ value="1000"
+ snapInterval="100" />
+ </s:HGroup>
+ <s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
+ <s:Button id="playButton"
+ label="Move Image" click="moveEffect.play();"/>
+ </s:VGroup>
+ <s:HGroup horizontalCenter="0" height="30%" verticalAlign="middle" width="40%">
+ <s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+ </s:HGroup>
+ <s:VGroup top="0" right="5" horizontalAlign="right" width="30%">
+ <s:Label text="Move3D Effect Sample" fontSize="18" color="#B7B6B6"/>
+ <s:Label color="#323232" width="200" verticalAlign="justify"
+ text="The Move3D class moves a target object in three dimensions around the transform center. A scale of
+2.0 means the object has been magnified by a factor of 2, and a scale of 0.5 means the object has been
+reduced by a factor of 2. A scale value of 0.0 is invalid."/>
+ </s:VGroup>
+ </s:HGroup>
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
new file mode 100644
index 0000000..5134671
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
@@ -0,0 +1,114 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+ Label {
+ baseColor: #000000;
+ fontFamily: "Arial";
+ fontWeight: "bold";
+ fontSize: "11";
+ advancedAntiAliasing: true;
+ }
+ Button:up{
+ baseColor: #000000;
+ color: #FFFFFF;
+ fontWeight: "bold";
+ }
+ Button:over{
+ baseColor: #878787;
+ color: #FFFFFF;
+ fontWeight: "bold";
+ }
+ Button:down{
+ baseColor: #878787;
+ color: #000000;
+ fontWeight: "bold";
+ }
+ Button:disabled {
+ baseColor: #FFFFFF;
+ color: #878787;
+ fontWeight: "bold";
+ }
+ </fx:Style>
+
+ <fx:Declarations>
+ <s:Rotate3D id="rotateEffect" target="{targetImg}"
+ angleXFrom="0.0" angleXTo="{Number(xVal.text)}"
+ angleYFrom="0.0" angleYTo="{Number(yVal.text)}"
+ angleZFrom="0.0" angleZTo="{Number(zVal.text)}"
+ duration="{duration.value}"
+ repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}"
+ effectStart="this.targetImg.alpha=.8" effectEnd="this.targetImg.alpha=1.0;"/>
+ </fx:Declarations>
+
+ <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+ source tabs for each sample. -->
+ <s:Panel width="100%" height="100%"
+ horizontalCenter="0"
+ title="Rotate3D Effect Sample"
+ skinClass="skins.TDFPanelSkin">
+
+ <s:HGroup horizontalCenter="0" top="10">
+ <s:VGroup >
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Rotate X To" verticalAlign="bottom"/>
+ <s:TextInput id="xVal" text="0.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Rotate Y By" verticalAlign="bottom"/>
+ <s:TextInput id="yVal" text="360.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Rotate Z To" verticalAlign="bottom"/>
+ <s:TextInput id="zVal" text="0.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Repeat Num" verticalAlign="bottom"/>
+ <s:NumericStepper id="repeatCnt" value="2" width="35" minimum="1"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Duration" verticalAlign="bottom"/>
+ <s:NumericStepper id="duration" width="58"
+ minimum="100" maximum="9999"
+ value="1000"
+ snapInterval="100" />
+ </s:HGroup>
+ <s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
+ <s:Button id="playButton"
+ label="Rotate Image" click="rotateEffect.play();"/>
+ </s:VGroup>
+ <s:HGroup horizontalCenter="0" height="60%" verticalAlign="middle" width="10%">
+ <s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+ </s:HGroup>
+ <s:VGroup top="0" right="5" horizontalAlign="right">
+ <s:Label text="Rotate3D Effect Sample" fontSize="18" color="#B7B6B6"/>
+ <s:Label color="#323232" width="200" verticalAlign="justify"
+ text="The Rotate3D class rotates a target object in three dimensions around the x, y, or z
+axes. The rotation occurs around the transform center of the target." textAlign="left"/>
+ </s:VGroup>
+ </s:HGroup>
+
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
new file mode 100644
index 0000000..c6fd840
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
@@ -0,0 +1,118 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+ Label {
+ baseColor: #000000;
+ fontFamily: "Arial";
+ fontWeight: "bold";
+ fontSize: "11";
+ advancedAntiAliasing: true;
+ }
+ Button:up{
+ baseColor: #000000;
+ color: #FFFFFF;
+ fontWeight: "bold";
+ }
+ Button:over{
+ baseColor: #878787;
+ color: #FFFFFF;
+ fontWeight: "bold";
+ }
+ Button:down{
+ baseColor: #878787;
+ color: #000000;
+ fontWeight: "bold";
+ }
+ Button:disabled {
+ baseColor: #FFFFFF;
+ color: #878787;
+ fontWeight: "bold";
+ }
+ </fx:Style>
+
+ <fx:Declarations>
+ <s:Scale3D id="scaleEffect" target="{targetImg}"
+ scaleXFrom="1.0" scaleXTo="{Number(xVal.text)}"
+ scaleYFrom="1.0" scaleYTo="{Number(yVal.text)}"
+ scaleZFrom="1.0" scaleZTo="{Number(zVal.text)}"
+ duration="{duration.value}"
+ repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}"
+ effectStart="this.targetImg.alpha=.7" effectEnd="this.targetImg.alpha=1.0;"/>
+ </fx:Declarations>
+
+ <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+ source tabs for each sample. -->
+ <s:Panel width="100%" height="100%"
+ horizontalCenter="0"
+ title="Scale3D Effect Sample"
+ skinClass="skins.TDFPanelSkin">
+
+ <s:HGroup left="5" top="5" width="100%" height="100%" horizontalCenter="0">
+ <s:VGroup width="40%">
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Scale X To" verticalAlign="bottom"/>
+ <s:TextInput id="xVal" text="1.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Scale Y To" verticalAlign="bottom"/>
+ <s:TextInput id="yVal" text="1.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Scale Z To" verticalAlign="bottom"/>
+ <s:TextInput id="zVal" text="1.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Repeat Num" verticalAlign="bottom"/>
+ <s:NumericStepper id="repeatCnt" width="35"
+ value="2" minimum="1"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Duration" verticalAlign="bottom"/>
+ <s:NumericStepper id="duration" width="58"
+ minimum="100" maximum="9999"
+ value="1000"
+ snapInterval="100" />
+ </s:HGroup>
+ <s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
+ <s:Button id="playButton"
+ label="Scale Image" click="scaleEffect.play();"/>
+ </s:VGroup>
+ <s:HGroup horizontalCenter="0" height="30%" verticalAlign="middle" width="40%">
+ <s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+ </s:HGroup>
+ <s:VGroup top="0" right="5" horizontalAlign="right" width="30%">
+ <s:Label text="Scale3D Effect Sample" fontSize="18" color="#B7B6B6"/>
+ <s:Label color="#323232" width="200" verticalAlign="justify"
+ text="The Scale3D class scales a target object in three dimensions around the transform center. A scale of
+2.0 means the object has been magnified by a factor of 2, and a scale of 0.5 means the object has been
+reduced by a factor of 2. A scale value of 0.0 is invalid."/>
+ </s:VGroup>
+ </s:HGroup>
+
+
+
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/WipeExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/WipeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/WipeExample.mxml
new file mode 100644
index 0000000..ac96897
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/WipeExample.mxml
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <s:states>
+ <s:State name="default"/>
+ <s:State name="flipped"/>
+ </s:states>
+
+ <s:transitions>
+ <s:Transition id="t1">
+ <s:Wipe id="wipe"
+ direction="right"
+ target="{holder}"
+ duration="1000" />
+ </s:Transition>
+ </s:transitions>
+
+ <s:Panel title="Wipe Effect Example" skinClass="skins.TDFPanelSkin"
+ width="100%" height="100%">
+
+ <s:HGroup horizontalCenter="0" top="15" >
+ <s:VGroup width="100%" height="100%">
+ <s:Group id="holder">
+ <s:BitmapImage
+ source="@Embed('assets/back.png')"
+ visible="true" visible.flipped="false"/>
+ <s:BitmapImage width="200" height="200"
+ source="@Embed('assets/ApacheFlexLogo.png')"
+ visible="false" visible.flipped="true"/>
+
+ </s:Group>
+ <s:Button
+ label="Wipe Right"
+ click="currentState = (currentState == 'flipped') ? 'default' : 'flipped';" />
+ </s:VGroup>
+
+
+ <!-- Directions -->
+ <s:VGroup id="detailsBox"
+ width="400"
+ left="0">
+ <s:Label
+ width="400"
+ color="#323232"
+ text="The Wipe effect wipes from bitmapFrom to the bitmapTo image in the given direction. Click the 'Wipe Right' button to see the effect."/>
+ </s:VGroup>
+ </s:HGroup>
+
+ </s:Panel>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexIcon.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexIcon.png b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexIcon.png
new file mode 100644
index 0000000..e68d831
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexIcon.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexLogo.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexLogo.png b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexLogo.png
new file mode 100644
index 0000000..4ff037f
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexLogo.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/assets/back.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/back.png b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/back.png
new file mode 100644
index 0000000..19367fb
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/back.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/2.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/2.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/2.jpg
new file mode 100644
index 0000000..2533129
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/2.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/3.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/3.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/3.jpg
new file mode 100644
index 0000000..b98cd8a
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/3.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/4.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/4.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/4.jpg
new file mode 100644
index 0000000..657c12b
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/4.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/5.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/5.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/5.jpg
new file mode 100644
index 0000000..e296f9c
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/5.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/6.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/6.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/6.jpg
new file mode 100644
index 0000000..5ebc534
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/6.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/7.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/7.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/7.jpg
new file mode 100644
index 0000000..3047de0
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/7.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/8.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/8.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/8.jpg
new file mode 100644
index 0000000..4e3f9ca
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/8.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/9.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/9.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/9.jpg
new file mode 100644
index 0000000..ed4e5fe
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/9.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/effects/skins/TDFPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/skins/TDFPanelSkin.mxml
new file mode 100644
index 0000000..4b06e54
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/skins/TDFPanelSkin.mxml
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<!--- Custom Spark Panel Skin created for Tour de Flex.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
+ blendMode.disabled="layer">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Panel")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ /* Define the skin elements that should not be colorized.
+ For panel, border and title backround are skinned, but the content area and title text are not. */
+ static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+ static private const contentFill:Array = [];
+
+ /**
+ * @inheritDoc
+ */
+ override public function get contentItems():Array {return contentFill};
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ <s:State name="normalWithControlBar" />
+ <s:State name="disabledWithControlBar" />
+ </s:states>
+
+ <!-- drop shadow -->
+ <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11"
+ angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
+
+ <!-- layer 1: border -->
+ <s:Rect left="0" right="0" top="0" bottom="0">
+ <s:stroke>
+ <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- layer 2: background fill -->
+ <s:Rect left="0" right="0" bottom="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: contents -->
+ <!--- contains the vertical stack of titlebar content and controlbar -->
+ <s:Group left="1" right="1" top="1" bottom="1" >
+ <s:layout>
+ <s:VerticalLayout gap="0" horizontalAlign="justify" />
+ </s:layout>
+
+ <s:Group id="topGroup" >
+ <!-- layer 0: title bar fill -->
+ <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
+ <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
+ <s:fill>
+ <s:SolidColor color="0x000000" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: title bar highlight -->
+ <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xEAEAEA" />
+ <s:GradientEntry color="0xD9D9D9" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- layer 2: title bar divider -->
+ <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+ <s:fill>
+ <s:SolidColor color="0xC0C0C0" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: text -->
+ <!--- Defines the appearance of the PanelSkin class's title bar. -->
+ <!-- Note: The title text display has been slightly modified for Tour de Flex. -->
+ <s:Label id="titleDisplay" lineBreak="explicit"
+ left="9" top="1" bottom="0" minHeight="30"
+ verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
+ </s:Label>
+ </s:Group>
+
+ <!--
+ 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
+ -->
+ <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+ </s:Group>
+
+ <s:Group id="bottomGroup" minWidth="0" minHeight="0"
+ includeIn="normalWithControlBar, disabledWithControlBar" >
+
+ <!-- layer 0: control bar background -->
+ <!-- Note: We are skinning this to be the gradient in case we do specify control
+ bar content, but it will only display if there's a controlBarContent
+ property specified.-->
+ <s:Rect left="0" right="0" bottom="0" top="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: control bar divider line -->
+ <s:Rect left="0" right="0" top="0" height="1" >
+ <s:fill>
+ <s:SolidColor color="0xCDCDCD" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 2: control bar -->
+ <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+ </s:Group>
+ </s:Group>
+ </s:Group>
+</s:SparkSkin>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
new file mode 100644
index 0000000..e7557f4
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<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"
+ skinClass="TDFGradientBackgroundSkin">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.controls.Alert;
+ ]]>
+ </fx:Script>
+
+ <s:layout>
+ <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+ </s:layout>
+
+ <s:Panel title="Handling Events - Inline property Sample"
+ width="600" height="100%"
+ color="0x000000"
+ borderAlpha="0.15">
+
+ <s:layout>
+ <s:VerticalLayout horizontalAlign="center"
+ paddingLeft="10" paddingRight="10"
+ paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <!-- Handling Events - Inline Property -->
+
+ <s:Button label="click me" click="Alert.show('clicked!')"/>
+
+ </s:Panel>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
new file mode 100644
index 0000000..075743b
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<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"
+ skinClass="TDFGradientBackgroundSkin">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.controls.Alert;
+ ]]>
+ </fx:Script>
+
+ <s:layout>
+ <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+ </s:layout>
+
+ <s:Panel title="Handling Events - Inline Block Sample"
+ width="600" height="100%"
+ color="0x000000"
+ borderAlpha="0.15">
+
+ <s:layout>
+ <s:VerticalLayout horizontalAlign="center"
+ paddingLeft="10" paddingRight="10"
+ paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <!-- Handling Events - Inline Block -->
+
+ <s:Button id="b" label="click me once">
+ <s:click>
+ b.enabled = false;
+ mx.controls.Alert.show('clicked!');
+ </s:click>
+ </s:Button>
+ </s:Panel>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
new file mode 100644
index 0000000..780d0da
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<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"
+ skinClass="TDFGradientBackgroundSkin">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.controls.Alert;
+
+ private function handleClick(event:MouseEvent):void
+ {
+ b.enabled = false;
+ mx.controls.Alert.show('clicked!');
+ }
+ ]]>
+ </fx:Script>
+
+ <s:layout>
+ <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+ </s:layout>
+
+ <s:Panel title="Handling Events - Function Sample"
+ width="600" height="100%"
+ color="0x000000"
+ borderAlpha="0.15">
+
+ <s:layout>
+ <s:VerticalLayout horizontalAlign="center"
+ paddingLeft="10" paddingRight="10"
+ paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <!-- Handling Events - Function -->
+
+ <s:Button id="b" label="click me once" click="handleClick(event)"/>
+ </s:Panel>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
new file mode 100644
index 0000000..609302f
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<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"
+ skinClass="TDFGradientBackgroundSkin">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.controls.Alert;
+
+ private function handleClick(event:MouseEvent):void
+ {
+ b.enabled = false;
+ Alert.show('clicked!');
+ }
+ ]]>
+ </fx:Script>
+
+ <s:layout>
+ <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+ </s:layout>
+
+ <s:Panel title="Handling Events - Function with addEventListener Sample"
+ width="600" height="100%"
+ color="0x000000"
+ borderAlpha="0.15">
+
+ <s:layout>
+ <s:VerticalLayout horizontalAlign="center"
+ paddingLeft="10" paddingRight="10"
+ paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+
+ <!-- Handling Events - Function with addEventListener -->
+
+ <s:Button id="b" label="click me once">
+ <s:creationComplete>
+ b.addEventListener(MouseEvent.CLICK, handleClick);
+ </s:creationComplete>
+ </s:Button>
+
+ </s:Panel>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
new file mode 100644
index 0000000..4ffe293
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<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"
+ xmlns:local="*"
+ skinClass="TDFGradientBackgroundSkin">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.controls.Alert;
+ ]]>
+ </fx:Script>
+
+ <s:layout>
+ <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+ </s:layout>
+
+ <fx:Declarations>
+
+ <!-- Dispatching an Event -->
+ <local:FiveSecondTrigger triggered="Alert.show('five second event triggered')"/>
+ </fx:Declarations>
+
+ <s:Panel title="Dispatching Events Sample"
+ width="600" height="100%"
+ color="0x000000"
+ borderAlpha="0.15">
+
+ <s:layout>
+ <s:VerticalLayout horizontalAlign="center"
+ paddingLeft="10" paddingRight="10"
+ paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Label text="wait 5 seconds" color="0x000000"/>
+
+ </s:Panel>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
new file mode 100644
index 0000000..eb82cfb
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<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"
+ skinClass="TDFGradientBackgroundSkin">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.controls.Alert;
+ ]]>
+ </fx:Script>
+
+ <s:layout>
+ <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+ </s:layout>
+
+ <s:Panel title="Dispatching Custom Events Sample"
+ width="600" height="100%"
+ color="0x000000"
+ borderAlpha="0.15">
+
+ <s:layout>
+ <s:VerticalLayout horizontalAlign="center"
+ paddingLeft="10" paddingRight="10"
+ paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <!-- Dispatching a Custom Event -->
+
+ <s:initialize>
+ addEventListener(MyEvent.TRIGGERED, function(event:MyEvent):void {
+ mx.controls.Alert.show('event handled!');
+ });
+ </s:initialize>
+
+ <s:Button label="fire the event!" click="dispatchEvent(new MyEvent(MyEvent.TRIGGERED))"/>
+
+ </s:Panel>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/events/FiveSecondTrigger.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/FiveSecondTrigger.as b/TourDeFlex/TourDeFlex3/src/spark/events/FiveSecondTrigger.as
new file mode 100644
index 0000000..7c562d4
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/FiveSecondTrigger.as
@@ -0,0 +1,44 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+ import flash.events.Event;
+ import flash.events.EventDispatcher;
+ import flash.events.TimerEvent;
+ import flash.utils.Timer;
+
+ [Event(name="triggered")]
+
+ public class FiveSecondTrigger extends EventDispatcher
+ {
+ public function FiveSecondTrigger()
+ {
+ var t:Timer = new Timer(5000, 1);
+ t.addEventListener(TimerEvent.TIMER, handleTimer);
+ t.start();
+ }
+
+ private function handleTimer(event:TimerEvent):void
+ {
+ var e:Event = new Event("triggered");
+ dispatchEvent(e);
+ }
+
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/events/MyEvent.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/MyEvent.as b/TourDeFlex/TourDeFlex3/src/spark/events/MyEvent.as
new file mode 100644
index 0000000..28b176c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/MyEvent.as
@@ -0,0 +1,33 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+ import mx.events.FlexEvent;
+
+ public class MyEvent extends FlexEvent
+ {
+ public static const TRIGGERED:String = "triggered";
+
+ public function MyEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
+ {
+ super(type, bubbles, cancelable);
+ }
+
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/events/TDFGradientBackgroundSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/TDFGradientBackgroundSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/TDFGradientBackgroundSkin.mxml
new file mode 100644
index 0000000..553aee3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/TDFGradientBackgroundSkin.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Metadata>
+ [HostComponent("spark.components.Application")]
+ </fx:Metadata>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ </s:states>
+
+ <s:layout>
+ <s:BasicLayout />
+ </s:layout>
+
+ <s:Rect id="bg" width="100%" height="100%">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:entries>
+ <s:GradientEntry color="0x000000" ratio="0.00" />
+ <s:GradientEntry color="0x323232" ratio="1.0" />
+ </s:entries>
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
+</s:SparkSkin>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
new file mode 100644
index 0000000..07c52f5
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<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"
+ skinClass="TDFGradientBackgroundSkin">
+
+ <fx:Script>
+ <![CDATA[
+
+ import mx.events.ValidationResultEvent;
+ private var vResult:ValidationResultEvent;
+
+ // Event handler to validate and format input.
+ private function Format():void {
+
+ vResult = numVal.validate();
+
+ if (vResult.type==ValidationResultEvent.VALID) {
+ var temp:Number=Number(priceUS.text);
+ formattedUSPrice.text= usdFormatter.format(temp);
+ }
+
+ else {
+ formattedUSPrice.text="";
+ }
+ }
+ ]]>
+ </fx:Script>
+
+ <s:layout>
+ <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+ </s:layout>
+
+ <fx:Declarations>
+ <mx:CurrencyFormatter id="usdFormatter" precision="2" currencySymbol="$" decimalSeparatorFrom="." rounding="nearest"
+ decimalSeparatorTo="." useNegativeSign="true" useThousandsSeparator="true" alignSymbol="left"/>
+
+ <mx:NumberValidator id="numVal" source="{priceUS}" property="text" allowNegative="true" domain="real"/>
+ </fx:Declarations>
+
+
+ <s:Panel title="CurrencyFormatter Example" width="600" height="100%"
+ color="0x000000"
+ borderAlpha="0.15">
+
+ <s:layout>
+ <s:HorizontalLayout horizontalAlign="center"
+ paddingLeft="10" paddingRight="10"
+ paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <mx:Form color="0x323232">
+ <mx:FormItem label="Enter dollar amount:">
+ <s:TextInput id="priceUS" text="" width="50%"/>
+ </mx:FormItem>
+
+ <mx:FormItem label="Formatted U.S. dollar amount: ">
+ <s:Label id="formattedUSPrice" text="" />
+ </mx:FormItem>
+
+ <mx:FormItem>
+ <s:Button label="Validate and Format" click="Format();"/>
+ </mx:FormItem>
+ </mx:Form>
+
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
new file mode 100644
index 0000000..5162dd5
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<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"
+ skinClass="TDFGradientBackgroundSkin">
+
+ <fx:Script>
+ <![CDATA[
+
+ import mx.events.ValidationResultEvent;
+ private var vResult:ValidationResultEvent;
+
+ // Event handler to validate and format input.
+ private function Format():void
+ {
+ vResult = dateVal.validate();
+ if (vResult.type==ValidationResultEvent.VALID) {
+ formattedDate.text=dateFormatter.format(dob.text);
+ }
+
+ else {
+ formattedDate.text= "";
+ }
+ }
+ ]]>
+ </fx:Script>
+
+ <s:layout>
+ <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+ </s:layout>
+
+ <fx:Declarations>
+ <mx:DateFormatter id="dateFormatter" formatString="month: MM, day: DD, year: YYYY"/>
+
+ <mx:DateValidator id="dateVal" source="{dob}" property="text" inputFormat="mm/dd/yyyy"/>
+ </fx:Declarations>
+
+
+ <s:Panel title="DateFormatter Example" width="600" height="100%"
+ color="0x000000"
+ borderAlpha="0.15">
+
+ <s:layout>
+ <s:HorizontalLayout horizontalAlign="center"
+ paddingLeft="10" paddingRight="10"
+ paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <mx:Form width="100%" color="0x323232">
+ <mx:FormItem label="Enter date (mm/dd/yyyy):" width="100%">
+ <s:TextInput id="dob" text=""/>
+ </mx:FormItem>
+
+ <mx:FormItem label="Formatted date: " width="100%">
+ <s:Label id="formattedDate" text="" />
+ </mx:FormItem>
+
+ <mx:FormItem>
+ <s:Button label="Validate and Format" click="Format();"/>
+ </mx:FormItem>
+ </mx:Form>
+
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
new file mode 100644
index 0000000..e0c9127
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<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"
+ skinClass="TDFGradientBackgroundSkin">
+
+ <fx:Script>
+ <![CDATA[
+
+ // Event handler to format the input.
+ private function Format():void
+ {
+ // The format() method returns the formatted String,
+ // or an empty String if there is an error.
+ var formattedVal:String = numberFormatter.format(inputVal.text);
+
+ if (formattedVal.length==0) {
+ // If there is an error, the Format.error property
+ // contains the reason.
+ formattedNumber.text=numberFormatter.error;
+ }
+
+ else {
+ formattedNumber.text=formattedVal;
+ }
+ }
+ ]]>
+ </fx:Script>
+
+ <s:layout>
+ <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+ </s:layout>
+
+ <fx:Declarations>
+ <mx:NumberFormatter id="numberFormatter" />
+ </fx:Declarations>
+
+ <s:Panel title="Formatter Example" width="600" height="100%"
+ color="0x000000"
+ borderAlpha="0.15">
+
+ <s:layout>
+ <s:HorizontalLayout horizontalAlign="center"
+ paddingLeft="10" paddingRight="10"
+ paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <mx:Form color="0x323232">
+ <mx:FormItem label="Enter number - a letter is invalid:">
+ <s:TextInput id="inputVal" text="" width="75%"/>
+ </mx:FormItem>
+
+ <mx:FormItem label="Formatted number: ">
+ <s:Label id="formattedNumber" />
+ </mx:FormItem>
+
+ <mx:FormItem>
+ <s:Button label="Validate and Format" click="Format();"/>
+ </mx:FormItem>
+ </mx:Form>
+
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
new file mode 100644
index 0000000..49f114c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<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"
+ skinClass="TDFGradientBackgroundSkin">
+
+ <fx:Script>
+ <![CDATA[
+
+ import mx.events.ValidationResultEvent;
+ private var vResult:ValidationResultEvent;
+
+ // Event handler to validate and format input.
+ private function Format():void
+ {
+ vResult = pnVal.validate();
+ if (vResult.type==ValidationResultEvent.VALID) {
+ formattedPhone.text= phoneFormatter.format(phone.text);
+ }
+
+ else {
+ formattedPhone.text= "";
+ }
+ }
+ ]]>
+ </fx:Script>
+
+ <s:layout>
+ <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+ </s:layout>
+
+ <fx:Declarations>
+ <mx:PhoneFormatter id="phoneFormatter" formatString="(###) ###-####" validPatternChars="#-() "/>
+
+ <mx:PhoneNumberValidator id="pnVal" source="{phone}" property="text" allowedFormatChars=""/>
+ </fx:Declarations>
+
+ <s:Panel title="PhoneNumberValidator Example" width="600" height="100%"
+ color="0x000000"
+ borderAlpha="0.15">
+
+ <s:layout>
+ <s:HorizontalLayout horizontalAlign="center"
+ paddingLeft="10" paddingRight="10"
+ paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <mx:Form color="0x323232">
+ <mx:FormItem label="Enter a 10-digit phone number:">
+ <s:TextInput id="phone" text="" width="75%"/>
+ </mx:FormItem>
+
+ <mx:FormItem label="Formatted phone number: ">
+ <s:Label id="formattedPhone" text="" />
+ </mx:FormItem>
+
+ <mx:FormItem>
+ <s:Button label="Validate and Format" click="Format();"/>
+ </mx:FormItem>
+ </mx:Form>
+
+ </s:Panel>
+
+</s:Application>