FLEX-34485 make examples consistent
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml
index f504b6c..ffc7d28 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -37,13 +36,7 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="AreaChart Control" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="AreaChart Control" width="100%" height="100%">
<s:layout>
<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml
index 554ce88..5127997 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -34,14 +33,8 @@
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
]]>
</fx:Script>
-
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
- <s:Panel title="BarChart Control" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="BarChart Control" width="100%" height="100%">
<s:layout>
<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml
index 365df88..d242cdd 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -43,18 +42,10 @@
mx|BubbleChart { color:#000099; }
</fx:Style>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="BubbleChart Control" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="BubbleChart Control" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:BubbleChart id="bubblechart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml
index b39be2e..7e242c3 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -42,18 +41,10 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="CandlestickChart Control" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="CandlestickChart Control" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:CandlestickChart id="candlestickchart" height="100%" width="100%" paddingRight="5" paddingLeft="5"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml
index f3ba41d..b682d0b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -34,19 +33,11 @@
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
]]>
</fx:Script>
-
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="ColumnChart Control" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+
+ <s:Panel title="ColumnChart Control" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:ColumnChart id="column" height="100%" color="0x323232"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.mxml
index 73fe34d..277690b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -42,18 +41,10 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="HLOCChart Control" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="HLOCChart Control" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:HLOCChart id="hlocchart" height="100%" width="100%" paddingRight="5" paddingLeft="5"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.mxml
index 5f61ee0..efb0151 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -37,18 +36,10 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="LineChart Control" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="LineChart Control" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:LineChart id="linechart" color="0x323232" height="100%"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.mxml
index f14e5c9..9c250f3 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -40,18 +39,10 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="PieChart Control" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="PieChart Control" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:PieChart id="chart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/PlotChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/PlotChartExample.mxml
index 8b1b581..8d943ec 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/PlotChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/PlotChartExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -35,18 +34,10 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="PlotChart Control" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="PlotChart Control" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:PlotChart id="plot" height="100%" paddingLeft="5" paddingRight="5" color="0x323232"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml
index 554f633..d001823 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -56,22 +55,14 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
<fx:Declarations>
<mx:SeriesInterpolate id="interpolateIn" duration="1000"/>
</fx:Declarations>
- <s:Panel title="Interpolate Effect" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="Interpolate Effect" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:CandlestickChart id="candlestickchart" height="100%" paddingRight="5" paddingLeft="5" color="0x323232"
@@ -104,9 +95,9 @@
text="Choose a company to view recent stock data."/>
<s:RadioButton groupName="stocks" label="View Company A"
- selected="true" click="candlestickchart.dataProvider=companyAAC;"/>
+ selected="true" click="candlestickchart.dataProvider=companyAAC"/>
<s:RadioButton groupName="stocks" label="View Company B"
- click="candlestickchart.dataProvider=companyBAC;"/>
+ click="candlestickchart.dataProvider=companyBAC"/>
</s:BorderContainer>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml
index 4d24782..0f21724 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -56,24 +55,16 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
<fx:Declarations>
<mx:SeriesSlide id="slideIn" duration="1000" direction="up"/>
<mx:SeriesSlide id="slideOut" duration="1000" direction="down"/>
</fx:Declarations>
- <s:Panel title="Slide Effect" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="Slide Effect" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:CandlestickChart id="candlestickchart" height="100%" paddingRight="5" paddingLeft="5" color="0x323232"
@@ -106,9 +97,9 @@
text="Choose a company to view recent stock data."/>
<s:RadioButton groupName="stocks" label="View Company A"
- selected="true" click="candlestickchart.dataProvider=companyAAC;"/>
+ selected="true" click="candlestickchart.dataProvider=companyAAC"/>
<s:RadioButton groupName="stocks" label="View Company B"
- click="candlestickchart.dataProvider=companyBAC;"/>
+ click="candlestickchart.dataProvider=companyBAC"/>
</s:BorderContainer>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml
index d94c176..91e35cd 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -56,24 +55,16 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
<fx:Declarations>
<mx:SeriesZoom id="zoomIn" duration="1000"/>
<mx:SeriesZoom id="zoomOut" duration="1000"/>
</fx:Declarations>
- <s:Panel title="Zoom Effect" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="Zoom Effect" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:CandlestickChart id="candlestickchart" height="100%" paddingRight="5" paddingLeft="5" color="0x323232"
@@ -105,9 +96,9 @@
text="Choose a company to view recent stock data."/>
<s:RadioButton groupName="stocks" label="View Company A"
- selected="true" click="candlestickchart.dataProvider=companyAAC;"/>
+ selected="true" click="candlestickchart.dataProvider=companyAAC"/>
<s:RadioButton groupName="stocks" label="View Company B"
- click="candlestickchart.dataProvider=companyBAC;"/>
+ click="candlestickchart.dataProvider=companyBAC"/>
</s:BorderContainer>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml
index 6843f52..5ee66a6 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml
@@ -20,8 +20,7 @@
<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">
+ xmlns:local="*">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@@ -62,19 +61,10 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="Components Samples"
- width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="Components Samples" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<s:HGroup >
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml
index 17b7efb..42626d2 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml
@@ -20,22 +20,12 @@
<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">
+ xmlns:local="*">
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="Components Samples"
- width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="Components Samples" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<local:VideoPlayer source="assets/FlexInstaller.mp4"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml
index f11dac8..deaea04 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml
@@ -19,7 +19,8 @@
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ width="100%" height="100%">
<fx:Script>
<![CDATA[
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml
index 9d35416..eee4668 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml
@@ -23,8 +23,11 @@
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
- <s:Panel width="100%" height="100%" title="BorderContainer Sample"
- skinClass="skins.TDFPanelSkin">
+ <s:Panel title="BorderContainer Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
<s:VGroup id="mainGroup" width="100%"
horizontalCenter="50" top="10">
@@ -58,7 +61,7 @@
</s:BorderContainer>
</s:HGroup>
- <s:Label bottom="10" horizontalCenter="0" width="95%" verticalAlign="justify" color="#323232"
+ <s:Label bottom="10" horizontalCenter="0" width="95%" verticalAlign="justify"
text="The Border class provides a container class that can be styled with a border and
a background fill or image. It has many of the same styles as HaloBorder and is used in a similar way to the
Halo container classes such as Box and Canvas. Examples of styles that are supported are borderWeight, borderColor,
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml
index 6fc7fb4..85f6645 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml
@@ -25,50 +25,45 @@
<s:BasicLayout id="bl"/>
</s:layout>
- <!-- Note: Panel has a BasicLayout by default. The BasicLayout means that components will be
- arranged according to their individual constraint settings, independent of each-other -->
- <s:Panel id="mainPanel" width="100%" height="100%" top="0" left="5"
- title="Panel Sample"
- skinClass="skins.TDFPanelSkin">
+ <s:Panel id="mainPanel" title="Group Sample" width="100%" height="100%">
- <!-- Note: main panel is BasicLayout by default. So each inner panel will be layed out
- according to it's constraints specified individually. -->
- <s:Panel title="Basic Layout Panel" top="0" left="5">
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:HGroup>
+ <s:Group>
<!-- Default layout is basic, therefore constraints are used for placement -->
<s:Label text="Apples" top="0"/>
<s:Label text="Oranges" top="13"/>
<s:Label text="Bananas" top="26"/>
- </s:Panel>
+ </s:Group>
- <s:Panel id="horizontalPanel" title="Horizontal Layout Panel"
- top="0" left="250">
+ <s:Group id="horizontalPanel">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
- <!-- Note: constraints to top left on items here, but will not matter because we
- specified a HorizontalLayout -->
- <s:Label text="Apples" top="0"/>
- <s:Label text="Oranges" top="13"/>
- <s:Label text="Bananas" top="26"/>
- </s:Panel>
- <s:Panel id="vericalPanel" title="Vertical Layout Panel"
- top="0" right="5">
+ <s:Label text="Apples" />
+ <s:Label text="Oranges" />
+ <s:Label text="Bananas" />
+ </s:Group>
+
+ <s:Group id="vericalPanel">
<s:layout>
<s:VerticalLayout/>
</s:layout>
- <!-- Note: constraints to top left on items here, but will not matter because we
- specified a VerticalLayout -->
- <s:Label text="Apples" top="0"/>
- <s:Label text="Oranges" top="13"/>
- <s:Label text="Bananas" top="26"/>
- </s:Panel>
- <s:Label color="0x323232" verticalAlign="justify"
- left="3" bottom="30" width="100%"
- text="The Panel class defines a container that includes a title bar, a caption, a border, and a content area for its children.
-The Panel has a basic layout by default, which means it lays out elements within the panel by
-their individual constraints. You can specify a different layout to use within the panel such
-as shown in the inner panels (basic, horizontal and vertical layout panels. In that case the
-individual constraints on the Text items are ignored, as shown here."/>
+ <s:Label text="Apples" />
+ <s:Label text="Oranges" />
+ <s:Label text="Bananas" />
+ </s:Group>
+ </s:HGroup>
+
+ <s:Label verticalAlign="justify"
+ left="3" bottom="30" width="100%"
+ text="The Group class defines a container that includes a content area for its children.
+The Group has a basic layout by default, which means it lays out elements within the group by
+their individual constraints. You can specify a different layout to use within the group such
+as shown in the inner groups (basic, horizontal and vertical layout groups)."/>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml
index b090b2e..9fb29d2 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml
@@ -21,58 +21,44 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
- <!-- Note: Panel has a BasicLayout by default. The BasicLayout means that components will be
- arranged according to their individual constraint settings, independent of each-other -->
- <s:Panel id="mainPanel" width="100%" height="100%"
- title="Panel Sample"
- skinClass="skins.TDFPanelSkin">
-
-
- <s:HGroup horizontalCenter="0">
-
- <!-- Note: main panel is BasicLayout by default, so each inner panel will be layed out
- according to it's constraints specified individually. -->
- <s:Panel title="Basic Layout Panel" top="0" left="5">
- <!-- Default layout is basic, therefore constraints are used for placement -->
- <mx:Text text="Apples" top="0"/>
- <mx:Text text="Oranges" top="15"/>
- <mx:Text text="Bananas" top="30"/>
- </s:Panel>
-
- <s:Panel title="Horizontal Layout Panel"
- top="0" left="250">
- <s:layout>
- <s:HorizontalLayout/>
- </s:layout>
- <!-- Note: constraints to top left on items here, but will not matter because we
- specified a HorizontalLayout -->
- <mx:Text text="Apples" top="0"/>
- <mx:Text text="Oranges" top="15"/>
- <mx:Text text="Bananas" top="30"/>
- </s:Panel>
-
- <s:Panel title="Vertical Layout Panel"
- top="0" right="5">
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
-
- <!-- Note: constraints to top left on items here, but will not matter because we
- specified a VeritcalLayout -->
- <mx:Text text="Apples" top="0"/>
- <mx:Text text="Oranges" top="15"/>
- <mx:Text text="Bananas" top="30"/>
- </s:Panel>
- </s:HGroup>
- <s:Group bottom="5" width="100%">
+ <s:Panel id="mainPanel" title="Panel Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
- <s:Label color="0x323232" verticalAlign="justify"
+ <s:HGroup>
+ <s:Panel title="Basic Layout Panel">
+ <!-- Default layout is basic, therefore constraints are used for placement -->
+ <s:Label text="Apples" top="0"/>
+ <s:Label text="Oranges" top="13"/>
+ <s:Label text="Bananas" top="26"/>
+ </s:Panel>
+
+ <s:Panel id="horizontalPanel" title="Horizontal Layout Panel">
+ <s:layout>
+ <s:HorizontalLayout/>
+ </s:layout>
+ <s:Label text="Apples" />
+ <s:Label text="Oranges" />
+ <s:Label text="Bananas" />
+ </s:Panel>
+
+ <s:Panel id="vericalPanel" title="Vertical Layout Panel">
+ <s:layout>
+ <s:VerticalLayout/>
+ </s:layout>
+ <s:Label text="Apples" />
+ <s:Label text="Oranges" />
+ <s:Label text="Bananas" />
+ </s:Panel>
+ </s:HGroup>
+
+ <s:Label verticalAlign="justify"
left="5" bottom="15" width="95%"
text="The Panel class defines a container that includes a title bar, a caption, a border, and a content area for its children.
The Panel has a basic layout by default, which means it lays out elements within the panel by their individual constraints. You can specify a different layout to use within the panel such
-as shown in the inner panels (basic, horizontal and vertical layout) panels. In that case the individual constraints on the Text items are ignored, as shown here."/>
- </s:Group>
-
+as shown in the inner panels (basic, horizontal and vertical layout) panels." />
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml
index 1e76815..47bd945 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml
@@ -19,16 +19,10 @@
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
-
- <fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
- </fx:Declarations>
-
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+
<fx:Script>
<![CDATA[
- import skins.TDFPanelSkin;
-
private function applyProperties():void
{
this.mainHGroup.paddingTop = this.padTop.value;
@@ -40,7 +34,7 @@
]]>
</fx:Script>
- <s:Panel skinClass="skins.TDFPanelSkin" title="HGroup" width="100%" height="100%">
+ <s:Panel title="HGroup" width="100%" height="100%">
<s:HGroup left="300" top="25" id="mainHGroup">
<s:Rect width="100" height="75">
@@ -87,7 +81,7 @@
</s:HGroup>
<s:Button label="Apply Properties" click="this.applyProperties()"/>
- <s:Label width="75%" horizontalCenter="0" color="#323232"
+ <s:Label width="75%" horizontalCenter="0"
text="The HGroup container is an instance of the Group container that uses the HorizontalLayout class. You can use
the properties of the HGroup class to modify the characteristics of the HorizontalLayout class."/>
</s:VGroup>
@@ -95,4 +89,4 @@
</s:Panel>
-</s:Application>
\ No newline at end of file
+</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml
index 4ebd23d..778f328 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml
@@ -19,16 +19,10 @@
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
-
- <fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
- </fx:Declarations>
-
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+
<fx:Script>
<![CDATA[
- import skins.TDFPanelSkin;
-
private function applyProperties():void
{
this.mainVGroup.paddingTop = this.padTop.value;
@@ -40,7 +34,8 @@
]]>
</fx:Script>
- <s:Panel skinClass="skins.TDFPanelSkin" title="VGroup Sample" width="100%" height="100%">
+ <s:Panel title="VGroup Sample" width="100%" height="100%">
+
<s:HGroup width="100%" height="100%" top="10" left="10">
<s:VGroup top="10" left="10" width="172">
<s:HGroup verticalAlign="middle">
@@ -88,7 +83,7 @@
</s:Rect>
</s:VGroup>
<mx:Spacer width="10"/>
- <s:Label width="40%" horizontalCenter="0" color="#323232"
+ <s:Label width="40%" horizontalCenter="0"
text="The VGroup container is an instance of the Group container that uses the VerticalLayout class. You can use the properties of the VGroup class to modify the characteristics of the VerticalLayout class." height="100%"/>
</s:HGroup>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml
index abfb346..24ff5aa 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml
@@ -20,34 +20,37 @@
<!-- http://evtimmy.com/2010/01/verticalalign-for-vgroup-and-horizontalalign-for-hgroup/ -->
<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" backgroundColor="0x323232" color="0xFFFFFF">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:VGroup verticalAlign="middle" width="526" height="230" top="57" left="10">
- <s:HGroup verticalAlign="middle" height="100%" color="0x000000">
- <s:Label text="VGroup" rotation="-90" color="0xFF0000"/>
+ <s:Panel id="mainPanel" title="Panel Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:HGroup verticalAlign="middle" height="100%" >
+ <s:Label text="VGroup" rotation="-90" />
<s:BorderContainer minWidth="0" minHeight="0">
<s:VGroup height="{heightSlider.value}"
verticalAlign="{verticalAlignChoice.selectedItem}"
gap="0">
<s:Label text="Lorem ipsum dolor sit amet, " height="22" verticalAlign="middle"/>
<s:Label text="consectetur adipiscing elit." height="22" verticalAlign="middle"/>
-
</s:VGroup>
</s:BorderContainer>
- <s:Label text="VGroup in Scroller" rotation="-90" color="0xFF0000"/>
+ <s:Label text="VGroup in Scroller" rotation="-90" />
<s:BorderContainer minWidth="0" minHeight="0">
<s:Scroller height="{heightSlider.value}">
<s:VGroup verticalAlign="{verticalAlignChoice.selectedItem}"
gap="0">
<s:Label text="Lorem ipsum dolor sit amet, " height="22" verticalAlign="middle"/>
<s:Label text="consectetur adipiscing elit." height="22" verticalAlign="middle"/>
-
</s:VGroup>
</s:Scroller>
</s:BorderContainer>
- <s:Label text="List" rotation="-90" color="0xFF0000"/>
+ <s:Label text="List" rotation="-90" />
<s:List minWidth="0" minHeight="0" height="{heightSlider.value+2}">
<s:layout>
@@ -61,23 +64,24 @@
</s:ArrayCollection>
</s:List>
</s:HGroup>
- </s:VGroup>
-
- <s:HGroup horizontalAlign="center" paddingTop="10" paddingLeft="10">
- <s:HGroup>
- <s:Label text="VerticalAlign:"/>
- <s:DropDownList id="verticalAlignChoice" requireSelection="true" color="0x000000">
- <s:dataProvider>
- <s:ArrayCollection source="{'top bottom middle'.split(' ')}"/>
- </s:dataProvider>
- </s:DropDownList>
- </s:HGroup>
- <s:HGroup>
- <s:Label text="Height:"/>
- <s:HSlider id="heightSlider" minimum="0" maximum="425" value="100" width="300"/>
- </s:HGroup>
- </s:HGroup>
- <s:Label right="7" top="26" width="200"
- text="This sample show the use of the verticalAlign and horizontalAlign properties for use with a VGroup and
-HGroup accordingly."/>
+
+ <s:HGroup paddingTop="10" paddingLeft="10">
+ <s:HGroup>
+ <s:Label text="VerticalAlign:"/>
+ <s:DropDownList id="verticalAlignChoice" requireSelection="true" color="0x000000">
+ <s:dataProvider>
+ <s:ArrayCollection source="{'top bottom middle'.split(' ')}"/>
+ </s:dataProvider>
+ </s:DropDownList>
+ </s:HGroup>
+ <s:HGroup>
+ <s:Label text="Height:"/>
+ <s:HSlider id="heightSlider" minimum="0" maximum="425" value="100" width="300"/>
+ </s:HGroup>
+ </s:HGroup>
+
+ <s:Label text="This sample show the use of the verticalAlign and horizontalAlign properties for use with a VGroup and
+ HGroup accordingly."/>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SkinnableDataContainerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SkinnableDataContainerExample.mxml
index 09fb38c..ba4f461 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/SkinnableDataContainerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SkinnableDataContainerExample.mxml
@@ -21,8 +21,11 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:Panel width="100%" height="100%" title="SkinnableDataContainer" skinClass="skins.TDFPanelSkin">
- <s:layout><s:HorizontalLayout paddingLeft="8" paddingTop="8" paddingRight="12"/></s:layout>
+ <s:Panel title="SkinnableDataContainer" width="100%" height="100%" >
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
<s:VGroup>
<s:Label text="Famous Astronauts" fontWeight="bold" fontSize="14"/>
@@ -54,7 +57,7 @@
</s:ArrayCollection>
</s:SkinnableDataContainer>
</s:VGroup>
- <s:Label color="0x323232" width="200" text="The SkinnableDataContainer is the skinnable version of the DataGroup and
+ <s:Label width="200" text="The SkinnableDataContainer is the skinnable version of the DataGroup and
while it can hold visual elements, they are often used only to hold data items as children. Data items can be simple data items
such String and Number objects, and more complicated data items such as Object and XMLNode objects."/>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml
index 15f29ef..5ddb4dc 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml
@@ -54,17 +54,11 @@
<s:ArrayCollection id="contacts"/>
</fx:Declarations>
- <s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="TabBar Sample" >
+ <s:Panel title="TabBar Sample" width="100%" height="100%">
<s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}"/>
<mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23">
<s:NavigatorContent label="Contact Info" width="100%" height="100%">
- <s:BorderContainer width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
- <s:backgroundFill>
- <s:LinearGradient rotation="90">
- <s:GradientEntry color="0xE2E2E2" />
- <s:GradientEntry color="0x323232" />
- </s:LinearGradient>
- </s:backgroundFill>
+ <s:BorderContainer width="100%" height="100%" dropShadowVisible="false">
<mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%">
<mx:FormItem label="Name:">
<s:TextInput id="nameTxt" text="{contact.name}"/>
@@ -88,14 +82,7 @@
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent label="Contact List" width="100%" height="100%" >
- <s:BorderContainer width="100%" height="100%" borderWeight="2"
- cornerRadius="3" dropShadowVisible="true">
- <s:backgroundFill>
- <s:LinearGradient rotation="90">
- <s:GradientEntry color="0xE2E2E2" />
- <s:GradientEntry color="0x323232" />
- </s:LinearGradient>
- </s:backgroundFill>
+ <s:BorderContainer width="100%" height="100%" dropShadowVisible="false">
<mx:DataGrid id="dg" dataProvider="{contacts}" x="5" y="5" doubleClickEnabled="true"
doubleClick="{tabs.selectedIndex=0}" itemClick="dg_itemClickHandler(event)">
<mx:columns>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml
index 7bc0b35..b6843e9 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml
@@ -49,7 +49,7 @@
<s:ArrayCollection id="contacts"/>
</fx:Declarations>
- <s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="TabBar Sample with Custom Skin and Bidirectional Binding" >
+ <s:Panel title="TabBar Sample with Custom Skin and Bidirectional Binding" width="100%" height="100%">
<s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}" skinClass="skins.CustomTabBarSkin" cornerRadius="4"/>
<mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23">
<s:NavigatorContent label="Contact Info" width="100%" height="100%">
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml
index c68120f..ad5d21b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml
@@ -19,7 +19,7 @@
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<fx:Array id="orientArray">
@@ -31,7 +31,6 @@
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
- import skins.TDFPanelSkin;
private function applyProperties():void
{
@@ -44,7 +43,7 @@
]]>
</fx:Script>
- <s:Panel skinClass="skins.TDFPanelSkin" title="TileGroup Sample" width="100%" height="100%">
+ <s:Panel title="TileGroup Sample" width="100%" height="100%">
<s:TileGroup left="300" top="10" id="mainGroup">
<s:Rect width="100" height="75">
<s:fill>
@@ -90,7 +89,7 @@
</s:HGroup>
<s:Button label="Apply Properties" click="this.applyProperties()"/>
<mx:Spacer height="10"/>
- <s:Label width="85%" horizontalCenter="0" color="#323232"
+ <s:Label width="85%" horizontalCenter="0"
text="The TileGroup container is an instance of the Group container that uses the TileLayout class. You can use the properties of the
TileGroup class to modify the characteristics of the TileLayout class."/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml
index 128ee33..3d3f3a0 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml
@@ -19,25 +19,18 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="Accordion Container" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="Accordion Container" width="100%" height="100%">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <s:Label width="100%" color="0x323232"
+ <s:Label width="100%"
text="Select an Accordion navigator button to change the panel."/>
- <mx:Accordion id="accordion" color="0x323232" width="100%" height="100%">
+ <mx:Accordion id="accordion" width="100%" height="100%">
<!-- Define each panel using a VBox container. -->
<s:NavigatorContent label="Accordion Button for Panel 1">
<mx:Label text="Accordion container panel 1"/>
@@ -56,9 +49,9 @@
text="Programmatically select the panel using a Button control."/>
<s:HGroup color="0x323232">
- <s:Button label="Select Panel 1" click="accordion.selectedIndex=0;"/>
- <s:Button label="Select Panel 2" click="accordion.selectedIndex=1;"/>
- <s:Button label="Select Panel 3" click="accordion.selectedIndex=2;"/>
+ <s:Button label="Select Panel 1" click="accordion.selectedIndex=0"/>
+ <s:Button label="Select Panel 2" click="accordion.selectedIndex=1"/>
+ <s:Button label="Select Panel 3" click="accordion.selectedIndex=2"/>
</s:HGroup>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.mxml
index fe662fa..52d066b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -58,18 +57,14 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="AdvancedDataGrid Control"
- color="0x000000"
- borderAlpha="0.15"
- width="600">
+ <s:Panel title="AdvancedDataGrid Control" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
<mx:AdvancedDataGrid id="myADG"
- width="100%" height="100%"
- color="0x323232"
+ width="100%" height="100%"
dataProvider="{dpFlat}">
<mx:groupedColumns>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml
index e349f75..95026fc 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml
@@ -76,16 +76,15 @@
]]>
</fx:Script>
- <!-- 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="ButtonBar Sample"
- width="100%" height="100%"
- horizontalCenter="0"
- skinClass="skins.TDFPanelSkin">
+ <s:Panel title="ButtonBar Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
- <s:HGroup left="5" top="5" width="100%" height="100%">
- <s:Label width="50%" fontSize="13" color="0x323232" verticalAlign="justify"
- text="The ButtonBar component behaves like a series of toggle buttons, where one button remains selected
+ <s:HGroup width="100%" height="100%">
+ <s:Label width="50%" verticalAlign="justify"
+ text="The ButtonBar component behaves like a series of toggle buttons, where one button remains selected
and only one button in the ButtonBar control can be in the selected state. That means when you select a button in a ButtonBar
control, the button stays in the selected state until you select a different button."/>
<s:VGroup left="10" top="5" color="0x000000" horizontalAlign="center">
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml
index 56f44ee..a366619 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml
@@ -31,34 +31,31 @@
}
]]>
</fx:Script>
-
- <!-- 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="Button Sample"
- skinClass="skins.TDFPanelSkin">
+
+ <s:Panel title="Button Sample" height="100%" width="100%">
- <s:HGroup left="5" top="5" width="100%" height="100%">
- <s:Label width="50%" fontSize="13" color="0x323232" verticalAlign="justify"
- text="The Button component is a commonly used rectangular button. The Button
+ <s:layout>
+ <s:HorizontalLayout paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" />
+ </s:layout>
+
+ <s:Label width="50%" verticalAlign="justify"
+ text="The Button component is a commonly used rectangular button. The Button
component looks like it can be pressed. The default skin has a text label."/>
- <s:VGroup right="10" bottom="5" color="0x000000" horizontalAlign="center">
- <s:Label text="Output"/>
- <s:TextArea id="repeatText" top="5" right="50" width="180" height="100"/>
- <s:Button id="standardBtn" label="Standard Button"
- click="buttonClickHandler(event)"
- fontWeight="normal"/>
- <s:Button id="disabledBtn" label="Disabled Button" enabled="false"/>
- <s:Button id="repeatBtn" label="Repeat Button"
- buttonDown="buttonClickHandler(event)"
- autoRepeat="true"/>
- <s:Label verticalAlign="justify"
- text="Hold down on repeat button to see autoRepeat behavior."/>
-
- </s:VGroup>
- </s:HGroup>
+ <s:VGroup right="10" bottom="5" color="0x000000" horizontalAlign="center">
+ <s:Label text="Output"/>
+ <s:TextArea id="repeatText" top="5" right="50" width="180" height="100"/>
+ <s:Button id="standardBtn" label="Standard Button"
+ click="buttonClickHandler(event)"
+ fontWeight="normal"/>
+ <s:Button id="disabledBtn" label="Disabled Button" enabled="false"/>
+ <s:Button id="repeatBtn" label="Repeat Button"
+ buttonDown="buttonClickHandler(event)"
+ autoRepeat="true"/>
+ <s:Label verticalAlign="justify"
+ text="Hold down on repeat button to see autoRepeat behavior."/>
+
+ </s:VGroup>
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml
index 53a9712..f6ada4d 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml
@@ -47,28 +47,27 @@
useThousandsSeparator="true" alignSymbol="left"/>
</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 title="CheckBox Sample"
- width="100%" height="100%"
- skinClass="skins.TDFPanelSkin">
- <s:VGroup left="10" right="10" top="10" bottom="10">
- <s:Label text="Hamburger Base Price: $4.50" />
- <s:Label text="Select condiments for your hamburger (0.25 each):" />
-
- <s:CheckBox id="lettuceCB" label="Pickles" click="modifyBurger(event);"/>
- <s:CheckBox id="tomatoCB" label="Tomato" click="modifyBurger(event);"/>
- <s:CheckBox id="pickleCB" label="Lettuce" click="modifyBurger(event);"/>
- <s:CheckBox id="mayoCB" label="Mayonnaise" click="modifyBurger(event);"/>
-
- <mx:Spacer height="10" />
- <s:HGroup>
- <s:Label text="Total Price: " color="0x336699" fontWeight="bold"/>
- <s:Label id="totalString" text="$4.50" color="0x336699" fontWeight="bold"/>
- </s:HGroup>
- </s:VGroup>
- <s:Label top="10" right="10" width="250" verticalAlign="justify" color="#323232"
- text="The CheckBox control is a commonly used graphical control that can
+ <s:Panel title="CheckBox Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Label text="Hamburger Base Price: $4.50" />
+ <s:Label text="Select condiments for your hamburger (0.25 each):" />
+
+ <s:CheckBox id="lettuceCB" label="Pickles" click="modifyBurger(event)"/>
+ <s:CheckBox id="tomatoCB" label="Tomato" click="modifyBurger(event)"/>
+ <s:CheckBox id="pickleCB" label="Lettuce" click="modifyBurger(event)"/>
+ <s:CheckBox id="mayoCB" label="Mayonnaise" click="modifyBurger(event)"/>
+
+ <mx:Spacer height="10" />
+ <s:HGroup>
+ <s:Label text="Total Price: " color="0x336699" fontWeight="bold"/>
+ <s:Label id="totalString" text="$4.50" color="0x336699" fontWeight="bold"/>
+ </s:HGroup>
+ <s:Label top="10" right="10" width="250" verticalAlign="justify"
+ text="The CheckBox control is a commonly used graphical control that can
contain a check mark or not. You can use CheckBox controls to gather a
set of true or false values that aren’t mutually exclusive."/>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml
index 57a268c..6666e5d 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml
@@ -20,22 +20,14 @@
<!-- Simple example to demonstrate the ColorPicker control. -->
<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">
-
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
+ xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:Panel title="ColorPicker Control Example"
- width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="ColorPicker Control Example" width="100%" height="100%">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
-
+
<s:Label width="100%" color="0x000000"
text="Select the background color of the Skinnable container."/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml
index 7276b06..531dfb4 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml
@@ -25,8 +25,6 @@
<![CDATA[
import mx.collections.ArrayCollection;
- import skins.TDFPanelSkin;
-
[Bindable]
public var cards:ArrayCollection = new ArrayCollection(
[ {label:"Visa", data:1},
@@ -41,24 +39,21 @@
]]>
</fx:Script>
- <s:Panel title="ComboBox Sample" skinClass="skins.TDFPanelSkin"
- height="100%" width="100%">
+ <s:Panel title="ComboBox Sample" width="100%" height="100%">
- <s:HGroup top="20" horizontalCenter="0" >
- <s:VGroup>
- <s:Label width="200" color="0x336699" text="Select credit card type:"/>
- <s:ComboBox dataProvider="{cards}" width="150" color="0x000000"
- change="changeHandler(event);" selectedIndex="0"/>
-
- </s:VGroup>
- <mx:Spacer width="20"/>
- <s:VGroup>
- <s:Label id="myLabel" text="You selected:" fontWeight="bold"/>
- <s:Label id="myData" text="Data:" fontWeight="bold"/>
- </s:VGroup>
-
- </s:HGroup>
- <s:Label color="#323232" width="75%" bottom="20" horizontalCenter="0"
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:VGroup>
+ <s:Label width="200" color="0x336699" text="Select credit card type:"/>
+ <s:ComboBox dataProvider="{cards}" width="150" color="0x000000"
+ change="changeHandler(event)" selectedIndex="0"/>
+ <s:Label id="myLabel" text="You selected:" fontWeight="bold"/>
+ <s:Label id="myData" text="Data:" fontWeight="bold"/>
+ </s:VGroup>
+
+ <s:Label width="75%" bottom="20" horizontalCenter="0"
text="The ComboBox component is similar to a DropDownList but includes a TextInput instead of a Label. A user can type into the TextInput and the drop-down will scroll to and highlight the closest match.
Users are allowed to type in an item not found in the dataProvider. With this behavior, a ComboBox acts as a list of suggested values, while a DropDownList acts as a list of possible values. "/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml
index b3da2b7..10402da 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml
@@ -47,7 +47,7 @@
<!--- @private -->
<fx:Component id="alternatingRowColorsBackground">
<s:Rect implements="spark.components.gridClasses.IGridVisualElement">
- <fx:Script>
+ <fx:Script>
<![CDATA[
import spark.components.DataGrid;
import spark.components.Grid;
@@ -85,7 +85,7 @@
<!--- @private -->
<fx:Component id="caretIndicator">
<s:Rect implements="spark.components.gridClasses.IGridVisualElement">
- <fx:Script>
+ <fx:Script>
<![CDATA[
import spark.components.DataGrid;
import spark.components.Grid;
@@ -139,7 +139,7 @@
<!--- @private -->
<fx:Component id="hoverIndicator">
<s:Rect implements="spark.components.gridClasses.IGridVisualElement">
- <fx:Script>
+ <fx:Script>
<![CDATA[
import spark.components.DataGrid;
import spark.components.Grid;
@@ -178,7 +178,7 @@
<!--- @private -->
<fx:Component id="selectionIndicator">
<s:Rect implements="spark.components.gridClasses.IGridVisualElement">
- <fx:Script>
+ <fx:Script>
<![CDATA[
import spark.components.DataGrid;
import spark.components.Grid;
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml
index 89bd8b5..dcfd88a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml
@@ -19,7 +19,7 @@
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
import mx.collections.ArrayList;
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml
index 81134cb..b433620 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml
@@ -19,7 +19,7 @@
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
import mx.collections.ArrayList;
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml
index b85c824..735378d 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<fx:XMLList id="employees">
@@ -52,23 +51,15 @@
</fx:XMLList>
</fx:Declarations>
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="DataGrid Control"
- color="0x000000"
- borderAlpha="0.15"
- width="600">
+ <s:Panel title="DataGrid Control" width="100%" height="100%">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <s:Label width="100%" color="0x323232"
- text="Select a row in the DataGrid control."/>
+ <s:Label width="100%" text="Select a row in the DataGrid control."/>
- <mx:DataGrid id="dg" color="0x323232" width="100%" rowCount="3" dataProvider="{employees}">
+ <mx:DataGrid id="dg" width="100%" rowCount="3" dataProvider="{employees}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="phone" headerText="Phone"/>
@@ -76,7 +67,7 @@
</mx:columns>
</mx:DataGrid>
- <mx:Form color="0x323232" width="100%" height="100%" paddingTop="0" paddingBottom="0" >
+ <mx:Form width="100%" height="100%" paddingTop="0" paddingBottom="0" >
<mx:FormItem label="Name" paddingTop="0" paddingBottom="0">
<s:Label text="{dg.selectedItem.name}"/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml
index 28c1e46..571f14c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml
@@ -28,8 +28,6 @@
<![CDATA[
import mx.collections.ArrayCollection;
- import skins.TDFPanelSkin;
-
public function generateDataProvider(nItems:int = 10000):ArrayCollection {
var ac:ArrayCollection = new ArrayCollection();
@@ -55,9 +53,11 @@
]]>
</fx:Script>
- <s:Panel title="DataGroup with Virtual Layout"
- width="100%" height="100%"
- skinClass="skins.TDFPanelSkin">
+ <s:Panel title="DataGroup with Virtual Layout" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
<s:Scroller horizontalCenter="0" top="10">
<s:DataGroup width="600" height="123" clipAndEnableScrolling="true" dataProvider="{generateDataProvider(9000)}">
@@ -124,11 +124,11 @@
</s:itemRenderer>
</s:DataGroup>
</s:Scroller>
- <s:Label width="90%" horizontalCenter="0" color="#323232" bottom="40"
+ <s:Label width="90%" horizontalCenter="0" bottom="40"
text="Apache Flex DataGroups support virtualization. Virtualization is an optimization for layout and rendering
that reduces the footprint and startup time for containers with large numbers of items. This sample shows how
virtualization can be achieved by only creating enough objects for the items currently being displayed. The
useVirtualLayout property should be set on the layout object to achieve virtualization."/>
</s:Panel>
-</s:Application>
\ No newline at end of file
+</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DateChooserExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DateChooserExample.mxml
index f0017f9..0f6e9ce 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/DateChooserExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DateChooserExample.mxml
@@ -20,8 +20,7 @@
<!-- Simple example to demonstrate DateChooser control. -->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -41,38 +40,30 @@
<fx:Declarations>
<mx:DateFormatter id="df"/>
</fx:Declarations>
-
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="DateChooser Control Example" color="0x000000"
- borderAlpha="0.15"
- width="600">
-
+
+ <s:Panel title="DateChooser Control Example" width="100%" height="100%">
+
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<s:VGroup>
<s:Label width="100%" color="0x000000" text="Simple DateChooser Control"/>
<mx:DateChooser id="dateChooser1" yearNavigationEnabled="true" height="145"
change="displayDate(DateChooser(event.target).selectedDate)" color="0x000000"/>
- <s:Label id="selection" color="0x323232" text="Date selected:"/>
+ <s:Label id="selection" text="Date selected:"/>
</s:VGroup>
<s:VGroup>
<s:Label width="100%" color="0x000000" text="Disable dates before Oct 31st, 2008"/>
<mx:DateChooser id="dateChooser2" yearNavigationEnabled="true" width="175" height="145"
disabledRanges="{[ {rangeEnd: new Date(2008, 9, 31)} ]}" color="0x000000"/>
- <s:Label color="0x323232" text="Date selected: {df.format(dateChooser2.selectedDate)}"/>
+ <s:Label text="Date selected: {df.format(dateChooser2.selectedDate)}"/>
</s:VGroup>
<s:VGroup width="30%">
- <mx:Text width="100%" color="0x323232" text="Select a date in the DateChooser control."/>
- <mx:Text width="100%" color="0x323232" text="Select it again while holding down the Control key to clear it."/>
+ <mx:Text width="100%" text="Select a date in the DateChooser control."/>
+ <mx:Text width="100%" text="Select it again while holding down the Control key to clear it."/>
</s:VGroup>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DateFieldExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DateFieldExample.mxml
index 1572d85..19e5299 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/DateFieldExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DateFieldExample.mxml
@@ -20,8 +20,7 @@
<!-- Simple example to demonstrate the DateField control. -->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -41,18 +40,10 @@
<mx:DateFormatter id="df"/>
</fx:Declarations>
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="DateField Control Example" color="0x000000"
- borderAlpha="0.15"
- width="600">
-
+ <s:Panel title="DateField Control Example" width="100%" height="100%">
+
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<s:BorderContainer width="50%" borderColor="0xDCDCDC" height="100%" borderStyle="solid">
@@ -61,15 +52,15 @@
<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
</s:layout>
- <s:Label id="selection" color="0x323232" text="Date selected:" />
+ <s:Label id="selection" text="Date selected:" />
<mx:DateField id="dateField1" yearNavigationEnabled="true"
change="dateChanged(DateField(event.target).selectedDate)" color="0x000000"/>
- <s:Label color="0x000000" text="Basic DateField:"/>
+ <s:Label text="Basic DateField:"/>
- <s:Label width="100%" color="0x323232"
+ <s:Label width="100%"
text="Select a date in the DateField control. Select it again while holding down the Control key to clear it."/>
</s:BorderContainer>
@@ -80,12 +71,12 @@
<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
</s:layout>
- <s:Label color="0x323232" text="Date selected: {df.format(dateField2.selectedDate)}"/>
+ <s:Label text="Date selected: {df.format(dateField2.selectedDate)}"/>
<mx:DateField id="dateField2" yearNavigationEnabled="true"
disabledRanges="{[ {rangeEnd: new Date(2008, 9, 31)} ]}" color="0x000000"/>
- <s:Label color="0x000000" text="Disable dates on or before Oct 31, 2008."/>
+ <s:Label text="Disable dates on or before Oct 31, 2008."/>
</s:BorderContainer>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml
index d94429f..7227822 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml
@@ -66,13 +66,10 @@
]]>
</fx:Script>
- <!-- 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="DropDownList Sample"
- width="100%" height="100%"
- skinClass="skins.TDFPanelSkin">
+ <s:Panel title="DropDownList Sample" width="100%" height="100%">
+
<s:VGroup width="100%" height="100%" left="120" top="5">
- <s:Label text="RJ's Warehouse Price Checker" fontSize="18" color="0x014f9f"/>
+ <s:Label text="RJ's Warehouse Price Checker" fontSize="18" />
<s:DropDownList id="list1" width="50%" dataProvider="{depts}" labelField="label"
prompt="Select Category"
change="handleDepartmentSelected(event)"/>
@@ -81,7 +78,7 @@
<mx:Spacer height="10"/>
<s:Label fontSize="14" color="0x336699" text="The price of item: {list2.selectedItem.label} is: ${list1.selectedItem.data}" verticalAlign="bottom"/>
</s:VGroup>
- <s:Label top="10" right="10" width="250" verticalAlign="justify" color="#323232"
+ <s:Label top="10" right="10" width="250" verticalAlign="justify"
text="The DropDownList control contains a drop-down list from which the user can select a single value. Its functionality is very similar to that of the SELECT form element in HTML.
The DropDownList control consists of the anchor button, prompt area, and drop-down-list, Use the anchor button to open and close the drop-down-list. The prompt area displays a prompt String, or the selected item in the drop-down-list."/>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml
index 79af492..3895ae7 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<fx:Model id="checkModel">
@@ -43,23 +42,14 @@
<mx:ZipCodeValidator source="{zip}" property="text"/>
</fx:Declarations>
-
-
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
- <s:Panel title="Form Container: Moving from one form field to another triggers the validator" color="0x000000"
- borderAlpha="0.15"
- width="600">
+ <s:Panel title="Form Container: Moving from one form field to another triggers the validator" width="100%" height="100%">
<s:layout>
- <s:VerticalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form width="100%" color="0x323232" paddingTop="0">
+ <mx:Form width="100%" paddingTop="0">
<mx:FormHeading fontSize="10" label="Enter values into the form." paddingTop="0" />
<mx:FormItem label="First name">
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.mxml
index f3473b7..35379c4 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -32,38 +31,26 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="Image Samples" color="0x000000"
- borderAlpha="0.15"
- width="600">
-
+ <s:Panel title="Image Samples" width="100%" height="100%">
+
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <!--<mx:VBox width="100%" borderColor="0xACACAC" borderThickness="1" borderStyle="solid" horizontalAlign="center"
- paddingTop="5" paddingRight="5" paddingBottom="5" paddingLeft="5" >-->
- <s:BorderContainer width="50%" borderColor="0xACACAC" height="100%" borderStyle="solid">
-
+ <s:BorderContainer width="50%" height="100%">
<s:layout>
<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
</s:layout>
- <s:Label color="0x323232" text="Sample of image embeded at compile time." />
- <mx:Image id="embededImage" width="50%" height="50%" source="@Embed('assets/ApacheFlexLogo.png')" creationComplete="smoothImage(event);"/>
+ <s:Label text="Sample of image embeded at compile time." />
+ <mx:Image id="embededImage" width="50%" height="50%" source="@Embed('assets/ApacheFlexLogo.png')" creationComplete="smoothImage(event)"/>
</s:BorderContainer>
- <s:BorderContainer width="50%" borderColor="0xACACAC" height="100%" borderStyle="solid">
-
+ <s:BorderContainer width="50%" height="100%">
<s:layout>
<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
</s:layout>
- <s:Label color="0x323232" text="Sample of image loaded at run-time." />
- <mx:Image id="loadedImage" width="50%" height="50%" source="assets/ApacheFlexLogo.png" creationComplete="smoothImage(event);"/>
+ <s:Label text="Sample of image loaded at run-time." />
+ <mx:Image id="loadedImage" width="50%" height="50%" source="assets/ApacheFlexLogo.png" creationComplete="smoothImage(event)"/>
</s:BorderContainer>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml
index eff7901..2af6b20 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml
@@ -19,28 +19,21 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="LinkBar Control" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="LinkBar Control" width="100%" height="100%">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <s:Label width="100%" color="0x323232" textAlign="center"
+ <s:Label width="100%" textAlign="center"
text="Select a link in the LinkBar control to set the active child of the ViewStack container."/>
<mx:LinkBar color="0x0050AA" horizontalAlign="center" width="100%" fontWeight="bold" dataProvider="{myViewStack}" borderColor="0xACACAC" borderStyle="solid"/>
<!-- Define the ViewStack and the three child containers -->
- <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%" color="0x323232">
+ <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">
<s:NavigatorContent id="search" label="Customer Info" backgroundColor="0xDCDCDC" fontWeight="bold">
<s:layout>
@@ -64,7 +57,7 @@
<s:HGroup>
<s:Label text="Email Address"/>
<s:TextInput id="email" width="200"/>
- <s:Button label="Submit" click="email.text='';" />
+ <s:Button label="Submit" click="email.text=''" />
</s:HGroup>
</s:NavigatorContent>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml
index 02aaaf8..bcec4d0 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -28,21 +27,13 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="LinkButton Sample" color="0x000000"
- borderAlpha="0.15"
- width="600">
-
+ <s:Panel title="LinkButton Sample" width="100%" height="100%">
+
<s:layout>
- <s:VerticalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <s:Label color="0x323232" text="Sample of image embeded at compile time." />
+ <s:Label text="Sample of image embeded at compile time." />
<mx:LinkButton label="LinkButton Control" color="0x3380DD" click="{Alert.show('LinkButton Pressed');}"
textDecoration="underline" fontWeight="normal" icon="@Embed('assets/arrow_icon.png')" />
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
index 75aeb35..619845a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
@@ -20,7 +20,7 @@
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:local="*"
- initialize="loadSecurity();">
+ initialize="loadSecurity()">
<fx:Script>
<![CDATA[
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
index 4a405f9..b83173c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
@@ -56,42 +56,43 @@
}
</fx:Style>
- <s:Panel title="List Sample"
- width="100%" height="100%"
- skinClass="skins.TDFPanelSkin">
- <s:VGroup id="vGrp" horizontalCenter="0" top="3"
- width="80%" height="75%">
- <s:HGroup verticalAlign="middle">
- <s:Label text="Select items to add, price will be shown when added:"
- verticalAlign="bottom"/>
- </s:HGroup>
- <s:HGroup >
- <s:List id="myList" height="157" width="160"
- itemRenderer="MyListItemRenderer"
- change="itemIndexChangeHandler(event)">
- <s:dataProvider>
- <s:ArrayCollection>
- <local:Item name="Backpack" photo="assets/ApacheFlexLogo.png" price="29.99"/>
- <local:Item name="Boots" photo="assets/ApacheFlexLogo.png" price="69.99"/>
- <local:Item name="Compass" photo="assets/ApacheFlexLogo.png" price="12.99"/>
- <local:Item name="Goggles" photo="assets/ApacheFlexLogo.png" price="14.99"/>
- <local:Item name="Helmet" photo="assets/ApacheFlexLogo.png" price="47.99"/>
- </s:ArrayCollection>
- </s:dataProvider>
- </s:List>
- <s:TextArea id="ta" width="{myList.width}" height="{myList.height}"
- color="0xAE0A0A" fontWeight="bold"/>
- <s:VGroup>
- <mx:Spacer height="10"/>
- <s:Label text="Total of Items selected: {usdFormatter.format(this.totalPrice)}"/>
- <s:Button id="buyBtn" horizontalCenter="0" bottom="30" label="Buy Now!"
- fontWeight="bold"
- click="buyBtn_clickHandler(event)"/>
- <s:Label id="txtResponse"/>
- </s:VGroup>
- </s:HGroup>
- </s:VGroup>
- <s:Label bottom="15" horizontalCenter="0" width="95%" verticalAlign="justify" color="#323232"
+ <s:Panel title="List Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Select items to add, price will be shown when added:"
+ verticalAlign="bottom"/>
+ </s:HGroup>
+ <s:HGroup>
+ <s:List id="myList" height="157" width="160"
+ itemRenderer="MyListItemRenderer"
+ change="itemIndexChangeHandler(event)">
+ <s:dataProvider>
+ <s:ArrayCollection>
+ <local:Item name="Backpack" photo="assets/ApacheFlexLogo.png" price="29.99"/>
+ <local:Item name="Boots" photo="assets/ApacheFlexLogo.png" price="69.99"/>
+ <local:Item name="Compass" photo="assets/ApacheFlexLogo.png" price="12.99"/>
+ <local:Item name="Goggles" photo="assets/ApacheFlexLogo.png" price="14.99"/>
+ <local:Item name="Helmet" photo="assets/ApacheFlexLogo.png" price="47.99"/>
+ </s:ArrayCollection>
+ </s:dataProvider>
+ </s:List>
+ <s:TextArea id="ta" width="{myList.width}" height="{myList.height}"
+ color="0xAE0A0A" fontWeight="bold"/>
+ <s:VGroup>
+ <mx:Spacer height="10"/>
+ <s:Label text="Total of Items selected: {usdFormatter.format(this.totalPrice)}"/>
+ <s:Button id="buyBtn" horizontalCenter="0" bottom="30" label="Buy Now!"
+ fontWeight="bold"
+ click="buyBtn_clickHandler(event)"/>
+ <s:Label id="txtResponse"/>
+ </s:VGroup>
+ </s:HGroup>
+
+ <s:Label bottom="15" horizontalCenter="0" width="95%" verticalAlign="justify"
text="The Spark List control displays a list of data items. Its functionality is
very similar to that of the SELECT form element in HTML. The user can select one or more items from the list.
The List control automatically displays horizontal and vertical scroll bar when the list items do not fit
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
index d2e6d08..303a239 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
@@ -26,8 +26,6 @@
import mx.events.FlexEvent;
import mx.events.MenuEvent;
- import skins.TDFPanelSkin;
-
protected var myMenu:Menu;
protected function showHandler(event:MouseEvent):void
@@ -74,14 +72,19 @@
</fx:XML>
</fx:Declarations>
- <s:Panel title="Menu Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+ <s:Panel title="Menu Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
<s:HGroup bottom="15" horizontalCenter="0" verticalAlign="middle">
<s:Button label="Show Menu" click="showHandler(event)" />
<s:Button label="Hide Menu" click="hideHandler(event)" />
- <s:Label text="Menu Item Selected:" fontWeight="bold" fontSize="12" color="0x336699"/>
+ <s:Label text="Menu Item Selected:" fontWeight="bold" />
<s:Label id="lblSelected" />
</s:HGroup>
- <s:Label width="220" color="#323232" top="15" right="50"
+ <s:Label width="220" top="15" right="50"
text="The Menu control is a pop-up control that contains a menu of individually selectable choices. You use ActionScript
to create a Menu control that pops up in response to a user action, typically as part of an event listener."/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
index 65ca477..9a845ee 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
@@ -46,46 +46,42 @@
</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="NumericStepper Sample"
- width="100%" height="100%"
- skinClass="skins.TDFPanelSkin">
+ <s:Panel title="NumericStepper Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
- <s:HGroup left="15" top="10">
- <s:Label width="250" verticalAlign="justify" color="#323232"
- text="The NumericStepper control allows you to select a number from an
+ <s:Label width="250" verticalAlign="justify"
+ text="The NumericStepper control allows you to select a number from an
ordered set. The NumericStepper control consists of a single-line input text field and a pair of arrow buttons
for stepping through the valid values. You can use the Up Arrow and Down arrow keys to cycle through the values."/>
-
- <mx:Form >
- <mx:FormHeading id="formHead" label="Welcome to Ticket Grabber!"/>
- <mx:FormItem label="Name:">
- <s:TextInput id="nameTxt" widthInChars="20"/>
- </mx:FormItem>
- <mx:FormItem label="Address:">
- <s:TextArea widthInChars="20" heightInLines="2"/>
- </mx:FormItem>
- <mx:FormItem label="Phone:">
- <s:TextInput id="phoneTxt" widthInChars="20"/>
- </mx:FormItem>
- <mx:FormItem label="Select # of tickets:">
- <s:NumericStepper id="numStepper" width="55"
- value="0" snapInterval="2"/>
- </mx:FormItem>
- <mx:FormItem>
- <s:Button label="Buy Now!" click="clickHandler(event)"/>
- </mx:FormItem>
- <mx:FormItem>
- <s:Group>
- <s:Label id="responseText"/>
- </s:Group>
- </mx:FormItem>
- </mx:Form>
- </s:HGroup>
+ <mx:Form>
+ <mx:FormHeading id="formHead" label="Welcome to Ticket Grabber!"/>
+ <mx:FormItem label="Name:">
+ <s:TextInput id="nameTxt" widthInChars="20"/>
+ </mx:FormItem>
+ <mx:FormItem label="Address:">
+ <s:TextArea widthInChars="20" heightInLines="2"/>
+ </mx:FormItem>
+ <mx:FormItem label="Phone:">
+ <s:TextInput id="phoneTxt" widthInChars="20"/>
+ </mx:FormItem>
+ <mx:FormItem label="Select # of tickets:">
+ <s:NumericStepper id="numStepper" width="55"
+ value="0" snapInterval="2"/>
+ </mx:FormItem>
+ <mx:FormItem>
+ <s:Button label="Buy Now!" click="clickHandler(event)"/>
+ </mx:FormItem>
+ <mx:FormItem>
+ <s:Group>
+ <s:Label id="responseText"/>
+ </s:Group>
+ </mx:FormItem>
+ </mx:Form>
- </s:Panel>
-
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml
index d176fc8..083a41b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml
@@ -19,9 +19,8 @@
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx"
- skinClass="TDFGradientBackgroundSkin"
- creationComplete="creationCompleteHandler();">
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ creationComplete="creationCompleteHandler()">
<fx:Script>
<![CDATA[
@@ -178,12 +177,8 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
<fx:Declarations>
- <mx:OLAPCube name="FlatSchemaCube" dataProvider="{flatData}" id="myMXMLCube" complete="runQuery(event);">
+ <mx:OLAPCube name="FlatSchemaCube" dataProvider="{flatData}" id="myMXMLCube" complete="runQuery(event)">
<mx:OLAPDimension name="CustomerDim">
<mx:OLAPAttribute name="Customer" dataField="customer"/>
<mx:OLAPHierarchy name="CustomerHier" hasAll="true">
@@ -213,17 +208,15 @@
- <s:Panel title="OLAPDataGrid Control" color="0x000000"
- borderAlpha="0.15"
- width="600">
-
+ <s:Panel title="OLAPDataGrid Control" width="100%" height="100%">
+
<s:layout>
<s:HorizontalLayout horizontalAlign="center"
paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:OLAPDataGrid id="myOLAPDG" color="0x323232" width="100%" height="100%"/>
+ <mx:OLAPDataGrid id="myOLAPDG" width="100%" height="100%"/>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
index 600aae0..d59b25e 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
@@ -53,29 +53,33 @@
</s:LinearGradient>
</fx:Declarations>
- <s:Panel width="100%" height="100%" title="PopUpAnchor Sample" skinClass="skins.TDFPanelSkin">
- <s:HGroup horizontalCenter="0" top="5">
- <s:VGroup top="0">
- <s:Label width="200" height="200" color="0x323232"
- text="The PopUpAnchor control displays a pop-up component in a layout. It has
- no visual appearance, but it has dimensions. The PopUpAnchor control is used in the DropDownList and VolumeBar controls. The PopUpAnchor displays the pop-up component by adding it to the PopUpManager, and then sizes and positions the pop-up component relative to itself."/>
- <s:Label text=" Click the Information icon to see the PopUpAnchor in action."/>
- <mx:Spacer width="60"/>
- </s:VGroup>
- <s:VGroup>
- <mx:LinkButton label="Information" click="currentState = 'infoOpen'" icon="@Embed('iconinfo.gif')"/>
- <s:PopUpAnchor id="infoPopUp" left="0" bottom="0" popUpPosition="below"
- includeIn="infoOpen" displayPopUp.normal="false"
- displayPopUp.infoOpen="true">
- <s:BorderContainer cornerRadius="5" backgroundFill="{fill1}" height="160" width="180"
- dropShadowVisible="true">
- <s:Label horizontalCenter="0" top="20" width="170" height="155" color="0x323232"
- text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet urna fringilla risus fermentum sed aliquam lorem aliquam. Maecenas egestas, risus at adipiscing faucibus, nisl dui dignissim turpis, at consectetur magna erat in ligula."/>
-
- <s:Button top="2" right="2" width="16" height="16" skinClass="skins.CloseButtonSkin" click="handleClose(event)"/>
- </s:BorderContainer>
- </s:PopUpAnchor>
- </s:VGroup>
- </s:HGroup>
+ <s:Panel title="PopUpAnchor Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:VGroup top="0">
+ <s:Label width="200" height="200"
+ text="The PopUpAnchor control displays a pop-up component in a layout. It has
+ no visual appearance, but it has dimensions. The PopUpAnchor control is used in the DropDownList and VolumeBar controls. The PopUpAnchor displays the pop-up component by adding it to the PopUpManager, and then sizes and positions the pop-up component relative to itself."/>
+ <s:Label text=" Click the Information icon to see the PopUpAnchor in action."/>
+ <mx:Spacer width="60"/>
+ </s:VGroup>
+ <s:VGroup>
+ <mx:LinkButton label="Information" click="currentState = 'infoOpen'" icon="@Embed('iconinfo.gif')"/>
+ <s:PopUpAnchor id="infoPopUp" left="0" bottom="0" popUpPosition="below"
+ includeIn="infoOpen" displayPopUp.normal="false"
+ displayPopUp.infoOpen="true">
+ <s:BorderContainer cornerRadius="5" backgroundFill="{fill1}" height="160" width="180"
+ dropShadowVisible="true">
+ <s:Label horizontalCenter="0" top="20" width="170" height="155"
+ text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet urna fringilla risus fermentum sed aliquam lorem aliquam. Maecenas egestas, risus at adipiscing faucibus, nisl dui dignissim turpis, at consectetur magna erat in ligula."/>
+
+ <s:Button top="2" right="2" width="16" height="16" skinClass="skins.CloseButtonSkin" click="handleClose(event)"/>
+ </s:BorderContainer>
+ </s:PopUpAnchor>
+ </s:VGroup>
+
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
index 0bde928..cce939c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
@@ -36,45 +36,45 @@
</mx:Transition>
</s:transitions>
- <s:Panel width="100%" height="100%"
- title="PopUpAnchor with Form"
- skinClass="skins.TDFPanelSkin">
+ <s:Panel title="PopUpAnchor with Form" width="100%" height="100%">
- <s:VGroup horizontalCenter="0" top="20">
- <s:HGroup>
- <mx:LinkButton label="Home" color="0x336699" click="currentState = 'normal'"/>
- <mx:LinkButton label="About" color="0x336699" click="currentState = 'aboutOpen'"/>
- <mx:LinkButton label="Information" color="0x336699" click="currentState = 'infoOpen'"/>
- <mx:LinkButton label="Contact Us" color="0x336699" click="currentState = 'emailOpen'"/>
- </s:HGroup>
- <s:BorderContainer id="border1" excludeFrom="emailOpen" width="290" height="200"
- backgroundColor="0x000000" color="0xFFFFFF" cornerRadius="7">
- <s:Label width="200" height="200" top="20" left="5"
- text.normal="Welcome to Tour de Flex!"
- text.aboutOpen="Tour de Flex is constantly being updated with more cool samples!"
- text.infoOpen="Check back for more Flex 4 samples weekly!"/>
- </s:BorderContainer>
- <s:PopUpAnchor id="emailPopUp" left="0" bottom="0" popUpPosition="below"
- includeIn="emailOpen" displayPopUp.normal="false" displayPopUp.emailOpen="true">
- <mx:Form id="form1" backgroundColor="0x000000" color="0xFFFFFF">
- <mx:FormItem label="From :">
- <s:TextInput/>
- </mx:FormItem>
- <mx:FormItem label="To :">
- <s:TextInput/>
- </mx:FormItem>
- <mx:FormItem label="Subject :">
- <s:TextInput/>
- </mx:FormItem>
- <mx:FormItem label="Message :">
- <s:TextArea width="100%" height="60" maxChars="60"/>
- </mx:FormItem>
- <mx:FormItem direction="horizontal">
- <s:Button label="Send" click="currentState = 'normal'" color="0x000000"/>
- <s:Button label="Cancel" click="currentState = 'normal'" color="0x000000"/>
- </mx:FormItem>
- </mx:Form>
- </s:PopUpAnchor>
- </s:VGroup>
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:HGroup>
+ <mx:LinkButton label="Home" color="0x336699" click="currentState = 'normal'"/>
+ <mx:LinkButton label="About" color="0x336699" click="currentState = 'aboutOpen'"/>
+ <mx:LinkButton label="Information" color="0x336699" click="currentState = 'infoOpen'"/>
+ <mx:LinkButton label="Contact Us" color="0x336699" click="currentState = 'emailOpen'"/>
+ </s:HGroup>
+ <s:BorderContainer id="border1" excludeFrom="emailOpen" width="290" height="200"
+ backgroundColor="0x000000" color="0xFFFFFF" cornerRadius="7">
+ <s:Label width="200" height="200" top="20" left="5"
+ text.normal="Welcome to Tour de Flex!"
+ text.aboutOpen="Tour de Flex is constantly being updated with more cool samples!"
+ text.infoOpen="Check back for more Flex 4 samples weekly!"/>
+ </s:BorderContainer>
+ <s:PopUpAnchor id="emailPopUp" left="0" bottom="0" popUpPosition="below"
+ includeIn="emailOpen" displayPopUp.normal="false" displayPopUp.emailOpen="true">
+ <mx:Form id="form1" backgroundColor="0x000000" color="0xFFFFFF">
+ <mx:FormItem label="From :">
+ <s:TextInput/>
+ </mx:FormItem>
+ <mx:FormItem label="To :">
+ <s:TextInput/>
+ </mx:FormItem>
+ <mx:FormItem label="Subject :">
+ <s:TextInput/>
+ </mx:FormItem>
+ <mx:FormItem label="Message :">
+ <s:TextArea width="100%" height="60" maxChars="60"/>
+ </mx:FormItem>
+ <mx:FormItem direction="horizontal">
+ <s:Button label="Send" click="currentState = 'normal'" color="0x000000"/>
+ <s:Button label="Cancel" click="currentState = 'normal'" color="0x000000"/>
+ </mx:FormItem>
+ </mx:Form>
+ </s:PopUpAnchor>
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml
index 79de243..3c6803c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -55,13 +54,7 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="PopUpButton Control" color="0x000000"
- borderAlpha="0.15"
- width="600">
+ <s:Panel title="PopUpButton Control" width="100%" height="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center"
@@ -69,13 +62,13 @@
paddingTop="10" paddingBottom="10"/>
</s:layout>
- <s:Label width="100%" color="0x323232"
+ <s:Label width="100%"
text="Button label contains the name of the last selected menu item." />
- <mx:PopUpButton id="popB" label="Edit" creationComplete="initMenu();" width="140" color="0x323232" click="{Alert.show('Action: ' + popB.label);}" />
+ <mx:PopUpButton id="popB" label="Edit" creationComplete="initMenu()" width="140" click="{Alert.show('Action: ' + popB.label);}" />
<mx:Spacer height="65" />
- <s:TextInput id="popTypeB" color="0x323232" text="...waiting" />
+ <s:TextInput id="popTypeB" text="...waiting" />
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml
index 76318e7..deccfaa 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -44,27 +43,19 @@
}
]]>
</fx:Script>
-
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
- <s:Panel title="ProgressBar Control" color="0x000000"
- borderAlpha="0.15"
- width="600">
+ <s:Panel title="ProgressBar Control" width="100%" height="100%">
<s:layout>
- <s:VerticalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <s:Label width="100%" color="0x323232"
+ <s:Label width="100%"
text="Click the button to increment the progress bar." />
- <s:Button id="Speed" label="Run" click="runit();" color="0x323232"/>
+ <s:Button id="Speed" label="Run" click="runit()"/>
<mx:ProgressBar id="bar" labelPlacement="bottom" minimum="0" visible="true" maximum="100"
- color="0x323232" label="CurrentProgress 0%" direction="right" mode="manual" width="100%"/>
+ label="CurrentProgress 0%" direction="right" mode="manual" width="100%"/>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml
index dc049db..2e1022a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml
@@ -54,13 +54,13 @@
</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="RadioButton Sample"
- width="100%" height="100%"
- skinClass="skins.TDFPanelSkin">
+ <s:Panel title="RadioButton Sample" width="100%" height="100%">
- <s:HGroup horizontalCenter="0" top="10">
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:HGroup>
<s:VGroup>
<s:Label text="1) The sky is blue:"/>
<s:RadioButton id="trueRadioBtn" label="True" groupName="group1"/>
@@ -84,8 +84,8 @@
</s:VGroup>
</s:HGroup>
- <s:Label bottom="20" left="5" width="100%" verticalAlign="justify" color="#323232"
- text="The RadioButton control is a single choice in a set of mutually
+ <s:Label width="100%" verticalAlign="justify"
+ text="The RadioButton control is a single choice in a set of mutually
exclusive choices. A RadioButton group is composed of two or more RadioButton controls with
the same group name. Only one member of the group can be selected at any given time." />
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
index 6af67cc..a29337f 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
@@ -20,7 +20,7 @@
<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"
- preinitialize="init();">
+ preinitialize="init()">
<!-- Based on samples from Peter DeHaan's blog: http://blog.flexexamples.com/ -->
@@ -59,17 +59,12 @@
TextFlow.defaultConfiguration = cfg;
}
</fx:Script>
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
+
+ <s:Panel title="RichEditableText Sample" width="100%" height="100%">
- s|VGroup s|Label {
- fontWeight: "bold";
- }
- </fx:Style>
- <s:Panel width="100%" height="100%"
- skinClass="skins.TDFPanelSkin"
- title="RichEditableText Sample">
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
<s:VGroup id="vgrp" width="100%" height="100%" top="10" left="15">
<s:HGroup>
@@ -83,7 +78,7 @@
<s:HGroup>
<s:Label text="Editable text:"/>
<s:RichEditableText id="richEdTxt" widthInChars="20" heightInLines="10"
- change="richEdTxt_changeHandler(event);" backgroundColor="0xCCCCCC" text="Hello world!">
+ change="richEdTxt_changeHandler(event)" backgroundColor="0xCCCCCC" text="Hello world!">
</s:RichEditableText>
</s:HGroup>
<s:HGroup>
@@ -92,7 +87,7 @@
</s:HGroup>
</s:VGroup>
- <s:Label width="266" height="180" right="10" top="38" color="0x323232" text="RichEditableText is a low-level UIComponent for displaying, scrolling, selecting, and editing richly-formatted text.
+ <s:Label width="266" height="180" right="10" top="38" text="RichEditableText is a low-level UIComponent for displaying, scrolling, selecting, and editing richly-formatted text.
The rich text can contain clickable hyperlinks and inline graphics that are either embedded or loaded from URLs. RichEditableText does not have scrollbars, but it implements
the IViewport interface for programmatic scrolling so that it can be controlled by a Scroller, which does provide scrollbars. It also supports vertical scrolling with the mouse wheel." />
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml
index 2e3dcf8..9deee58 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml
@@ -19,8 +19,7 @@
-->
<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"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()">
<fx:Script>
@@ -34,21 +33,13 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="SWFLoader Control" color="0x000000"
- borderAlpha="0.15"
- width="600">
-
+ <s:Panel title="SWFLoader Control" width="100%" height="100%">
+
<s:layout>
- <s:VerticalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <s:Label id="txt" color="0x323232" fontWeight="bold" text="Flash content embedded at compile time | 10 gumballs left" />
+ <s:Label id="txt" fontWeight="bold" text="Flash content embedded at compile time | 10 gumballs left" />
<mx:SWFLoader id="swfObj" source="@Embed('assets/swf_sample.swf')" />
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
index 979187f..aed6329 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
@@ -19,26 +19,33 @@
-->
<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" backgroundColor="haloSilver" fontSize="14">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:Form horizontalCenter="0">
- <s:FormItem label="Enter some text">
- <s:TextInput/>
- <s:helpContent>
- <s:Label text="I've fallen and I can't get up!"/>
- </s:helpContent>
- </s:FormItem>
- <s:FormItem label="Check a box">
- <s:CheckBox label="option 1"/>
- <s:CheckBox label="option 2"/>
- <s:helpContent>
- <s:Label text="What does it mean?"/>
- <s:Button label="?" width="30" x="120"/>
- </s:helpContent>
- </s:FormItem>
- <s:FormItem>
- <s:Button label="Submit!"/>
- </s:FormItem>
- </s:Form>
-
+ <s:Panel title="Form Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form>
+ <s:FormItem label="Enter some text">
+ <s:TextInput/>
+ <s:helpContent>
+ <s:Label text="I've fallen and I can't get up!"/>
+ </s:helpContent>
+ </s:FormItem>
+ <s:FormItem label="Check a box">
+ <s:CheckBox label="option 1"/>
+ <s:CheckBox label="option 2"/>
+ <s:helpContent>
+ <s:Label text="What does it mean?"/>
+ <s:Button label="?" width="30" x="120"/>
+ </s:helpContent>
+ </s:FormItem>
+ <s:FormItem>
+ <s:Button label="Submit!"/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml
index eeb27f2..cb48de8 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml
@@ -19,19 +19,26 @@
-->
<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" backgroundColor="haloSilver" fontSize="14">
-
- <s:Form horizontalCenter="0">
- <s:FormItem sequenceLabel="1." label="Enter some text">
- <s:TextInput/>
- </s:FormItem>
- <s:FormItem sequenceLabel="2." label="Check a box">
- <s:CheckBox label="option 1"/>
- <s:CheckBox label="option 2"/>
- </s:FormItem>
- <s:FormItem>
- <s:Button label="Submit it!"/>
- </s:FormItem>
- </s:Form>
-
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+
+ <s:Panel title="Form Sequence Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form>
+ <s:FormItem sequenceLabel="1." label="Enter some text">
+ <s:TextInput/>
+ </s:FormItem>
+ <s:FormItem sequenceLabel="2." label="Check a box">
+ <s:CheckBox label="option 1"/>
+ <s:CheckBox label="option 2"/>
+ </s:FormItem>
+ <s:FormItem>
+ <s:Button label="Submit it!"/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
index 4d5887c..fd703ed 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
@@ -19,20 +19,26 @@
-->
<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"
- backgroundColor="haloSilver" fontSize="14">
-
- <s:Form horizontalCenter="0">
- <s:FormItem label="Enter some text">
- <s:TextInput/>
- </s:FormItem>
- <s:FormItem label="Check a box">
- <s:CheckBox label="option 1"/>
- <s:CheckBox label="option 2"/>
- </s:FormItem>
- <s:FormItem>
- <s:Button label="Submit it!"/>
- </s:FormItem>
- </s:Form>
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+ <s:Panel title="Form Simple Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form>
+ <s:FormItem label="Enter some text">
+ <s:TextInput/>
+ </s:FormItem>
+ <s:FormItem label="Check a box">
+ <s:CheckBox label="option 1"/>
+ <s:CheckBox label="option 2"/>
+ </s:FormItem>
+ <s:FormItem>
+ <s:Button label="Submit it!"/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
index 0203cf9..e9c2f7d 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
@@ -19,20 +19,27 @@
-->
<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" backgroundColor="haloSilver" fontSize="14">
-
- <s:Form skinClass="spark.skins.spark.StackedFormSkin" horizontalCenter="0">
- <s:FormHeading label="Do some data entry" skinClass="spark.skins.spark.StackedFormHeadingSkin"/>
- <s:FormItem label="Enter some text" skinClass="spark.skins.spark.StackedFormItemSkin">
- <s:TextInput/>
- </s:FormItem>
- <s:FormItem label="Check a box" skinClass="spark.skins.spark.StackedFormItemSkin">
- <s:CheckBox label="option 1"/>
- <s:CheckBox label="option 2"/>
- </s:FormItem>
- <s:FormItem skinClass="spark.skins.spark.StackedFormItemSkin">
- <s:Button label="Submit it!"/>
- </s:FormItem>
- </s:Form>
-
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+
+ <s:Panel title="Form Stacked Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form skinClass="spark.skins.spark.StackedFormSkin" horizontalCenter="0">
+ <s:FormHeading label="Do some data entry" skinClass="spark.skins.spark.StackedFormHeadingSkin"/>
+ <s:FormItem label="Enter some text" skinClass="spark.skins.spark.StackedFormItemSkin">
+ <s:TextInput/>
+ </s:FormItem>
+ <s:FormItem label="Check a box" skinClass="spark.skins.spark.StackedFormItemSkin">
+ <s:CheckBox label="option 1"/>
+ <s:CheckBox label="option 2"/>
+ </s:FormItem>
+ <s:FormItem skinClass="spark.skins.spark.StackedFormItemSkin">
+ <s:Button label="Submit it!"/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
index bed0582..f68b237 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
@@ -23,13 +23,12 @@
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
- <s:Panel width="100%" height="100%"
- skinClass="skins.TDFPanelSkin"
- title="ScrollBar Sample">
+ <s:Panel title="ScrollBar Sample" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout paddingLeft="80" paddingTop="15"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
+
<mx:Box borderStyle="solid">
<s:HGroup>
<s:DataGroup id="vertView" left="10" top="20"
@@ -75,7 +74,7 @@
<s:HScrollBar viewport="{horizView}" width ="{horizView.width}"/>
</mx:Box>
- <s:Label paddingLeft="15" width="199" verticalAlign="justify" color="0x323232"
+ <s:Label paddingLeft="15" width="199" verticalAlign="justify"
text="You can add scrollbars to any component to give scrolling capability. This sample shows
how you can use both a vertical and horizontal ScrollBar. Also see the Scroller sample for more information."/>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
index 05eeaf3..003776f 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
@@ -22,9 +22,12 @@
xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:Panel width="100%" height="100%"
- skinClass="skins.MyPanelSkin"
- title="Scroller Sample">
+ <s:Panel title="Scroller Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
<s:VGroup horizontalCenter="0">
<s:HGroup>
<s:Label text="Min Viewport Inset:"/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
index c6768bc..1ae35dc 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
@@ -41,43 +41,43 @@
<!-- you want to mark the children of the viewport as focusable so you're able to tab to them,
but if you don't want the container itself to be focusable then you must turn tabEnabled off on it -->
- <s:Panel width="100%" height="100%"
- skinClass="skins.TDFPanelSkin"
- title="Scrollers and Tabbing">
+ <s:Panel title="Scrollers and Tabbing" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
<!-- The fields are tab-able within the VGroup container -->
- <s:HGroup horizontalCenter="0" top="10">
- <s:VGroup left="0" horizontalAlign="center" width="20%">
- <s:BitmapImage id="img" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
- <s:Label text="Item For Sale"/>
+ <s:VGroup left="0" horizontalAlign="center" width="20%">
+ <s:BitmapImage id="img" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+ <s:Label text="Item For Sale"/>
+ </s:VGroup>
+ <s:Scroller tabEnabled="true" hasFocusableChildren="true">
+ <s:VGroup>
+ <s:Label text="First Name:"/>
+ <s:TextInput id="firstName" text="firstname" color="#959494" change="txtChangeHandler(event)"/>
+ <s:Label text="Last Name:"/>
+ <s:TextInput id="lastName" text="lastname" color="#959494" change="txtChangeHandler(event)"/>
+ <s:Label text="Email:"/>
+ <s:TextInput id="emailAdd" text="email" color="#959494" change="txtChangeHandler(event)"/>
</s:VGroup>
- <s:Scroller tabEnabled="true" hasFocusableChildren="true">
- <s:VGroup>
- <s:Label text="First Name:"/>
- <s:TextInput id="firstName" text="firstname" color="#959494" change="txtChangeHandler(event)"/>
- <s:Label text="Last Name:"/>
- <s:TextInput id="lastName" text="lastname" color="#959494" change="txtChangeHandler(event)"/>
- <s:Label text="Email:"/>
- <s:TextInput id="emailAdd" text="email" color="#959494" change="txtChangeHandler(event)"/>
- </s:VGroup>
- </s:Scroller>
-
- <!-- Note: The scroller container automatically sets the clipAndEnableScrolling to false for
- containers within it. See 'Controlling Viewport' sample under 'Coding Techniques' -->
-
- <s:Scroller hasFocusableChildren="true" tabEnabled="false">
- <s:VGroup width="200" height="200">
- <s:Label text="Enter item name:"/>
- <s:TextInput id="itemNameTxt" text="image-name" width="100%" color="#959494" change="txtChangeHandler(event)"/>
- <s:Label text="Enter description of your item:"/>
- <s:TextArea id="itemDescTxt" text="title" color="#959494" change="txtChangeHandler(event)"/>
- </s:VGroup>
- </s:Scroller>
- <s:Label right="10" width="180" verticalAlign="justify"
- text="If you have items within a Scroller that need to be tabbed to, you can
+ </s:Scroller>
+
+ <!-- Note: The scroller container automatically sets the clipAndEnableScrolling to false for
+ containers within it. See 'Controlling Viewport' sample under 'Coding Techniques' -->
+
+ <s:Scroller hasFocusableChildren="true" tabEnabled="false">
+ <s:VGroup width="200" height="200">
+ <s:Label text="Enter item name:"/>
+ <s:TextInput id="itemNameTxt" text="image-name" width="100%" color="#959494" change="txtChangeHandler(event)"/>
+ <s:Label text="Enter description of your item:"/>
+ <s:TextArea id="itemDescTxt" text="title" color="#959494" change="txtChangeHandler(event)"/>
+ </s:VGroup>
+ </s:Scroller>
+ <s:Label right="10" width="180" verticalAlign="justify"
+ text="If you have items within a Scroller that need to be tabbed to, you can
need to set hasFocusableChildren to true. If you do not want the container itself to be tab enabled,
then you must set tabEnabled to false, such as shown here."/>
- </s:HGroup>
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml
index 204daab..b36ff70 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml
@@ -25,9 +25,9 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
title="Title Window"
- close="PopUpManager.removePopUp(this);" >
+ close="PopUpManager.removePopUp(this)" >
- <fx:Script>
+ <fx:Script>
<![CDATA[
import mx.managers.PopUpManager;
@@ -55,8 +55,8 @@
</s:HGroup>
<s:HGroup>
- <s:Button label="OK" click="returnName();"/>
- <s:Button label="Cancel" click="PopUpManager.removePopUp(this);"/>
+ <s:Button label="OK" click="returnName()"/>
+ <s:Button label="Cancel" click="PopUpManager.removePopUp(this)"/>
</s:HGroup>
</s:TitleWindow>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
index da1407e..1e699dc 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
@@ -21,33 +21,14 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:Panel width="100%" height="100%"
- skinClass="skins.TDFPanelSkin"
- title="HSlider/VSlider Sample">
+ <s:Panel title="HSlider/VSlider Sample" width="100%" height="100%">
- <s:VGroup left="10" top="10">
- <s:Label text="Height:"/>
- <s:VSlider id="slider3"
- minimum="50"
- maximum="180"
- value="160"
- liveDragging="true"/>
- </s:VGroup>
- <s:Group left="40" top="25">
- <s:Ellipse id="rect"
- width="{slider2.value}"
- height="{slider3.value}">
- <s:fill>
- <s:LinearGradient rotation="45">
- <s:GradientEntry color="0x5008f3" />
- <s:GradientEntry color="0x7a2a84" />
- <s:GradientEntry color="0xfe08a4" />
- </s:LinearGradient>
- </s:fill>
- </s:Ellipse>
- </s:Group>
-
- <s:HGroup right="315" top="10" verticalAlign="middle">
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+
+ <s:HGroup>
<s:Label text="Width:"/>
<s:HSlider id="slider2"
minimum="50"
@@ -57,7 +38,32 @@
</s:HGroup>
- <s:Label right="40" top="10" width="200" verticalAlign="justify" color="0x323232"
+ <s:HGroup>
+ <s:VGroup>
+ <s:Label text="Height:"/>
+ <s:VSlider id="slider3"
+ minimum="50"
+ maximum="180"
+ value="160"
+ liveDragging="true"/>
+ </s:VGroup>
+
+ <s:Group width="200">
+ <s:Ellipse id="rect"
+ width="{slider2.value}"
+ height="{slider3.value}">
+ <s:fill>
+ <s:LinearGradient rotation="45">
+ <s:GradientEntry color="0x5008f3" />
+ <s:GradientEntry color="0x7a2a84" />
+ <s:GradientEntry color="0xfe08a4" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Ellipse>
+ </s:Group>
+ </s:HGroup>
+
+ <s:Label verticalAlign="justify"
text="The slider controls can be used to select a value by moving a slider thumb between
the end points of the slider track. The current value of the slider is determined by the relative location
of the thumb between the end points of the slider. The slider end points correspond to the slider’s minimum and maximum values."/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
index 2548ce9..7cb7f11 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
@@ -21,30 +21,32 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:Panel title="Spinner Control Example" height="100%" width="100%"
- skinClass="skins.TDFPanelSkin">
- <s:VGroup width="100%" height="100%" left="10" top="10">
- <s:HGroup>
- <mx:Text text="Use the arrows to change tabs:"/>
- <s:Spinner id="mySpinner" maximum="3"/>
- </s:HGroup>
-
- <!-- Two way binding is being used so that changes to the tab navigator remain synced with Spinner value -->
- <mx:TabNavigator id="myTabNav" width="75%" height="75%" selectedIndex="@{mySpinner.value}">
- <mx:HBox label="Tab 1">
- <mx:Text text="Text on Tab 1 " fontSize="14" color="red"/>
- </mx:HBox>
- <mx:HBox label="Tab 2">
- <mx:Text text="Text on Tab 2" fontSize="16" color="blue"/>
- </mx:HBox>
- <mx:HBox label="Tab 3">
- <mx:Text text="Text on Tab 3" fontSize="18" color="green"/>
- </mx:HBox>
- <mx:HBox label="Tab 4">
- <mx:Text text="Text on Tab 4" fontSize="20" color="purple"/>
- </mx:HBox>
- </mx:TabNavigator>
- </s:VGroup>
+ <s:Panel title="Spinner Control Example" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:HGroup>
+ <mx:Text text="Use the arrows to change tabs:"/>
+ <s:Spinner id="mySpinner" maximum="3"/>
+ </s:HGroup>
+
+ <!-- Two way binding is being used so that changes to the tab navigator remain synced with Spinner value -->
+ <mx:TabNavigator id="myTabNav" width="75%" height="75%" selectedIndex="@{mySpinner.value}">
+ <mx:HBox label="Tab 1">
+ <mx:Text text="Text on Tab 1 " fontSize="14" color="red"/>
+ </mx:HBox>
+ <mx:HBox label="Tab 2">
+ <mx:Text text="Text on Tab 2" fontSize="16"/>
+ </mx:HBox>
+ <mx:HBox label="Tab 3">
+ <mx:Text text="Text on Tab 3" fontSize="18" color="green"/>
+ </mx:HBox>
+ <mx:HBox label="Tab 4">
+ <mx:Text text="Text on Tab 4" fontSize="20" color="purple"/>
+ </mx:HBox>
+ </mx:TabNavigator>
</s:Panel>
</s:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml
index 06e629a..59410df 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml
@@ -19,24 +19,18 @@
-->
<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">
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
+ xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:Panel title="TabNavigator Container" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="TabNavigator Container" width="100%" height="100%">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <s:Label width="100%" color="0x323232" fontWeight="bold"
+ <s:Label width="100%" fontWeight="bold"
text="Select the tabs to change the panel."/>
- <mx:TabNavigator id="tn" width="100%" height="100%" color="0x323232" >
+ <mx:TabNavigator id="tn" width="100%" height="100%">
<!-- Define each panel using a VBox container. -->
<s:NavigatorContent label="Panel 1">
@@ -52,7 +46,7 @@
</s:NavigatorContent>
</mx:TabNavigator>
- <s:Label width="100%" color="0x323232"
+ <s:Label width="100%"
text="Programmatically select the panel using a Button control."/>
<s:HGroup>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml
index c8892bd..a0d9827 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml
@@ -22,8 +22,6 @@
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
- import skins.TDFPanelSkin;
-
protected function changeHandler():void
{
txt.maxChars = this.maxChars.value;
@@ -34,57 +32,58 @@
]]>
</fx:Script>
- <s:Panel title="TextArea Sample"
- width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+ <s:Panel title="TextArea Sample" width="100%" height="100%">
- <s:HGroup top="8" width="100%" height="100%" left="80">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:VGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Specify Max Character Input:"/>
+ <s:NumericStepper id="maxChars" maximum="200" value="100" stepSize="2" change="this.changeHandler()"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Specify Text Alignment:"/>
+ <s:DropDownList id="alignVal" prompt="left" change="this.changeHandler()">
+ <s:dataProvider>
+ <mx:ArrayList>
+ <fx:String>left</fx:String>
+ <fx:String>right</fx:String>
+ <fx:String>center</fx:String>
+ <fx:String>justify</fx:String>
+ <fx:String>start</fx:String>
+ <fx:String>end</fx:String>
+ </mx:ArrayList>
+ </s:dataProvider>
+ </s:DropDownList>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Direction:"/>
+ <s:DropDownList id="direction" prompt="ltr" change="this.changeHandler()">
+ <s:dataProvider>
+ <mx:ArrayList>
+ <fx:String>ltr</fx:String>
+ <fx:String>rtl</fx:String>
+ </mx:ArrayList>
+ </s:dataProvider>
+ </s:DropDownList>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Specify characters to restrict (use - for range):"/>
+ <s:TextInput id="restrictStr" change="this.changeHandler()" text="a-z 1-9"/>
+ </s:HGroup>
<s:VGroup>
- <s:HGroup verticalAlign="middle">
- <s:Label text="Specify Max Character Input:"/>
- <s:NumericStepper id="maxChars" maximum="200" value="100" stepSize="2" change="this.changeHandler()"/>
- </s:HGroup>
- <s:HGroup verticalAlign="middle">
- <s:Label text="Specify Text Alignment:"/>
- <s:DropDownList id="alignVal" prompt="left" change="this.changeHandler()">
- <s:dataProvider>
- <mx:ArrayList>
- <fx:String>left</fx:String>
- <fx:String>right</fx:String>
- <fx:String>center</fx:String>
- <fx:String>justify</fx:String>
- <fx:String>start</fx:String>
- <fx:String>end</fx:String>
- </mx:ArrayList>
- </s:dataProvider>
- </s:DropDownList>
- </s:HGroup>
- <s:HGroup verticalAlign="middle">
- <s:Label text="Direction:"/>
- <s:DropDownList id="direction" prompt="ltr" change="this.changeHandler()">
- <s:dataProvider>
- <mx:ArrayList>
- <fx:String>ltr</fx:String>
- <fx:String>rtl</fx:String>
- </mx:ArrayList>
- </s:dataProvider>
- </s:DropDownList>
- </s:HGroup>
- <s:HGroup verticalAlign="middle">
- <s:Label text="Specify characters to restrict (use - for range):"/>
- <s:TextInput id="restrictStr" change="this.changeHandler()" text="a-z 1-9"/>
- </s:HGroup>
- <s:VGroup>
- <s:Label text="Text:"/>
- <s:TextArea id="txt" width="300" height="70" color="0x323232" horizontalCenter="0" verticalCenter="0" restrict="a-z 1-9"
- change="this.changeHandler()"/>
- </s:VGroup>
- </s:VGroup>
- <s:Label width="200" color="#323232" top="20" right="80"
- text="TextArea is a text-entry control that lets users enter and edit multiple lines of richly formatted text.
+ <s:Label text="Text:"/>
+ <s:TextArea id="txt" width="300" height="70" color="0x323232" horizontalCenter="0" verticalCenter="0" restrict="a-z 1-9"
+ change="this.changeHandler()"/>
+ </s:VGroup>
+ </s:VGroup>
+ <s:Label width="200" top="20" right="80"
+ text="TextArea is a text-entry control that lets users enter and edit multiple lines of richly formatted text.
It can display horizontal and vertical scrollbars for scrolling through the text and supports vertical scrolling with the mouse wheel. This sample also shows
how you can restrict character input on the text area. The default when this is run will not allow the number 0 or caps based on the restrict range shown. The
sample also shows how you can specify a direction on the text."/>
- </s:HGroup>
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml
index c5f8b5a..1cb0137 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml
@@ -43,56 +43,56 @@
]]>
</fx:Script>
- <s:Panel skinClass="skins.TDFPanelSkin"
- width="100%" height="100%"
- title="TextInput Sample">
+ <s:Panel title="TextInput Sample" width="100%" height="100%">
- <s:VGroup top="20" width="100%" height="100%" left="200">
- <s:HGroup verticalAlign="middle">
- <s:Label text="Specify Max Character Input:"/>
- <s:NumericStepper id="maxChars" value="30" stepSize="2" change="this.changeHandler(null)"/>
- </s:HGroup>
- <s:HGroup verticalAlign="middle">
- <s:Label text="Specify Text Alignment:"/>
- <s:DropDownList id="alignVal" prompt="left" change="this.changeHandler(null)">
- <s:dataProvider>
- <mx:ArrayList>
- <fx:String>left</fx:String>
- <fx:String>right</fx:String>
- <fx:String>center</fx:String>
- <fx:String>justify</fx:String>
- <fx:String>start</fx:String>
- <fx:String>end</fx:String>
- </mx:ArrayList>
- </s:dataProvider>
- </s:DropDownList>
- </s:HGroup>
- <s:HGroup verticalAlign="middle">
- <s:Label text="Direction:"/>
- <s:DropDownList id="direction" prompt="ltr" change="this.changeHandler(null)">
- <s:dataProvider>
- <mx:ArrayList>
- <fx:String>rtl</fx:String>
- <fx:String>ltr</fx:String>
- </mx:ArrayList>
- </s:dataProvider>
- </s:DropDownList>
- </s:HGroup>
- <s:HGroup verticalAlign="middle">
- <s:Label text="Specify characters to restrict (use - for range):"/>
- <s:TextInput id="restrictStr" change="this.changeHandler(null)"/>
- </s:HGroup>
- <s:HGroup verticalAlign="middle">
- <s:Label text="Text Input:"/>
- <s:TextInput id="txt" maxChars="{maxChars.value}" maxWidth="150"
- change="txtChangeHandler(event)" textAlign="{alignVal.selectedItem}"/>
- </s:HGroup>
- <mx:Spacer height="10"/>
- <s:Label width="85%" horizontalCenter="0" color="#323232"
- text="TextInput is a text-entry control that lets users enter and edit a single line of uniformly-formatted text.
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Specify Max Character Input:"/>
+ <s:NumericStepper id="maxChars" value="30" stepSize="2" change="this.changeHandler(null)"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Specify Text Alignment:"/>
+ <s:DropDownList id="alignVal" prompt="left" change="this.changeHandler(null)">
+ <s:dataProvider>
+ <mx:ArrayList>
+ <fx:String>left</fx:String>
+ <fx:String>right</fx:String>
+ <fx:String>center</fx:String>
+ <fx:String>justify</fx:String>
+ <fx:String>start</fx:String>
+ <fx:String>end</fx:String>
+ </mx:ArrayList>
+ </s:dataProvider>
+ </s:DropDownList>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Direction:"/>
+ <s:DropDownList id="direction" prompt="ltr" change="this.changeHandler(null)">
+ <s:dataProvider>
+ <mx:ArrayList>
+ <fx:String>rtl</fx:String>
+ <fx:String>ltr</fx:String>
+ </mx:ArrayList>
+ </s:dataProvider>
+ </s:DropDownList>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Specify characters to restrict (use - for range):"/>
+ <s:TextInput id="restrictStr" change="this.changeHandler(null)"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Text Input:"/>
+ <s:TextInput id="txt" maxChars="{maxChars.value}" maxWidth="150"
+ change="txtChangeHandler(event)" textAlign="{alignVal.selectedItem}"/>
+ </s:HGroup>
+ <mx:Spacer height="10"/>
+ <s:Label width="85%" horizontalCenter="0"
+ text="TextInput is a text-entry control that lets users enter and edit a single line of uniformly-formatted text.
This Spark version of TextInput makes use of the Text Layout Framework (TLF). Numerous properties are available to be set using the
textFlow object from the TLF framework. Uses of some are shown above."/>
- </s:VGroup>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml
index 77c1737..9cf53f2 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml
@@ -19,7 +19,7 @@
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:local="*" creationComplete="init()">
<!-- Based on original code from here and updated and enhanced for Flex 4:
@@ -48,8 +48,6 @@
import mx.events.FlexEvent;
import mx.events.SliderEvent;
- import skins.TDFPanelSkin;
-
import spark.components.Group;
import spark.core.SpriteVisualElement;
@@ -141,7 +139,7 @@
]]>
</fx:Script>
- <s:Panel skinClass="skins.TDFPanelSkin" title="Text Layout Framework Sample" width="100%" height="100%">
+ <s:Panel title="Text Layout Framework Sample" width="100%" height="100%">
<s:layout>
<s:VerticalLayout paddingTop="8" paddingLeft="8"/>
</s:layout>
@@ -162,4 +160,4 @@
</s:VGroup>
</s:Panel>
-</s:Application>
\ No newline at end of file
+</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml
index a5ccfd4..c799992 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml
@@ -19,7 +19,7 @@
-->
<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" maxWidth="690" maxHeight="300"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()">
<!-- This sample is based on this page: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3_Flex/WS0d70b2a8565d75766ba6608d121cc29f375-8000.html -->
@@ -72,7 +72,7 @@
headlineController.format = hContainerFormat;
hTextFlow.flowComposer.addController(headlineController);
- addElement(headContainer);
+ panel.addElement(headContainer);
this.addEventListener(flash.events.Event.RESIZE, resizeHandler);
// Body text TextFlow and flow composer
@@ -88,8 +88,8 @@
bodyController.format = bodyTextContainerFormat;
bTextFlow.flowComposer.addController(bodyController);
- addElement(bodyTextContainer);
- resizeHandler(null);
+ panel.addElement(bodyTextContainer);
+ resizeHandler(null);
}
private function resizeHandler(event:Event):void
@@ -131,5 +131,13 @@
}
]]>
</fx:Script>
+
+ <s:Panel title="News Layout Sample" width="100%" height="100%">
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Group id="panel" width="100%" height="100%" />
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml
index 09f544b..cebcc9a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml
@@ -67,9 +67,10 @@
}
]]></fx:Script>
- <s:Panel skinClass="skins.TDFPanelSkin" title="Importing Text using TLF and Flex 4" width="100%" height="100%">
+ <s:Panel title="Importing Text using TLF and Flex 4" width="100%" height="100%">
+
<s:layout>
- <s:HorizontalLayout paddingTop="8" paddingLeft="8" paddingRight="12"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<s:VGroup>
@@ -82,7 +83,7 @@
textFlow="{TextFlowUtil.importFromXML(textFlowAsXML)}"
horizontalCenter="0" verticalCenter="0" />
</s:VGroup>
- <s:Label width="200" color="0x323232" verticalAlign="justify" text="This sample shows how you can use different types of text markup within
+ <s:Label width="200" verticalAlign="justify" text="This sample shows how you can use different types of text markup within
the Flex 4 components that are based on TLF through an import. This can be especially useful for dynamically loading text
that is returned from an HTTPService call at runtime for instance."/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml
index 50af0d4..48a8db1 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml
@@ -50,9 +50,10 @@
</fx:XML>
</fx:Declarations>
- <s:Panel skinClass="skins.TDFPanelSkin" title="Text Import Format Types Sample" width="100%" height="100%">
+ <s:Panel title="Text Import Format Types Sample" width="100%" height="100%">
+
<s:layout>
- <s:HorizontalLayout paddingTop="8" paddingLeft="8" paddingRight="12"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<s:Label verticalAlign="justify" width="200" text="This example shows how you can use different format types for importing text
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml
index 0877ab6..af5700c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -56,24 +55,16 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="TitleWindow Container" color="0x000000"
- borderAlpha="0.15"
- width="600">
+ <s:Panel title="TitleWindow Container" width="100%" height="100%">
<s:layout>
- <s:VerticalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <s:Button id="myButton" color="0x323232" height="32" label="Click to open the TitleWindow container"
- click="showWindow();"/>
+ <s:Button id="myButton" height="32" label="Click to open the TitleWindow container"
+ click="showWindow()"/>
- <s:RichText id="returnedName" width="100%" color="0x323232" text="Waiting..."/>
+ <s:RichText id="returnedName" width="100%" text="Waiting..."/>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
index 721d16b..d001231 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
@@ -22,7 +22,6 @@
xmlns:mx="library://ns.adobe.com/flex/mx"
currentState="hide">
-
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
@@ -70,42 +69,40 @@
color: #FFFFFF;
}
</fx:Style>
+
<s:states>
<s:State name="show"/>
<s:State name="hide"/>
</s:states>
- <!-- 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="ToggleButton Sample"
- skinClass="skins.TDFPanelSkin">
-
- <s:HGroup left="5" top="5" width="100%" height="100%">
- <s:VGroup color="0x000000">
- <s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/>
- <s:Label text="Order Number: 904234113441-2342"/>
- <s:VGroup width="80%" horizontalCenter="0">
- <s:Label text="Purchaser: Anna Thomas"/>
- <s:Label text="Date: 7/20/2009"/>
- <s:Label text="Order Total: $114.00"/>
- <s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
- click="myBtn_clickHandler(event)"/>
- </s:VGroup>
- </s:VGroup>
- <s:HGroup right="50" top="5">
- <s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170"
- color="#FFFFFF" includeIn="show">
- <mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/>
- </s:Panel>
- </s:HGroup>
- </s:HGroup>
- <s:HGroup horizontalCenter="0" bottom="15" verticalAlign="middle" width="88%">
- <s:Label fontSize="13" color="0x323232" verticalAlign="justify" width="100%"
- text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click
-the button again to toggle it back to the up state."/>
+ <s:Panel title="ToggleButton Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:VGroup color="0x000000">
+ <s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/>
+ <s:Label text="Order Number: 904234113441-2342"/>
+ <s:VGroup width="80%" horizontalCenter="0">
+ <s:Label text="Purchaser: Anna Thomas"/>
+ <s:Label text="Date: 7/20/2009"/>
+ <s:Label text="Order Total: $114.00"/>
+ <s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
+ click="myBtn_clickHandler(event)"/>
+ </s:VGroup>
+ </s:VGroup>
+ <s:HGroup right="50" top="5">
+ <s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170"
+ color="#FFFFFF" includeIn="show">
+ <mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/>
+ </s:Panel>
</s:HGroup>
+ <s:HGroup horizontalCenter="0" bottom="15" verticalAlign="middle" width="88%">
+ <s:Label verticalAlign="justify" width="100%"
+ text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click the button again to toggle it back to the up state."/>
+ </s:HGroup>
+
</s:Panel>
@@ -141,6 +138,7 @@
</s:Panel>
</s:HGroup>
- </s:Group>-->
+ </s:Group>
+ -->
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
index 422a185..6405900 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -48,24 +47,18 @@
</fx:Declarations>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel id="tgPanel" title="ToggleButtonBar: Flash" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel id="tgPanel" title="ToggleButtonBar: Flash" width="100%" height="100%">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:ToggleButtonBar color="0x323232" horizontalGap="5" itemClick="clickHandler(event);" dataProvider="{dp}" />
+ <mx:ToggleButtonBar horizontalGap="5" itemClick="clickHandler(event)" dataProvider="{dp}" />
- <s:Label width="100%" textAlign="center" color="0x323232"
+ <s:Label width="100%" textAlign="center"
text="Select a button in the ToggleButtonBar control."/>
- <s:TextArea color="0x323232" id="myTA" width="100%" height="100%" text="{'Selected button index: 0' + '\n' +'Selected button label: Flash'}"/>
+ <s:TextArea id="myTA" width="100%" height="100%" text="{'Selected button index: 0' + '\n' +'Selected button label: Flash'}"/>
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml
index 722215d..6abdfa2 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml
@@ -41,71 +41,38 @@
}
]]>
</fx:Script>
- <fx:Style>
- @namespace "library://ns.adobe.com/flex/spark";
-
- ToggleButton:upAndSelected,
- ToggleButton:overAndSelected {
- baseColor: #000000;
- color: #FFFFFF;
- }
- ToggleButton:downAndSelected {
- baseColor: #336699;
- color: #FFFFFF;
- }
- ToggleButton:disabledAndSelected {
- baseColor: #E2E2E2;
- color: #212799;
- }
- ToggleButton:up {
- baseColor: #C0C0C0;
- color: #323232;
- }
- ToggleButton:over {
- baseColor: #FFFFFF;
- color: #000000;
- }
- ToggleButton:down {
- baseColor: #014f9f;
- color: #FFFFFF;
- }
- </fx:Style>
+
<s:states>
<s:State name="show"/>
<s:State name="hide"/>
</s:states>
- <!-- 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="ToggleButton Sample"
- skinClass="skins.TDFPanelSkin">
+ <s:Panel title="ToggleButton Sample" width="100%" height="100%">
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
-
- <s:HGroup left="5" top="5" width="100%" height="100%">
- <s:VGroup color="0x000000">
- <s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/>
- <s:Label text="Order Number: 904234113441-2342"/>
- <s:VGroup width="80%" horizontalCenter="0">
- <s:Label text="Purchaser: Anna Thomas"/>
- <s:Label text="Date: 7/20/2009"/>
- <s:Label text="Order Total: $114.00"/>
- <s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
- click="myBtn_clickHandler(event)"/>
- </s:VGroup>
- </s:VGroup>
- <s:HGroup right="50" top="5">
- <s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170"
- color="#FFFFFF" includeIn="show">
- <mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/>
- </s:Panel>
- </s:HGroup>
+ <s:HGroup>
+ <s:VGroup>
+ <s:Label text="The Outfitters Clothing Store" fontSize="18" />
+ <s:Label text="Order Number: 904234113441-2342"/>
+ <s:VGroup width="80%" horizontalCenter="0">
+ <s:Label text="Purchaser: Anna Thomas"/>
+ <s:Label text="Date: 7/20/2009"/>
+ <s:Label text="Order Total: $114.00"/>
+ <s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
+ click="myBtn_clickHandler(event)"/>
+ </s:VGroup>
+ </s:VGroup>
+ <s:HGroup right="50" top="5">
+ <s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170" includeIn="show">
+ <mx:DataGrid dataProvider="{items}" width="100%" height="100%"/>
+ </s:Panel>
</s:HGroup>
- <s:HGroup horizontalCenter="0" bottom="15" verticalAlign="middle" clipAndEnableScrolling="true" width="88%">
- <s:Label fontSize="13" color="0x323232" verticalAlign="justify" width="100%"
- text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click
-the button again to toggle it back to the up state."/>
- </s:HGroup>
+ </s:HGroup>
+
+ <s:Label width="100%"
+ text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click
+ the button again to toggle it back to the up state."/>
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml
index 899f6df..e5dcb44 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml
@@ -19,30 +19,9 @@
-->
<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:Style>
- @namespace mx "library://ns.adobe.com/flex/mx";
-
- mx|ToolTip
- {
- fontFamily: "Arial";
- fontSize: 12;
- fontStyle: "italic";
- color: #000000;
- backgroundColor: #FCEA1E;
- }
- </fx:Style>
-
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="ToolTip Samples"
- width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+
+ <s:Panel title="ToolTip Samples" width="100%" height="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml
index 47f98d5..f87e33c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -57,20 +56,18 @@
<s:VerticalLayout horizontalAlign="center" />
</s:layout>
- <s:Panel title="Tree Control" color="0x000000"
- borderAlpha="0.15"
- width="600">
-
+ <s:Panel title="Tree Control" width="100%" height="100%">
+
<s:layout>
<s:VerticalLayout horizontalAlign="center"
paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
- <s:Label width="100%" color="0x323232"
+ <s:Label width="100%"
text="Select a node in the Tree control."/>
- <mx:HDividedBox width="100%" height="100%" color="0x323232">
+ <mx:HDividedBox width="100%" height="100%">
<mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
<s:TextArea height="100%" width="50%"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml
index 2da694d..e91cd8f 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml
@@ -19,14 +19,9 @@
-->
<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"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
initialize="init(event)">
-
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
+
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
@@ -45,7 +40,11 @@
<fx:String id="TitleText"><![CDATA[<b>VideoDisplay Control:</b><br />Use the buttons to control the video.]]></fx:String>
</fx:Declarations>
- <s:VGroup width="600" horizontalAlign="center" paddingTop="10">
+ <s:Panel title="Video Display Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
<s:RichText width="75%" color="0xffffff" textAlign="center"
textFlow="{TextConverter.importToFlow(TitleText, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
@@ -54,11 +53,11 @@
<s:VideoDisplay id="myVid" width="66%" height="66%" source="./spark/controls/assets/FlexInstaller.mp4" autoPlay="false"/>
<s:HGroup>
- <s:Button label="Play" color="0x00000" click="myVid.play();"/>
- <s:Button label="Pause" color="0x00000" click="myVid.pause();"/>
- <s:Button label="Stop" color="0x00000" click="myVid.stop();"/>
+ <s:Button label="Play" color="0x00000" click="myVid.play()"/>
+ <s:Button label="Pause" color="0x00000" click="myVid.pause()"/>
+ <s:Button label="Stop" color="0x00000" click="myVid.stop()"/>
</s:HGroup>
- </s:VGroup>
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml
index 89d8590..195f3b8 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml
@@ -43,12 +43,9 @@
]]>
</fx:Script>
- <!-- 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="VideoPlayer Sample"
- width="100%" height="100%"
- skinClass="skins.TDFPanelSkin">
- <s:Label top="10" right="10" width="250" verticalAlign="justify" color="#323232"
+ <s:Panel title="VideoPlayer Sample" width="100%" height="100%">
+
+ <s:Label top="10" right="10" width="250" verticalAlign="justify"
text="The VideoPlayer control lets you play progressively downloaded or streaming
video, live or recorded video. It supports multi-bit rate streaming when used with a server that supports
multi-bit rate streaming, such as Flash Media Server 3.5. The VideoPlayer control contains a full UI
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml
index 59b6f27..9a9386c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml
@@ -19,43 +19,34 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="ViewStack Container" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="ViewStack Container" width="100%" height="100%">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <s:Label width="100%" color="0x323232" textAlign="center"
+ <s:Label width="100%" textAlign="center"
text="Use the Button controls to change panels of the ViewStack container."/>
- <s:BorderContainer borderStyle="solid" width="100%" color="0x323232">
+ <s:BorderContainer borderStyle="solid" width="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingTop="5" paddingLeft="5"
- paddingRight="5" paddingBottom="5" />
+ <s:HorizontalLayout paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" />
</s:layout>
<s:Button id="searchButton" label="Search Panel"
- click="myViewStack.selectedChild=search;"/>
+ click="myViewStack.selectedChild=search"/>
<s:Button id="cInfoButton" label="Customer Info Panel"
- click="myViewStack.selectedChild=custInfo;"/>
+ click="myViewStack.selectedChild=custInfo"/>
<s:Button id="aInfoButton" label="Account Panel"
- click="myViewStack.selectedChild=accountInfo;"/>
+ click="myViewStack.selectedChild=accountInfo"/>
</s:BorderContainer>
<!-- Define the ViewStack and the three child containers and have it
resize up to the size of the container for the buttons. -->
- <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%" color="0x323232">
+ <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">
<s:NavigatorContent id="search" label="Search" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
@@ -85,7 +76,7 @@
<s:HGroup>
<s:Label text="Email Address"/>
<s:TextInput id="email" width="200"/>
- <s:Button label="Submit" click="email.text='';" />
+ <s:Button label="Submit" click="email.text=''" />
</s:HGroup>
</s:NavigatorContent>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml
index db20ea3..f942061 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml
@@ -54,7 +54,12 @@
}
</fx:Style>
- <s:Panel title="Advanced CSS: Descendant Selector Example" height="100%" width="100%" skinClass="skins.TDFPanelSkin">
+ <s:Panel title="Advanced CSS: Descendant Selector Example" height="100%" width="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
<s:Group width="50%" height="50%">
<s:ButtonBar id="viewMenu" requireSelection="true" x="10" y="10">
<s:dataProvider>
@@ -68,7 +73,7 @@
<mx:Text text="This text component has a style setting with a reference to a Halo Text component."/>
</s:VGroup>
</s:Group>
- <s:Label width="200" color="0x323232" text="Descendant selectors can be used to specifically qualify the component you
+ <s:Label width="200" text="Descendant selectors can be used to specifically qualify the component you
want to style via the namespace and component. See the Style settings in the code for reference." x="440" y="10"/>
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
index 7cb1571..576ca4c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
@@ -23,7 +23,7 @@
<fx:Style>
#submitButton {
baseColor: #1E407E;
- color: #FFFFFF;
+ color: #003399;
}
</fx:Style>
@@ -43,12 +43,16 @@
<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"
+ title="Advanced CSS: ID Selector Example">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Label verticalAlign="justify"
text="Only the Button with the id 'submitButton' will have custom colors."/>
- <s:VGroup horizontalCenter="0" horizontalAlign="center" verticalCenter="0">
+ <s:VGroup>
<s:HGroup verticalAlign="middle">
<s:Label text="First Name:"/>
<s:TextInput id="firstName" width="100"/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml
index b6dc266..80ef2ca 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml
@@ -43,30 +43,32 @@
}
</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:Panel title="Advanced CSS: Type+Class Selector Sample" height="100%" width="100%" styleName="blueTheme">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Label width="270" 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="[Apples,Bananas,Grapes]" />
+ <mx:ArrayCollection source="[Civic, M3, Prius, Blazer, Tahoe]" />
</s:dataProvider>
</s:List>
- </s:HGroup>
+ </s:VGroup>
+ <s:List id="fruitList" selectedIndex="2" styleName="greenTheme">
+ <s:dataProvider>
+ <mx:ArrayCollection source="[Apples,Bananas,Grapes]" />
+ </s:dataProvider>
+ </s:List>
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
index d070c76..293eb90 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
@@ -41,47 +41,40 @@
</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">
+ <s:Panel title="Animate Properties Effect Sample" width="100%" height="100%" >
- <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:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
- </s:TileGroup>
-
- <s:HGroup top="8" right="8">
- <s:VGroup width="100%" >
- <s:Label text="Animate Properties Sample"
- fontSize="18"
- color="#B7B6B6"/>
+ <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:VGroup width="100%">
<s:Label width="250"
- verticalAlign="justify"
- color="#323232"
+ verticalAlign="justify"
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:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
index e6307a1..95a0f28 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
@@ -28,89 +28,52 @@
<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:Keyframe time="250" value="20"/>
+ <s:Keyframe time="550" value="80"/>
+ <s:Keyframe time="850" value="120"/>
+ <s:Keyframe time="1150" value="160"/>
+ <s:Keyframe time="1450" value="200"/>
+ <s:Keyframe time="1750" value="240"/>
+ <s:Keyframe time="2050" value="160"/>
+ <s:Keyframe time="2350" value="120"/>
+ <s:Keyframe time="2650" value="80"/>
+ <s:Keyframe time="2950" value="20"/>
</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:Keyframe time="250" value="160"/>
+ <s:Keyframe time="550" value="60"/>
+ <s:Keyframe time="850" value="160"/>
+ <s:Keyframe time="1150" value="60"/>
+ <s:Keyframe time="1450" value="160"/>
+ <s:Keyframe time="1750" value="60"/>
+ <s:Keyframe time="2050" value="160"/>
+ <s:Keyframe time="2350" value="60"/>
+ <s:Keyframe time="2650" value="160"/>
+ <s:Keyframe time="2950" value="60"/>
</s:keyframes>
</s:MotionPath>
</s:motionPaths>
</s:AnimateTransform>
</fx:Declarations>
- <fx:Style>
- @namespace "library://ns.adobe.com/flex/spark";
+ <s:Panel title="AnimateTransform Effect Sample (Bounce)" width="100%" height="100%">
- 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:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
- <s:Group left="3">
- <mx:Image y="0" id="myImage"
- source="@Embed(source='assets/ApacheFlexIcon.png')"
- click="bounceEffect.end();bounceEffect.play();"/>
- </s:Group>
+ <s:Label text="Click the Apache Flex logo to bounce it!" />
- <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:Label width="250" verticalAlign="justify"
+ 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:Panel>
+
+ <mx:Image x="20" y="60" id="myImage"
+ source="@Embed(source='assets/ApacheFlexIcon.png')"
+ click="bounceEffect.end();bounceEffect.play()"/>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
index 4ce258e..6833432 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
@@ -36,9 +36,7 @@
</s:Transition>
</s:transitions>
- <s:Panel title="CrossFade Effect Sample with Transition"
- width="100%" height="100%"
- skinClass="skins.TDFPanelSkin">
+ <s:Panel title="CrossFade Effect Sample with Transition" width="100%" height="100%">
<s:HGroup verticalCenter="0" horizontalCenter="0">
<s:VGroup>
@@ -53,12 +51,12 @@
</s:Group>
<s:Button id="playButton" left="264" bottom="174"
label="Cross Fade"
- click="currentState = (currentState == 'flipped') ? 'default' : 'flipped';" y.default="-33"/>
+ 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"
+ <s:Label text="Cross Fade Sample" fontSize="18"/>
+ <s:Label width="250" verticalAlign="justify"
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>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
index 54d62c4..8fcbef3 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
@@ -25,36 +25,33 @@
<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;"/>
+ effectEnd="playButton.enabled=true"/>
</fx:Declarations>
- <s:Panel title="Fade Effect Sample"
- width="100%" height="100%"
- skinClass="skins.TDFPanelSkin">
+ <s:Panel title="Fade Effect Sample" width="100%" height="100%">
- <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:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <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:Label width="180" verticalAlign="justify"
+ text="The Fade effect changes the alpha of a target using the following parameters: alphaFrom, alphaTo. Click 'Fade' to watch the effect."/>
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml
index b40ada6..dfe6b03 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml
@@ -41,59 +41,55 @@
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;"/>
+ 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:Panel title="Move3D Effect Sample" width="100%" height="100%" >
- <s:HGroup left="10" top="5" width="100%" height="100%" horizontalCenter="0">
- <s:VGroup width="40%">
-
-
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:VGroup>
+
<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 verticalAlign="middle">
+ <s:Label text="Move Y By" verticalAlign="bottom"/>
+ <s:TextInput id="yVal" text="40" widthInChars="3"/>
</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
+ <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>
+ <s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+ </s:HGroup>
+ <s:VGroup>
+ <s:Label text="Move3D Effect Sample" fontSize="18"/>
+ <s:Label 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:VGroup>
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
index 3fc6364..4680a79 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
@@ -29,55 +29,48 @@
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;"/>
+ 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:Panel title="Rotate3D Effect Sample" width="100%" height="100%">
- <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:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <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: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: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:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+
+ <s:Label 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:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
index 5d8e7c7..eb265b5 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
@@ -29,59 +29,51 @@
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;"/>
+ 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:Panel title="Scale3D Effect Sample" width="100%" height="100%">
- <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="0.5" widthInChars="3"/>
- </s:HGroup>
- <s:HGroup verticalAlign="middle">
- <s:Label text="Scale Y To" verticalAlign="bottom"/>
- <s:TextInput id="yVal" text="0.5" 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:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:VGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Scale X To" verticalAlign="bottom"/>
+ <s:TextInput id="xVal" text="0.5" widthInChars="3"/>
</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
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Scale Y To" verticalAlign="bottom"/>
+ <s:TextInput id="yVal" text="0.5" 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:BitmapImage id="targetImg" width="50%" height="50%" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+
+ <s:Label 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>
-
-
+reduced by a factor of 2. A scale value of 0.0 is invalid."/>
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/WipeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/WipeExample.mxml
index ac96897..fb0312b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/effects/WipeExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/WipeExample.mxml
@@ -36,7 +36,7 @@
</s:Transition>
</s:transitions>
- <s:Panel title="Wipe Effect Example" skinClass="skins.TDFPanelSkin"
+ <s:Panel title="Wipe Effect Example"
width="100%" height="100%">
<s:HGroup horizontalCenter="0" top="15" >
@@ -52,7 +52,7 @@
</s:Group>
<s:Button
label="Wipe Right"
- click="currentState = (currentState == 'flipped') ? 'default' : 'flipped';" />
+ click="currentState = (currentState == 'flipped') ? 'default' : 'flipped'" />
</s:VGroup>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
index e7557f4..a343bb8 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -28,14 +27,8 @@
]]>
</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">
+ width="100%" height="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
index 075743b..98a3876 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -28,14 +27,8 @@
]]>
</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">
+ width="100%" height="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
index 780d0da..8fc2376 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -34,14 +33,8 @@
]]>
</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">
+ width="100%" height="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
index 609302f..be76c29 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -34,14 +33,8 @@
]]>
</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">
+ width="100%" height="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
index 4ffe293..bc4d275 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
@@ -20,8 +20,7 @@
<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">
+ xmlns:local="*">
<fx:Script>
<![CDATA[
@@ -29,20 +28,13 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <fx:Declarations>
-
+ <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">
+ width="100%" height="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
index eb82cfb..d2359ee 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
@@ -19,23 +19,16 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<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">
+ width="100%" height="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
index 07c52f5..ab6a551 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -44,11 +43,7 @@
}
]]>
</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"/>
@@ -57,17 +52,13 @@
</fx:Declarations>
- <s:Panel title="CurrencyFormatter Example" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="CurrencyFormatter Example" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form color="0x323232">
+ <mx:Form>
<mx:FormItem label="Enter dollar amount:">
<s:TextInput id="priceUS" text="" width="50%"/>
</mx:FormItem>
@@ -77,7 +68,7 @@
</mx:FormItem>
<mx:FormItem>
- <s:Button label="Validate and Format" click="Format();"/>
+ <s:Button label="Validate and Format" click="Format()"/>
</mx:FormItem>
</mx:Form>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
index 5162dd5..84eabf9 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -43,28 +42,19 @@
]]>
</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:Panel title="DateFormatter Example" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form width="100%" color="0x323232">
+ <mx:Form width="100%">
<mx:FormItem label="Enter date (mm/dd/yyyy):" width="100%">
<s:TextInput id="dob" text=""/>
</mx:FormItem>
@@ -74,7 +64,7 @@
</mx:FormItem>
<mx:FormItem>
- <s:Button label="Validate and Format" click="Format();"/>
+ <s:Button label="Validate and Format" click="Format()"/>
</mx:FormItem>
</mx:Form>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
index e0c9127..f304565 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -44,26 +43,18 @@
}
]]>
</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:Panel title="Formatter Example" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form color="0x323232">
+ <mx:Form>
<mx:FormItem label="Enter number - a letter is invalid:">
<s:TextInput id="inputVal" text="" width="75%"/>
</mx:FormItem>
@@ -73,7 +64,7 @@
</mx:FormItem>
<mx:FormItem>
- <s:Button label="Validate and Format" click="Format();"/>
+ <s:Button label="Validate and Format" click="Format()"/>
</mx:FormItem>
</mx:Form>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
index 49f114c..5aef11b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -42,28 +41,20 @@
}
]]>
</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:Panel title="PhoneNumberValidator Example" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form color="0x323232">
+ <mx:Form>
<mx:FormItem label="Enter a 10-digit phone number:">
<s:TextInput id="phone" text="" width="75%"/>
</mx:FormItem>
@@ -73,7 +64,7 @@
</mx:FormItem>
<mx:FormItem>
- <s:Button label="Validate and Format" click="Format();"/>
+ <s:Button label="Validate and Format" click="Format()"/>
</mx:FormItem>
</mx:Form>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
index 084d0aa..1402e0c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -48,31 +47,23 @@
}
]]>
</fx:Script>
-
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
<fx:Declarations>
<mx:SocialSecurityValidator id="scVal" source="{scNum}" property="text"/>
</fx:Declarations>
- <s:Panel title="SwitchSymbolFormatter Example" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="SwitchSymbolFormatter Example" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form color="0x323232" width="100%">
+ <mx:Form width="100%">
<s:Label text="Enter a 9 digit Social Security number with no separator characters:" />
<s:TextInput id="scNum" text="" width="50%" maxChars="9"/>
- <s:Button label="Validate and Format" click="Format();"/>
+ <s:Button label="Validate and Format" click="Format()"/>
<mx:FormItem label="formatted Social Security number:">
<s:Label id="formattedSCNumber" text="" />
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
index 16ab586..4a425cb 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -44,27 +43,19 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
<fx:Declarations>
<mx:ZipCodeFormatter id="zipFormatter" formatString="#####-####"/>
<mx:ZipCodeValidator id="zcVal" source="{zip}" property="text" allowedFormatChars=""/>
</fx:Declarations>
- <s:Panel title="ZipCodeFormatter Example" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="ZipCodeFormatter Example" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form width="100%" color="0x323232">
+ <mx:Form width="100%">
<mx:FormItem label="Enter a 5 or 9 digit U.S. ZIP code:" width="100%">
<s:TextInput id="zip" text=""/>
</mx:FormItem>
@@ -74,7 +65,7 @@
</mx:FormItem>
<mx:FormItem>
- <s:Button label="Validate and Format" click="Format();"/>
+ <s:Button label="Validate and Format" click="Format()"/>
</mx:FormItem>
</mx:Form>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml
index 3cdcd76..bc792d0 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml
@@ -18,13 +18,10 @@
-->
<!-- BitmapGraphicExample.mxml -->
-<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
- width="694" height="277">
- <s:Panel title="BitmapImage Sample"
- width="100%" height="100%"
- horizontalCenter="0" verticalCenter="0" skinClass="skins.TDFPanelSkin">
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
+ <s:Panel title="BitmapImage Sample" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout paddingLeft="15" paddingRight="15" paddingTop="15" paddingBottom="15"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<s:VGroup>
<s:ComboBox id="fillModes" selectedItem="repeat">
@@ -66,7 +63,7 @@
</s:Graphic>
- <s:Label color="0x323232" width="200" text="A BitmapImage element defines a rectangular region in its parent element's coordinate space, filled with bitmap data drawn from a source file."/>
+ <s:Label width="200" text="A BitmapImage element defines a rectangular region in its parent element's coordinate space, filled with bitmap data drawn from a source file."/>
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml
index 3e123ea..5705448 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml
@@ -23,7 +23,7 @@
<s:Panel width="100%" height="100%"
title="DropShadows with MXML Graphics Example"
- skinClass="skins.TDFPanelSkin" x="0">
+ x="0">
<s:Group horizontalCenter="0" y="5" width="117">
<s:Graphic id="ellipse1">
@@ -54,7 +54,7 @@
</s:Graphic>
</s:Group>
- <s:Label width="250" verticalAlign="justify" color="#323232" x="10" y="30"
+ <s:Label width="250" verticalAlign="justify" x="10" y="30"
text="The DropShadowFilter class lets you add a drop shadow to display
objects. The shadow algorithm is based on the same box filter that the blur filter uses. You have
several options for the style of the drop shadow, including inner or outer shadow and knockout mode.
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml
index 0e89a7b..275ac4c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml
@@ -21,7 +21,7 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:Panel title="Ellipse Graphic Sample" skinClass="skins.TDFPanelSkin"
+ <s:Panel title="Ellipse Graphic Sample"
width="100%" height="100%">
<s:Graphic horizontalCenter="0" verticalCenter="0">
@@ -40,7 +40,7 @@
</s:fill>
</s:Ellipse>
</s:Graphic>
- <s:Label right="25" top="10" width="270" color="0x323232" text="The Ellipse class is a filled graphic element that draws an ellipse. Graphic
+ <s:Label right="25" top="10" width="270" text="The Ellipse class is a filled graphic element that draws an ellipse. Graphic
objects are placed in a Graphic tag which defines the root of an FXG document."/>
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml
index 19ce21f..83764f4 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml
@@ -42,16 +42,22 @@
b="0.34202014332"
c="0.34202014332"
d="0.939692620786"
- tx="100"
- ty="310"
+ tx="50"
+ ty="210"
/>
</fx:Declarations>
- <s:Label text="An Ellipse Using a Transform for Rotation" fontWeight="bold" fontSize="14" horizontalCenter="0"
- y="20" />
-
- <s:Label id="descriptionText" horizontalCenter="0" y="45" width="300"/>
- <s:Ellipse id="ellipse1" width="60" height="70" horizontalCenter="0" y="90">
+ <s:Panel title="Ellipse Transform Sample" width="100%" height="100%">
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Label text="An Ellipse Using a Transform for Rotation" />
+
+ <s:Label id="descriptionText" width="300"/>
+ <s:Button label="Apply Transform" click="addMatrix()" x="40" y="330" />
+ </s:Panel>
+ <s:Ellipse id="ellipse1" width="60" height="70" x="40" y="120">
<s:fill>
<s:LinearGradient>
<s:GradientEntry color="#00FF00" alpha="1" ratio="0"/>
@@ -62,5 +68,4 @@
<s:SolidColorStroke color="0x666666" weight="1"/>
</s:stroke>
</s:Ellipse>
- <s:Button label="Apply Transform" click="addMatrix()" x="40" y="330" />
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml
index 9d5368a..a7bdb1c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml
@@ -22,7 +22,7 @@
xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:Panel title="Line Graphic Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+ <s:Panel title="Line Graphic Sample" width="100%" height="100%" >
<s:Group left="133" top="100">
<s:Line xFrom="0" xTo="0" yFrom="0" yTo="100">
@@ -90,7 +90,7 @@
</s:stroke>
</s:Line>
</s:Group>
- <s:Label color="0x323232" right="20" top="15" width="250" text="The Line class is a graphic element that draws a line between two points.
+ <s:Label right="20" top="15" width="250" text="The Line class is a graphic element that draws a line between two points.
The default stroke for a line is undefined; therefore, if you do not specify the stroke, the line is invisible."/>
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
index 42e7db7..7fb10f2 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
@@ -28,10 +28,10 @@
<s:Panel title="LinearGradient Control"
width="100%" height="100%"
- skinClass="skins.TDFPanelSkin">
+ >
<s:HGroup horizontalCenter="0" top="10">
- <s:Label verticalAlign="justify" color="#323232" x="10" y="30" width="200"
+ <s:Label verticalAlign="justify" x="10" y="30" width="200"
text="The LinearGradient class lets you specify the fill of a graphical element, where a gradient specifies a gradual color transition in the fill color. You add a series of GradientEntry objects to the LinearGradient object's entries Array to define the colors that make up the gradient fill."/>
<s:Rect id="rect1" height="150" width="160" >
<s:fill>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml
index a131ac2..ace6e5a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml
@@ -20,13 +20,8 @@
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
- <fx:Script>
- <![CDATA[
- import skins.TDFPanelSkin;
- ]]>
- </fx:Script>
- <s:Panel title="Rect Graphic Sample" skinClass="skins.TDFPanelSkin"
+ <s:Panel title="Rect Graphic Sample"
width="100%" height="100%">
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml
index f7aacd3..0475df6 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml
@@ -21,7 +21,7 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:Panel title="RichText Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+ <s:Panel title="RichText Sample" width="100%" height="100%" >
<s:layout>
<s:HorizontalLayout paddingLeft="8" paddingRight="8" paddingTop="8"/>
</s:layout>
@@ -36,7 +36,7 @@
</s:RichText>
<s:Rect width="100%" height="100%">
<s:stroke>
- <s:SolidColorStroke color="blue"/>
+ <s:SolidColorStroke/>
</s:stroke>
</s:Rect>
</s:Group>
@@ -47,12 +47,12 @@
</s:RichText>
<s:Rect width="100%" height="100%">
<s:stroke>
- <s:SolidColorStroke color="blue"/>
+ <s:SolidColorStroke/>
</s:stroke>
</s:Rect>
</s:Group>
</s:Group>
- <s:Label width="270" color="0x323232" text="RichText is a low-level UIComponent that can display one or more lines of richly-formatted text and embedded images. For performance reasons, it does not support scrolling, selection, editing, clickable hyperlinks, or images loaded from URLs. If you need those capabilities, see the RichEditableText class."/>
+ <s:Label width="270" text="RichText is a low-level UIComponent that can display one or more lines of richly-formatted text and embedded images. For performance reasons, it does not support scrolling, selection, editing, clickable hyperlinks, or images loaded from URLs. If you need those capabilities, see the RichEditableText class."/>
</s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
index 3d86c9c..c82cfa6 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
@@ -23,16 +23,16 @@
xmlns:fxg="*">
- <s:Panel width="100%" height="100%"
- title="Static FXG Sample"
- skinClass="skins.TDFPanelSkin">
- <s:Label verticalAlign="justify" color="#323232" x="10" y="30" width="200"
+ <s:Panel title="Static FXG Sample" width="100%" height="100%">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Label verticalAlign="justify" width="200"
text="You can use a static file of fxg within your MXML. You include the inline
component as shown here."/>
-
- <fxg:OrangeCrayonStar id="crayonStar" right="160"/>
- <s:VGroup right="180" bottom="20">
+ <s:VGroup>
<s:VGroup bottom="100">
<s:HSlider id="star_width" maximum="400" change="crayonStar.width=star_width.value"
horizontalCenter="-90" y="250" />
@@ -42,9 +42,10 @@
<s:HSlider id="star_height" maximum="400" change="crayonStar.height=star_height.value"
horizontalCenter="90" y="250" />
<s:Label horizontalCenter="90" y="269" text="height"/>
- </s:VGroup>
-
+ </s:VGroup>
</s:VGroup>
+
+ <fxg:OrangeCrayonStar id="crayonStar" />
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
index 815f269..81e20fe 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
@@ -21,24 +21,6 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%" creationComplete="compareStrings()">
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Label {
- color: #FFFFFF;
- font-weight: bold;
- }
- #titleL {
- font-size: 20;
- }
- s|ComboBox {
- alternating-item-colors: #424242;
- }
- s|Form {
- background-color: #424242;
- }
-
- </fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
@@ -64,37 +46,41 @@
}
]]>
</fx:Script>
+
<fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
<s:SortingCollator id="sortCollator" locale="{localeCB.selectedItem}"/>
</fx:Declarations>
- <s:Scroller width="100%" height="100%">
- <s:Group>
- <s:Form>
- <s:Label id="titleL" text="Spark Collator"/>
- <s:Label text="Compare two strings by using SortingCollator"/>
- <s:Spacer height="15"/>
-
- <s:FormItem label="Locales:" toolTip="Select a locale for the collator instance.">
- <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="5" change="compareStrings()"/>
- </s:FormItem>
- <s:FormItem label="Collator Options:" toolTip="Set properties for the collator instance.">
- <s:HGroup>
- <s:CheckBox id="ignoreCaseCB" label="ignoreCase" change="sortCollator.ignoreCase = ignoreCaseCB.selected;compareStrings()"/>
- <s:CheckBox id="ignDiacriticsCB" label="ignoreDiacritics" change="sortCollator.ignoreDiacritics = ignDiacriticsCB.selected;compareStrings()"/>
- <s:CheckBox id="ignSymbolsCB" label="ignoreSymbols" change="sortCollator.ignoreSymbols = ignSymbolsCB.selected;compareStrings()"/>
- <s:CheckBox id="ignKanaTypeCB" label="ignoreKanaType" change="sortCollator.ignoreKanaType = ignKanaTypeCB.selected;compareStrings()"/>
- <s:CheckBox id="ignCharacterWidthCB" label="ignoreCharacterWidth" change="sortCollator.ignoreCharacterWidth = ignCharacterWidthCB.selected;compareStrings()"/>
- </s:HGroup>
- </s:FormItem>
- <s:FormItem label="Strings:" toolTip="Input two strings and find out their compare result.">
- <s:HGroup>
- <s:TextInput id="firstTI" text="coté" change="compareStrings()"/>
- <s:Label id="operatorL" text=" " fontSize="15"/>
- <s:TextInput id="secondTI" text="côte" change="compareStrings()"/>
- </s:HGroup>
- </s:FormItem>
- </s:Form>
- </s:Group>
- </s:Scroller>
+
+ <s:Panel title="Spark Collator" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form height="100%" width="100%">
+ <s:Label text="Compare two strings by using SortingCollator"/>
+ <s:Spacer height="15"/>
+
+ <s:FormItem label="Locales:" toolTip="Select a locale for the collator instance.">
+ <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="5" change="compareStrings()"/>
+ </s:FormItem>
+ <s:FormItem label="Collator Options:" toolTip="Set properties for the collator instance.">
+ <s:HGroup>
+ <s:CheckBox id="ignoreCaseCB" label="ignoreCase" change="sortCollator.ignoreCase = ignoreCaseCB.selected;compareStrings()"/>
+ <s:CheckBox id="ignDiacriticsCB" label="ignoreDiacritics" change="sortCollator.ignoreDiacritics = ignDiacriticsCB.selected;compareStrings()"/>
+ <s:CheckBox id="ignSymbolsCB" label="ignoreSymbols" change="sortCollator.ignoreSymbols = ignSymbolsCB.selected;compareStrings()"/>
+ <s:CheckBox id="ignKanaTypeCB" label="ignoreKanaType" change="sortCollator.ignoreKanaType = ignKanaTypeCB.selected;compareStrings()"/>
+ <s:CheckBox id="ignCharacterWidthCB" label="ignoreCharacterWidth" change="sortCollator.ignoreCharacterWidth = ignCharacterWidthCB.selected;compareStrings()"/>
+ </s:HGroup>
+ </s:FormItem>
+ <s:FormItem label="Strings:" toolTip="Input two strings and find out their compare result.">
+ <s:HGroup>
+ <s:TextInput id="firstTI" text="coté" change="compareStrings()"/>
+ <s:Label id="operatorL" text=" " fontSize="15"/>
+ <s:TextInput id="secondTI" text="côte" change="compareStrings()"/>
+ </s:HGroup>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
index 96af06a..fd132c9 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
@@ -21,28 +21,6 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%" creationComplete="matchRB_clickHandler()">
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Label {
- color: #FFFFFF;
- font-weight: bold;
- }
- #titleL {
- font-size: 20;
- }
- s|ComboBox {
- alternating-item-colors: #424242;
- }
-
- s|Form {
- background-color: #424242;
- }
-
- s|List {
- alternating-item-colors: #424242;
- }
- </fx:Style>
<fx:Script>
<![CDATA[
@@ -114,52 +92,51 @@
}
]]>
</fx:Script>
+
<fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
<s:SortingCollator id="sortingCollator"/>
<s:MatchingCollator id="matchingCollator"/>
</fx:Declarations>
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
- <s:Scroller id="scroller" width="100%" height="100%">
- <s:Group id="myGroup">
- <s:Form id="myForm">
- <s:Label id="titleL" text="Spark Collator"/>
- <s:Label text="Customize Collator options and find out the string sorting results: "/>
- <s:Spacer height="15"/>
-
- <s:FormItem label="Collator Type:" toolTip="Please select a Collator type first!">
- <s:HGroup>
- <s:RadioButton id="sortRB" groupName="collatorType" label="SortingCollator" click="sortRB_clickHandler()"/>
- <s:RadioButton id="matchRB" groupName="collatorType" label="MatchingCollator" selected="true" click="matchRB_clickHandler()"/>
- </s:HGroup>
- </s:FormItem>
- <s:FormItem label="Locale:">
- <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"
- change="_collatorInstance.setStyle('locale',localeCB.selectedItem); sortStr()"/>
- </s:FormItem>
- <s:FormItem label="Collator Options:" toolTip="Customize below options to see the sorting result.">
- <s:CheckBox id="ignCaseCB" label="ignoreCase" selected="{_collatorInstance.ignoreCase}"
- change="_collatorInstance.ignoreCase = ignCaseCB.selected; sortStr()"/>
- <s:CheckBox id="ignDiacriticsCB" label="ignoreDiacritics" selected="{_collatorInstance.ignoreDiacritics}"
- change="_collatorInstance.ignoreDiacritics = ignDiacriticsCB.selected; sortStr()"/>
- <s:CheckBox id="ignSymbolsCB" label="ignoreSymbols" selected="{_collatorInstance.ignoreSymbols}"
- change="_collatorInstance.ignoreSymbols = ignSymbolsCB.selected; sortStr()"/>
- <s:CheckBox id="ignKanaTypeCB" label="ignoreKanaType" selected="{_collatorInstance.ignoreKanaType}"
- change="_collatorInstance.ignoreKanaType = ignKanaTypeCB.selected; sortStr()"/>
- <s:CheckBox id="ignCharacterWidthCB" label="ignoreCharacterWidth" selected="{_collatorInstance.ignoreCharacterWidth}"
- change="_collatorInstance.ignoreCharacterWidth = ignCharacterWidthCB.selected; sortStr()"/>
- </s:FormItem>
- <s:Label text="============================================================================"/>
+ <s:Panel title="Spark Collator" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form id="myForm" height="100%" width="100%">
+ <s:Label text="Customize Collator options and find out the string sorting results: "/>
+ <s:Spacer height="15"/>
+
+ <s:FormItem label="Collator Type:" toolTip="Please select a Collator type first!">
<s:HGroup>
- <s:FormItem label="Sorting Result:">
- <s:List id="sCltResult" dataProvider="{_resultArrColl}" toolTip="Strings that are equal will show within one line."/>
- </s:FormItem>
+ <s:RadioButton id="sortRB" groupName="collatorType" label="SortingCollator" click="sortRB_clickHandler()"/>
+ <s:RadioButton id="matchRB" groupName="collatorType" label="MatchingCollator" selected="true" click="matchRB_clickHandler()"/>
</s:HGroup>
- </s:Form>
- </s:Group>
- </s:Scroller>
-
+ </s:FormItem>
+ <s:FormItem label="Locale:">
+ <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"
+ change="_collatorInstance.setStyle('locale',localeCB.selectedItem); sortStr()"/>
+ </s:FormItem>
+ <s:FormItem label="Collator Options:" toolTip="Customize below options to see the sorting result.">
+ <s:CheckBox id="ignCaseCB" label="ignoreCase" selected="{_collatorInstance.ignoreCase}"
+ change="_collatorInstance.ignoreCase = ignCaseCB.selected; sortStr()"/>
+ <s:CheckBox id="ignDiacriticsCB" label="ignoreDiacritics" selected="{_collatorInstance.ignoreDiacritics}"
+ change="_collatorInstance.ignoreDiacritics = ignDiacriticsCB.selected; sortStr()"/>
+ <s:CheckBox id="ignSymbolsCB" label="ignoreSymbols" selected="{_collatorInstance.ignoreSymbols}"
+ change="_collatorInstance.ignoreSymbols = ignSymbolsCB.selected; sortStr()"/>
+ <s:CheckBox id="ignKanaTypeCB" label="ignoreKanaType" selected="{_collatorInstance.ignoreKanaType}"
+ change="_collatorInstance.ignoreKanaType = ignKanaTypeCB.selected; sortStr()"/>
+ <s:CheckBox id="ignCharacterWidthCB" label="ignoreCharacterWidth" selected="{_collatorInstance.ignoreCharacterWidth}"
+ change="_collatorInstance.ignoreCharacterWidth = ignCharacterWidthCB.selected; sortStr()"/>
+ </s:FormItem>
+ <s:Label text="============================================================================"/>
+ <s:HGroup>
+ <s:FormItem label="Sorting Result:">
+ <s:List id="sCltResult" dataProvider="{_resultArrColl}" toolTip="Strings that are equal will show within one line."/>
+ </s:FormItem>
+ </s:HGroup>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
index 1c24727..58395c8 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
@@ -21,24 +21,6 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Label {
- color: #FFFFFF;
- font-weight: bold;
- }
- #titleL {
- font-size: 20;
- }
- s|ComboBox {
- alternating-item-colors: #424242;
- }
-
- s|Form {
- background-color: #424242;
- }
- </fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
@@ -46,26 +28,30 @@
private var _locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN','fr-FR']);
]]>
</fx:Script>
+
<fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
<s:CurrencyFormatter id="cf"/>
</fx:Declarations>
- <s:Scroller width="100%" height="100%">
- <s:Group>
- <s:Form>
- <s:Label id="titleL" text="Spark CurrencyFormatter"/>
- <s:Label text="Format a currency number by using spark CurrencyFormatter"/>
- <s:Spacer height="15"/>
- <s:FormItem label="Locales">
- <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" updateComplete="cf.setStyle('locale',localeCB.selectedItem)"/>
- </s:FormItem>
- <s:FormItem label="Please enter a currency number: ">
- <s:TextInput id="inputTI" text="12345"/>
- </s:FormItem>
- <s:FormItem label="Format result: ">
- <s:Label id="resultL" text="{cf.format(inputTI.text)}"/>
- </s:FormItem>
- </s:Form>
- </s:Group>
- </s:Scroller>
+
+ <s:Panel title="Spark CurrencyFormatter" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form height="100%" width="100%">
+ <s:Label text="Format a currency number by using spark CurrencyFormatter"/>
+ <s:Spacer height="15"/>
+ <s:FormItem label="Locales">
+ <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" updateComplete="cf.setStyle('locale',localeCB.selectedItem)"/>
+ </s:FormItem>
+ <s:FormItem label="Please enter a currency number: ">
+ <s:TextInput id="inputTI" text="12345"/>
+ </s:FormItem>
+ <s:FormItem label="Format result: ">
+ <s:Label id="resultL" text="{cf.format(inputTI.text)}"/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml
index b198370..b46ba3b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml
@@ -21,24 +21,6 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Label {
- color: #FFFFFF;
- font-weight: bold;
- }
- #titleL {
- font-size: 20;
- }
- s|ComboBox {
- alternating-item-colors: #424242;
- }
-
- s|Form {
- background-color: #424242;
- }
- </fx:Style>
<fx:Script>
<![CDATA[
@@ -59,54 +41,54 @@
]]>
</fx:Script>
+
<fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
<s:CurrencyFormatter id="cf" locale="{localeCB.selectedItem}"/>
<s:CurrencyFormatter id="cf_default" locale="{localeCB.selectedItem}"/>
</fx:Declarations>
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
- <s:Scroller id="scroller" width="100%" height="100%">
- <s:Group>
- <s:Form>
- <s:Label id="titleL" text="Spark CurrencyFormatter"/>
- <s:Label text="Select a locale to see the property value and formatted currency: "/>
- <s:Spacer height="15"/>
- <s:FormItem label="Locale:">
- <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="formatCurr()"/>
- </s:FormItem>
- <s:FormItem label="Input a number to format:">
- <s:TextInput id="inputTI" text="12345" change="formatCurr()"/>
- </s:FormItem>
- <s:FormItem label="Fraction Digits: (default: {cf_default.fractionalDigits})">
- <s:NumericStepper id="fdNS" maximum="10" minimum="0" change="cf.fractionalDigits = fdNS.value;formatCurr()"/>
- </s:FormItem>
- <s:FormItem label="Decimal Separator: (default: {cf_default.decimalSeparator})">
- <s:TextInput id="dsTI" change="cf.decimalSeparator = dsTI.text;formatCurr()"/>
- </s:FormItem>
- <s:FormItem label="Grouping Pattern: (default: {cf_default.groupingPattern})">
- <s:ComboBox id="gpCB" dataProvider="{groupPatternArrColl}" change="cf.groupingPattern = gpCB.selectedItem;formatCurr()"/>
- </s:FormItem>
- <s:FormItem label="Grouping Separator: (default: {cf_default.groupingSeparator})">
- <s:TextInput id="gsTI" change="cf.groupingSeparator = gsTI.text;formatCurr()"/>
- </s:FormItem>
- <s:FormItem label="Negative Currency Format: (default: {cf_default.negativeCurrencyFormat})">
- <s:NumericStepper id="ncfNS" minimum="0" maximum="15" change="cf.negativeCurrencyFormat = ncfNS.value;formatCurr()"/>
- </s:FormItem>
- <s:FormItem label="Positive Currency Format: (default: {cf_default.positiveCurrencyFormat})">
- <s:NumericStepper id="pcfNS" middleClick="0" maximum="3" change="cf.positiveCurrencyFormat = pcfNS.value;formatCurr()"/>
- </s:FormItem>
- <s:Label text="==================================================================="/>
- <s:FormItem label="Formatted Currency with ISO code is:">
- <s:Label id="resultL"/>
- </s:FormItem>
- <s:FormItem label="Formatted Currency with currency symbol is:">
- <s:Label id="resultSymbolL"/>
- </s:FormItem>
- </s:Form>
- </s:Group>
- </s:Scroller>
-
-
+
+
+ <s:Panel title="Spark CurrencyFormatter" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form height="100%" width="100%">
+ <s:Label text="Select a locale to see the property value and formatted currency: "/>
+ <s:Spacer height="15"/>
+ <s:FormItem label="Locale:">
+ <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="formatCurr()"/>
+ </s:FormItem>
+ <s:FormItem label="Input a number to format:">
+ <s:TextInput id="inputTI" text="12345" change="formatCurr()"/>
+ </s:FormItem>
+ <s:FormItem label="Fraction Digits: (default: {cf_default.fractionalDigits})">
+ <s:NumericStepper id="fdNS" maximum="10" minimum="0" change="cf.fractionalDigits = fdNS.value;formatCurr()"/>
+ </s:FormItem>
+ <s:FormItem label="Decimal Separator: (default: {cf_default.decimalSeparator})">
+ <s:TextInput id="dsTI" change="cf.decimalSeparator = dsTI.text;formatCurr()"/>
+ </s:FormItem>
+ <s:FormItem label="Grouping Pattern: (default: {cf_default.groupingPattern})">
+ <s:ComboBox id="gpCB" dataProvider="{groupPatternArrColl}" change="cf.groupingPattern = gpCB.selectedItem;formatCurr()"/>
+ </s:FormItem>
+ <s:FormItem label="Grouping Separator: (default: {cf_default.groupingSeparator})">
+ <s:TextInput id="gsTI" change="cf.groupingSeparator = gsTI.text;formatCurr()"/>
+ </s:FormItem>
+ <s:FormItem label="Negative Currency Format: (default: {cf_default.negativeCurrencyFormat})">
+ <s:NumericStepper id="ncfNS" minimum="0" maximum="15" change="cf.negativeCurrencyFormat = ncfNS.value;formatCurr()"/>
+ </s:FormItem>
+ <s:FormItem label="Positive Currency Format: (default: {cf_default.positiveCurrencyFormat})">
+ <s:NumericStepper id="pcfNS" middleClick="0" maximum="3" change="cf.positiveCurrencyFormat = pcfNS.value;formatCurr()"/>
+ </s:FormItem>
+ <s:Label text="==================================================================="/>
+ <s:FormItem label="Formatted Currency with ISO code is:">
+ <s:Label id="resultL"/>
+ </s:FormItem>
+ <s:FormItem label="Formatted Currency with currency symbol is:">
+ <s:Label id="resultSymbolL"/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml
index 05f17de..28a20a3 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml
@@ -21,23 +21,6 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Label {
- color: #FFFFFF;
- font-weight: bold;
- }
- #titleL {
- font-size: 20;
- }
- s|ComboBox {
- alternating-item-colors: #424242;
- }
- s|Form {
- background-color: #424242;
- }
- </fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
@@ -45,27 +28,31 @@
private var _locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','zh-CN','fr-FR']);
]]>
</fx:Script>
+
<fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
<s:CurrencyValidator id="cv" source="{inputTI}" property="text"
maxValue="100" domain="int" locale="{localeCB.selectedItem}"/>
</fx:Declarations>
- <s:Scroller width="100%" height="100%">
- <s:Group>
- <s:Form>
- <s:Label id="titleL" text="Spark CurrencyValidator"/>
- <s:Label text="Validate a currency number by using Spark CurrencyValidator"/>
- <s:Spacer height="15"/>
- <s:FormItem label="Locales:">
- <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
- </s:FormItem>
- <s:FormItem label="Enter a currency number to validate: "
- toolTip="The number should be an integer and less than 100">
- <s:TextInput id="inputTI" text="{cv.currencySymbol}"
- toolTip="It shows the currency symbol of current locale already, please continue enter numbers to validate.
- Make focus out of the text input to validate the number."/>
- </s:FormItem>
- </s:Form>
- </s:Group>
- </s:Scroller>
+
+ <s:Panel title="Spark CurrencyValidator" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form height="100%" width="100%">
+ <s:Label text="Validate a currency number by using Spark CurrencyValidator"/>
+ <s:Spacer height="15"/>
+ <s:FormItem label="Locales:">
+ <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
+ </s:FormItem>
+ <s:FormItem label="Enter a currency number to validate: "
+ toolTip="The number should be an integer and less than 100">
+ <s:TextInput id="inputTI" text="{cv.currencySymbol}"
+ toolTip="It shows the currency symbol of current locale already, please continue enter numbers to validate.
+ Make focus out of the text input to validate the number."/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml
index c988d93..734c8fa 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml
@@ -21,24 +21,6 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Label {
- color: #FFFFFF;
- font-weight: bold;
- }
- #titleL {
- font-size: 20;
- }
- s|ComboBox {
- alternating-item-colors: #424242;
- }
-
- s|Form {
- background-color: #424242;
- }
- </fx:Style>
<fx:Script>
<![CDATA[
@@ -64,9 +46,8 @@
]]>
</fx:Script>
+
<fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
-
<!--Click Tab key to validate the number-->
<s:CurrencyValidator id="cv1" source="{currTI1}" property="text"/>
<s:CurrencyValidator id="cv2" source="{currTI2}" property="text"/>
@@ -74,52 +55,51 @@
<s:CurrencyValidator id="cv4" source="{currTI4}" property="text" minValue="20" maxValue="200"/>
<s:CurrencyValidator id="cv5" source="{currTI5}" property="text" domain="int"/>
</fx:Declarations>
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
- <s:Scroller id="scroller" width="100%" height="100%">
- <s:Group>
- <s:Form>
- <s:Label id="titleL" text="Spark CurrencyValidator"/>
- <s:Label text="Create some criterions and validate the input number: "/>
- <s:Spacer height="15"/>
- <s:FormItem label="Locale:">
- <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" updateComplete="localeCB_updateCompleteHandler(event)"/>
- </s:FormItem>
- <s:Label text="============================================================================"/>
- <s:FormItem label="Currency symbol and ISO code based on current locale are:">
- <s:HGroup>
- <s:Label id="symbolL" text="Currency symbol: {cv1.currencySymbol}"/>
- <s:Label id="isoL" text="Currency ISO code: {cv1.currencyISOCode}"/>
- </s:HGroup>
- </s:FormItem>
- <s:FormItem label="Please enter an integer currency number with currency symbol:">
- <s:TextInput id="currTI1" text="{cv1.currencySymbol}"
- toolTip="Here is the correct currency symbol of current locale, please continue enter numbers to validate"/>
- </s:FormItem>
- <s:FormItem label="Please enter an integer currency number with currency ISO code:">
- <s:TextInput id="currTI2" text="{cv1.currencyISOCode}"
- toolTip="Here is the correct currency ISO code of current locale, please continue enter numbers to validate"/>
- </s:FormItem>
- <s:FormItem label="Please enter a currency number with at most two fractional digits:">
- <s:TextInput id="currTI3"
- toolTip="decimal separator of current locale is {cv3.decimalSeparator}"/>
- </s:FormItem>
- <s:FormItem label="Please enter a currency number between 20 and 200:">
- <s:TextInput id="currTI4"/>
- </s:FormItem>
- <s:FormItem label="Please enter an integer currency number:">
- <s:TextInput id="currTI5"/>
- </s:FormItem>
- <s:FormItem label="Click the button to validate all inputted currency number:">
- <s:HGroup>
- <s:Button label="Validate All" click="button1_clickHandler(event)"/>
- <s:Label id="resultL"/>
- </s:HGroup>
- </s:FormItem>
- </s:Form>
- </s:Group>
- </s:Scroller>
-
+ <s:Panel title="Spark CurrencyValidator" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form height="100%" width="100%">
+ <s:Label text="Create some criterions and validate the input number: "/>
+ <s:Spacer height="15"/>
+ <s:FormItem label="Locale:">
+ <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" updateComplete="localeCB_updateCompleteHandler(event)"/>
+ </s:FormItem>
+ <s:Label text="============================================================================"/>
+ <s:FormItem label="Currency symbol and ISO code based on current locale are:">
+ <s:HGroup>
+ <s:Label id="symbolL" text="Currency symbol: {cv1.currencySymbol}"/>
+ <s:Label id="isoL" text="Currency ISO code: {cv1.currencyISOCode}"/>
+ </s:HGroup>
+ </s:FormItem>
+ <s:FormItem label="Please enter an integer currency number with currency symbol:">
+ <s:TextInput id="currTI1" text="{cv1.currencySymbol}"
+ toolTip="Here is the correct currency symbol of current locale, please continue enter numbers to validate"/>
+ </s:FormItem>
+ <s:FormItem label="Please enter an integer currency number with currency ISO code:">
+ <s:TextInput id="currTI2" text="{cv1.currencyISOCode}"
+ toolTip="Here is the correct currency ISO code of current locale, please continue enter numbers to validate"/>
+ </s:FormItem>
+ <s:FormItem label="Please enter a currency number with at most two fractional digits:">
+ <s:TextInput id="currTI3"
+ toolTip="decimal separator of current locale is {cv3.decimalSeparator}"/>
+ </s:FormItem>
+ <s:FormItem label="Please enter a currency number between 20 and 200:">
+ <s:TextInput id="currTI4"/>
+ </s:FormItem>
+ <s:FormItem label="Please enter an integer currency number:">
+ <s:TextInput id="currTI5"/>
+ </s:FormItem>
+ <s:FormItem label="Click the button to validate all inputted currency number:">
+ <s:HGroup>
+ <s:Button label="Validate All" click="button1_clickHandler(event)"/>
+ <s:Label id="resultL"/>
+ </s:HGroup>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml
index 4761dd1..a00b586 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml
@@ -21,24 +21,6 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Label {
- color: #FFFFFF;
- font-weight: bold;
- }
- #titleL {
- font-size: 20;
- }
- s|ComboBox {
- alternating-item-colors: #424242;
- }
-
- s|Form {
- background-color: #424242;
- }
- </fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
@@ -47,27 +29,31 @@
private var locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN']);
]]>
</fx:Script>
+
<fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
<s:DateTimeFormatter id="dtf" locale="{localeCB.selectedItem}"/>
</fx:Declarations>
- <s:Scroller width="100%" height="100%">
- <s:Group>
- <s:Form>
- <s:Label id="titleL" text="Spark DateTimeFormatter"/>
- <s:Label text="Format a date by using Spark DateTimeFormatter: "/>
- <s:Spacer height="15"/>
-
- <s:FormItem label="Locales:">
- <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
- </s:FormItem>
- <s:FormItem label="Choose a date:">
- <mx:DateChooser id="dateC" showToday="false"/>
- </s:FormItem>
- <s:FormItem label="Format result is:">
- <s:Label id="resultL" text="{dtf.format(dateC.selectedDate)}"/>
- </s:FormItem>
- </s:Form>
- </s:Group>
- </s:Scroller>
+
+ <s:Panel title="Spark DateTimeFormatter" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form height="100%" width="100%">
+ <s:Label text="Format a date by using Spark DateTimeFormatter: "/>
+ <s:Spacer height="15"/>
+
+ <s:FormItem label="Locales:">
+ <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
+ </s:FormItem>
+ <s:FormItem label="Choose a date:">
+ <mx:DateChooser id="dateC" showToday="false"/>
+ </s:FormItem>
+ <s:FormItem label="Format result is:">
+ <s:Label id="resultL" text="{dtf.format(dateC.selectedDate)}"/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml
index 15733c4..c205ce2 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml
@@ -21,25 +21,7 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Label {
- color: #FFFFFF;
- font-weight: bold;
- }
- #titleL {
- font-size: 20;
- }
- s|ComboBox {
- alternating-item-colors: #424242;
- }
-
- s|Form {
- background-color: #424242;
- }
- </fx:Style>
-
+
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
@@ -57,45 +39,48 @@
}
]]>
</fx:Script>
+
<fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
<s:DateTimeFormatter id="dtf"/>
</fx:Declarations>
+
<s:layout>
<s:VerticalLayout/>
</s:layout>
- <s:Scroller id="scroller" width="100%" height="100%">
- <s:Group>
- <s:Form>
- <s:Label id="titleL" text="Spark DateTimeFormatter"/>
- <s:Label text="Select a locale to see the formatted date, weekday names and month names: "/>
- <s:Spacer height="15"/>
-
- <s:FormItem label="Locale: ">
- <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="dtf.setStyle('locale',localeCB.selectedItem)"/>
- </s:FormItem>
- <s:FormItem label="Please select the format of date:">
- <s:ComboBox id="dtpCB" dataProvider="{dateTimePatternAryColl}" selectedIndex="0" updateComplete="dtf.dateTimePattern=dtpCB.selectedItem"/>
- </s:FormItem>
- <s:FormItem label="Please select a date to format:">
- <mx:DateField id="dateField"/>
- </s:FormItem>
- <s:FormItem label="The Weekday Names are:">
- <s:Label text="{dtf.getWeekdayNames()}"/>
- </s:FormItem>
- <s:FormItem label="The Month Names are:">
- <s:Label text="{dtf.getMonthNames()}"/>
- </s:FormItem>
- <s:Label text=" ==========================================================================="/>
- <s:FormItem label="The formatted result is:">
- <s:Label id="resultL"/>
- </s:FormItem>
- <s:FormItem>
- <s:Button id="bt" label="Format Date" click="formatDate()"/>
- </s:FormItem>
- </s:Form>
- </s:Group>
- </s:Scroller>
-
-
+
+ <s:Panel title="Spark DateTimeFormatter" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form height="100%" width="100%">
+ <s:Label text="Select a locale to see the formatted date, weekday names and month names: "/>
+ <s:Spacer height="15"/>
+
+ <s:FormItem label="Locale: ">
+ <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="dtf.setStyle('locale',localeCB.selectedItem)"/>
+ </s:FormItem>
+ <s:FormItem label="Please select the format of date:">
+ <s:ComboBox id="dtpCB" dataProvider="{dateTimePatternAryColl}" selectedIndex="0" updateComplete="dtf.dateTimePattern=dtpCB.selectedItem"/>
+ </s:FormItem>
+ <s:FormItem label="Please select a date to format:">
+ <mx:DateField id="dateField"/>
+ </s:FormItem>
+ <s:FormItem label="The Weekday Names are:">
+ <s:Label text="{dtf.getWeekdayNames()}"/>
+ </s:FormItem>
+ <s:FormItem label="The Month Names are:">
+ <s:Label text="{dtf.getMonthNames()}"/>
+ </s:FormItem>
+ <s:Label text=" ==========================================================================="/>
+ <s:FormItem label="The formatted result is:">
+ <s:Label id="resultL"/>
+ </s:FormItem>
+ <s:FormItem>
+ <s:Button id="bt" label="Format Date" click="formatDate()"/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml
index 7b92c15..6f40ffd 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml
@@ -20,39 +20,41 @@
<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"
- backgroundColor="haloSilver" fontSize="18" locale="{c.selectedItem}">
-
- <s:layout>
- <s:VerticalLayout horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
- gap="8"/>
- </s:layout>
-
+ locale="{c.selectedItem}">
+
<fx:Declarations>
<s:CurrencyFormatter id="cf" useCurrencySymbol="true"/>
<s:DateTimeFormatter id="df"/>
</fx:Declarations>
- <s:Label text="Select a locale to see the formatted currency and date:"/>
- <s:ComboBox id="c" selectedItem="en-US...">
- <s:dataProvider>
- <s:ArrayList>
- <fx:String>de-DE</fx:String>
- <fx:String>en-US</fx:String>
- <fx:String>es-ES</fx:String>
- <fx:String>fi-FI</fx:String>
- <fx:String>fr-FR</fx:String>
- <fx:String>it-IT</fx:String>
- <fx:String>ja-JP</fx:String>
- <fx:String>ko-KR</fx:String>
- <fx:String>nb-NO</fx:String>
- <fx:String>pt-PT</fx:String>
- <fx:String>ru-RU</fx:String>
- <fx:String>zh-CN</fx:String>
- </s:ArrayList>
- </s:dataProvider>
- </s:ComboBox>
+ <s:Panel title="Spark Locale Formatter" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Label text="Select a locale to see the formatted currency and date:"/>
+ <s:ComboBox id="c" selectedItem="en-US...">
+ <s:dataProvider>
+ <s:ArrayList>
+ <fx:String>de-DE</fx:String>
+ <fx:String>en-US</fx:String>
+ <fx:String>es-ES</fx:String>
+ <fx:String>fi-FI</fx:String>
+ <fx:String>fr-FR</fx:String>
+ <fx:String>it-IT</fx:String>
+ <fx:String>ja-JP</fx:String>
+ <fx:String>ko-KR</fx:String>
+ <fx:String>nb-NO</fx:String>
+ <fx:String>pt-PT</fx:String>
+ <fx:String>ru-RU</fx:String>
+ <fx:String>zh-CN</fx:String>
+ </s:ArrayList>
+ </s:dataProvider>
+ </s:ComboBox>
- <s:Label text="{cf.format(12.3)}"/>
- <s:Label text="{df.format(new Date())}"/>
-
+ <s:Label text="{cf.format(12.3)}"/>
+ <s:Label text="{df.format(new Date())}"/>
+
+ </s:Panel>
</s:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml
index fcb52d1..ca6a7d3 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml
@@ -19,24 +19,7 @@
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Label {
- color: #FFFFFF;
- font-weight: bold;
- }
- #titleL {
- font-size: 20;
- }
- s|ComboBox {
- alternating-item-colors: #424242;
- }
- s|Form {
- background-color: #424242;
- }
- </fx:Style>
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
@@ -44,26 +27,30 @@
private var locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN','fr-FR']);
]]>
</fx:Script>
+
<fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
<s:NumberFormatter id="nf" locale="{localeCB.selectedItem}"/>
</fx:Declarations>
- <s:Scroller width="100%" height="100%">
- <s:Group>
- <s:Form>
- <s:Label id="titleL" text="Spark NumberFormatter"/>
- <s:Label text="Format a number by using spark NumberFormatter"/>
- <s:Spacer height="15"/>
- <s:FormItem label="Locales:">
- <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
- </s:FormItem>
- <s:FormItem label="Please enter a number:">
- <s:TextInput id="inputTI" text="12345"/>
- </s:FormItem>
- <s:FormItem label="Format result:">
- <s:Label text="{nf.format(inputTI.text)}"/>
- </s:FormItem>
- </s:Form>
- </s:Group>
- </s:Scroller>
+
+ <s:Panel title="Spark NumberFormatter" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form height="100%" width="100%">
+ <s:Label text="Format a number by using spark NumberFormatter"/>
+ <s:Spacer height="15"/>
+ <s:FormItem label="Locales:">
+ <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
+ </s:FormItem>
+ <s:FormItem label="Please enter a number:">
+ <s:TextInput id="inputTI" text="12345"/>
+ </s:FormItem>
+ <s:FormItem label="Format result:">
+ <s:Label text="{nf.format(inputTI.text)}"/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml
index ac05b0c..598a532 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml
@@ -21,23 +21,6 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Label {
- color: #FFFFFF;
- font-weight: bold;
- }
- #titleL {
- font-size: 20;
- }
- s|ComboBox {
- alternating-item-colors: #424242;
- }
- s|Form {
- background-color: #424242;
- }
- </fx:Style>
<fx:Script>
<![CDATA[
@@ -49,49 +32,48 @@
private var groupPatternArrColl:ArrayCollection = new ArrayCollection(['3;*', '1;*', '3;2;*', '3;2;1;*','2;1']);
]]>
</fx:Script>
+
<fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
<s:NumberFormatter id="nf" locale="{localeCB.selectedItem}"/>
<s:NumberFormatter id="nf_default" locale="{localeCB.selectedItem}"/>
</fx:Declarations>
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
- <s:Scroller id="scroller" width="100%" height="100%">
- <s:Group>
- <s:Form>
- <s:Label id="titleL" text="Spark NumberFormatter"/>
- <s:Label text="Select a locale to see the property value and formatted Number: "/>
- <s:Spacer height="15"/>
-
- <s:FormItem label="Locale:">
- <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
- </s:FormItem>
- <s:FormItem label="Input a number to format:">
- <s:TextInput id="inputTI" text="12345"/>
- </s:FormItem>
- <s:FormItem label="Fraction Digits: (default: {nf_default.fractionalDigits})">
- <s:NumericStepper id="fdNS" maximum="10" minimum="0" change="nf.fractionalDigits = fdNS.value"/>
- </s:FormItem>
- <s:FormItem label="Decimal Separator: (default: {nf_default.decimalSeparator})">
- <s:TextInput id="dsTI" change="nf.decimalSeparator = dsTI.text"/>
- </s:FormItem>
- <s:FormItem label="Grouping Pattern: (default: {nf_default.groupingPattern})">
- <s:ComboBox id="gpCB" dataProvider="{groupPatternArrColl}" change="nf.groupingPattern = gpCB.selectedItem"/>
- </s:FormItem>
- <s:FormItem label="Grouping Separator: (default: {nf_default.groupingSeparator})">
- <s:TextInput id="gsTI" change="nf.groupingSeparator = gsTI.text"/>
- </s:FormItem>
- <s:FormItem label="Negative Number Format: (default: {nf_default.negativeNumberFormat})">
- <s:NumericStepper id="ncfNS" minimum="0" maximum="4" change="nf.negativeNumberFormat = ncfNS.value"/>
- </s:FormItem>
- <s:Label text="==================================================================="/>
- <s:FormItem label="Formatted Number is:">
- <s:Label id="resultL" text="{nf.format(inputTI.text)}"/>
- </s:FormItem>
- </s:Form>
- </s:Group>
- </s:Scroller>
-
-
+
+ <s:Panel title="Spark NumberFormatter" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form height="100%" width="100%">
+ <s:Label text="Select a locale to see the property value and formatted Number: "/>
+ <s:Spacer height="15"/>
+
+ <s:FormItem label="Locale:">
+ <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
+ </s:FormItem>
+ <s:FormItem label="Input a number to format:">
+ <s:TextInput id="inputTI" text="12345"/>
+ </s:FormItem>
+ <s:FormItem label="Fraction Digits: (default: {nf_default.fractionalDigits})">
+ <s:NumericStepper id="fdNS" maximum="10" minimum="0" change="nf.fractionalDigits = fdNS.value"/>
+ </s:FormItem>
+ <s:FormItem label="Decimal Separator: (default: {nf_default.decimalSeparator})">
+ <s:TextInput id="dsTI" change="nf.decimalSeparator = dsTI.text"/>
+ </s:FormItem>
+ <s:FormItem label="Grouping Pattern: (default: {nf_default.groupingPattern})">
+ <s:ComboBox id="gpCB" dataProvider="{groupPatternArrColl}" change="nf.groupingPattern = gpCB.selectedItem"/>
+ </s:FormItem>
+ <s:FormItem label="Grouping Separator: (default: {nf_default.groupingSeparator})">
+ <s:TextInput id="gsTI" change="nf.groupingSeparator = gsTI.text"/>
+ </s:FormItem>
+ <s:FormItem label="Negative Number Format: (default: {nf_default.negativeNumberFormat})">
+ <s:NumericStepper id="ncfNS" minimum="0" maximum="4" change="nf.negativeNumberFormat = ncfNS.value"/>
+ </s:FormItem>
+ <s:Label text="==================================================================="/>
+ <s:FormItem label="Formatted Number is:">
+ <s:Label id="resultL" text="{nf.format(inputTI.text)}"/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml
index f48f021..9457ebe 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml
@@ -21,24 +21,6 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Label {
- color: #FFFFFF;
- font-weight: bold;
- }
- #titleL {
- font-size: 20;
- }
- s|ComboBox {
- alternating-item-colors: #424242;
- }
-
- s|Form {
- background-color: #424242;
- }
- </fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
@@ -47,24 +29,28 @@
private var locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN','fr-FR']);
]]>
</fx:Script>
+
<fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
<s:NumberValidator id="nv" source="{inputTI}" property="text"
minValue="100" domain="int" locale="{localeCB.selectedItem}"/>
</fx:Declarations>
- <s:Scroller width="100%" height="100%">
- <s:Group>
- <s:Form>
- <s:Label id="titleL" text="Spark NumberValidator"/>
- <s:Label text="Validate a number by using Spark NumberValidator"/>
- <s:Spacer height="15"/>
- <s:FormItem label="Locale:">
- <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
- </s:FormItem>
- <s:FormItem label="Enter a number to validate:">
- <s:TextInput id="inputTI" toolTip="The number should be an integer which greater than 100."/>
- </s:FormItem>
- </s:Form>
- </s:Group>
- </s:Scroller>
+
+ <s:Panel title="Spark NumberValidator" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form height="100%" width="100%">
+ <s:Label text="Validate a number by using Spark NumberValidator"/>
+ <s:Spacer height="15"/>
+ <s:FormItem label="Locale:">
+ <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
+ </s:FormItem>
+ <s:FormItem label="Enter a number to validate:">
+ <s:TextInput id="inputTI" toolTip="The number should be an integer which greater than 100."/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml
index 4372338..aa30ea6 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml
@@ -21,24 +21,6 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Label {
- color: #FFFFFF;
- font-weight: bold;
- }
- #titleL {
- font-size: 20;
- }
- s|ComboBox {
- alternating-item-colors: #424242;
- }
-
- s|Form {
- background-color: #424242;
- }
- </fx:Style>
<fx:Script>
<![CDATA[
@@ -51,54 +33,51 @@
]]>
</fx:Script>
+
<fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
-
- <!--Click Tab key to validate the number-->
<s:NumberValidator id="nv" source="{inputTI}" property="text"/>
</fx:Declarations>
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
- <s:Scroller id="scroller" width="100%" height="100%">
- <s:Group>
- <s:Form>
- <s:Label id="titleL" text="Spark NumberValidator"/>
- <s:Label text="Create some criterions and validate the input number: "/>
- <s:Spacer height="15"/>
-
- <s:FormItem label="Locale:">
- <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="nv.setStyle('locale',localeCB.selectedItem);"/>
- </s:FormItem>
- <s:Label text="==================================================================="/>
- <s:Label text=" Create some criterions to validate number:" color="#DEB887"/>
- <s:FormItem label="Max Value:">
- <s:TextInput id="maxTI" change="nv.maxValue = Number(maxTI.text)"/>
- </s:FormItem>
- <s:FormItem label="Min Value:">
- <s:TextInput id="minTI" change="nv.minValue = Number(minTI.text)"/>
- </s:FormItem>
- <s:FormItem label="Fraction Digits:">
- <s:NumericStepper id="fdNS" maximum="5" minimum="0" change="nv.fractionalDigits = fdNS.value"/>
- </s:FormItem>
- <s:FormItem label="Decimal Separator:">
- <s:TextInput id="dsTI" change="nv.decimalSeparator = dsTI.text"/>
- </s:FormItem>
- <s:FormItem label="Grouping Separator:">
- <s:TextInput id="gsTI" change="nv.groupingSeparator = gsTI.text"/>
- </s:FormItem>
- <s:Label text=" Customize error messages:" color="#DEB887"
- toolTip="Spark NumberValidator provide the ability to let user customize all the error messages."/>
- <s:FormItem label="Greater Than Max Error:" toolTip="Error message when the value exceeds the max value.">
- <s:TextInput id="gtmTI" change="nv.greaterThanMaxError = gtmTI.text"/>
- </s:FormItem>
- <s:Label text="==================================================================="/>
- <s:FormItem label="Input a number and press TAB key to validate:">
- <s:TextInput id="inputTI"/>
- </s:FormItem>
- </s:Form>
- </s:Group>
- </s:Scroller>
-
-
+
+ <s:Panel title="Spark NumberValidator" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form height="100%" width="100%">
+ <s:Label text="Create some criterions and validate the input number: "/>
+ <s:Spacer height="15"/>
+
+ <s:FormItem label="Locale:">
+ <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="nv.setStyle('locale',localeCB.selectedItem)"/>
+ </s:FormItem>
+ <s:Label text="==================================================================="/>
+ <s:Label text=" Create some criterions to validate number:" />
+ <s:FormItem label="Max Value:">
+ <s:TextInput id="maxTI" change="nv.maxValue = Number(maxTI.text)"/>
+ </s:FormItem>
+ <s:FormItem label="Min Value:">
+ <s:TextInput id="minTI" change="nv.minValue = Number(minTI.text)"/>
+ </s:FormItem>
+ <s:FormItem label="Fraction Digits:">
+ <s:NumericStepper id="fdNS" maximum="5" minimum="0" change="nv.fractionalDigits = fdNS.value"/>
+ </s:FormItem>
+ <s:FormItem label="Decimal Separator:">
+ <s:TextInput id="dsTI" change="nv.decimalSeparator = dsTI.text"/>
+ </s:FormItem>
+ <s:FormItem label="Grouping Separator:">
+ <s:TextInput id="gsTI" change="nv.groupingSeparator = gsTI.text"/>
+ </s:FormItem>
+ <s:Label text=" Customize error messages:"
+ toolTip="Spark NumberValidator provide the ability to let user customize all the error messages."/>
+ <s:FormItem label="Greater Than Max Error:" toolTip="Error message when the value exceeds the max value.">
+ <s:TextInput id="gtmTI" change="nv.greaterThanMaxError = gtmTI.text"/>
+ </s:FormItem>
+ <s:Label text="==================================================================="/>
+ <s:FormItem label="Input a number and press TAB key to validate:">
+ <s:TextInput id="inputTI"/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml
index f35634e..c8d1044 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml
@@ -21,24 +21,6 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Label {
- color: #FFFFFF;
- font-weight: bold;
- }
- #titleL {
- font-size: 20;
- }
- s|ComboBox, s|List {
- alternating-item-colors: #424242;
- }
-
- s|Form {
- background-color: #424242;
- }
- </fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
@@ -56,27 +38,30 @@
]]>
</fx:Script>
+
<fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
<s:Sort id="mySort" locale="{localeCB.selectedItem}"/>
<s:SortField id="sortField" />
</fx:Declarations>
- <s:Scroller width="100%" height="100%">
- <s:Group>
- <s:Form>
- <s:Label id="titleL" text="Spark Sort and SortField"/>
- <s:Label text="Sort strings in List by using Spark Sort and SortField"/>
- <s:Spacer height="15"/>
- <s:FormItem label="Locale: ">
- <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
- </s:FormItem>
- <s:FormItem label="List: ">
- <s:List dataProvider="{employeeArrColl}"/>
- </s:FormItem>
- <s:FormItem>
- <s:Button label="Click to sort" click="button1_clickHandler(event)"/>
- </s:FormItem>
- </s:Form>
- </s:Group>
- </s:Scroller>
+
+ <s:Panel title="Spark Sort and SortField" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form height="100%" width="100%">
+ <s:Label text="Sort strings in List by using Spark Sort and SortField"/>
+ <s:Spacer height="15"/>
+ <s:FormItem label="Locale: ">
+ <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
+ </s:FormItem>
+ <s:FormItem label="List: ">
+ <s:List dataProvider="{employeeArrColl}"/>
+ </s:FormItem>
+ <s:FormItem>
+ <s:Button label="Click to sort" click="button1_clickHandler(event)"/>
+ </s:FormItem>
+ </s:Form>
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml
index 3fcd65c..eddd88d 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml
@@ -21,24 +21,6 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Label {
- color: #FFFFFF;
- font-weight: bold;
- }
- #titleL {
- font-size: 20;
- }
- s|ComboBox {
- alternating-item-colors: #424242;
- }
-
- s|Form {
- background-color: #424242;
- }
- </fx:Style>
<fx:Script>
<![CDATA[
@@ -69,8 +51,8 @@
}
]]>
</fx:Script>
+
<fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
<s:Sort id="mySort" locale="{localeCB.selectedItem}"/>
<s:SortField id="firstField" name="first"/>
@@ -87,36 +69,39 @@
<fx:Object first="Torolf" last="Aaron" age="40"/>
</s:ArrayCollection>
</fx:Declarations>
- <s:Scroller id="scroller" width="100%" height="100%">
- <s:Group>
- <s:Form>
- <s:Label id="titleL" text="Spark Sort and SortField"/>
- <s:Label text="Select a locale to see the strings sorting result:"/>
- <s:Spacer height="15"/>
-
- <s:FormItem label="Locale: ">
- <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
- </s:FormItem>
- <s:Label text=" ==========================================================================="/>
- <s:FormItem label="Sorting Priority:" toolTip="Click priority radio button to sort multiple columns">
- <s:RadioButton id="flaRB" groupName="priority" label="first name > last name > age" click="sortInOrder(1)"/>
- <s:RadioButton id="lfaRB" groupName="priority" label="last name > first name > age" click="sortInOrder(2)"/>
- <s:RadioButton id="alfRB" groupName="priority" label="age > first name > last name" click="sortInOrder(3)"/>
- <s:RadioButton id="falRB" groupName="priority" label="first name > age > last name" click="sortInOrder(4)"/>
- </s:FormItem>
- <s:FormItem label="Employee Table:" toolTip="Click data grid column header to sort single one column">
- <s:DataGrid id="dg" dataProvider="{employeeArrColl}" width="100%">
- <s:columns>
- <s:ArrayList>
- <s:GridColumn dataField="first" headerText="First Name"/>
- <s:GridColumn dataField="last" headerText="Last Name"/>
- <s:GridColumn dataField="age" headerText="Age"/>
- </s:ArrayList>
- </s:columns>
- </s:DataGrid>
- </s:FormItem>
- </s:Form>
- </s:Group>
- </s:Scroller>
+ <s:Panel title="Spark Sort and SortField" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form height="100%" width="100%">
+ <s:Label text="Select a locale to see the strings sorting result:"/>
+ <s:Spacer height="15"/>
+
+ <s:FormItem label="Locale: ">
+ <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
+ </s:FormItem>
+ <s:Label text=" ==========================================================================="/>
+ <s:FormItem label="Sorting Priority:" toolTip="Click priority radio button to sort multiple columns">
+ <s:RadioButton id="flaRB" groupName="priority" label="first name > last name > age" click="sortInOrder(1)"/>
+ <s:RadioButton id="lfaRB" groupName="priority" label="last name > first name > age" click="sortInOrder(2)"/>
+ <s:RadioButton id="alfRB" groupName="priority" label="age > first name > last name" click="sortInOrder(3)"/>
+ <s:RadioButton id="falRB" groupName="priority" label="first name > age > last name" click="sortInOrder(4)"/>
+ </s:FormItem>
+ <s:FormItem label="Employee Table:" toolTip="Click data grid column header to sort single one column">
+ <s:DataGrid id="dg" dataProvider="{employeeArrColl}" width="100%">
+ <s:columns>
+ <s:ArrayList>
+ <s:GridColumn dataField="first" headerText="First Name"/>
+ <s:GridColumn dataField="last" headerText="Last Name"/>
+ <s:GridColumn dataField="age" headerText="Age"/>
+ </s:ArrayList>
+ </s:columns>
+ </s:DataGrid>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml
index fad6eb8..e583183 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml
@@ -21,28 +21,6 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Label {
- color: #FFFFFF;
- font-weight: bold;
- }
- #titleL {
- font-size: 20;
- }
- s|ComboBox {
- alternating-item-colors: #424242;
- }
-
- s|Form {
- background-color: #424242;
- }
-
- s|List {
- alternating-item-colors: #424242;
- }
- </fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
@@ -92,33 +70,33 @@
}
]]>
</fx:Script>
+
<fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
<s:StringTools id="st"/>
</fx:Declarations>
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
- <s:Scroller id="scroller" width="100%" height="100%">
- <s:Group>
- <s:Form>
- <s:Label id="titleL" text="Spark StringTools"/>
- <s:Label text="Enter strings and find the case conversion result"/>
- <s:Spacer height="15"/>
- <s:FormItem label="Locales:">
- <s:ComboBox id="localesCB" dataProvider="{_locales}" selectedIndex="0" change="localesCB_changeHandler()"/>
- </s:FormItem>
- <s:FormItem label="Please enter a string:">
- <s:TextInput id="inputTI" width="380" text="{_initStr}" change="converString()"/>
- </s:FormItem>
- <s:FormItem label="ToLowerCase:">
- <s:Label id="lowerL"/>
- </s:FormItem>
- <s:FormItem label="ToUpperCase:">
- <s:Label id="upperL"/>
- </s:FormItem>
- </s:Form>
- </s:Group>
- </s:Scroller>
+
+ <s:Panel title="Spark StringTools" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form height="100%" width="100%">
+ <s:Label text="Enter strings and find the case conversion result"/>
+ <s:Spacer height="15"/>
+ <s:FormItem label="Locales:">
+ <s:ComboBox id="localesCB" dataProvider="{_locales}" selectedIndex="0" change="localesCB_changeHandler()"/>
+ </s:FormItem>
+ <s:FormItem label="Please enter a string:">
+ <s:TextInput id="inputTI" width="380" text="{_initStr}" change="converString()"/>
+ </s:FormItem>
+ <s:FormItem label="ToLowerCase:">
+ <s:Label id="lowerL"/>
+ </s:FormItem>
+ <s:FormItem label="ToUpperCase:">
+ <s:Label id="upperL"/>
+ </s:FormItem>
+ </s:Form>
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml
index 3c21155..eede007 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml
@@ -27,8 +27,6 @@
<![CDATA[
import mx.collections.XMLListCollection;
- import skins.TDFPanelSkin;
-
[Bindable]
private var employees:XMLListCollection;
@@ -44,16 +42,16 @@
]]>
</fx:Script>
- <s:Panel width="100%" height="100%" title="Custom Item Renderer with Animation" skinClass="skins.TDFPanelSkin">
+ <s:Panel title="Custom Item Renderer with Animation" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout paddingLeft="100" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
</s:layout>
<s:DataGroup dataProvider="{employees}" width="300" itemRenderer="renderers.ImageRenderer1">
<s:layout>
<s:TileLayout horizontalGap="0" verticalGap="0"/>
</s:layout>
</s:DataGroup>
- <s:Label color="0x323232" width="200" text="The item renderer on this DataGroup uses the Spark Animate to scale the image
+ <s:Label width="200" text="The item renderer on this DataGroup uses the Spark Animate to scale the image
when hovered over each item. See the ImageRenderer1.mxml source for more information."/>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml
index 29ab4ca..96f565f 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml
@@ -52,9 +52,9 @@
]]>
</fx:Script>
- <s:Panel width="100%" height="100%" title="Custom Item Renderer with Animation" skinClass="skins.TDFPanelSkin">
+ <s:Panel title="Custom Item Renderer with Animation" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout paddingTop="2" paddingLeft="50" paddingRight="8"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
</s:layout>
<s:DataGroup dataProvider="{employees}" width="440" itemRenderer="renderers.ImageRenderer2" horizontalCenter="0" verticalCenter="0">
@@ -62,7 +62,7 @@
<s:TileLayout />
</s:layout>
</s:DataGroup>
- <s:Label color="0x323232" width="200" text="The item renderer on this DataGroup uses effects to provide a
+ <s:Label width="200" text="The item renderer on this DataGroup uses effects to provide a
Spark 3D rotation effect when hovered over each item. See the ImageRenderer2.mxml source for more information. This sample also
shows the use of a special font for the text."/>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml
index 8ac0f7a..04b9dbe 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml
@@ -58,7 +58,7 @@
<s:Panel title="List Sample"
width="100%" height="100%"
- skinClass="skins.TDFPanelSkin">
+ >
<s:VGroup id="vGrp" horizontalCenter="0" top="3"
width="80%" height="75%">
<s:HGroup verticalAlign="middle">
@@ -91,7 +91,7 @@
</s:VGroup>
</s:HGroup>
</s:VGroup>
- <s:Label bottom="15" horizontalCenter="0" width="95%" verticalAlign="justify" color="#323232"
+ <s:Label bottom="15" horizontalCenter="0" width="95%" verticalAlign="justify"
text="The Spark List control displays a list of data items. Its functionality is
very similar to that of the SELECT form element in HTML. The user can select one or more items from the list.
The List control automatically displays horizontal and vertical scroll bar when the list items do not fit
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml
index c8964a0..a09fc74 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml
@@ -21,22 +21,8 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:local="*" xmlns:layouts="layouts.*"
- backgroundColor="0x323232" color="0xFFFFFF"
initialize="init()">
- <fx:Style>
-
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
-
-
- s|Application {
- font-family: main;
- font-size: 14;
- }
-
- </fx:Style>
-
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
@@ -94,19 +80,26 @@
]]>
</fx:Script>
- <s:HGroup verticalAlign="middle" paddingLeft="8" left="50" top="5">
- <s:Label text="Max Price:"/>
- <s:HSlider id="priceSlider" minimum="0" maximum="1000" snapInterval="100" value="@{_maxPrice}" change="selectionChange()"/>
- <mx:Spacer width="20"/>
- <s:CheckBox label="Camera" selected="@{_camera}" change="selectionChange()"/>
- <s:CheckBox label="Video" selected="@{_video}" change="selectionChange()"/>
- <s:CheckBox label="Triband" selected="@{_triband}" change="selectionChange()"/>
- </s:HGroup>
-
- <s:DataGroup dataProvider="{items}" itemRenderer="renderers.PhoneRenderer" top="50" left="0" right="0" horizontalCenter="0">
+ <s:Panel title="Custom Layout Sample" width="100%" height="100%">
+
<s:layout>
- <layouts:FilteredTileLayout id="filterLayout" filteredItems="{filteredItems}" />
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- </s:DataGroup>
-
+
+ <s:HGroup>
+ <s:Label text="Max Price:"/>
+ <s:HSlider id="priceSlider" minimum="0" maximum="1000" snapInterval="100" value="@{_maxPrice}" change="selectionChange()"/>
+ <mx:Spacer width="20"/>
+ <s:CheckBox label="Camera" selected="@{_camera}" change="selectionChange()"/>
+ <s:CheckBox label="Video" selected="@{_video}" change="selectionChange()"/>
+ <s:CheckBox label="Triband" selected="@{_triband}" change="selectionChange()"/>
+ </s:HGroup>
+
+ <s:DataGroup dataProvider="{items}" itemRenderer="renderers.PhoneRenderer" width="100%" height="100%">
+ <s:layout>
+ <layouts:FilteredTileLayout id="filterLayout" filteredItems="{filteredItems}" />
+ </s:layout>
+ </s:DataGroup>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml
index 5a0895e..9726467 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml
@@ -23,7 +23,7 @@
xmlns:my="*" minWidth="600" minHeight="350"
applicationComplete="requestPhotos()" backgroundColor="0x323232">
- <fx:Script>
+ <fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
@@ -54,30 +54,31 @@
result="photoHandler(event)" />
</fx:Declarations>
- <s:layout>
- <s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"/>
- </s:layout>
-
- <s:HGroup verticalAlign="middle">
- <s:Label text="Flickr tags or search terms:" color="0xFFFFFF"/>
- <s:TextInput id="searchTerms"
- enter="requestPhotos()" text="bugs" />
- <s:Button label="Search"
- click="requestPhotos()" />
- <!-- The slider to control the axis angle -->
- <s:HSlider id="axisSlider" minimum="-90" maximum="90"
- value="10" liveDragging="true" width="300"/>
- </s:HGroup>
-
- <s:List width="700" height="225"
- dataProvider="{photoFeed}"
- itemRenderer="FlickrThumbnail"
- id="theList">
+ <s:Panel title="Image Wheel Sample" width="100%" height="100%">
+ <s:layout>
+ <s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"/>
+ </s:layout>
- <s:layout>
- <my:WheelLayout gap="20" axisAngle="{axisSlider.value}"/>
- </s:layout>
- </s:List>
-
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Flickr tags or search terms:" color="0xFFFFFF"/>
+ <s:TextInput id="searchTerms"
+ enter="requestPhotos()" text="bugs" />
+ <s:Button label="Search"
+ click="requestPhotos()" />
+ <!-- The slider to control the axis angle -->
+ <s:HSlider id="axisSlider" minimum="-90" maximum="90"
+ value="10" liveDragging="true" width="300"/>
+ </s:HGroup>
+
+ <s:List width="100%" height="100%"
+ dataProvider="{photoFeed}"
+ itemRenderer="FlickrThumbnail"
+ id="theList">
+
+ <s:layout>
+ <my:WheelLayout gap="20" axisAngle="{axisSlider.value}"/>
+ </s:layout>
+ </s:List>
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml
index a3a6dab..4f282aa 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml
@@ -22,7 +22,7 @@
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:my="*">
- <s:Panel width="100%" height="100%" title="Custom Layout - Flow Layout" skinClass="skins.TDFPanelSkin">
+ <s:Panel width="100%" height="100%" title="Custom Layout - Flow Layout" >
<s:layout>
<s:VerticalLayout horizontalAlign="center"
paddingTop="10" gap="10"/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml
index 23ec216..19d74e8 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml
@@ -26,8 +26,6 @@
<![CDATA[
import mx.events.FlexEvent;
- import skins.TDFPanelSkin;
-
protected function update(event:Event):void
{
globalBaseline.top = theLayout.actualBaseline;
@@ -41,7 +39,7 @@
]]>
</fx:Script>
- <s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="CustomLayout with HBaselineLayout">
+ <s:Panel width="100%" height="100%" title="CustomLayout with HBaselineLayout">
<!-- Controls -->
<s:HGroup left="14" top="5">
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml
index 8667a8f..91c690d 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml
@@ -21,7 +21,7 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" click="itemrenderer1_clickHandler(event)">
- <fx:Script>
+ <fx:Script>
<![CDATA[
import spark.components.supportClasses.GroupBase;
import spark.effects.Animate;
diff --git a/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml
index 95dd359..54722a1 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -69,11 +68,16 @@
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
- <mx:ApplicationControlBar dock="true" fillColors="[0x000000,0x323232]" fillAlphas="[1,1]" horizontalAlign="center">
+ <s:Panel title="Module Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
<s:Button label="Load Module 1" click="loadModule('module 1', './spark/modules/Module1.swf')"/>
<s:Button label="Load Module 2" click="loadModule('module 2', './spark/modules/Module2.swf')"/>
- </mx:ApplicationControlBar>
- <mx:HBox id="hBox" />
-
+ <mx:HBox id="hBox" />
+
+ </s:Panel>
</s:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml
index a30b544..1080681 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml
@@ -25,8 +25,8 @@
<s:Panel width="100%" height="100%"
title="Bidirectional Binding 1"
horizontalCenter="0"
- skinClass="skins.TDFPanelSkin">
- <s:Label top="10" left="15" verticalAlign="justify" color="#323232" width="200"
+ >
+ <s:Label top="10" left="15" verticalAlign="justify" width="200"
text="Flex 4 interprets the @ binding syntax differently than Flex 3 in
that it will now represent a two-way binding. In this example, the text2 TextInput is bound to text1 bidirectionally,
so any change to the text2 value will also update the text1 value. "/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml
index 37b1b61..076f80c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml
@@ -50,19 +50,16 @@
<local:Contact id="contact"/>
</fx:Declarations>
- <s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="TabBar Sample with Custom Skin and Bidirectional Binding" >
- <s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}" skinClass="skins.CustomTabBarSkin" cornerRadius="4"/>
+ <s:Panel width="100%" height="100%" title="TabBar Sample with Bidirectional Binding">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:TabBar id="tabs" dataProvider="{vs}" cornerRadius="4"/>
<mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23">
<s:NavigatorContent label="Contact Info" width="100%" height="100%">
- <s:BorderContainer borderColor="0xCC0000" width="100%" height="100%" borderWeight="2" cornerRadius="3"
- dropShadowVisible="true">
- <!-- This background fill could also be specified in a custom skin to apply to other containers as well -->
- <s:backgroundFill>
- <s:LinearGradient rotation="90">
- <s:GradientEntry color="0xE2E2E2"/>
- <s:GradientEntry color="0xCC0000" alpha=".5" />
- </s:LinearGradient>
- </s:backgroundFill>
+ <s:BorderContainer width="100%" height="100%" dropShadowVisible="false">
<mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%">
<mx:FormItem label="Name:">
<s:TextInput id="nameTxt" text="@{contact.name}"/>
@@ -86,14 +83,7 @@
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent label="Contact List" width="100%" height="100%" >
- <s:BorderContainer borderColor="0xCC0000" width="100%" height="100%" borderWeight="2" cornerRadius="3"
- dropShadowVisible="true">
- <s:backgroundFill>
- <s:LinearGradient rotation="90">
- <s:GradientEntry color="0xCC0000" />
- <s:GradientEntry color="0xE2E2E2" />
- </s:LinearGradient>
- </s:backgroundFill>
+ <s:BorderContainer width="100%" height="100%" dropShadowVisible="false">
<mx:DataGrid id="dg" dataProvider="{contacts}" x="5" y="5" doubleClickEnabled="true"
doubleClick="{tabs.selectedIndex=0}" itemClick="dg_itemClickHandler(event)">
<mx:columns>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml
index 659174d..e53a5dc 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml
@@ -25,7 +25,12 @@
to be less than the size of the item you want to clip, and set the following parameters, where the scroll
positions specify which part of the viewport to show (from container location 0,0)-->
- <s:VGroup top="10" left="10">
+ <s:Panel title="Controlling Viewport Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
<s:Label text="This image is clipped with the viewport position set:"/>
<s:Group width="100" height="100"
horizontalScrollPosition="20" verticalScrollPosition="30"
@@ -38,7 +43,7 @@
width="100" height="100" horizontalScrollPosition="20" verticalScrollPosition="30">
<s:BitmapImage source="@Embed(source='assets/ApacheFlexLogo.png')"/>
</s:VGroup>
- </s:Scroller>
- </s:VGroup>
-
+ </s:Scroller>
+
+ </s:Panel>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml
index 8a10492..92d945a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -35,14 +34,7 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="Cursor Management Samples"
- width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="Cursor Management Samples" width="100%" height="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center"
@@ -50,7 +42,7 @@
paddingTop="10" paddingBottom="10"/>
</s:layout>
- <s:CheckBox id="toggle" label="Toggle Cursor" selected="false" color="0x000000" click="switchCursor();"/>
+ <s:CheckBox id="toggle" label="Toggle Cursor" selected="false" color="0x000000" click="switchCursor()"/>
</s:Panel>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml
index 88f0d1b..befeb36 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -49,19 +48,10 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="Cursor Management Samples"
- width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="Cursor Management Samples" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<s:Button label="Normal Cursor" color="0x000000" click="setCursor('normal')"/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml
index b4e0a23..3f4ff7f 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml
@@ -19,12 +19,7 @@
-->
<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">
-
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<s:ArrayList id="arr1">
@@ -38,15 +33,10 @@
</s:ArrayList>
</fx:Declarations>
- <s:Panel title="Drag and Drop Samples"
- width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="Drag and Drop Samples" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
<s:List allowMultipleSelection="true" dropEnabled="true" dragEnabled="true" dragMoveEnabled="true"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml
index 6cea57e..abe2060 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -37,43 +36,47 @@
</s:ArrayList>
</fx:Declarations>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="Fruit" height="100%" color="0x000000" borderAlpha="0.15">
- <s:List height="100%" dragEnabled="true" color="0x000000" dataProvider="{arr1}" />
- </s:Panel>
-
- <s:Panel id="fruitDetails" title="drag fruit here" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
-
+ <s:Panel title="Drag and Drop Samples" width="100%" height="100%">
+
<s:layout>
- <s:VerticalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
</s:layout>
-
- <s:dragEnter>
- if (event.dragSource.hasFormat('itemsByIndex'))
- {
- var dropTarget:Panel = event.currentTarget as Panel;
- DragManager.acceptDragDrop(dropTarget);
- }
- </s:dragEnter>
- <s:dragOver>
+
+ <s:Panel title="Fruit" width="100%" height="100%">
- </s:dragOver>
- <s:dragDrop>
- var data:Object = event.dragSource.dataForFormat('itemsByIndex');
- var p:Panel = new Panel();
- p.title = new String(data);
- p.percentWidth = 100;
- p.percentHeight = 25;
- p.setStyle("color","black");
- fruitDetails.addElement(p);
- </s:dragDrop>
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:List height="100%" dragEnabled="true" color="0x000000" dataProvider="{arr1}" />
+
+ </s:Panel>
+
+ <s:Panel id="fruitDetails" title="drag fruit here" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:dragEnter>
+ if (event.dragSource.hasFormat('itemsByIndex'))
+ {
+ var dropTarget:Panel = event.currentTarget as Panel;
+ DragManager.acceptDragDrop(dropTarget);
+ }
+ </s:dragEnter>
+
+ <s:dragDrop>
+ var data:Object = event.dragSource.dataForFormat('itemsByIndex');
+ var p:Panel = new Panel();
+ p.title = new String(data);
+ p.percentWidth = 100;
+ p.percentHeight = 25;
+ p.setStyle("color","black");
+ fruitDetails.addElement(p);
+ </s:dragDrop>
+
+ </s:Panel>
</s:Panel>
</s:Application>
\ No newline at end of file
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml
index b7887d1..87a1f3c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml
@@ -19,8 +19,7 @@
-->
<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"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()">
<fx:Script>
@@ -54,11 +53,7 @@
}
]]>
</fx:Script>
-
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
+
<fx:Declarations>
<!--filters-->
<s:GlowFilter id="glow" blurX="12" blurY="12" color="#88AEF7" quality="2" strength="1"/>
@@ -68,9 +63,7 @@
</fx:Declarations>
<s:Panel title="Filters Samples"
- width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ width="100%" height="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center"
@@ -81,15 +74,15 @@
<s:Label id="textSample" text="SAMPLE TEXT" color="0x000000"
fontWeight="bold" fontSize="40" filters="{[bevel]}" />
- <s:HGroup width="100%" color="#323232" horizontalAlign="center">
+ <s:HGroup width="100%" horizontalAlign="center">
<s:CheckBox id="blurBox" label="Blur" click="filterHandler(event)" />
<s:CheckBox id="glowBox" label="Glow" click="filterHandler(event)" />
<s:CheckBox id="shadowBox" label="Drop Shadow" click="filterHandler(event)" />
<s:CheckBox id="bevelBox" label="Bevel" selected="true" click="filterHandler(event)" />
</s:HGroup>
- <s:Label id="dynamicText" text="0" color="#323232" fontSize="18" filters="{[bevel]}" />
+ <s:Label id="dynamicText" text="0" fontSize="18" filters="{[bevel]}" />
</s:Panel>
-</s:Application>
\ No newline at end of file
+</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml
index d5a7112..8e5cc19 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -33,21 +32,13 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="Repeater Example" color="0x000000"
- borderAlpha="0.15"
- width="600">
+ <s:Panel title="Repeater Example" width="100%" height="100%">
<s:layout>
- <s:VerticalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
</s:layout>
- <s:Label width="100%" color="0x323232" textAlign="center"
+ <s:Label width="100%"
text="Use the Repeater class to create multi-Button controls in a Tile container."/>
<mx:Tile direction="horizontal" borderStyle="inset" horizontalGap="10" verticalGap="10" color="0x323232"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml
index 0324d14..0248f4b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml
@@ -26,8 +26,6 @@
<![CDATA[
import mx.events.ScrollEvent;
- import skins.TDFPanelSkin;
-
private function vbarScroll():void {
log.text = "VScrollBar properties summary:" + '\n' +
"------------------------------------" + '\n' +
@@ -54,10 +52,13 @@
}
]]>
</fx:Script>
- <s:Panel width="100%" height="100%" title="VScrollBar and HScrollBar Sample" skinClass="skins.TDFPanelSkin">
+
+ <s:Panel title="VScrollBar and HScrollBar Sample" width="100%" height="100%">
+
<s:layout>
- <s:HorizontalLayout paddingLeft="5" paddingRight="5" paddingTop="5"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
</s:layout>
+
<s:VGroup>
<s:Label
width="100%"
@@ -77,7 +78,7 @@
<s:LinearGradient rotation="90">
<s:GradientEntry color="#6191c3"/>
<s:GradientEntry color="#6191c3"/>
- <s:GradientEntry color="#323232" alpha=".3"/>
+ <s:GradientEntry alpha=".3"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
@@ -88,7 +89,7 @@
<s:VGroup width="200">
<s:TextArea id="log" editable="false" height="88"/>
- <s:Label color="0x323232" width="188" text="The ScrollBar controls (HScrollBar and VScrollBar) can be used stand-alone, but typically you would combine it as part of
+ <s:Label text="The ScrollBar controls (HScrollBar and VScrollBar) can be used stand-alone, but typically you would combine it as part of
another group of components to provide scrolling functionality. "/>
</s:VGroup>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml
index edecce5..652a24a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml
@@ -23,7 +23,7 @@
<!-- Custom skins used for this example are shown in the source tabs for reference -->
<s:Panel width="100%" height="100%" title="Button Skinned With Icon"
- skinClass="skins.TDFPanelSkin">
+ >
<s:HGroup width="100%" left="35" top="15">
<s:VGroup width="50%">
<s:HGroup verticalAlign="middle">
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml
index 4f20a3f..ebe6cc6 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml
@@ -22,7 +22,7 @@
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:Panel id="myPanel" title="SkinnableContainer sample"
- width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+ width="100%" height="100%" >
<!-- Set a custom skin for the container to show a gradient background and border -->
<s:SkinnableContainer skinClass="skins.CustomSkinnableContainerSkin"
diff --git a/TourDeFlex/TourDeFlex3/src/spark/states/AnimateShaderTransitionEffect.mxml b/TourDeFlex/TourDeFlex3/src/spark/states/AnimateShaderTransitionEffect.mxml
index 6e5f3b8..bd06d64 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/states/AnimateShaderTransitionEffect.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/states/AnimateShaderTransitionEffect.mxml
@@ -47,12 +47,12 @@
</s:Group>
</s:HGroup>
<s:VGroup top="10" right="5" width="30%">
- <s:Label text="AnimateShaderTransition Sample" fontSize="18" color="#B7B6B6"/>
+ <s:Label text="AnimateShaderTransition Sample" fontSize="18"/>
<s:Label color="#FFFFFF" width="200" verticalAlign="justify"
text="AnimateShaderTransition animates a shader between two images. Click the button below to see the effect."/>
<s:Button id="playButton"
label="Play Animation"
- click="currentState = (currentState == 'flipped') ? 'default' : 'flipped';" />
+ click="currentState = (currentState == 'flipped') ? 'default' : 'flipped'" />
</s:VGroup>
</s:Application>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/FileServices.mxml b/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/FileServices.mxml
index 343cc94..58e740b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/FileServices.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/FileServices.mxml
@@ -89,8 +89,8 @@
<mx:Button label="Open..." click="openDialog()"/>
- <mx:Button id="textLayoutExportButton" label="Markup..." click="dispatchEvent(new Event('textLayoutExport'));"/>
- <mx:Button id="htmlExportButton" label="HTML Markup..." click="dispatchEvent(new Event('htmlExport'));"/>
+ <mx:Button id="textLayoutExportButton" label="Markup..." click="dispatchEvent(new Event('textLayoutExport'))"/>
+ <mx:Button id="htmlExportButton" label="HTML Markup..." click="dispatchEvent(new Event('htmlExport'))"/>
<mx:Label id="buildLabel" text="{buildString}" fontWeight="bold" paddingTop="3" paddingBottom="1"/>
</mx:HBox>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/GraphicBar.mxml b/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/GraphicBar.mxml
index 1aa5d14..9d5d2fb 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/GraphicBar.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/GraphicBar.mxml
@@ -149,5 +149,5 @@
<mx:Label text="Height:" fontWeight="bold"/>
<mx:TextInput id="imageHeight" width="60"/>
<mx:Button id="imageButton" label="Insert Image"
- click="applyChange();" />
+ click="applyChange()" />
</mx:HBox>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/LinkBar.mxml b/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/LinkBar.mxml
index 61b8b6f..bdcbcd8 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/LinkBar.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/tlf/textEditBar/LinkBar.mxml
@@ -154,5 +154,5 @@
selectedIndex="0" dataProvider = "{targetArray}"/>
<mx:CheckBox id = "linkExtendCheckBox" label="Extend"/>
<mx:Button label="Apply Link"
- click="changeLink(linkTextInput.text, linkTargetCombo.text, linkExtendCheckBox.selected);" />
+ click="changeLink(linkTextInput.text, linkTargetCombo.text, linkExtendCheckBox.selected)" />
</mx:HBox>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/CreditCardValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/CreditCardValidatorExample.mxml
index 03bd534..7a01af0 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/CreditCardValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/CreditCardValidatorExample.mxml
@@ -19,17 +19,12 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
import mx.controls.Alert;
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
<fx:Declarations>
<!-- Define model for the credit card data. -->
@@ -46,7 +41,7 @@
trigger="{myButton}" triggerEvent="click"
cardTypeListener="{cardTypeCombo}"
cardNumberListener="{cardNumberInput}"
- valid="Alert.show('Validation Succeeded!');"/>
+ valid="Alert.show('Validation Succeeded!')"/>
<s:ArrayCollection id="dp">
<fx:Object label="American Express" data="American Express"/>
@@ -58,17 +53,14 @@
</fx:Declarations>
- <s:Panel title="CreditCardValidator Example" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="CreditCardValidator Example" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form id="creditCardForm" color="0x323232">
+ <mx:Form id="creditCardForm">
<mx:FormItem label="Card Type">
<s:DropDownList id="cardTypeCombo" dataProvider="{dp}" width="160"
prompt="Card Type"/>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml
index 12145af..bd4de98 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml
@@ -19,34 +19,26 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
import mx.controls.Alert;
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
<fx:Declarations>
<mx:CurrencyValidator source="{priceUS}" property="text" precision="2"
trigger="{myButton}" triggerEvent="click"
- valid="Alert.show('Validation Succeeded!');"/>
+ valid="Alert.show('Validation Succeeded!')"/>
</fx:Declarations>
- <s:Panel title="CurrencyValidator Example" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="CurrencyValidator Example" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form color="0x323232">
+ <mx:Form>
<mx:FormItem label="Enter a U.S. dollar amount: ">
<s:TextInput id="priceUS" width="100%"/>
</mx:FormItem>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml
index 93724c5..a2ed716 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -28,10 +27,6 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
<fx:Declarations>
<fx:Model id="CheckModel">
<dateInfo>
@@ -41,20 +36,17 @@
<mx:DateValidator source="{dob}" property="text" allowedFormatChars="/"
trigger="{myButton}" triggerEvent="click"
- valid="Alert.show('Validation Succeeded!');"/>
+ valid="Alert.show('Validation Succeeded!')"/>
</fx:Declarations>
- <s:Panel title="DateValidator Example" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="DateValidator Example" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form color="0x323232">
+ <mx:Form>
<mx:FormItem label="Enter date of birth (mm/dd/yyyy): ">
<s:TextInput id="dob" width="100%"/>
</mx:FormItem>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/EmailValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/EmailValidatorExample.mxml
index 4314b35..0769d09 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/EmailValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/EmailValidatorExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -28,28 +27,21 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
<fx:Declarations>
<mx:EmailValidator source="{email}" property="text"
trigger="{myButton}" triggerEvent="click"
- valid="Alert.show('Validation Succeeded!');"/>
+ valid="Alert.show('Validation Succeeded!')"/>
</fx:Declarations>
- <s:Panel title="EmailValidator Example" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="EmailValidator Example" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form color="0x323232">
+ <mx:Form>
<mx:FormItem label="Enter an e-mail address: ">
<s:TextInput id="email" width="100%"/>
</mx:FormItem>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml
index 8230ac4..f04ee1c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -46,10 +45,6 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
<fx:Declarations>
<!-- The Validator class defines the required property and the validator events
used by all validator subclasses. -->
@@ -58,17 +53,14 @@
valid="handleValid(event)" invalid="handleValid(event)"/>
</fx:Declarations>
- <s:Panel title="Validator Example" width="620" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="Validator Example" width="100%" height="100%">
<s:layout>
- <s:VerticalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
+ <s:VerticalLayout paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form color="0x323232">
+ <mx:Form>
<s:Label width="100%"
text="Enter a value in the Name field before you can submit. The E-mail field is optional."/>
@@ -82,7 +74,7 @@
<mx:FormItem>
<s:Button id="submitButton" enabled="false"
- label="Submit" click="submitForm();"/>
+ label="Submit" click="submitForm()"/>
</mx:FormItem>
</mx:Form>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/NumberValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/NumberValidatorExample.mxml
index 07ae1ab..fefed5f 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/NumberValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/NumberValidatorExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -44,27 +43,20 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
<fx:Declarations>
<mx:NumberFormatter id="numberFormatter" precision="4" useThousandsSeparator="true" useNegativeSign="true"/>
<mx:NumberValidator id="numVal" source="{inputVal}" property="text" allowNegative="true" domain="real"/>
</fx:Declarations>
- <s:Panel title="NumberValidator Example" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="NumberValidator Example" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form color="0x323232">
+ <mx:Form>
<mx:FormItem label="Enter number:">
<s:TextInput id="inputVal" text="" width="50%"/>
</mx:FormItem>
@@ -74,7 +66,7 @@
</mx:FormItem>
<mx:FormItem>
- <s:Button label="Validate and Format" click="Format();"/>
+ <s:Button label="Validate and Format" click="Format()"/>
</mx:FormItem>
</mx:Form>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/RegExpValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/RegExpValidatorExample.mxml
index 1ab3b13..c8b3a44 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/RegExpValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/RegExpValidatorExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -49,10 +48,6 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
<fx:Declarations>
<mx:RegExpValidator id="regExpV"
source="{regex_text}" property="text"
@@ -61,13 +56,10 @@
trigger="{myButton}" triggerEvent="click"/>
</fx:Declarations>
- <s:Panel title="RegExpValidator Example" width="620" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="RegExpValidator Example" width="100%" height="100%">
<s:layout>
- <s:VerticalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
+ <s:VerticalLayout paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
@@ -77,7 +69,7 @@
<s:Label width="100%" color="0x323232" text="3. Click the Button control to trigger the validation."/>
<s:Label width="100%" color="0x323232" text="4. The results show the index in the text where the matching pattern begins, and the matching pattern. "/>
- <mx:Form color="0x323232">
+ <mx:Form>
<mx:FormItem label="Enter text: ">
<s:TextInput id="regex_text" text="xxxxABC4xxx" width="100%"/>
</mx:FormItem>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml
index 3d5488e..5c3a060 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml
@@ -19,36 +19,28 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</fx:Script>
-
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
+
<fx:Declarations>
<mx:SocialSecurityValidator source="{ssn}" property="text"
trigger="{myButton}" triggerEvent="click"
- valid="Alert.show('Validation Succeeded!');"/>
+ valid="Alert.show('Validation Succeeded!')"/>
</fx:Declarations>
- <s:Panel title="SocialSecurityValidator Example" width="620" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="SocialSecurityValidator Example" width="100%" height="100%">
<s:layout>
- <s:VerticalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
+ <s:VerticalLayout paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form color="0x323232">
+ <mx:Form>
<mx:FormItem label="Enter Social Security number: ">
<s:TextInput id="ssn" width="100%"/>
</mx:FormItem>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml
index 41d478e..08d641b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml
@@ -19,8 +19,7 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
@@ -28,30 +27,23 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
<fx:Declarations>
<mx:StringValidator source="{fname}" property="text"
tooShortError="This string is shorter than the minimum allowed length of 4. "
tooLongError="This string is longer than the maximum allowed length of 20."
minLength="4" maxLength="20"
trigger="{myButton}" triggerEvent="click"
- valid="Alert.show('Validation Succeeded!');"/>
+ valid="Alert.show('Validation Succeeded!')"/>
</fx:Declarations>
- <s:Panel title="StringValidator Example" width="620" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="StringValidator Example" width="100%" height="100%">
<s:layout>
- <s:VerticalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
+ <s:VerticalLayout paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form color="0x323232">
+ <mx:Form>
<mx:FormItem label="Enter a name between 4 and 20 characters: ">
<s:TextInput id="fname" width="100%"/>
</mx:FormItem>
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml
index b1ac856..ccccd1e 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml
@@ -19,36 +19,28 @@
-->
<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">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</fx:Script>
-
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
- </s:layout>
-
+
<fx:Declarations>
<mx:ZipCodeValidator source="{zip}" property="text"
trigger="{myButton}" triggerEvent="click"
- valid="Alert.show('Validation Succeeded!');"/>
+ valid="Alert.show('Validation Succeeded!')"/>
</fx:Declarations>
- <s:Panel title="ZipCodeValidator Example" width="620" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="ZipCodeValidator Example" width="100%" height="100%">
<s:layout>
- <s:VerticalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
+ <s:VerticalLayout paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:Form color="0x323232">
+ <mx:Form>
<mx:FormItem label="Enter a 5 or 9 digit U.S. Zip code: ">
<s:TextInput id="zip" width="100%"/>
</mx:FormItem>
