You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by jm...@apache.org on 2014/08/10 13:20:36 UTC
[1/6] git commit: [flex-utilities] [refs/heads/develop] - Added more
spark examples
Repository: flex-utilities
Updated Branches:
refs/heads/develop 832024b19 -> d4e368dce
Added more spark examples
Project: http://git-wip-us.apache.org/repos/asf/flex-utilities/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-utilities/commit/e39606ca
Tree: http://git-wip-us.apache.org/repos/asf/flex-utilities/tree/e39606ca
Diff: http://git-wip-us.apache.org/repos/asf/flex-utilities/diff/e39606ca
Branch: refs/heads/develop
Commit: e39606cadb5721ec5c8ea94aa247f55cb5658cb0
Parents: 832024b
Author: Justin Mclean <jm...@apache.org>
Authored: Sun Aug 10 21:18:47 2014 +1000
Committer: Justin Mclean <jm...@apache.org>
Committed: Sun Aug 10 21:18:47 2014 +1000
----------------------------------------------------------------------
TourDeFlex/TourDeFlex3/build.xml | 65 +++++++++++++++++++++-
TourDeFlex/TourDeFlex3/src/explorer.xml | 80 ++++++++++++++++++++++++++--
2 files changed, 140 insertions(+), 5 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e39606ca/TourDeFlex/TourDeFlex3/build.xml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/build.xml b/TourDeFlex/TourDeFlex3/build.xml
index 5284f10..0b93382 100644
--- a/TourDeFlex/TourDeFlex3/build.xml
+++ b/TourDeFlex/TourDeFlex3/build.xml
@@ -48,7 +48,7 @@
</sequential>
</macrodef>
- <target name="compile" depends="compile-shell,compile-mx,compile-spark,compile-spark2">
+ <target name="compile" depends="compile-shell,compile-mx,compile-spark,compile-spark2,compile-spark3">
</target>
<target name="compile-shell">
@@ -314,6 +314,69 @@
<compile-mxml example="/spark/i18n/SparkSortandSortFieldExample"/>
<compile-mxml example="/spark/i18n/SparkSortandSortField2Example"/>
<compile-mxml example="/spark/i18n/SparkStringToolsExample"/>
+ <compile-mxml example="/spark/i18n/SparkFormatterExample"/>
+
+ <compile-mxml example="/spark/controls/DataGridCustomRendererExample"/>
+ <compile-mxml example="/spark/controls/DataGridCustomRendererPrepareExample"/>
+ <compile-mxml example="/spark/controls/DataGridCustomSkinExample"/>
+ <compile-mxml example="/spark/controls/DataGridExample2"/>
+ <compile-mxml example="/spark/controls/DataGridSimpleColumnsExample"/>
+ <compile-mxml example="/spark/controls/DataGridSimpleNoWrapExample"/>
+ <compile-mxml example="/spark/controls/DataGridSizingExample"/>
+
+ <compile-mxml example="/spark/controls/ListDataPagingExample"/>
+
+ <compile-mxml example="/spark/controls/SampleHelpFormExample"/>
+ <compile-mxml example="/spark/controls/SampleSequenceFormExample"/>
+ <compile-mxml example="/spark/controls/SampleSimpleFormExample"/>
+ <compile-mxml example="/spark/controls/SampleStackedFormExample"/>
+
+ <compile-mxml example="/spark/controls/OSMFExample"/>
+ </target>
+
+ <target name="compile-spark3">
+ <compile-mxml example="/spark/other/BidirectionalBinding1Example"/>
+ <compile-mxml example="/spark/other/BidirectionalBinding2Example"/>
+ <compile-mxml example="/spark/other/ControllingViewportExample"/>
+ <compile-mxml example="/spark/itemRenderers/ListItemRendererExample"/>
+ <compile-mxml example="/spark/effects/AnimatePropertiesExample"/>
+ <compile-mxml example="/spark/effects/AnimateTransformExample"/>
+ <compile-mxml example="/spark/effects/CrossFadeExample"/>
+ <compile-mxml example="/spark/effects/FadeExample"/>
+ <compile-mxml example="/spark/effects/Rotate3DExample"/>
+ <compile-mxml example="/spark/effects/Scale3DExample"/>
+ <compile-mxml example="/spark/fxg/EllipseTransformExample"/>
+ <compile-mxml example="/spark/fxg/DropShadowGraphicExample"/>
+ <compile-mxml example="/spark/fxg/LinearGradientsSpreadMethodExample"/>
+ <compile-mxml example="/spark/fxg/StaticFXGExample"/>
+ <compile-mxml example="/spark/containers/BorderExample"/>
+ <compile-mxml example="/spark/containers/GroupExample"/>
+ <compile-mxml example="/spark/containers/PanelExample"/>
+ <compile-mxml example="/spark/containers/TabNavigator1Example"/>
+ <compile-mxml example="/spark/containers/TabNavigator2Example"/>
+ <compile-mxml example="/spark/skinning/ButtonWithIconExample"/>
+ <compile-mxml example="/spark/skinning/SkinningApplication1Example"/>
+ <compile-mxml example="/spark/skinning/SkinningApplication2Example"/>
+ <compile-mxml example="/spark/skinning/SkinningApplication3Example"/>
+ <compile-mxml example="/spark/skinning/SkinningContainerExample"/>
+ <compile-mxml example="/spark/css/CSSIDSelectorExample"/>
+ <compile-mxml example="/spark/controls/ButtonExample"/>
+ <compile-mxml example="/spark/controls/ButtonBarExample"/>
+ <compile-mxml example="/spark/controls/PopUpAnchor1Example"/>
+ <compile-mxml example="/spark/controls/PopUpAnchor2Example"/>
+ <compile-mxml example="/spark/controls/ToggleButtonExample"/>
+ <compile-mxml example="/spark/controls/CheckboxExample"/>
+ <compile-mxml example="/spark/controls/DropdownExample"/>
+ <compile-mxml example="/spark/controls/NumericStepperExample"/>
+ <compile-mxml example="/spark/controls/RadioButtonExample"/>
+ <compile-mxml example="/spark/controls/ToggleButton2Example"/>
+ <compile-mxml example="/spark/controls/ScrollBarExample"/>
+ <!-- <compile-mxml example="/spark/controls/Scroller1Example"/> -->
+ <compile-mxml example="/spark/controls/Scroller2Example"/>
+ <compile-mxml example="/spark/controls/SliderExample"/>
+ <compile-mxml example="/spark/controls/SpinnerExample"/>
+ <compile-mxml example="/spark/controls/VideoPlayerExample"/>
+ <compile-mxml example="/spark/controls/ListExample"/>
</target>
<target name="package" description="package up all source files" depends="package-dir,package-tar,package-zip">
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e39606ca/TourDeFlex/TourDeFlex3/src/explorer.xml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/explorer.xml b/TourDeFlex/TourDeFlex3/src/explorer.xml
index da2f503..9c4c223 100755
--- a/TourDeFlex/TourDeFlex3/src/explorer.xml
+++ b/TourDeFlex/TourDeFlex3/src/explorer.xml
@@ -205,11 +205,16 @@
</node>
</node>
<node label="Spark Framework Components">
- <node label="Techniques">
+ <node label="Techniques and Examples">
<node label="Advanced CSS">
<node label="Descendant Selector" app="spark/css/CSSDescendantSelectorExample" />
+ <node label="ID Selector" app="spark/css/CSSIDSelectorExample" />
<node label="Type + Class Selector" app="spark/css/CSSTypeClassSelectorExample" />
</node>
+ <node label="Binding">
+ <node label="Bidirectional Binding" app="spark/other/BidirectionalBinding1Example" />
+ <node label="Bidirectional Binding" app="spark/other/BidirectionalBinding2Example" />
+ </node>
<node label="Cursors">
<node label="Busy Cursor" app="spark/other/Cursor1Example" />
<node label="Custom Cursor" app="spark/other/Cursor2Example" />
@@ -218,6 +223,22 @@
<node label="List to List" app="spark/other/DragAndDrop1Example" />
<node label="List to Panel" app="spark/other/DragAndDrop2Example" />
</node>
+ <node label="DataGrid">
+ <node label="DataGrid" app="spark/controls/DataGridExample2"/>
+ <node label="Custom Renderer" app="spark/controls/DataGridCustomRendererExample"/>
+ <node label="Custom Renderer" app="spark/controls/DataGridCustomRendererPrepareExample"/>
+ <node label="Custom Skin" app="spark/controls/DataGridCustomSkinExample"/>
+ <node label="Columns" app="spark/controls/DataGridSimpleColumnsExample"/>
+ <node label="No wrap" app="spark/controls/DataGridSimpleNoWrapExample"/>
+ <node label="Sizing" app="spark/controls/DataGridSizingExample"/>
+ </node>
+ <node label="Data Paging">
+ <node label="Data Paging" app="spark/controls/ListDataPagingExample" />
+ </node>
+ <node label="Drag and Drop">
+ <node label="List to List" app="spark/other/DragAndDrop1Example" />
+ <node label="List to Panel" app="spark/other/DragAndDrop2Example" />
+ </node>
<node label="Custom Components">
<node label="Search" app="spark/components/SearchExample" />
<node label="Video Player" app="spark/components/VideoPlayerExample" />
@@ -238,8 +259,10 @@
<node label="Sort" app="spark/i18n/SparkSortandSortFieldExample"/>
<node label="Basic Sort" app="spark/i18n/SparkSortandSortField2Example"/>
<node label="String Tools" app="spark/i18n/SparkStringToolsExample"/>
+ <node label="Formatters" app="spark/i18n/SparkFormatterExample"/>
</node>
<node label="Item Renderers">
+ <node label="List" app="spark/itemRenderers/ListItemRendererExample"/>
<node label="Scale Image" app="spark/itemRenderers/ItemRenderer1Example" />
<node label="3D Rotate" app="spark/itemRenderers/ItemRenderer2Example" />
</node>
@@ -251,6 +274,12 @@
<node label="Dispatch" app="spark/events/EventExample5" />
<node label="Custom" app="spark/events/EventExample6" />
</node>
+ <node label="Forms">
+ <node label="Help Form" app="spark/controls/SampleHelpFormExample"/>
+ <node label="Sequence Form" app="spark/controls/SampleSequenceFormExample"/>
+ <node label="Simple Form" app="spark/controls/SampleSimpleFormExample"/>
+ <node label="Stacked Form" app="spark/controls/SampleStackedFormExample"/>
+ </node>
<node label="Modules">
<node label="Load" app="spark/modules/ModuleExample" />
</node>
@@ -260,51 +289,94 @@
<node label="ScrollBars">
<node label="ScrollBars" app="spark/other/ScrollBarsExample" />
</node>
+ <node label="Skinning">
+ <node label="Button With Icon" app="spark/skinning/ButtonWithIconExample"/>
+ <node label="Application" app="spark/skinning/SkinningApplication1Example"/>
+ <node label="Application" app="spark/skinning/SkinningApplication2Example"/>
+ <node label="Application" app="spark/skinning/SkinningApplication3Example"/>
+ <node label="Container" app="spark/skinning/SkinningContainerExample"/>
+ </node>
+ <node label="Viewport">
+ <node label="Controlling Viewport" app="spark/other/ControllingViewportExample" />
+ </node>
</node>
<node label="Effects and Filters">
<node label="Move 3D" app="spark/effects/Move3DExample" />
<node label="Filter" app="spark/other/FilterExample" />
<node label="Wipe" app="spark/effects/WipeExample" />
+ <node label="Animate Property" app="spark/effects/AnimatePropertiesExample" />
+ <node label="Animate Transform" app="spark/effects/AnimateTransformExample" />
+ <node label="Cross Fade" app="spark/effects/CrossFadeExample" />
+ <node label="Fade" app="spark/effects/FadeExample" />
+ <node label="Rotate 3D" app="spark/effects/Rotate3DExample" />
+ <node label="Scale 3D" app="spark/effects/Scale3DExample" />
</node>
<node label="Visual Components">
<node label="Containers">
<node label="Accordion" app="spark/controls/AccordionExample" />
+ <node label="Border" app="spark/containers/BorderExample"/>
<node label="DataGroup" app="spark/controls/DataGroupExample" />
<node label="Form" app="spark/controls/FormExample" />
<node label="HGroup" app="spark/containers/SampleHGroup" />
- <node label="TabNavigator" app="spark/controls/TabNavigatorExample" />
+ <node label="Group" app="spark/containers/GroupExample"/>
+ <node label="Panel" app="spark/containers/PanelExample"/>
<node label="SkinableDataContainer" app="spark/containers/SkinableDataContainerExample" />
+ <node label="TabNavigator" app="spark/controls/TabNavigatorExample" />
+ <node label="TabNavigator" app="spark/containers/TabNavigator1Example" />
+ <node label="TabNavigator" app="spark/containers/TabNavigator2Example" />
<node label="TitleGroup" app="spark/containers/TileGroupExample" />
<node label="TitleWindow" app="spark/controls/TitleWindowExample" />
<node label="ViewStack" app="spark/controls/ViewStackExample" />
<node label="VGroup" app="spark/containers/SampleVGroup" />
<node label="Vertical Horizontal Align" app="spark/containers/SampleVerticalHorizontalAlign" />
</node>
- <node label="FXG">
+ <node label="Graphics and FXG">
+ <node label="Drop Shadow" app="spark/fxg/DropShadowGraphicExample" />
<node label="Image" app="spark/fxg/BitmapImageExample" />
- <node label="Elipse" app="spark/fxg/EclipseExample" />
+ <node label="Eclipse" app="spark/fxg/EclipseExample" />
+ <node label="Ellipse Transform" app="spark/fxg/EllipseTransformExample" />
<node label="Line" app="spark/fxg/LineExample" />
+ <node label="Linear Gradient" app="spark/fxg/LinearGradientsSpreadMethodExample" />
<node label="Rectangle" app="spark/fxg/RectExample" />
<node label="RichText" app="spark/fxg/RichTextExample" />
+ <node label="Static FXG" app="spark/fxg/StaticFXGExample" />
</node>
<node label="General Controls">
<node label="AdvancedDataGrid" app="spark/controls/AdvancedDatagridExample" />
+ <node label="Checkbox" app="spark/controls/CheckboxExample"/>
<node label="ColorPicker" app="spark/controls/ColorPickerExample" />
<node label="ComboBox" app="spark/controls/ComboBoxExample" />
+ <node label="DropDown" app="spark/controls/DropdownExample"/>
<node label="DataGrid" app="spark/controls/DataGridExample" />
+ <node label="List" app="spark/controls/ListExample" />
<node label="Menu" app="spark/controls/MenuExample" />
+ <node label="NumericStepper" app="spark/controls/NumericStepperExample"/>
<node label="Image" app="spark/controls/ImageExample" />
<node label="OLAPDataGrid" app="spark/controls/OLAPDataGridExample" />
<node label="ProgressBar" app="spark/controls/ProgressBarExample" />
+ <node label="RadioButton" app="spark/controls/RadioButtonExample"/>
+ <node label="ScrollBar" app="spark/controls/ScrollBarExample" />
+ <node label="Scroller" app="spark/controls/Scroller1Example"/>
+ <node label="Scroller" app="spark/controls/Scroller2Example"/>
+ <node label="Slider" app="spark/controls/SliderExample"/>
+ <node label="Spinner" app="spark/controls/SpinnerExample"/>
<node label="SWFloader" app="spark/controls/SWFLoaderExample" />
<node label="ToolTip" app="spark/controls/ToolTipExample" />
<node label="Tree" app="spark/controls/TreeExample" />
<node label="VideoDisplay" app="spark/controls/VideoDisplayExample" />
+ <node label="VideoDisplay" app="spark/controls/OSMFExample" />
+ <node label="VideoPlayer" app="spark/controls/VideoPlayerExample" />
</node>
<node label="Button Controls">
+ <node label="Button" app="spark/controls/ButtonExample"/>
+ <node label="ButtonBar" app="spark/controls/ButtonBarExample"/>
<node label="LinkBar" app="spark/controls/LinkBarExample" />
<node label="LinkButton" app="spark/controls/LinkButtonExample" />
<node label="PopUpButton" app="spark/controls/PopupButtonExample" />
+ <node label="PopUpAnchor" app="spark/controls/PopUpAnchor1Example"/>
+ <node label="PopUpAnchor" app="spark/controls/PopUpAnchor2Example"/>
+ <node label="ToggleButton" app="spark/controls/ToggleButtonExample"/>
+ <node label="ToggleButton" app="spark/controls/ToggleButton2Example"/>
<node label="ToggleButtonBar" app="spark/controls/ToggleButtonBarExample" />
</node>
<node label="Date Controls">
[6/6] git commit: [flex-utilities] [refs/heads/develop] - Added more
spark examples
Posted by jm...@apache.org.
Added more spark examples
Project: http://git-wip-us.apache.org/repos/asf/flex-utilities/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-utilities/commit/d4e368dc
Tree: http://git-wip-us.apache.org/repos/asf/flex-utilities/tree/d4e368dc
Diff: http://git-wip-us.apache.org/repos/asf/flex-utilities/diff/d4e368dc
Branch: refs/heads/develop
Commit: d4e368dce6dca399b938360a62cf8b0519da27ec
Parents: e39606c
Author: Justin Mclean <jm...@apache.org>
Authored: Sun Aug 10 21:19:39 2014 +1000
Committer: Justin Mclean <jm...@apache.org>
Committed: Sun Aug 10 21:19:39 2014 +1000
----------------------------------------------------------------------
.../src/spark/charts/AreaChartExample.mxml | 3 +-
.../src/spark/charts/BarChartExample.mxml | 3 +-
.../src/spark/charts/BubbleChartExample.mxml | 3 +-
.../spark/charts/CandleStickChartExample.mxml | 3 +-
.../src/spark/charts/ColumnChartExample.mxml | 3 +-
.../src/spark/charts/HLOCChartExample.mxml | 3 +-
.../src/spark/charts/LineChartExample.mxml | 3 +-
.../src/spark/charts/PieChartExample.mxml | 3 +-
.../src/spark/charts/PlotChartExample.mxml | 3 +-
.../spark/charts/SeriesInterpolateExample.mxml | 3 +-
.../src/spark/charts/SeriesSlideExample.mxml | 3 +-
.../src/spark/charts/SeriesZoomExample.mxml | 3 +-
.../src/spark/containers/BorderExample.mxml | 71 +++
.../TourDeFlex3/src/spark/containers/Contact.as | 34 ++
.../src/spark/containers/GroupExample.mxml | 75 +++
.../src/spark/containers/PanelExample.mxml | 79 +++
.../SampleVerticalHorizontalAlign.mxml | 2 +-
.../SkinableDataContainerExample.mxml | 2 +-
.../spark/containers/TabNavigator1Example.mxml | 116 +++++
.../spark/containers/TabNavigator2Example.mxml | 110 ++++
.../src/spark/containers/TileGroupExample.mxml | 2 +-
.../src/spark/containers/personIcon.png | Bin 0 -> 3859 bytes
.../skins/CustomTabBarButtonSkin.mxml | 264 ++++++++++
.../containers/skins/CustomTabBarSkin.mxml | 97 ++++
.../src/spark/controls/ButtonBarExample.mxml | 106 ++++
.../src/spark/controls/ButtonExample.mxml | 65 +++
.../src/spark/controls/CheckboxExample.mxml | 78 +++
.../src/spark/controls/CustomDataGridSkin.mxml | 375 ++++++++++++++
.../controls/DataGridCustomRendererExample.mxml | 62 +++
.../DataGridCustomRendererPrepareExample.mxml | 68 +++
.../controls/DataGridCustomSkinExample.mxml | 39 ++
.../src/spark/controls/DataGridExample2.mxml | 47 ++
.../controls/DataGridSimpleColumnsExample.mxml | 49 ++
.../controls/DataGridSimpleNoWrapExample.mxml | 37 ++
.../spark/controls/DataGridSizingExample.mxml | 47 ++
.../src/spark/controls/DropdownExample.mxml | 90 ++++
.../TourDeFlex3/src/spark/controls/Item.as | 62 +++
.../spark/controls/ListDataPagingExample.mxml | 80 +++
.../src/spark/controls/ListExample.mxml | 102 ++++
.../src/spark/controls/MyListItemRenderer.mxml | 39 ++
.../spark/controls/NumericStepperExample.mxml | 92 ++++
.../src/spark/controls/OSMFExample.mxml | 27 +
.../TourDeFlex3/src/spark/controls/PagedList.as | 510 +++++++++++++++++++
.../src/spark/controls/PopUpAnchor1Example.mxml | 81 +++
.../src/spark/controls/PopUpAnchor2Example.mxml | 80 +++
.../src/spark/controls/RadioButtonExample.mxml | 95 ++++
.../spark/controls/SampleHelpFormExample.mxml | 44 ++
.../controls/SampleSequenceFormExample.mxml | 37 ++
.../spark/controls/SampleSimpleFormExample.mxml | 38 ++
.../controls/SampleStackedFormExample.mxml | 38 ++
.../src/spark/controls/ScrollBarExample.mxml | 90 ++++
.../src/spark/controls/Scroller1Example.mxml | 75 +++
.../src/spark/controls/Scroller2Example.mxml | 83 +++
.../src/spark/controls/SliderExample.mxml | 67 +++
.../src/spark/controls/SpinnerExample.mxml | 50 ++
.../spark/controls/ToggleButton2Example.mxml | 146 ++++++
.../spark/controls/ToggleButtonBarExample.mxml | 7 +-
.../src/spark/controls/ToggleButtonExample.mxml | 111 ++++
.../src/spark/controls/VideoPlayerExample.mxml | 68 +++
.../controls/assets/control_pause_blue.png | Bin 0 -> 721 bytes
.../spark/controls/assets/control_play_blue.png | Bin 0 -> 717 bytes
.../spark/controls/assets/control_stop_blue.png | Bin 0 -> 695 bytes
.../src/spark/controls/assets/icon_close.png | Bin 0 -> 59707 bytes
.../src/spark/controls/iconclose.gif | Bin 0 -> 340 bytes
.../TourDeFlex3/src/spark/controls/iconinfo.gif | Bin 0 -> 227 bytes
.../spark/controls/skins/CloseButtonSkin.mxml | 184 +++++++
.../src/spark/controls/skins/MyPanelSkin.mxml | 99 ++++
.../src/spark/css/CSSIDSelectorExample.mxml | 68 +++
.../spark/effects/AnimatePropertiesExample.mxml | 88 ++++
.../spark/effects/AnimateTransformExample.mxml | 116 +++++
.../src/spark/effects/CrossFadeExample.mxml | 68 +++
.../src/spark/effects/FadeExample.mxml | 60 +++
.../src/spark/effects/Rotate3DExample.mxml | 114 +++++
.../src/spark/effects/Scale3DExample.mxml | 118 +++++
.../src/spark/effects/assets/ApacheFlexIcon.png | Bin 0 -> 7983 bytes
.../src/spark/effects/assets/images/2.jpg | Bin 0 -> 549 bytes
.../src/spark/effects/assets/images/3.jpg | Bin 0 -> 418 bytes
.../src/spark/effects/assets/images/4.jpg | Bin 0 -> 911 bytes
.../src/spark/effects/assets/images/5.jpg | Bin 0 -> 1617 bytes
.../src/spark/effects/assets/images/6.jpg | Bin 0 -> 1061 bytes
.../src/spark/effects/assets/images/7.jpg | Bin 0 -> 1754 bytes
.../src/spark/effects/assets/images/8.jpg | Bin 0 -> 1716 bytes
.../src/spark/effects/assets/images/9.jpg | Bin 0 -> 1552 bytes
.../src/spark/events/EventExample1.mxml | 3 +-
.../src/spark/events/EventExample2.mxml | 3 +-
.../src/spark/events/EventExample3.mxml | 3 +-
.../src/spark/events/EventExample4.mxml | 3 +-
.../src/spark/events/EventExample5.mxml | 3 +-
.../src/spark/events/EventExample6.mxml | 3 +-
.../formatters/CurrencyFormatterExample.mxml | 3 +-
.../spark/formatters/DateFormatterExample.mxml | 3 +-
.../formatters/NumberFormatterExample.mxml | 3 +-
.../spark/formatters/PhoneFormatterExample.mxml | 3 +-
.../formatters/SwitchFormatterExample.mxml | 3 +-
.../formatters/ZipCodeFormatterExample.mxml | 3 +-
.../src/spark/fxg/DropShadowGraphicExample.mxml | 66 +++
.../src/spark/fxg/EllipseTransformExample.mxml | 66 +++
.../fxg/LinearGradientsSpreadMethodExample.mxml | 63 +++
.../src/spark/fxg/OrangeCrayonStar.fxg | 47 ++
.../src/spark/fxg/StaticFXGExample.mxml | 51 ++
.../src/spark/fxg/assets/ApacheFlexIcon.png | Bin 0 -> 7983 bytes
.../src/spark/i18n/SparkCollator2Example.mxml | 3 +-
.../src/spark/i18n/SparkCollatorExample.mxml | 3 +-
.../i18n/SparkCurrencyFormatter2Example.mxml | 2 +-
.../i18n/SparkCurrencyFormatterExample.mxml | 2 +-
.../i18n/SparkCurrencyValidator2Example.mxml | 2 +-
.../i18n/SparkCurrencyValidatorExample.mxml | 2 +-
.../i18n/SparkDateTimeFormatter2Example.mxml | 2 +-
.../i18n/SparkDateTimeFormatterExample.mxml | 2 +-
.../src/spark/i18n/SparkFormatterExample.mxml | 58 +++
.../spark/i18n/SparkNumberFormatterExample.mxml | 2 +-
.../i18n/SparkNumberValidator2Example.mxml | 2 +-
.../spark/i18n/SparkNumberValidatorExample.mxml | 2 +-
.../i18n/SparkSortandSortField2Example.mxml | 2 +-
.../i18n/SparkSortandSortFieldExample.mxml | 2 +-
.../src/spark/i18n/SparkStringToolsExample.mxml | 2 +-
.../TourDeFlex3/src/spark/itemRenderers/Item.as | 62 +++
.../itemRenderers/ListItemRendererExample.mxml | 102 ++++
.../spark/itemRenderers/MyListItemRenderer.mxml | 39 ++
.../src/spark/modules/ModuleExample.mxml | 3 +-
.../other/BidirectionalBinding1Example.mxml | 45 ++
.../other/BidirectionalBinding2Example.mxml | 111 ++++
.../TourDeFlex3/src/spark/other/Contact.as | 37 ++
.../spark/other/ControllingViewportExample.mxml | 44 ++
.../src/spark/other/Cursor1Example.mxml | 3 +-
.../src/spark/other/Cursor2Example.mxml | 3 +-
.../src/spark/other/DragAndDrop1Example.mxml | 3 +-
.../src/spark/other/DragAndDrop2Example.mxml | 3 +-
.../src/spark/other/FilterExample.mxml | 3 +-
.../src/spark/other/RepeaterExample.mxml | 3 +-
.../src/spark/other/ScrollBarsExample.mxml | 2 +-
.../src/spark/other/assets/ApacheFlexLogo.png | Bin 0 -> 71228 bytes
.../other/skins/CustomTabBarButtonSkin.mxml | 262 ++++++++++
.../src/spark/other/skins/CustomTabBarSkin.mxml | 97 ++++
.../spark/skinning/ButtonWithIconExample.mxml | 49 ++
.../skinning/SkinningApplication1Example.mxml | 44 ++
.../skinning/SkinningApplication2Example.mxml | 43 ++
.../skinning/SkinningApplication3Example.mxml | 48 ++
.../skinning/SkinningContainerExample.mxml | 49 ++
.../src/spark/skinning/assets/arrow_icon_sm.png | Bin 0 -> 527 bytes
.../src/spark/skinning/assets/icon_add.png | Bin 0 -> 737 bytes
.../src/spark/skinning/assets/icon_check.png | Bin 0 -> 481 bytes
.../src/spark/skinning/assets/icon_close16.png | Bin 0 -> 59709 bytes
.../src/spark/skinning/assets/icon_plus.png | Bin 0 -> 58539 bytes
.../src/spark/skinning/assets/icon_remove.png | Bin 0 -> 693 bytes
.../src/spark/skinning/assets/wood-bg.png | Bin 0 -> 628195 bytes
.../src/spark/skinning/skins/AddButtonSkin.mxml | 183 +++++++
.../skinning/skins/BackgroundImageAppSkin.mxml | 41 ++
.../spark/skinning/skins/CloseButtonSkin.mxml | 184 +++++++
.../skinning/skins/CustomControlBarAppSkin.mxml | 106 ++++
.../skins/CustomSkinnableContainerSkin.mxml | 55 ++
.../spark/skinning/skins/FancyButtonSkin.mxml | 271 ++++++++++
.../skins/GradientBackgroundAppSkin.mxml | 53 ++
.../skinning/skins/IconTextButtonSkin.mxml | 195 +++++++
.../src/spark/skinning/skins/MyPanelSkin.mxml | 101 ++++
.../src/spark/skinning/skins/TDFPanelSkin.mxml | 171 +++++++
.../src/spark/tlf/TextLayoutEditorSample.mxml | 2 +-
.../validators/CurrencyValidatorExample.mxml | 3 +-
.../spark/validators/DateValidatorExample.mxml | 3 +-
.../spark/validators/EmailValidatorExample.mxml | 3 +-
.../spark/validators/FormValidatorExample.mxml | 3 +-
.../validators/NumberValidatorExample.mxml | 3 +-
.../validators/RegExpValidatorExample.mxml | 3 +-
.../SocialSecurityValidatorExample.mxml | 3 +-
.../validators/StringValidatorExample.mxml | 3 +-
.../validators/ZipCodeValidatorExample.mxml | 3 +-
166 files changed, 7644 insertions(+), 105 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml
index dda5d88..f504b6c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml
index f33173c..554ce88 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml
index 4bb4b3d..365df88 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml
index 8caa800..b39be2e 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml
index ca36f42..f3ba41d 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.mxml
index 38cd01b..73fe34d 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.mxml
index 432a064..5f61ee0 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.mxml
index 2ad6001..f14e5c9 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/charts/PlotChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/PlotChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/PlotChartExample.mxml
index 3a60d4f..8b1b581 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/PlotChartExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/PlotChartExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml
index 16a51bf..554f633 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml
index 58f88a4..4d24782 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml
index d5b85d2..d94c176 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml
new file mode 100644
index 0000000..c64b094
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<!-- http://blog.flexexamples.com/2009/09/04/setting-the-corner-radius-on-a-spark-border-container-in-flex-4/ -->
+<s:Application name="Spark_Border_cornerRadius_test"
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark" viewSourceURL="srcview/index.html">
+
+ <s:Panel width="100%" height="100%" title="BorderContainer Sample"
+ skinClass="skins.TDFPanelSkin">
+
+ <s:VGroup id="mainGroup" width="100%"
+ horizontalCenter="50" top="10">
+ <s:HGroup gap="50" paddingBottom="15">
+ <s:VGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Corner Radius:"/>
+ <s:HSlider id="slider"
+ minimum="0"
+ maximum="100"
+ value="2" />
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Border Weight:"/>
+ <s:NumericStepper id="weight" value="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Border Color:"/>
+ <mx:ColorPicker id="color" color="0x000000"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Drop Shadow:"/>
+ <s:CheckBox id="chkShadow" selected="true"/>
+ </s:HGroup>
+ </s:VGroup>
+
+ <s:BorderContainer id="brdr" width="200"
+ cornerRadius="{slider.value}" borderWeight="{weight.value}"
+ borderColor="{color.selectedColor}" dropShadowVisible="{chkShadow.selected}"
+ backgroundColor="0x3399ff">
+ </s:BorderContainer>
+ </s:HGroup>
+
+ <s:Label bottom="10" horizontalCenter="0" width="95%" verticalAlign="justify" color="#323232"
+ 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,
+backgroundColor, backgroundImage, cornerRadius and dropShadowVisible."/>
+ </s:VGroup>
+
+ </s:Panel>
+
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/containers/Contact.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/Contact.as b/TourDeFlex/TourDeFlex3/src/spark/containers/Contact.as
new file mode 100644
index 0000000..838a300
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/Contact.as
@@ -0,0 +1,34 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+ [Bindable]
+ public class Contact
+ {
+ public var name:String;
+ public var address:String;
+ public var city:String;
+ public var state:String;
+ public var zip:String;
+
+ public function Contact()
+ {
+ }
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml
new file mode 100644
index 0000000..52a579d
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/halo" viewSourceURL="srcview/index.html">
+
+ <s:layout>
+ <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">
+
+ <!-- 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 -->
+ <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"
+ 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 -->
+ <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: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:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml
new file mode 100644
index 0000000..76369f5
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html">
+
+ <!-- Note: 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:Label color="0x323232" 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>
+
+
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml
index a30bc57..abfb346 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml
@@ -20,7 +20,7 @@
<!-- 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" viewSourceURL="srcview/index.html">
+ xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="0x323232" color="0xFFFFFF">
<s:VGroup verticalAlign="middle" width="526" height="230" top="57" left="10">
<s:HGroup verticalAlign="middle" height="100%" color="0x000000">
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/containers/SkinableDataContainerExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SkinableDataContainerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SkinableDataContainerExample.mxml
index e2c9414..09fb38c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/containers/SkinableDataContainerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SkinableDataContainerExample.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" viewSourceURL="srcview/index.html">
+ 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>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml
new file mode 100644
index 0000000..e23b033
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" viewSourceURL="srcview/index.html">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.events.ListEvent;
+
+ [Bindable]
+ private var contact:Contact = new Contact();
+
+ protected function submitBtn_clickHandler(event:MouseEvent):void
+ {
+ contact.name = nameTxt.text;
+ contact.address = address.text;
+ contact.city = city.text;
+ contact.state = state.text;
+ contact.zip = zip.text;
+ trace(contacts.contains(contact));
+
+ if (!contacts.contains(contact))
+ contacts.addItem(contact);
+ contact = new Contact();
+ }
+
+ protected function dg_itemClickHandler(event:ListEvent):void
+ {
+ contact = dg.selectedItem as Contact;
+ }
+
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <s:ArrayCollection id="contacts"/>
+ </fx:Declarations>
+
+ <s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="TabBar Sample" >
+ <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>
+ <mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%">
+ <mx:FormItem label="Name:">
+ <s:TextInput id="nameTxt" text="{contact.name}"/>
+ </mx:FormItem>
+ <mx:FormItem label="Address:">
+ <s:TextInput id="address" text="{contact.address}"/>
+ </mx:FormItem>
+ <mx:FormItem label="City:">
+ <s:TextInput id="city" text="{contact.city}"/>
+ </mx:FormItem>
+ <mx:FormItem label="State:">
+ <s:TextInput id="state" text="{contact.state}"/>
+ </mx:FormItem>
+ <mx:FormItem label="Zip:">
+ <s:TextInput id="zip" text="{contact.zip}" maxChars="5"/>
+ </mx:FormItem>
+ <mx:FormItem>
+ <s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event)"/>
+ </mx:FormItem>
+ </mx:Form>
+ </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>
+ <mx:DataGrid id="dg" dataProvider="{contacts}" x="5" y="5" doubleClickEnabled="true"
+ doubleClick="{tabs.selectedIndex=0}" itemClick="dg_itemClickHandler(event)">
+ <mx:columns>
+ <mx:DataGridColumn headerText="Name" dataField="name"/>
+ <mx:DataGridColumn headerText="Address" dataField="address"/>
+ <mx:DataGridColumn headerText="City" dataField="city"/>
+ <mx:DataGridColumn headerText="State" dataField="state"/>
+ <mx:DataGridColumn headerText="Zip" dataField="zip"/>
+ </mx:columns>
+ </mx:DataGrid>
+ </s:BorderContainer>
+
+ </s:NavigatorContent>
+
+ </mx:ViewStack>
+
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml
new file mode 100644
index 0000000..7bc0b35
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml
@@ -0,0 +1,110 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.events.ListEvent;
+
+ [Bindable]
+ private var contact:Contact = new Contact();
+
+ protected function submitBtn_clickHandler(event:MouseEvent):void
+ {
+ // Note: this sample uses bidirectional data binding, so we do not have to
+ // explicitly set the contact fields to save them!
+ if (!contacts.contains(contact))
+ contacts.addItem(contact);
+ contact = new Contact();
+ }
+
+ protected function dg_itemClickHandler(event:ListEvent):void
+ {
+ contact = dg.selectedItem as Contact;
+ }
+
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <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: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%">
+ <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>
+ <mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%">
+ <mx:FormItem label="Name:">
+ <s:TextInput id="nameTxt" text="@{contact.name}"/>
+ </mx:FormItem>
+ <mx:FormItem label="Address:">
+ <s:TextInput id="address" text="@{contact.address}"/>
+ </mx:FormItem>
+ <mx:FormItem label="City:">
+ <s:TextInput id="city" text="@{contact.city}"/>
+ </mx:FormItem>
+ <mx:FormItem label="State:">
+ <s:TextInput id="state" text="@{contact.state}"/>
+ </mx:FormItem>
+ <mx:FormItem label="Zip:">
+ <s:TextInput id="zip" text="@{contact.zip}" maxChars="5"/>
+ </mx:FormItem>
+ <mx:FormItem>
+ <s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event)"/>
+ </mx:FormItem>
+ </mx:Form>
+ </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>
+ <mx:DataGrid id="dg" dataProvider="{contacts}" x="5" y="5" doubleClickEnabled="true"
+ doubleClick="{tabs.selectedIndex=0}" itemClick="dg_itemClickHandler(event)">
+ <mx:columns>
+ <mx:DataGridColumn headerText="Name" dataField="name"/>
+ <mx:DataGridColumn headerText="Address" dataField="address"/>
+ <mx:DataGridColumn headerText="City" dataField="city"/>
+ <mx:DataGridColumn headerText="State" dataField="state"/>
+ <mx:DataGridColumn headerText="Zip" dataField="zip"/>
+ </mx:columns>
+ </mx:DataGrid>
+ </s:BorderContainer>
+ </s:NavigatorContent>
+ </mx:ViewStack>
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml
index 9fa4af7..c68120f 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" viewSourceURL="srcview/index.html">
+ xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<fx:Array id="orientArray">
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/containers/personIcon.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/personIcon.png b/TourDeFlex/TourDeFlex3/src/spark/containers/personIcon.png
new file mode 100644
index 0000000..f9d76c6
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/containers/personIcon.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/containers/skins/CustomTabBarButtonSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/skins/CustomTabBarButtonSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/skins/CustomTabBarButtonSkin.mxml
new file mode 100644
index 0000000..3bbff44
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/skins/CustomTabBarButtonSkin.mxml
@@ -0,0 +1,264 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<!---
+The default skin class for Spark TabBar buttons.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+
+<s:SparkSkin
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
+ minWidth="21" minHeight="21" alpha.disabledStates="0.5">
+
+ <!-- host component -->
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.ButtonBarButton")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script fb:purpose="styling" >
+
+ import spark.components.TabBar;
+
+ static private const exclusions:Array = ["labelDisplay"];
+
+ /**
+ * @private
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /**
+ * @private
+ */
+ override protected function initializationComplete():void
+ {
+ //useBaseColor = true;
+ super.initializationComplete();
+ }
+
+ private var cornerRadius:Number = 4
+
+ /**
+ * @private
+ * The borderTop s:Path is just a s:Rect with the bottom edge left out.
+ * Given the rounded corners per the cornerRadius style, the result is
+ * roughly an inverted U with the specified width, height, and cornerRadius.
+ *
+ * Circular arcs are drawn with two curves per flash.display.Graphics.GraphicsUtil.
+ */
+ private function updateBorderTop(width:Number, height:Number):void
+ {
+ var left:Number = -0.5;
+ var right:Number = width - 0.5;
+ var top:Number = 0.5;
+ var bottom:Number = height;
+
+ var a:Number = cornerRadius * 0.292893218813453;
+ var s:Number = cornerRadius * 0.585786437626905;
+
+ var path:String = "";
+ path += "M " + left + " " + bottom;
+ path += " L " + left + " " + (top + cornerRadius);
+ path += " Q " + left + " " + (top + s) + " " + (left + a) + " " + (top + a);
+ path += " Q " + (left + s) + " " + top + " " + (left + cornerRadius) + " " + top;
+ path += " L " + (right - cornerRadius) + " " + top;
+ path += " Q " + (right - s) + " " + top + " " + (right - a) + " " + (top + a);
+ path += " Q " + right + " " + (top + s) + " " + right + " " + (top + cornerRadius);
+ path += " L " + right + " " + bottom;
+ borderTop.data = path;
+ }
+
+ /**
+ * @private
+ * The cornerRadius style is specified by the TabBar, not the button itself.
+ *
+ * Rather than bind the corner radius properties of the s:Rect's in the markup
+ * below to hostComponent.owner.getStyle("cornerRadius"), we reset them here,
+ * each time a change in the value of the style is detected. Note that each
+ * corner radius property is explicitly initialized to the default value of
+ * the style; the initial value of the private cornerRadius property.
+ */
+ private function updateCornerRadius():void
+ {
+ var cr:Number = getStyle("cornerRadius");
+ if (cornerRadius != cr)
+ {
+ cornerRadius = cr;
+ fill.topLeftRadiusX = cornerRadius;
+ fill.topRightRadiusX = cornerRadius;
+ lowlight.radiusX = cornerRadius;
+ highlight.radiusX = cornerRadius;
+ highlightStroke.topLeftRadiusX = cornerRadius;
+ highlightStroke.topRightRadiusX = cornerRadius;
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void
+ {
+ updateCornerRadius();
+ updateBorderTop(unscaledWidth, unscaledHeight);
+ super.updateDisplayList(unscaledWidth, unscaledHeight);
+ }
+ </fx:Script>
+
+ <!-- states -->
+ <s:states>
+ <s:State name="up" />
+ <s:State name="over" stateGroups="overStates" />
+ <s:State name="down" stateGroups="downStates" />
+ <s:State name="disabled" stateGroups="disabledStates" />
+ <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
+ <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
+ <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
+ <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
+ </s:states>
+
+ <s:Group left="-1" right="0" top="-1" bottom="-1">
+
+ <!-- layer 2: fill -->
+ <s:Rect id="fill" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4" width="69" height="21">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xFFFFFF"
+ color.selectedUpStates="0xFFFFFF"
+ color.overStates="0xCC0000"
+ color.downStates="0xCC0000"
+ alpha="0.85"
+ alpha.overAndSelected="1" />
+ <s:GradientEntry color="0xCCCCCC"
+ color.selectedUpStates="0x9FA0A1"
+ color.over="0xCC0000"
+ color.overAndSelected="0xFFFFFF"
+ color.downStates="0xCC0000"
+ alpha="0.85"
+ alpha.overAndSelected="1" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: fill lowlight -->
+ <s:Rect id="lowlight" left="2" right="1" bottom="2" height="9" radiusX="4">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xCC0000" alpha="0.0099" />
+ <s:GradientEntry color="0xCC0000" alpha="0.0627" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 4: fill highlight -->
+ <s:Rect id="highlight" left="2" right="1" top="2" height="9" radiusX="4">
+ <s:fill>
+ <s:SolidColor color="0xCC0000"
+ alpha="0.33"
+ alpha.selectedUpStates="0.22"
+ alpha.overStates="0.22"
+ alpha.downStates="0.12" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 5: highlight stroke (all states except down) -->
+ <s:Rect id="highlightStroke" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4">
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xCC0000" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- layer 6: highlight stroke (down state only) -->
+ <s:Rect left="2" top="2" bottom="2" width="1" includeIn="downStates, selectedUpStates, overAndSelected">
+ <s:fill>
+ <s:SolidColor color="0xCC0000" alpha="0.07" />
+ </s:fill>
+ </s:Rect>
+ <s:Rect right="1" top="2" bottom="2" width="1" includeIn="downStates, selectedUpStates, overAndSelected">
+ <s:fill>
+ <s:SolidColor color="0xCC0000" alpha="0.07" />
+ </s:fill>
+ </s:Rect>
+ <s:Rect left="3" top="2" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected">
+ <s:fill>
+ <s:SolidColor color="0xCC0000" alpha="0.25" />
+ </s:fill>
+ </s:Rect>
+ <s:Rect left="2" top="3" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected">
+ <s:fill>
+ <s:SolidColor color="0xCC0000" alpha="0.09" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+ <s:Line id="borderBottom" left="1" right="0" bottom="1">
+ <s:stroke>
+ <s:SolidColorStroke weight="1"
+ color="0xCC0000"
+ color.selectedStates="0x434343"
+ alpha="0.75"
+ alpha.down="0.85"
+ alpha.selectedStates="0.5" />
+ </s:stroke>
+ </s:Line>
+ <s:Path id="borderTop" left="1" right="0" top="1" bottom="1" width="69" height="21">
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xCC0000"
+ alpha="0.5625"
+ />
+ <s:GradientEntry color="0xFFFFFF"
+ color.selectedUpStates="0xFFFFFF"
+ color.overStates="0xFFFFFF"
+ color.downStates="0xCC0000"
+ alpha="0.85"
+ alpha.overAndSelected="1" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Path>
+ </s:Group>
+
+ <!-- layer 8: text -->
+ <!--- The defines the appearance of the label for the first button in the ButtonBar component. -->
+ <s:Group left="2" top="2">
+ <s:BitmapImage source="@Embed('../personIcon.png')" width="16" height="16"/>
+
+ <s:Label id="labelDisplay"
+ textAlign="right"
+ verticalAlign="middle"
+ maxDisplayedLines="1"
+ horizontalCenter="7" verticalCenter="1"
+ left="10" right="10" top="2" bottom="2" color.down="#FFFFFF">
+ </s:Label>
+ </s:Group>
+
+</s:SparkSkin>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/containers/skins/CustomTabBarSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/skins/CustomTabBarSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/skins/CustomTabBarSkin.mxml
new file mode 100644
index 0000000..3621cac
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/skins/CustomTabBarSkin.mxml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<!---
+
+The default skin class for the Spark TabBar component. The ButtonBarButtons
+created by the TabBar component use the TabBarButtonSkin class.
+
+@see spark.components.TabBar
+@see spark.components.ButtonBarButton
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+
+-->
+
+<s:Skin
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
+ alpha.disabled="0.5">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.TabBar")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script fb:purpose="styling" >
+ <![CDATA[
+
+ import mx.core.UIComponent;
+
+ /**
+ * @private
+ * Push the cornerRadius style to the item renderers.
+ */
+ override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void
+ {
+ const numElements:int = dataGroup.numElements;
+ const cornerRadius:int = hostComponent.getStyle("cornerRadius");
+ for (var i:int = 0; i < numElements; i++)
+ {
+ var elt:UIComponent = dataGroup.getElementAt(i) as UIComponent;
+ if (elt)
+ elt.setStyle("cornerRadius", cornerRadius);
+ }
+
+ super.updateDisplayList(unscaledWidth, unscaledHeight);
+ }
+
+ ]]>
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ </s:states>
+
+ <!---
+ @copy spark.components.SkinnableDataContainer#dataGroup
+ -->
+ <s:DataGroup id="dataGroup" width="100%" height="100%">
+ <s:layout>
+ <s:ButtonBarHorizontalLayout gap="-1"/>
+ </s:layout>
+ <s:itemRenderer>
+ <fx:Component>
+ <s:ButtonBarButton skinClass="skins.CustomTabBarButtonSkin" />
+ </fx:Component>
+ </s:itemRenderer>
+ </s:DataGroup>
+
+</s:Skin>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml
new file mode 100644
index 0000000..928fe77
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml
@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html">
+
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+
+ ButtonBar ToggleButton:upAndSelected,
+ ButtonBar ToggleButton:overAndSelected,
+ ButtonBar ToggleButton:downAndSelected,
+ ButtonBar ToggleButton:disabledAndSelected {
+ baseColor: #FFFFFF;
+ color: #323232;
+ }
+ ButtonBar {
+ baseColor: #000000;
+ color: #FFFFFF;
+ }
+ </fx:Style>
+
+ <fx:Script>
+ <![CDATA[
+ import spark.events.IndexChangeEvent;
+
+ /**
+ * Index change handler will be called each time a button is clicked
+ * and the event will provide information needed such as the previous
+ * index clicked.
+ **/
+ protected function indexChangeHandler(event:IndexChangeEvent):void
+ {
+ myTextArea.text = "Button Bar index clicked = " + event.newIndex
+ myTextArea.text = myTextArea.text + "\nButton Bar previous index = " + event.oldIndex;
+ myTextArea.text = myTextArea.text + "\nButton Bar label clicked = " + myButtonBar.selectedItem;
+ if (myButtonBar.selectedItem=="Red") {
+ txtColor.setStyle("color","red");
+ txtColor.text="Red selected!";
+ }
+ else if (myButtonBar.selectedItem=="Green") {
+ txtColor.setStyle("color","green");
+ txtColor.text="Green selected!";
+ }
+ else if (myButtonBar.selectedItem=="Blue") {
+ txtColor.setStyle("color","blue");
+ txtColor.text="Blue selected!";
+ }
+ else {
+ txtColor.setStyle("color","yellow");
+ txtColor.text="Yellow selected!";
+ }
+ }
+ protected function resetButtonBar(event:MouseEvent):void
+ {
+ myButtonBar.selectedIndex = -1;
+ myTextArea.text = "";
+ }
+ ]]>
+ </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: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
+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">
+ <s:ButtonBar id="myButtonBar" change="indexChangeHandler(event)">
+ <mx:ArrayCollection>
+ <fx:String>Red</fx:String>
+ <fx:String>Green</fx:String>
+ <fx:String>Blue</fx:String>
+ <fx:String>Yellow</fx:String>
+ </mx:ArrayCollection>
+ </s:ButtonBar>
+ <s:TextArea id="myTextArea" width="{myButtonBar.width}" height="150"/>
+ <s:Button id="myButton" label="Reset Selection" click="resetButtonBar(event)"/>
+ <s:Label id="txtColor" fontSize="16"/>
+ </s:VGroup>
+ </s:HGroup>
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml
new file mode 100644
index 0000000..838c419
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ viewSourceURL="srcview/index.html">
+
+ <fx:Script>
+ <![CDATA[
+ import flash.events.Event;
+
+ protected function buttonClickHandler(event:Event):void
+ {
+ repeatText.text += event.target.label + " pressed!" + "\n";
+ }
+ ]]>
+ </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: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
+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:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml
new file mode 100644
index 0000000..77de6bb
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ viewSourceURL="srcview/index.html">
+
+ <fx:Script>
+ <![CDATA[
+ [Bindable]
+ public var totalCost:Number = 4.50;
+
+ // This event handler adds/removes the cost of condiments to/from the total cost.
+ private function modifyBurger(evt:MouseEvent):void {
+ // Add 0.25 to the total cost for every condiment. Delete 0.25 for
+ // every condiment removed.
+ if(CheckBox(evt.target).selected) {
+ totalCost += 0.25;
+ } else {
+ totalCost -= 0.25;
+ }
+ // Format the totalCost and then display it in a label.
+ totalString.text = usdFormatter.format(totalCost);
+ }
+ ]]>
+ </fx:Script>
+ <fx:Declarations>
+ <mx:CurrencyFormatter id="usdFormatter" precision="2" currencySymbol="$"
+ decimalSeparatorFrom="." decimalSeparatorTo="."
+ useNegativeSign="true"
+ 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
+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>
+
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml
new file mode 100644
index 0000000..b3da2b7
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml
@@ -0,0 +1,375 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<s:SparkSkin
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
+ alpha.disabled="0.5" minWidth="89" minHeight="84">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ @langversion 3.0
+ @playerversion Flash 10
+ @playerversion AIR 1.5
+ @productversion Flex 4
+ */
+ [HostComponent("spark.components.DataGrid")]
+ ]]>
+ </fx:Metadata>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ </s:states>
+
+ <fx:Declarations>
+ <!--- @private -->
+ <fx:Component id="alternatingRowColorsBackground">
+ <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
+ <fx:Script>
+ <![CDATA[
+ import spark.components.DataGrid;
+ import spark.components.Grid;
+
+ /**
+ * @private
+ */
+ public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
+ {
+ const dataGrid:DataGrid = grid.dataGrid;
+ if (!dataGrid)
+ return;
+
+ const colors:Array = dataGrid.getStyle("alternatingRowColors");
+ if (colors && (colors.length > 0))
+ {
+ dataGrid.styleManager.getColorNames(colors); // lazily replace color names with ints
+ rowBackgroundFillColor.color = colors[rowIndex % colors.length];
+ }
+ else
+ {
+ // This should be the same as bgFill.color.
+ rowBackgroundFillColor.color = 0xFFFFFF;
+ }
+ }
+ ]]>
+ </fx:Script>
+ <s:fill>
+ <!--- @private -->
+ <s:SolidColor id="rowBackgroundFillColor" color="0xFFFFFF"/>
+ </s:fill>
+ </s:Rect>
+ </fx:Component>
+
+ <!--- @private -->
+ <fx:Component id="caretIndicator">
+ <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
+ <fx:Script>
+ <![CDATA[
+ import spark.components.DataGrid;
+ import spark.components.Grid;
+
+ /**
+ * @private
+ */
+ public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
+ {
+ const dataGrid:DataGrid = grid.dataGrid;
+ if (!dataGrid)
+ return;
+
+ const color:uint = dataGrid.getStyle("caretColor");
+ caretIndicatorFill.color = color;
+ }
+ ]]>
+ </fx:Script>
+
+ <s:stroke>
+ <!--- @private -->
+ <s:SolidColorStroke id="caretIndicatorFill" color="0x0167FF" weight="1"/>
+ </s:stroke>
+ </s:Rect>
+ </fx:Component>
+
+ <!--- @private -->
+ <fx:Component id="columnSeparator">
+ <s:Line>
+ <s:stroke>
+ <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square"/>
+ </s:stroke>
+ </s:Line>
+ </fx:Component>
+
+ <!--- Defines the value of the columnSeparator property for the columnHeaderGroup. -->
+ <fx:Component id="headerColumnSeparator">
+ <s:Line>
+ <s:stroke>
+ <s:SolidColorStroke color="0x696969" weight="1" caps="square"/>
+ </s:stroke>
+ </s:Line>
+ </fx:Component>
+
+ <!--- Defines the value of the headerRenderer property for the columnHeaderGroup.
+ The default is spark.skins.spark.DefaultGridHeaderRenderer -->
+ <fx:Component id="headerRenderer">
+ <s:DefaultGridHeaderRenderer />
+ </fx:Component>
+
+ <!--- @private -->
+ <fx:Component id="hoverIndicator">
+ <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
+ <fx:Script>
+ <![CDATA[
+ import spark.components.DataGrid;
+ import spark.components.Grid;
+
+ /**
+ * @private
+ */
+ public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
+ {
+ const dataGrid:DataGrid = grid.dataGrid;
+ if (!dataGrid)
+ return;
+
+ const color:uint = dataGrid.getStyle("rollOverColor");
+ hoverIndicatorFill.color = color;
+ }
+ ]]>
+ </fx:Script>
+
+ <s:fill>
+ <!--- @private -->
+ <s:SolidColor id="hoverIndicatorFill" color="0xCEDBEF"/>
+ </s:fill>
+ </s:Rect>
+ </fx:Component>
+
+ <!--- @private -->
+ <fx:Component id="rowSeparator">
+ <s:Line>
+ <s:stroke>
+ <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square"/>
+ </s:stroke>
+ </s:Line>
+ </fx:Component>
+
+ <!--- @private -->
+ <fx:Component id="selectionIndicator">
+ <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
+ <fx:Script>
+ <![CDATA[
+ import spark.components.DataGrid;
+ import spark.components.Grid;
+
+ /**
+ * @private
+ */
+ public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
+ {
+ const dataGrid:DataGrid = grid.dataGrid;
+ if (!dataGrid)
+ return;
+
+ const color:uint = dataGrid.getStyle("selectionColor");
+ selectionIndicatorFill.color = color;
+ }
+ ]]>
+ </fx:Script>
+
+ <s:fill>
+ <!--- @private -->
+ <s:SolidColor id="selectionIndicatorFill" color="0xA8C6EE"/>
+ </s:fill>
+ </s:Rect>
+ </fx:Component>
+
+ <!--- @private -->
+ <fx:Component id="editorIndicator">
+ <s:Rect>
+ <s:fill>
+ <s:SolidColor color="0xFFFFFF"/>
+ </s:fill>
+ </s:Rect>
+ </fx:Component>
+
+ </fx:Declarations>
+
+ <fx:Script fb:purpose="styling">
+ <![CDATA[
+ static private const exclusions:Array = ["scroller", "background", "columnHeaderGroup"];
+ static private const contentFill:Array = ["bgFill"];
+
+ /**
+ * @private
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /**
+ * @private
+ */
+ override public function get contentItems():Array {return contentFill};
+
+ /**
+ * @private
+ */
+ override protected function initializationComplete():void
+ {
+ useChromeColor = true;
+ super.initializationComplete();
+ }
+
+ /**
+ * @private
+ */
+ override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ if (getStyle("borderVisible") == true)
+ {
+ border.visible = true;
+ background.left = background.top = background.right = background.bottom = 1;
+ scroller.minViewportInset = 1;
+ }
+ else
+ {
+ border.visible = false;
+ background.left = background.top = background.right = background.bottom = 0;
+ scroller.minViewportInset = 0;
+ }
+
+ borderStroke.color = getStyle("borderColor");
+ borderStroke.alpha = getStyle("borderAlpha");
+
+ super.updateDisplayList(unscaledWidth, unscaledHeight);
+ }
+ ]]>
+ </fx:Script>
+
+ <!-- column header, content -->
+ <s:VGroup horizontalAlign="justify" gap="0" left="0" right="0" top="0" bottom="0">
+
+ <!--- @private -->
+ <s:GridColumnHeaderGroup id="columnHeaderGroup"
+ paddingLeft="1" paddingTop="1" paddingRight="1" minHeight="21"
+ columnSeparator="{headerColumnSeparator}"
+ headerRenderer="{headerRenderer}"/>
+
+ <s:Group height="100%">
+
+ <!--- @private -->
+ <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
+ <s:fill>
+ <!--- Defines the color of the background. The default color is 0xFFFFFF. -->
+ <s:SolidColor id="bgFill" color="0xFFFFFF" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- header separator, scroller and grid -->
+ <s:VGroup horizontalAlign="justify" height="100%" width="100%" gap="-1">
+ <!--- @private -->
+ <s:Line id="headerSeparator">
+ <s:stroke>
+ <s:SolidColorStroke color="0x696969" weight="1" caps="square"/>
+ </s:stroke>
+ </s:Line>
+
+ <!--- @private -->
+ <s:Scroller id="scroller" minViewportInset="1" hasFocusableChildren="false" height="100%">
+ <s:Grid id="grid" itemRenderer="spark.skins.spark.DefaultGridItemRenderer">
+ <!--
+ <s:itemRenderer>
+ <fx:Component>
+ <s:GridItemRenderer>
+ <s:Label id="labelDisplay" paddingLeft="7" paddingRight="7" paddingBottom="5" paddingTop="9" width="100%" height="100%"/>
+ </s:GridItemRenderer>
+ </fx:Component>
+ </s:itemRenderer>
+ -->
+
+ <s:caretIndicator>
+ <fx:Component>
+ <s:Rect>
+ <s:stroke>
+ <s:SolidColorStroke color="0xff0000" weight="1"/>
+ </s:stroke>
+ </s:Rect>
+ </fx:Component>
+ </s:caretIndicator>
+
+ <s:selectionIndicator>
+ <fx:Component>
+ <s:Rect>
+ <s:fill>
+ <s:SolidColor color="0x00ff00"/>
+ </s:fill>
+ </s:Rect>
+ </fx:Component>
+ </s:selectionIndicator>
+
+ <s:columnSeparator>
+ <fx:Component>
+ <s:Line>
+ <s:stroke>
+ <s:SolidColorStroke color="0xE6E6E6" weight="1"/>
+ </s:stroke>
+ </s:Line>
+ </fx:Component>
+ </s:columnSeparator>
+ <s:rowSeparator>
+ <fx:Component>
+ <s:Line>
+ <s:stroke>
+ <s:SolidColorStroke color="0xE6E6E6" weight="1"/>
+ </s:stroke>
+ </s:Line>
+ </fx:Component>
+ </s:rowSeparator>
+
+ <s:hoverIndicator>
+ <fx:Component>
+ <s:Rect>
+ <s:fill>
+ <s:SolidColor color="0x0000ff"/>
+ </s:fill>
+ </s:Rect>
+ </fx:Component>
+ </s:hoverIndicator>
+ </s:Grid>
+ </s:Scroller>
+ </s:VGroup>
+
+ </s:Group>
+
+ </s:VGroup>
+
+ <!-- border -->
+ <!--- @private -->
+ <s:Rect left="0" right="0" top="0" bottom="0" id="border">
+ <s:stroke>
+ <!--- @private -->
+ <s:SolidColorStroke id="borderStroke" weight="1"/>
+ </s:stroke>
+ </s:Rect>
+
+</s:SparkSkin>
[5/6] Added more spark examples
Posted by jm...@apache.org.
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml
new file mode 100644
index 0000000..89bd8b5
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
+
+ <fx:Script>
+ import mx.collections.ArrayList;
+ </fx:Script>
+
+ <fx:Declarations>
+ <s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+ </fx:Declarations>
+
+ <s:applicationComplete>
+ ro.getElements(0, 500);
+ </s:applicationComplete>
+
+ <s:DataGrid width="100%" height="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}">
+ <s:columns>
+ <s:ArrayList>
+ <s:GridColumn dataField="id"/>
+ <s:GridColumn dataField="age">
+ <s:itemRenderer>
+ <fx:Component>
+ <s:GridItemRenderer>
+ <s:Rect percentWidth="{data.age}" top="3" bottom="3">
+ <s:fill>
+ <s:SolidColor color="#0000ff"/>
+ </s:fill>
+ </s:Rect>
+ </s:GridItemRenderer>
+ </fx:Component>
+ </s:itemRenderer>
+ </s:GridColumn>
+ <s:GridColumn dataField="classOfWorker"/>
+ <s:GridColumn dataField="education"/>
+ <s:GridColumn dataField="maritalStatus"/>
+ <s:GridColumn dataField="race"/>
+ <s:GridColumn dataField="sex"/>
+ </s:ArrayList>
+ </s:columns>
+ </s:DataGrid>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml
new file mode 100644
index 0000000..81134cb
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
+
+ <fx:Script>
+ import mx.collections.ArrayList;
+ </fx:Script>
+
+ <fx:Declarations>
+ <s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+ </fx:Declarations>
+
+ <s:applicationComplete>
+ ro.getElements(0, 500);
+ </s:applicationComplete>
+
+ <s:DataGrid width="100%" height="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}">
+ <s:columns>
+ <s:ArrayList>
+ <s:GridColumn dataField="id"/>
+ <s:GridColumn dataField="age">
+ <s:itemRenderer>
+ <fx:Component>
+ <s:GridItemRenderer>
+ <fx:Script>
+ override public function prepare(hasBeenRecycled:Boolean):void
+ {
+ r.percentWidth = data.age;
+ }
+ </fx:Script>
+ <s:Rect id="r" top="3" bottom="3">
+ <s:fill>
+ <s:SolidColor color="#0000ff"/>
+ </s:fill>
+ </s:Rect>
+ </s:GridItemRenderer>
+ </fx:Component>
+ </s:itemRenderer>
+ </s:GridColumn>
+ <s:GridColumn dataField="classOfWorker"/>
+ <s:GridColumn dataField="education"/>
+ <s:GridColumn dataField="maritalStatus"/>
+ <s:GridColumn dataField="race"/>
+ <s:GridColumn dataField="sex"/>
+ </s:ArrayList>
+ </s:columns>
+ </s:DataGrid>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomSkinExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomSkinExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomSkinExample.mxml
new file mode 100644
index 0000000..3bf97ff
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomSkinExample.mxml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Script>
+ import mx.collections.ArrayList;
+ </fx:Script>
+
+ <fx:Declarations>
+ <s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+ </fx:Declarations>
+
+ <s:applicationComplete>
+ ro.getElements(0, 500);
+ </s:applicationComplete>
+
+ <s:DataGrid width="100%" height="100%"
+ dataProvider="{new ArrayList(ro.getElements.lastResult)}"
+ skinClass="CustomDataGridSkin"/>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample2.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample2.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample2.mxml
new file mode 100644
index 0000000..d596f9b
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample2.mxml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ applicationComplete="application1_applicationCompleteHandler(event)">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.ArrayList;
+ import mx.events.FlexEvent;
+
+ protected function application1_applicationCompleteHandler(event:FlexEvent):void
+ {
+ ro.getElements(0, 500);
+ }
+ ]]>
+ </fx:Script>
+ <s:applicationComplete>
+ Security.loadPolicyFile("http://www.jamesward.com/census2-tests/crossdomain.xml");
+ ro.getElements(0, 500);
+ </s:applicationComplete>
+
+
+ <fx:Declarations>
+ <s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+ </fx:Declarations>
+
+ <s:DataGrid width="100%" height="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}"/>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleColumnsExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleColumnsExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleColumnsExample.mxml
new file mode 100644
index 0000000..d97b5d6
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleColumnsExample.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Script>
+ import mx.collections.ArrayList;
+ </fx:Script>
+
+ <fx:Declarations>
+ <s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+ </fx:Declarations>
+
+ <s:applicationComplete>
+ ro.getElements(0, 500);
+ </s:applicationComplete>
+
+ <s:DataGrid width="100%" height="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}">
+ <s:columns>
+ <s:ArrayList id="columns">
+ <s:GridColumn dataField="id"/>
+ <s:GridColumn dataField="age" minWidth="45"/>
+ <s:GridColumn dataField="classOfWorker" minWidth="100"/>
+ <s:GridColumn dataField="education" minWidth="100"/>
+ <s:GridColumn dataField="maritalStatus" minWidth="100"/>
+ <s:GridColumn dataField="race" minWidth="100"/>
+ <s:GridColumn dataField="sex" minWidth="60"/>
+ </s:ArrayList>
+ </s:columns>
+ </s:DataGrid>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleNoWrapExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleNoWrapExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleNoWrapExample.mxml
new file mode 100644
index 0000000..02b5f9e
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleNoWrapExample.mxml
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Script>
+ import mx.collections.ArrayList;
+ </fx:Script>
+
+ <fx:Declarations>
+ <s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census" />
+ </fx:Declarations>
+
+ <s:applicationComplete>
+ ro.getElements(0, 500);
+ </s:applicationComplete>
+
+ <s:DataGrid width="100%" height="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}" />
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSizingExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSizingExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSizingExample.mxml
new file mode 100644
index 0000000..f919ef3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSizingExample.mxml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns="*">
+
+ <fx:Declarations>
+ <s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+ <s:ArrayList id="columns">
+ <s:GridColumn dataField="id" minWidth="30"/>
+ <s:GridColumn dataField="age" minWidth="45"/>
+ <s:GridColumn dataField="classOfWorker" minWidth="100"/>
+ <s:GridColumn dataField="education" minWidth="100"/>
+ <s:GridColumn dataField="maritalStatus" minWidth="100"/>
+ <s:GridColumn dataField="race" minWidth="100"/>
+ <s:GridColumn dataField="sex" minWidth="60"/>
+ </s:ArrayList>
+ </fx:Declarations>
+
+ <s:applicationComplete>
+ ro.getElements(0, 500);
+ </s:applicationComplete>
+
+ <s:HGroup width="100%">
+ <s:DataGrid requestedRowCount="5" width="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}" columns="{columns}" />
+ <s:DataGrid requestedRowCount="7" width="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}" columns="{columns}" />
+ <s:DataGrid requestedRowCount="9" width="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}" columns="{columns}" />
+ </s:HGroup>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml
new file mode 100644
index 0000000..abe34ae
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ viewSourceURL="srcview/index.html">
+
+ <fx:Script>
+ <![CDATA[
+ import spark.events.IndexChangeEvent;
+ import mx.collections.ArrayCollection;
+
+ [Bindable]
+ public var depts:ArrayCollection = new ArrayCollection([
+ {label:"Electronics", data:1},
+ {label:"Home Goods", data:2},
+ {label:"Toys", data:3} ]);
+
+ [Bindable]
+ public var elecItems:ArrayCollection = new ArrayCollection([
+ {label:"Samsung 25in TV", data:299},
+ {label:"Panasonic Plasma", data:999},
+ {label:"Sony LCD", data:899} ]);
+
+ [Bindable]
+ public var homeItems:ArrayCollection = new ArrayCollection([
+ {label:"Blendtec Blender", data:399},
+ {label:"Hoover Vaccuum", data:599},
+ {label:"Black & Decker Toaster", data:99} ]);
+
+ [Bindable]
+ public var toyItems:ArrayCollection = new ArrayCollection([
+ {label:"Nintendo DS", data:120},
+ {label:"Lego's Star Wars Set", data:50},
+ {label:"Leapfrog Leapster", data:30} ]);
+
+ private function handleDepartmentSelected(event:IndexChangeEvent):void
+ {
+ list2.prompt="Select Item";
+ list2.selectedIndex=-1; // reset so prompt shows
+ if (list1.selectedIndex==0)
+ list2.dataProvider=elecItems;
+ else if (list1.selectedIndex==1)
+ list2.dataProvider=homeItems;
+ else if (list1.selectedIndex==2)
+ list2.dataProvider=toyItems;
+
+ }
+
+ ]]>
+ </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:VGroup width="100%" height="100%" left="120" top="5">
+ <s:Label text="RJ's Warehouse Price Checker" fontSize="18" color="0x014f9f"/>
+ <s:DropDownList id="list1" width="50%" dataProvider="{depts}" labelField="label"
+ prompt="Select Category"
+ change="handleDepartmentSelected(event)"/>
+ <s:Label id="text2"/>
+ <s:DropDownList id="list2" width="50%" labelField="label" prompt="None"/>
+ <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"
+ 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>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/Item.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/Item.as b/TourDeFlex/TourDeFlex3/src/spark/controls/Item.as
new file mode 100644
index 0000000..f5f0a30
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/Item.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+ [Bindable]
+ public class Item
+ {
+ private var _name:String;
+ private var _photo:String;
+ private var _price:String;
+
+ public function Item()
+ {
+ }
+
+ public function get name():String
+ {
+ return _name;
+ }
+
+ public function set name(name:String):void
+ {
+ _name = name;
+ }
+
+ public function get photo():String
+ {
+ return _photo;
+ }
+
+ public function set photo(photo:String):void
+ {
+ _photo = photo;
+ }
+
+ public function get price():String
+ {
+ return _price;
+ }
+ public function set price(price:String):void
+ {
+ _price = price;
+ }
+
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
new file mode 100644
index 0000000..75aeb35
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:local="*"
+ initialize="loadSecurity();">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.IList;
+ import mx.collections.errors.ItemPendingError;
+ import mx.rpc.AsyncResponder;
+ import mx.rpc.AsyncToken;
+ import mx.rpc.events.FaultEvent;
+ import mx.rpc.events.ResultEvent;
+
+ private function loadSecurity():void
+ {
+ Security.loadPolicyFile("http://www.jamesward.com/census2-tests/crossdomain.xml");
+ }
+
+ private function handleCreatePendingItemFunction(index:int, ipe:ItemPendingError):Object {
+ return {};
+ }
+
+ private function loadItems(list:IList, start:uint, count:uint):void
+ {
+ var asyncToken:AsyncToken = ro.getElements(start, count);
+ asyncToken.addResponder(new AsyncResponder(function result(event:ResultEvent, token:Object = null):void {
+ var v:Vector.<Object> = new Vector.<Object>();
+ for each (var i:Object in event.result)
+ {
+ v.push(i);
+ }
+ pagedList.storeItemsAt(v, token as int);
+ }, function fault(event:FaultEvent, token:Object = null):void {
+ trace(event.fault.faultString);
+ }, start));
+ }
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <local:PagedList id="pagedList" pageSize="100" length="100000" loadItemsFunction="loadItems"/>
+ <s:AsyncListView id="asyncListView" list="{pagedList}" createPendingItemFunction="handleCreatePendingItemFunction"/>
+ <s:RemoteObject id="ro" destination="census" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf"/>
+ </fx:Declarations>
+
+ <s:DataGrid dataProvider="{asyncListView}" width="100%" height="100%">
+ <s:columns>
+ <s:ArrayList>
+ <s:GridColumn dataField="id"/>
+ <s:GridColumn dataField="age"/>
+ <s:GridColumn dataField="classOfWorker"/>
+ <s:GridColumn dataField="education"/>
+ <s:GridColumn dataField="maritalStatus"/>
+ <s:GridColumn dataField="race"/>
+ <s:GridColumn dataField="sex"/>
+ </s:ArrayList>
+ </s:columns>
+ </s:DataGrid>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
new file mode 100644
index 0000000..805c346
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:local="*" viewSourceURL="srcview/index.html">
+ <fx:Script>
+ <![CDATA[
+ import spark.events.IndexChangeEvent;
+
+ [Bindable]
+ private var totalPrice:Number = 0.00;
+
+ protected function itemIndexChangeHandler(event:IndexChangeEvent):void
+ {
+ if (ta.text.length!=0)
+ ta.text=ta.text+"\n"+myList.selectedItem.name + " $"+myList.selectedItem.price;
+ else ta.text=myList.selectedItem.name+ " $"+myList.selectedItem.price;
+ totalPrice += Number(myList.selectedItem.price);
+ }
+ protected function buyBtn_clickHandler(event:MouseEvent):void
+ {
+ txtResponse.text="Thank you for your order totaling: " + usdFormatter.format(totalPrice) + "\nItems will ship in 3 days.";
+ }
+
+ ]]>
+ </fx:Script>
+ <fx:Declarations>
+ <mx:CurrencyFormatter id="usdFormatter" precision="2" currencySymbol="$"
+ decimalSeparatorFrom="." decimalSeparatorTo="." useNegativeSign="true"
+ useThousandsSeparator="true" alignSymbol="left"/>
+ </fx:Declarations>
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+ #vGrp {
+ color: #000000;
+ fontFamily: "Arial";
+ fontSize: "12";
+ }
+ </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"
+ 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
+the size of the control."/>
+ </s:Panel>
+
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/MyListItemRenderer.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/MyListItemRenderer.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/MyListItemRenderer.mxml
new file mode 100644
index 0000000..73228d6
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/MyListItemRenderer.mxml
@@ -0,0 +1,39 @@
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<s:ItemRenderer
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+
+ <s:states>
+ <s:State name="normal"/>
+ <s:State name="hovered"/>
+ <s:State name="selected" />
+ </s:states>
+
+ <s:layout>
+ <s:VerticalLayout/>
+ </s:layout>
+
+ <s:HGroup verticalAlign="middle" paddingTop="0" paddingBottom="0">
+ <mx:Image source="{data.photo}" width="50" height="40" alpha.hovered=".5"/>
+ <s:Label text="{data.name}" color.hovered="0x1313cd" color.selected="0x000000" verticalAlign="bottom"/>
+ </s:HGroup>
+
+</s:ItemRenderer>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
new file mode 100644
index 0000000..b4d2667
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ viewSourceURL="srcview/index.html">
+
+ <fx:Script>
+ <![CDATA[
+ protected function clickHandler(event:MouseEvent):void
+ {
+ responseText.text = "Thank you for your purchase of " +this.numStepper.value + " tickets!";
+ }
+ ]]>
+ </fx:Script>
+
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+ @namespace mx "library://ns.adobe.com/flex/mx";
+ #formHead {
+ fontSize: 18;
+ fontFamily: Arial;
+ fontWeight: bold;
+ }
+ mx|FormItem {
+ fontSize: 12;
+ 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="NumericStepper Sample"
+ width="100%" height="100%"
+ skinClass="skins.TDFPanelSkin">
+
+ <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
+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>
+
+
+ </s:Panel>
+
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/OSMFExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/OSMFExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/OSMFExample.mxml
new file mode 100644
index 0000000..16a2c2c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/OSMFExample.mxml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <s:VideoPlayer horizontalCenter="0" verticalCenter="0"
+ source="http://mediapm.edgesuite.net/osmf/content/test/manifest-files/dynamic_Streaming.f4m"
+ autoPlay="true"/>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/PagedList.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PagedList.as b/TourDeFlex/TourDeFlex3/src/spark/controls/PagedList.as
new file mode 100644
index 0000000..19e87df
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PagedList.as
@@ -0,0 +1,510 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+ import flash.events.Event;
+ import flash.events.EventDispatcher;
+
+ import mx.collections.IList;
+ import mx.collections.errors.ItemPendingError;
+ import mx.events.CollectionEvent;
+ import mx.events.CollectionEventKind;
+ import mx.events.PropertyChangeEvent;
+ import mx.events.PropertyChangeEventKind;
+ import mx.resources.IResourceManager;
+ import mx.resources.ResourceManager;
+ import mx.rpc.IResponder;
+
+ [Event(name="collectionChange", type="mx.events.CollectionEvent")]
+
+ /**
+ * An IList whose items are fetched asynchronously by a user provided function. The
+ * loadItemsFunction initiates an asynchronous request for a pageSize block items, typically
+ * from a web service. When the request sucessfully completes, the storeItemsAt() method
+ * must be called. If the request fails, then failItemsAt().
+ *
+ * <p>PagedList divides its <code>length</code> items into <code>pageSize</code> blocks or
+ * "pages". It tracks which items exist locally, typically because they've been stored with
+ * storeItemsAt(). When an item that does not exist locally is requested with getItemAt(),
+ * the loadItemsFunction is called and then an IPE is thrown. When the loadItemsFunction
+ * either completes or fails, it must call storeItemsAt() or failItemsAt() which causes
+ * the IPE's responders to run and a "replace" CollectionEvent to be dispatched for the
+ * updated page. The failItemsAt() method resets the corresponding items to undefined,
+ * which means that subsequent calls to getItemAt() will cause an IPE to be thrown.</p>
+ *
+ * <p>Unlike some other IList implementations, the only method here that can thrown an
+ * IPE is getItemAt(). Methods like getItemIndex() and toArray() just report items
+ * that aren't local as null.</p>
+ *
+ * <p>This class is intended to be used as the "list" source for an ASyncListView.</p>
+ */
+ public class PagedList extends EventDispatcher implements IList
+ {
+ /**
+ * @private
+ */
+ private static function get resourceManager():IResourceManager
+ {
+ return ResourceManager.getInstance();
+ }
+
+ /**
+ * @private
+ */
+ private static function checkItemIndex(index:int, listLength:int):void
+ {
+ if (index < 0 || (index >= listLength))
+ {
+ const message:String = resourceManager.getString("collections", "outOfBounds", [ index ]);
+ throw new RangeError(message);
+ }
+ }
+
+ /**
+ * @private
+ * The IList's items.
+ */
+ private const data:Vector.<*> = new Vector.<*>();
+
+ /**
+ * Construct a PagedList with the specified length and pageSize.
+ */
+ public function PagedList(length:int=1000, pageSize:int=10)
+ {
+ this.data.length = length;
+ this.pageSize = pageSize;
+
+ for (var i:int = 0; i < data.length; i++)
+ data[i] = undefined;
+ }
+
+ //----------------------------------
+ // loadItemsFunction
+ //----------------------------------
+
+ private var _loadItemsFunction:Function = null;
+
+ /**
+ * The value of this property must be a function that loads a contiguous
+ * block of items and then calls <code>storeItemsAt()</code> or
+ * <code>failItemsAt()</code>. A loadItemsFunction must be defined as follows:
+ * <pre>
+ * myLoadItems(list:PagedList, index:int, count:int):void
+ * </pre>
+ *
+ * <p>Typically the loadItemsFunction will make one or more network requests
+ * to retrieve the items. It must do all of its work asynchronously to avoid
+ * blocking the application's GUI.
+ *
+ */
+ public function get loadItemsFunction():Function
+ {
+ return _loadItemsFunction;
+ }
+
+ /**
+ * @private
+ */
+ public function set loadItemsFunction(value:Function):void
+ {
+ _loadItemsFunction = value;
+ }
+
+ //----------------------------------
+ // length
+ //----------------------------------
+
+ [Bindable("collectionChange")]
+
+ /**
+ * The number of items in the list.
+ *
+ * <p>The length of the list can be changed directly however the "-1" indeterminate
+ * length value is not supported.</p>
+ */
+ public function get length():int
+ {
+ return data.length;
+ }
+
+ /**
+ * @private
+ */
+ public function set length(value:int):void
+ {
+ const oldLength:int = data.length;
+ const newLength:int = value;
+
+ if (oldLength == newLength)
+ return;
+
+ var ce:CollectionEvent = null;
+ if (hasEventListener(CollectionEvent.COLLECTION_CHANGE))
+ ce = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
+
+ if (oldLength < newLength)
+ {
+ if (ce)
+ {
+ ce.location = Math.max(oldLength - 1, 0);
+ ce.kind = CollectionEventKind.ADD;
+ const itemsLength:int = newLength - oldLength;
+ for (var i:int = 0; i < itemsLength; i++)
+ ce.items.push(undefined);
+ }
+
+ data.length = newLength;
+ for (var newIndex:int = Math.max(oldLength - 1, 0); newIndex < newLength; newIndex++)
+ data[newIndex] = undefined;
+ }
+ else // oldLength > newLength
+ {
+ if (ce)
+ {
+ ce.location = Math.max(newLength - 1, 0);
+ ce.kind = CollectionEventKind.REMOVE;
+ for (var oldIndex:int = Math.max(newLength - 1, 0); oldIndex < oldLength; oldIndex++)
+ ce.items.push(data[oldIndex]);
+ }
+
+ data.length = newLength;
+ }
+
+ if (ce)
+ dispatchEvent(ce);
+ }
+
+ //----------------------------------
+ // pageSize
+ //----------------------------------
+
+ private var _pageSize:int = 10;
+
+ /**
+ * Items are loaded in contiguous pageSize blocks. The value of this property should be greater than
+ * zero, smaller than the PageList's length, and a reasonable working size for the loadItemsFunction.
+ */
+ public function get pageSize():int
+ {
+ return _pageSize;
+ }
+
+ /**
+ * @private
+ */
+ public function set pageSize(value:int):void
+ {
+ _pageSize = value;
+ }
+
+ /**
+ * Resets the entire list to its initial state. All local and pending items are
+ * cleared.
+ */
+ public function clearItems():void
+ {
+ var index:int = 0;
+ for each (var item:Object in data)
+ data[index++] = undefined;
+
+ if (hasEventListener(CollectionEvent.COLLECTION_CHANGE))
+ {
+ var ce:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
+ ce.kind = CollectionEventKind.RESET;
+ dispatchEvent(ce);
+ }
+ }
+
+ /**
+ * @private
+ */
+ private static function createUpdatePCE(itemIndex:Object, oldValue:Object, newValue:Object):PropertyChangeEvent
+ {
+ const pce:PropertyChangeEvent = new PropertyChangeEvent(PropertyChangeEvent.PROPERTY_CHANGE);
+ pce.kind = PropertyChangeEventKind.UPDATE;
+ pce.property = itemIndex;
+ pce.oldValue = oldValue;
+ pce.newValue = newValue;
+ return pce;
+ }
+
+ /**
+ * @private
+ */
+ private static function createCE(kind:String, location:int, item:Object):CollectionEvent
+ {
+ const ce:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
+ ce.kind = kind;
+ ce.location = location;
+
+ if (item is Array)
+ ce.items = item as Array;
+ else
+ ce.items.push(item);
+
+ return ce;
+ }
+
+ /**
+ * This method must be called by the loadItemsFunction after a block of requested
+ * items have been successfully retrieved. It stores the specified items in the
+ * internal data vector and clears the "pending" state associated with the original
+ * request.
+ */
+ public function storeItemsAt(items:Vector.<Object>, index:int):void
+ {
+ if (index < 0 || (index + items.length) > length)
+ {
+ const message:String = resourceManager.getString("collections", "outOfBounds", [ index ]);
+ throw new RangeError(message);
+ }
+
+ var item:Object;
+ var itemIndex:int;
+ var pce:PropertyChangeEvent;
+
+ // copy the new items into the internal items vector and run the IPE responders
+
+ itemIndex = index;
+ for each (item in items)
+ {
+ var ipe:ItemPendingError = data[itemIndex] as ItemPendingError;
+ if (ipe && ipe.responders)
+ {
+ for each (var responder:IResponder in ipe.responders)
+ responder.result(null);
+ }
+
+ data[itemIndex++] = item;
+ }
+
+ // dispatch collection and property change events
+
+ const hasCollectionListener:Boolean = hasEventListener(CollectionEvent.COLLECTION_CHANGE);
+ const hasPropertyListener:Boolean = hasEventListener(PropertyChangeEvent.PROPERTY_CHANGE);
+ var propertyChangeEvents:Array = new Array(); // Array of PropertyChangeEvents;
+
+ if (hasCollectionListener || hasPropertyListener)
+ {
+ itemIndex = index;
+ for each (item in items)
+ propertyChangeEvents.push(createUpdatePCE(itemIndex++, null, item));
+ }
+
+ if (hasCollectionListener)
+ dispatchEvent(createCE(CollectionEventKind.REPLACE, index, propertyChangeEvents));
+
+ if (hasPropertyListener)
+ {
+ for each (pce in propertyChangeEvents)
+ dispatchEvent(pce);
+ }
+ }
+
+ public function failItemsAt(index:int, count:int):void
+ {
+ if (index < 0 || (index + count) > length)
+ {
+ const message:String = resourceManager.getString("collections", "outOfBounds", [ index ]);
+ throw new RangeError(message);
+ }
+
+ for (var i:int = 0; i < count; i++)
+ {
+ var itemIndex:int = i + index;
+ var ipe:ItemPendingError = data[itemIndex] as ItemPendingError;
+ if (ipe && ipe.responders)
+ {
+ for each (var responder:IResponder in ipe.responders)
+ responder.fault(null);
+ }
+ data[itemIndex] = undefined;
+ }
+
+
+
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // IList Implementation (length appears above)
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @inheritDoc
+ */
+ public function addItem(item:Object):void
+ {
+ addItemAt(item, length);
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function addItemAt(item:Object, index:int):void
+ {
+ checkItemIndex(index, length + 1);
+ data.splice(index, index, item);
+
+ if (hasEventListener(CollectionEvent.COLLECTION_CHANGE))
+ dispatchEvent(createCE(CollectionEventKind.ADD, index, item));
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function getItemAt(index:int, prefetch:int=0):Object
+ {
+ checkItemIndex(index, length);
+
+ var item:* = data[index];
+ if (item is ItemPendingError)
+ {
+ throw item as ItemPendingError;
+ }
+ else if (item === undefined)
+ {
+ const ipe:ItemPendingError = new ItemPendingError(String(index));
+ const pageStartIndex:int = Math.floor(index / pageSize) * pageSize;
+ const count:int = Math.min(pageSize, data.length - pageStartIndex);
+
+ for (var i:int = 0; i < count; i++)
+ data[pageStartIndex + i] = ipe;
+
+ if (loadItemsFunction !== null)
+ loadItemsFunction(this, pageStartIndex, count);
+
+ // Allow for the possibility that loadItemsFunction has synchronously
+ // loaded the requested data item.
+
+ if (data[index] == ipe)
+ throw ipe;
+ else
+ item = data[index];
+ }
+
+ return item;
+ }
+
+ /**
+ * Return the index of of the specified item, if it currently exists in the list.
+ * This method does not cause additional items to be loaded.
+ */
+ public function getItemIndex(item:Object):int
+ {
+ return data.indexOf(item);
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function itemUpdated(item:Object, property:Object=null, oldValue:Object=null, newValue:Object=null):void
+ {
+ const hasCollectionListener:Boolean = hasEventListener(CollectionEvent.COLLECTION_CHANGE);
+ const hasPropertyListener:Boolean = hasEventListener(PropertyChangeEvent.PROPERTY_CHANGE);
+ var pce:PropertyChangeEvent = null;
+
+ if (hasCollectionListener || hasPropertyListener)
+ pce = createUpdatePCE(property, oldValue, newValue);
+
+ if (hasCollectionListener)
+ dispatchEvent(createCE(CollectionEventKind.UPDATE, -1, pce));
+
+ if (hasPropertyListener)
+ dispatchEvent(pce);
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function removeAll():void
+ {
+ length = 0;
+
+ if (hasEventListener(CollectionEvent.COLLECTION_CHANGE))
+ {
+ const ce:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
+ ce.kind = CollectionEventKind.RESET;
+ dispatchEvent(ce);
+ }
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function removeItemAt(index:int):Object
+ {
+ checkItemIndex(index, length);
+
+ const item:Object = data[index];
+
+ data.splice(index, 1);
+ if (hasEventListener(CollectionEvent.COLLECTION_CHANGE))
+ dispatchEvent(createCE(CollectionEventKind.REMOVE, index, item));
+
+ return item;
+ }
+
+ /**
+ * @inheritDoc
+ */
+ public function setItemAt(item:Object, index:int):Object
+ {
+ checkItemIndex(index, length);
+
+ const oldItem:Object = data[index];
+
+ if (item !== oldItem)
+ {
+ const hasCollectionListener:Boolean = hasEventListener(CollectionEvent.COLLECTION_CHANGE);
+ const hasPropertyListener:Boolean = hasEventListener(PropertyChangeEvent.PROPERTY_CHANGE);
+ var pce:PropertyChangeEvent = null;
+
+ if (hasCollectionListener || hasPropertyListener)
+ pce = createUpdatePCE(index, oldItem, item);
+
+ if (hasCollectionListener)
+ dispatchEvent(createCE(CollectionEventKind.REPLACE, index, pce));
+
+ if (hasPropertyListener)
+ dispatchEvent(pce);
+ }
+
+ return oldItem;
+ }
+
+ /**
+ * Returns an array with the same length as this list, that contains all of
+ * the items successfully loaded so far.
+ *
+ * <p>Calling this method does not force additional items to be loaded.</p>
+ */
+ public function toArray():Array
+ {
+ const rv:Array = new Array(data.length);
+
+ var index:int = 0;
+ for each (var item:* in data)
+ rv[index++] = (item is ItemPendingError) ? undefined : item;
+
+ return rv;
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
new file mode 100644
index 0000000..7c2c42b
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html">
+
+
+ <fx:Script>
+ <![CDATA[
+ import mx.controls.Alert;
+ protected function handleClose(event:MouseEvent):void
+ {
+ Alert.show("TEST");
+ this.currentState="normal";
+ }
+ ]]>
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="infoOpen" />
+ </s:states>
+
+ <s:transitions>
+ <mx:Transition fromState="*" toState="*">
+ <mx:Sequence>
+ <s:Fade target="{infoPopUp.popUp}" duration="1500"/>
+ </mx:Sequence>
+ </mx:Transition>
+ </s:transitions>
+
+ <fx:Declarations>
+ <s:LinearGradient rotation="90" id="fill1">
+ <s:GradientEntry color="0xFFFFFF" />
+ <s:GradientEntry color="0x336699" />
+ </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>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
new file mode 100644
index 0000000..0bde928
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="emailOpen" />
+ <s:State name="aboutOpen" />
+ <s:State name="infoOpen" />
+ </s:states>
+
+ <s:transitions>
+ <mx:Transition fromState="*" toState="*">
+ <mx:Sequence>
+ <s:Fade target="{emailPopUp.popUp}" duration="1000"/>
+ </mx:Sequence>
+ </mx:Transition>
+ </s:transitions>
+
+ <s:Panel width="100%" height="100%"
+ title="PopUpAnchor with Form"
+ skinClass="skins.TDFPanelSkin">
+
+ <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:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml
new file mode 100644
index 0000000..0ce17bf
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml
@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ viewSourceURL="srcview/index.html">
+
+ <fx:Script>
+ <![CDATA[
+ protected function scoreClickHandler(event:MouseEvent):void
+ {
+ var score:Number = 0.0;
+
+ if (group1.selectedValue=="True")
+ score=33.34;
+ if (group2.selectedValue=="South Africa")
+ score=score+33.34;
+ if (group3.selectedValue=="False")
+ score=score+33.34;
+ scoreText.text = "You scored " + numberFormatter.format(score).toString()+"%";
+ }
+ ]]>
+ </fx:Script>
+ <fx:Declarations>
+ <s:RadioButtonGroup id="group1"/>
+ <s:RadioButtonGroup id="group2"/>
+ <s:RadioButtonGroup id="group3"/>
+ <mx:NumberFormatter id="numberFormatter"
+ precision="0"
+ rounding="nearest"/>
+ </fx:Declarations>
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+
+ RadioButton{
+ baseColor: #FFFFFF;
+ }
+
+ </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:HGroup horizontalCenter="0" top="10">
+ <s:VGroup>
+ <s:Label text="1) The sky is blue:"/>
+ <s:RadioButton id="trueRadioBtn" label="True" groupName="group1"/>
+ <s:RadioButton id="falseRadioBtn" label="False" groupName="group1"/>
+ </s:VGroup>
+ <s:VGroup paddingLeft="20">
+ <s:Label text="2) Which of the following is not a continent?"/>
+ <s:RadioButton id="multiRadioBtnA" label="North America" groupName="group2"/>
+ <s:RadioButton id="multiRadioBtnB" label="Europe" groupName="group2"/>
+ <s:RadioButton id="multiRadioBtnC" label="Asia" groupName="group2"/>
+ <s:RadioButton id="multiRadioBtnD" label="South Africa" groupName="group2"/>
+ </s:VGroup>
+ <s:VGroup paddingLeft="20">
+ <s:Label text="3) Tallahasee is the capital of Alabama:"/>
+ <s:RadioButton id="trueRadioBtn3" label="True" groupName="group3" />
+ <s:RadioButton id="falseRadioBtn3" label="False" groupName="group3"/>
+ </s:VGroup>
+ <s:VGroup horizontalAlign="contentJustify">
+ <s:Button id="scoreBtn" label="Score Me!" click="scoreClickHandler(event)"/>
+ <s:Label id="scoreText"/>
+ </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
+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>
+
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
new file mode 100644
index 0000000..979187f
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="haloSilver" fontSize="14">
+
+ <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:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml
new file mode 100644
index 0000000..eeb27f2
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" 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>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
new file mode 100644
index 0000000..4d5887c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ 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>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
new file mode 100644
index 0000000..0203cf9
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" 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>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
new file mode 100644
index 0000000..21b08df
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<s:Application
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark" viewSourceURL="srcview/index.html">
+
+ <s:Panel width="100%" height="100%"
+ skinClass="skins.TDFPanelSkin"
+ title="ScrollBar Sample">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="80" paddingTop="15"/>
+ </s:layout>
+ <mx:Box borderStyle="solid">
+ <s:HGroup>
+ <s:DataGroup id="vertView" left="10" top="20"
+ clipAndEnableScrolling="true"
+ itemRenderer="spark.skins.spark.DefaultItemRenderer">
+ <s:layout>
+ <s:VerticalLayout requestedRowCount="4"/>
+ </s:layout>
+ <s:dataProvider>
+ <s:ArrayCollection>
+ <fx:String>Photoshop</fx:String>
+ <fx:String>Illustrator</fx:String>
+ <fx:String>LiveCycle ES</fx:String>
+ <fx:String>Flash</fx:String>
+ <fx:String>Acrobat</fx:String>
+ <fx:String>Elements</fx:String>
+ <fx:String>Creative Suite</fx:String>
+ <fx:String>Premiere Pro</fx:String>
+ </s:ArrayCollection>
+ </s:dataProvider>
+ </s:DataGroup>
+ <s:VScrollBar viewport="{vertView}"
+ top="10"
+ left="{vertView.x + vertView.width + 10}"
+ height="{vertView.height}"/>
+ </s:HGroup>
+ </mx:Box>
+ <mx:Box borderStyle="solid">
+ <s:HGroup>
+ <s:DataGroup id="horizView" right="200" top="10"
+ clipAndEnableScrolling="true"
+ itemRenderer="spark.skins.spark.DefaultItemRenderer">
+ <s:layout>
+ <s:HorizontalLayout requestedColumnCount="3"/>
+ </s:layout>
+ <s:dataProvider>
+ <s:ArrayCollection>
+ <fx:String>Photoshop</fx:String>
+ <fx:String>Illustrator</fx:String>
+ <fx:String>LiveCycle ES</fx:String>
+ <fx:String>Flash</fx:String>
+ <fx:String>Acrobat</fx:String>
+ </s:ArrayCollection>
+ </s:dataProvider>
+ </s:DataGroup>
+
+ </s:HGroup>
+ <s:HScrollBar viewport="{horizView}"
+ left="{horizView.left}"
+ bottom="{horizView.bottom}"
+ width ="{horizView.width}"/>
+ </mx:Box>
+
+ <s:Label paddingLeft="15" width="199" verticalAlign="justify" color="0x323232"
+ 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>
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
new file mode 100644
index 0000000..371f003
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ viewSourceURL="srcview/index.html">
+
+
+ <s:Panel width="100%" height="100%"
+ skinClass="skins.MyPanelSkin"
+ title="Scroller Sample">
+ <s:VGroup horizontalCenter="0">
+ <s:HGroup>
+ <s:Label text="Min Viewport Inset:"/>
+ <s:HSlider id="slider1"
+ maximum="50"
+ liveDragging="true" />
+ <s:Label text="Viewport Width:"/>
+ <s:HSlider id="slider2"
+ minimum="100"
+ maximum="550"
+ value="300"
+ liveDragging="true" />
+ <s:Label text="Viewport Height:"/>
+ <s:HSlider id="slider3"
+ minimum="100"
+ maximum="550"
+ value="200"
+ liveDragging="true" />
+ </s:HGroup>
+ <s:HGroup>
+ <s:Scroller id="scroller"
+ minViewportInset="{slider1.value}"
+ width="300" height="200">
+ <s:Group>
+ <s:Rect id="rect"
+ width="{slider2.value}"
+ height="{slider3.value}">
+ <s:fill>
+ <s:LinearGradient rotation="45">
+ <s:GradientEntry color="red" />
+ <s:GradientEntry color="yellow" />
+ <s:GradientEntry color="haloBlue" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+ </s:Group>
+ </s:Scroller>
+ <s:Label textAlign="justify" width="280" verticalAlign="justify"
+ text="The Scroller control contains a pair of scroll bars and a viewport. A viewport displays a rectangular subset of the area of
+a component, rather than displaying the entire component. You can use the Scroller control to make any container that implements the IViewport interface,
+such as Group, scrollable. The Scroller's horizontal and vertical scroll policies are set to auto which indicates that scroll bars are displayed when the
+content within a viewport is larger than the actual size of the viewport."/>
+ </s:HGroup>
+ </s:VGroup>
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
new file mode 100644
index 0000000..d960837
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<!-- Also see http://blog.flexexamples.com/2009/07/29/enabling-tabbing-on-spark-scroller-children/ -->
+<s:Application name="Spark_Scroller_hasFocusableChildren_test"
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+
+ <fx:Script>
+ <![CDATA[
+ import spark.events.TextOperationEvent;
+
+ private function txtChangeHandler(event:TextOperationEvent):void
+ {
+ if (event.target is TextInput)
+ {
+ var textInput:TextInput = event.target as TextInput;
+ textInput.clearStyle("color");
+ }
+ }
+ ]]>
+ </fx:Script>
+ <!-- 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">
+
+ <!-- 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" 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>
+
+ <!-- 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>
+
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
new file mode 100644
index 0000000..25b9866
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ viewSourceURL="srcview/index.html">
+
+ <s:Panel width="100%" height="100%"
+ skinClass="skins.TDFPanelSkin"
+ title="HSlider/VSlider Sample">
+
+ <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:Label text="Width:"/>
+ <s:HSlider id="slider2"
+ minimum="50"
+ maximum="250"
+ value="200"
+ liveDragging="true" />
+
+ </s:HGroup>
+
+ <s:Label right="40" top="10" width="200" verticalAlign="justify" color="0x323232"
+ 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."/>
+ </s:Panel>
+
+</s:Application>
[3/6] Added more spark examples
Posted by jm...@apache.org.
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml
index a4bf99a..b198370 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.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"
- width="100%" height="100%" viewSourceURL="srcview/index.html">
+ width="100%" height="100%">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml
index 9f22e16..05f17de 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.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"
- width="100%" height="100%" viewSourceURL="srcview/index.html">
+ width="100%" height="100%">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml
index d6bc0fa..c988d93 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.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"
- width="100%" height="100%" viewSourceURL="srcview/index.html">
+ width="100%" height="100%">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml
index 6fcbad9..4761dd1 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.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"
- width="100%" height="100%" viewSourceURL="srcview/index.html">
+ width="100%" height="100%">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml
index 64a0802..15733c4 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.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"
- width="100%" height="100%" viewSourceURL="srcview/index.html">
+ width="100%" height="100%">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml
new file mode 100644
index 0000000..7b92c15
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ 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>
+
+ <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:Label text="{cf.format(12.3)}"/>
+ <s:Label text="{df.format(new Date())}"/>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml
index 0c5dfec..ac05b0c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.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"
- width="100%" height="100%" viewSourceURL="srcview/index.html">
+ width="100%" height="100%">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml
index 729894c..f48f021 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.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"
- width="100%" height="100%" viewSourceURL="srcview/index.html">
+ width="100%" height="100%">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml
index d1e0b07..4372338 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.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"
- width="100%" height="100%" viewSourceURL="srcview/index.html">
+ width="100%" height="100%">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml
index 44ccce6..f35634e 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.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"
- width="100%" height="100%" viewSourceURL="srcview/index.html">
+ width="100%" height="100%">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml
index 8db6555..3fcd65c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.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"
- width="100%" height="100%" viewSourceURL="srcview/index.html">
+ width="100%" height="100%">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml
index 7ebd45e..fad6eb8 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.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"
- width="100%" height="100%" viewSourceURL="srcview/index.html">
+ width="100%" height="100%">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/Item.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/Item.as b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/Item.as
new file mode 100644
index 0000000..f5f0a30
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/Item.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+ [Bindable]
+ public class Item
+ {
+ private var _name:String;
+ private var _photo:String;
+ private var _price:String;
+
+ public function Item()
+ {
+ }
+
+ public function get name():String
+ {
+ return _name;
+ }
+
+ public function set name(name:String):void
+ {
+ _name = name;
+ }
+
+ public function get photo():String
+ {
+ return _photo;
+ }
+
+ public function set photo(photo:String):void
+ {
+ _photo = photo;
+ }
+
+ public function get price():String
+ {
+ return _price;
+ }
+ public function set price(price:String):void
+ {
+ _price = price;
+ }
+
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml
new file mode 100644
index 0000000..564ddf0
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:local="*" viewSourceURL="srcview/index.html">
+ <fx:Script>
+ <![CDATA[
+ import spark.events.IndexChangeEvent;
+
+ [Bindable]
+ private var totalPrice:Number = 0.00;
+
+ protected function itemIndexChangeHandler(event:IndexChangeEvent):void
+ {
+ if (ta.text.length!=0)
+ ta.text=ta.text+"\n"+myList.selectedItem.name + " $"+myList.selectedItem.price;
+ else ta.text=myList.selectedItem.name+ " $"+myList.selectedItem.price;
+ totalPrice += Number(myList.selectedItem.price);
+ }
+ protected function buyBtn_clickHandler(event:MouseEvent):void
+ {
+ txtResponse.text="Thank you for your order totaling: " + usdFormatter.format(totalPrice) + "\nItems will ship in 3 days.";
+ }
+
+ ]]>
+ </fx:Script>
+ <fx:Declarations>
+ <mx:CurrencyFormatter id="usdFormatter" precision="2" currencySymbol="$"
+ decimalSeparatorFrom="." decimalSeparatorTo="." useNegativeSign="true"
+ useThousandsSeparator="true" alignSymbol="left"/>
+ </fx:Declarations>
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+ #vGrp {
+ color: #000000;
+ fontFamily: "Arial";
+ fontSize: "12";
+ }
+ </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/backpack.jpg" price="29.99"/>
+ <local:Item name="Boots" photo="assets/boots.jpg" price="69.99"/>
+ <local:Item name="Compass" photo="assets/compass.jpg" price="12.99"/>
+ <local:Item name="Goggles" photo="assets/goggles.jpg" price="14.99"/>
+ <local:Item name="Helmet" photo="assets/helmet.jpg" 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"
+ 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
+the size of the control."/>
+ </s:Panel>
+
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/MyListItemRenderer.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/MyListItemRenderer.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/MyListItemRenderer.mxml
new file mode 100644
index 0000000..73228d6
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/MyListItemRenderer.mxml
@@ -0,0 +1,39 @@
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<s:ItemRenderer
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+
+ <s:states>
+ <s:State name="normal"/>
+ <s:State name="hovered"/>
+ <s:State name="selected" />
+ </s:states>
+
+ <s:layout>
+ <s:VerticalLayout/>
+ </s:layout>
+
+ <s:HGroup verticalAlign="middle" paddingTop="0" paddingBottom="0">
+ <mx:Image source="{data.photo}" width="50" height="40" alpha.hovered=".5"/>
+ <s:Label text="{data.name}" color.hovered="0x1313cd" color.selected="0x000000" verticalAlign="bottom"/>
+ </s:HGroup>
+
+</s:ItemRenderer>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml
index 3ef1105..0c6dcdd 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml
new file mode 100644
index 0000000..ebe35cf
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+
+ <s:Panel width="100%" height="100%"
+ title="Bidirectional Binding"
+ horizontalCenter="0"
+ skinClass="skins.TDFPanelSkin">
+ <s:Label top="10" left="15" verticalAlign="justify" color="#323232" 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. "/>
+
+ <s:VGroup horizontalCenter="15" top="40">
+ <s:Label text="Enter Text:"/>
+ <s:TextInput id="text1" widthInChars="20" />
+ <s:TextInput id="text2" color="0xFF3366" widthInChars="20"
+ text="@{text1.text}"/>
+ <s:Label id="text3" color="0x009966"
+ text="@{text2.text}" />
+ </s:VGroup>
+
+ </s:Panel>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml
new file mode 100644
index 0000000..37b1b61
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml
@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.events.ListEvent;
+
+ //[Bindable]
+ //private var contact:Contact = new Contact();
+
+ protected function submitBtn_clickHandler(event:MouseEvent):void
+ {
+ // Note: this sample uses bidirectional data binding, so we do not have to
+ // explicitly set the contact fields to save them!
+ if (!contacts.contains(contact))
+ contacts.addItem(contact);
+ contact = new Contact();
+ }
+
+ protected function dg_itemClickHandler(event:ListEvent):void
+ {
+ contact = dg.selectedItem as Contact;
+ }
+
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <s:ArrayCollection id="contacts"/>
+ <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"/>
+ <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>
+ <mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%">
+ <mx:FormItem label="Name:">
+ <s:TextInput id="nameTxt" text="@{contact.name}"/>
+ </mx:FormItem>
+ <mx:FormItem label="Address:">
+ <s:TextInput id="address" text="@{contact.address}"/>
+ </mx:FormItem>
+ <mx:FormItem label="City:">
+ <s:TextInput id="city" text="@{contact.city}"/>
+ </mx:FormItem>
+ <mx:FormItem label="State:">
+ <s:TextInput id="state" text="@{contact.state}"/>
+ </mx:FormItem>
+ <mx:FormItem label="Zip:">
+ <s:TextInput id="zip" text="@{contact.zip}" maxChars="5"/>
+ </mx:FormItem>
+ <mx:FormItem>
+ <s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event)"/>
+ </mx:FormItem>
+ </mx:Form>
+ </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>
+ <mx:DataGrid id="dg" dataProvider="{contacts}" x="5" y="5" doubleClickEnabled="true"
+ doubleClick="{tabs.selectedIndex=0}" itemClick="dg_itemClickHandler(event)">
+ <mx:columns>
+ <mx:DataGridColumn headerText="Name" dataField="name"/>
+ <mx:DataGridColumn headerText="Address" dataField="address"/>
+ <mx:DataGridColumn headerText="City" dataField="city"/>
+ <mx:DataGridColumn headerText="State" dataField="state"/>
+ <mx:DataGridColumn headerText="Zip" dataField="zip"/>
+ </mx:columns>
+ </mx:DataGrid>
+ </s:BorderContainer>
+ </s:NavigatorContent>
+ </mx:ViewStack>
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/Contact.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/Contact.as b/TourDeFlex/TourDeFlex3/src/spark/other/Contact.as
new file mode 100644
index 0000000..2cc13c9
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/Contact.as
@@ -0,0 +1,37 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+ [Bindable]
+ public class Contact
+ {
+ public var name:String;
+ public var phone:String;
+ public var email:String;
+ public var address:String;
+ public var city:String;
+ public var state:String;
+ public var zip:String;
+
+
+ public function Contact()
+ {
+ }
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml
new file mode 100644
index 0000000..b410197
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html">
+
+ <!-- To show only a certain area of a viewport, you can control it by setting the size of the viewport container
+ 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:Label text="This image is clipped with the viewport position set:"/>
+ <s:Group width="100" height="100"
+ horizontalScrollPosition="20" verticalScrollPosition="30"
+ clipAndEnableScrolling="true">
+ <s:BitmapImage source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+ </s:Group>
+ <s:Label text="This image is scrollable with the viewport position set:"/>
+ <s:Scroller hasFocusableChildren="true" tabEnabled="false">
+ <s:VGroup paddingLeft="2" paddingRight="2" paddingTop="2" paddingBottom="2"
+ width="100" height="100" horizontalScrollPosition="20" verticalScrollPosition="30">
+ <s:BitmapImage source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+ </s:VGroup>
+ </s:Scroller>
+ </s:VGroup>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml
index 896b671..8a10492 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml
index 970be50..88f0d1b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml
index d849d97..b4e0a23 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml
index 241074b..6cea57e 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml
index a6e4822..b7887d1 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html"
+ skinClass="TDFGradientBackgroundSkin"
creationComplete="init()">
<fx:Script>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml
index 3228c60..d5a7112 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml
index 664e1ee..0324d14 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml
@@ -20,7 +20,7 @@
<!-- controls\bar\SBarSimple.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html">
+ xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/assets/ApacheFlexLogo.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/assets/ApacheFlexLogo.png b/TourDeFlex/TourDeFlex3/src/spark/other/assets/ApacheFlexLogo.png
new file mode 100644
index 0000000..4ff037f
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/other/assets/ApacheFlexLogo.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarButtonSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarButtonSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarButtonSkin.mxml
new file mode 100644
index 0000000..f574ff4
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarButtonSkin.mxml
@@ -0,0 +1,262 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<!---
+The default skin class for Spark TabBar buttons.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+
+<s:SparkSkin
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
+ minWidth="21" minHeight="21" alpha.disabledStates="0.5">
+
+ <!-- host component -->
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.ButtonBarButton")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script fb:purpose="styling" >
+
+ import spark.components.TabBar;
+
+ static private const exclusions:Array = ["labelDisplay"];
+
+ /**
+ * @private
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /**
+ * @private
+ */
+ override protected function initializationComplete():void
+ {
+ super.initializationComplete();
+ }
+
+ private var cornerRadius:Number = 4
+
+ /**
+ * @private
+ * The borderTop s:Path is just a s:Rect with the bottom edge left out.
+ * Given the rounded corners per the cornerRadius style, the result is
+ * roughly an inverted U with the specified width, height, and cornerRadius.
+ *
+ * Circular arcs are drawn with two curves per flash.display.Graphics.GraphicsUtil.
+ */
+ private function updateBorderTop(width:Number, height:Number):void
+ {
+ var left:Number = -0.5;
+ var right:Number = width - 0.5;
+ var top:Number = 0.5;
+ var bottom:Number = height;
+
+ var a:Number = cornerRadius * 0.292893218813453;
+ var s:Number = cornerRadius * 0.585786437626905;
+
+ var path:String = "";
+ path += "M " + left + " " + bottom;
+ path += " L " + left + " " + (top + cornerRadius);
+ path += " Q " + left + " " + (top + s) + " " + (left + a) + " " + (top + a);
+ path += " Q " + (left + s) + " " + top + " " + (left + cornerRadius) + " " + top;
+ path += " L " + (right - cornerRadius) + " " + top;
+ path += " Q " + (right - s) + " " + top + " " + (right - a) + " " + (top + a);
+ path += " Q " + right + " " + (top + s) + " " + right + " " + (top + cornerRadius);
+ path += " L " + right + " " + bottom;
+ borderTop.data = path;
+ }
+
+ /**
+ * @private
+ * The cornerRadius style is specified by the TabBar, not the button itself.
+ *
+ * Rather than bind the corner radius properties of the s:Rect's in the markup
+ * below to hostComponent.owner.getStyle("cornerRadius"), we reset them here,
+ * each time a change in the value of the style is detected. Note that each
+ * corner radius property is explicitly initialized to the default value of
+ * the style; the initial value of the private cornerRadius property.
+ */
+ private function updateCornerRadius():void
+ {
+ var cr:Number = getStyle("cornerRadius");
+ if (cornerRadius != cr)
+ {
+ cornerRadius = cr;
+ fill.topLeftRadiusX = cornerRadius;
+ fill.topRightRadiusX = cornerRadius;
+ lowlight.radiusX = cornerRadius;
+ highlight.radiusX = cornerRadius;
+ highlightStroke.topLeftRadiusX = cornerRadius;
+ highlightStroke.topRightRadiusX = cornerRadius;
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void
+ {
+ updateCornerRadius();
+ updateBorderTop(unscaledWidth, unscaledHeight);
+ super.updateDisplayList(unscaledWidth, unscaledHeight);
+ }
+ </fx:Script>
+
+ <!-- states -->
+ <s:states>
+ <s:State name="up" />
+ <s:State name="over" stateGroups="overStates" />
+ <s:State name="down" stateGroups="downStates" />
+ <s:State name="disabled" stateGroups="disabledStates" />
+ <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
+ <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
+ <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
+ <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
+ </s:states>
+
+ <s:Group left="-1" right="0" top="-1" bottom="-1">
+
+ <!-- layer 2: fill -->
+ <s:Rect id="fill" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4" width="69" height="21">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xFFFFFF"
+ color.selectedUpStates="0xFFFFFF"
+ color.overStates="0xCC0000"
+ color.downStates="0xCC0000"
+ alpha="0.85"
+ alpha.overAndSelected="1" />
+ <s:GradientEntry color="0xCCCCCC"
+ color.selectedUpStates="0x9FA0A1"
+ color.over="0xCC0000"
+ color.overAndSelected="0xFFFFFF"
+ color.downStates="0xCC0000"
+ alpha="0.85"
+ alpha.overAndSelected="1" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: fill lowlight -->
+ <s:Rect id="lowlight" left="2" right="1" bottom="2" height="9" radiusX="4">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xCC0000" alpha="0.0099" />
+ <s:GradientEntry color="0xCC0000" alpha="0.0627" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 4: fill highlight -->
+ <s:Rect id="highlight" left="2" right="1" top="2" height="9" radiusX="4">
+ <s:fill>
+ <s:SolidColor color="0xCC0000"
+ alpha="0.33"
+ alpha.selectedUpStates="0.22"
+ alpha.overStates="0.22"
+ alpha.downStates="0.12" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 5: highlight stroke (all states except down) -->
+ <s:Rect id="highlightStroke" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4">
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xCC0000" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- layer 6: highlight stroke (down state only) -->
+ <s:Rect left="2" top="2" bottom="2" width="1" includeIn="downStates, selectedUpStates, overAndSelected">
+ <s:fill>
+ <s:SolidColor color="0xCC0000" alpha="0.07" />
+ </s:fill>
+ </s:Rect>
+ <s:Rect right="1" top="2" bottom="2" width="1" includeIn="downStates, selectedUpStates, overAndSelected">
+ <s:fill>
+ <s:SolidColor color="0xCC0000" alpha="0.07" />
+ </s:fill>
+ </s:Rect>
+ <s:Rect left="3" top="2" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected">
+ <s:fill>
+ <s:SolidColor color="0xCC0000" alpha="0.25" />
+ </s:fill>
+ </s:Rect>
+ <s:Rect left="2" top="3" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected">
+ <s:fill>
+ <s:SolidColor color="0xCC0000" alpha="0.09" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+ <s:Line id="borderBottom" left="1" right="0" bottom="1">
+ <s:stroke>
+ <s:SolidColorStroke weight="1"
+ color="0xCC0000"
+ color.selectedStates="0x434343"
+ alpha="0.75"
+ alpha.down="0.85"
+ alpha.selectedStates="0.5" />
+ </s:stroke>
+ </s:Line>
+ <s:Path id="borderTop" left="1" right="0" top="1" bottom="1" width="69" height="21">
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xCC0000"
+ alpha="0.5625"
+ />
+ <s:GradientEntry color="0xFFFFFF"
+ color.selectedUpStates="0xFFFFFF"
+ color.overStates="0xFFFFFF"
+ color.downStates="0xCC0000"
+ alpha="0.85"
+ alpha.overAndSelected="1" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Path>
+ </s:Group>
+
+ <!-- layer 8: text -->
+ <!--- The defines the appearance of the label for the first button in the ButtonBar component. -->
+ <s:Group left="2" top="2">
+
+ <s:Label id="labelDisplay"
+ textAlign="center"
+ verticalAlign="middle"
+ maxDisplayedLines="1"
+ horizontalCenter="7" verticalCenter="1"
+ left="10" right="10" top="2" bottom="2" color.down="#FFFFFF">
+ </s:Label>
+ </s:Group>
+
+</s:SparkSkin>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarSkin.mxml
new file mode 100644
index 0000000..3621cac
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarSkin.mxml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<!---
+
+The default skin class for the Spark TabBar component. The ButtonBarButtons
+created by the TabBar component use the TabBarButtonSkin class.
+
+@see spark.components.TabBar
+@see spark.components.ButtonBarButton
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+
+-->
+
+<s:Skin
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
+ alpha.disabled="0.5">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.TabBar")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script fb:purpose="styling" >
+ <![CDATA[
+
+ import mx.core.UIComponent;
+
+ /**
+ * @private
+ * Push the cornerRadius style to the item renderers.
+ */
+ override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void
+ {
+ const numElements:int = dataGroup.numElements;
+ const cornerRadius:int = hostComponent.getStyle("cornerRadius");
+ for (var i:int = 0; i < numElements; i++)
+ {
+ var elt:UIComponent = dataGroup.getElementAt(i) as UIComponent;
+ if (elt)
+ elt.setStyle("cornerRadius", cornerRadius);
+ }
+
+ super.updateDisplayList(unscaledWidth, unscaledHeight);
+ }
+
+ ]]>
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ </s:states>
+
+ <!---
+ @copy spark.components.SkinnableDataContainer#dataGroup
+ -->
+ <s:DataGroup id="dataGroup" width="100%" height="100%">
+ <s:layout>
+ <s:ButtonBarHorizontalLayout gap="-1"/>
+ </s:layout>
+ <s:itemRenderer>
+ <fx:Component>
+ <s:ButtonBarButton skinClass="skins.CustomTabBarButtonSkin" />
+ </fx:Component>
+ </s:itemRenderer>
+ </s:DataGroup>
+
+</s:Skin>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml
new file mode 100644
index 0000000..3c1420e
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ viewSourceURL="srcview/index.html">
+
+ <!-- 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">
+ <s:Label text="Button with Icon Only Skin"/>
+ <s:Button skinClass="skins.CloseButtonSkin" width="16" height="16"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Button with Icon And Drop Shadow Skin"/>
+ <s:Button skinClass="skins.AddButtonSkin" width="20" height="20"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Rounded Corner Button with Icon And Text Skin"/>
+ <s:Button skinClass="skins.IconTextButtonSkin" label="Add" width="53" />
+ </s:HGroup>
+ </s:VGroup>
+ <s:Label width="50%" text="Buttons can be skinned to contain an icon and to include or not include the text label. Check the source for the 3 skin classes that handle the different combinations."
+ verticalAlign="middle"/>
+
+ </s:HGroup>
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication1Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication1Example.mxml
new file mode 100644
index 0000000..3a5ee03
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication1Example.mxml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ skinClass="skins.GradientBackgroundAppSkin"
+ backgroundColor="0x000000" viewSourceURL="srcview/index.html">
+
+ <s:VGroup horizontalCenter="0" verticalCenter="0">
+ <s:Label text="Wood Sales Int'l" fontSize="42" />
+ <s:BorderContainer borderColor="0x000000" borderWeight="3" cornerRadius="7" horizontalCenter="0" verticalCenter="0">
+ <s:VGroup>
+ <mx:Form fontSize="16">
+ <mx:FormItem label="Userid:">
+ <s:TextInput id="userid"/>
+ </mx:FormItem>
+ <mx:FormItem label="Password:">
+ <s:TextInput id="pw"/>
+ </mx:FormItem>
+ <mx:FormItem>
+ <s:Button label="Login"/>
+ </mx:FormItem>
+ </mx:Form>
+ </s:VGroup>
+ </s:BorderContainer>
+ </s:VGroup>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication2Example.mxml
new file mode 100644
index 0000000..6ddc6ef
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication2Example.mxml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ skinClass="skins.BackgroundImageAppSkin" viewSourceURL="srcview/index.html">
+
+ <s:VGroup horizontalCenter="0" verticalCenter="0">
+ <s:Label text="Wood Sales Int'l" fontSize="42" />
+ <s:BorderContainer borderColor="0x000000" borderWeight="3" cornerRadius="7" horizontalCenter="0" verticalCenter="0">
+ <s:VGroup>
+ <mx:Form fontSize="16">
+ <mx:FormItem label="Userid:">
+ <s:TextInput id="userid"/>
+ </mx:FormItem>
+ <mx:FormItem label="Password:">
+ <s:TextInput id="pw"/>
+ </mx:FormItem>
+ <mx:FormItem>
+ <s:Button label="Login"/>
+ </mx:FormItem>
+ </mx:Form>
+ </s:VGroup>
+ </s:BorderContainer>
+ </s:VGroup>
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication3Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication3Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication3Example.mxml
new file mode 100644
index 0000000..30b92a7
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication3Example.mxml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ skinClass="skins.CustomControlBarAppSkin"
+ controlBarVisible="true" viewSourceURL="srcview/index.html">
+ <s:controlBarContent>
+ <s:TextInput id="textInput"/>
+ <s:Button id="searchBtn" label="Search"/>
+ </s:controlBarContent>
+
+ <s:VGroup horizontalCenter="0" verticalCenter="0">
+ <s:Label text="Wood Sales Int'l" fontSize="42" />
+ <s:BorderContainer borderColor="0x000000" borderWeight="3" cornerRadius="7" horizontalCenter="0" verticalCenter="0">
+ <s:VGroup>
+ <mx:Form fontSize="16">
+ <mx:FormItem label="Userid:">
+ <s:TextInput id="userid"/>
+ </mx:FormItem>
+ <mx:FormItem label="Password:">
+ <s:TextInput id="pw"/>
+ </mx:FormItem>
+ <mx:FormItem>
+ <s:Button label="Login"/>
+ </mx:FormItem>
+ </mx:Form>
+ </s:VGroup>
+ </s:BorderContainer>
+ </s:VGroup>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml
new file mode 100644
index 0000000..fe122fe
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html">
+
+ <s:Panel id="myPanel" title="SkinnableContainer sample"
+ width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+
+ <!-- Set a custom skin for the container to show a gradient background and border -->
+ <s:SkinnableContainer skinClass="skins.CustomSkinnableContainerSkin"
+ width="50%" height="50%"
+ horizontalCenter="0"
+ verticalCenter="0">
+
+ <s:VGroup horizontalCenter="0" verticalCenter="0">
+ <mx:Form fontSize="16">
+ <mx:FormItem label="Userid:">
+ <s:TextInput id="userid"/>
+ </mx:FormItem>
+ <mx:FormItem label="Password:">
+ <s:TextInput id="pw"/>
+ </mx:FormItem>
+ <mx:FormItem>
+ <s:Button label="Login"/>
+ </mx:FormItem>
+ </mx:Form>
+ </s:VGroup>
+ </s:SkinnableContainer>
+
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/arrow_icon_sm.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/arrow_icon_sm.png b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/arrow_icon_sm.png
new file mode 100644
index 0000000..33debc8
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/arrow_icon_sm.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_add.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_add.png b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_add.png
new file mode 100644
index 0000000..4382d33
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_add.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_check.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_check.png b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_check.png
new file mode 100644
index 0000000..1c122a4
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_check.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_close16.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_close16.png b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_close16.png
new file mode 100644
index 0000000..e972065
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_close16.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_plus.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_plus.png b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_plus.png
new file mode 100644
index 0000000..b4ecdba
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_plus.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_remove.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_remove.png b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_remove.png
new file mode 100644
index 0000000..24089c5
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_remove.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/wood-bg.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/wood-bg.png b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/wood-bg.png
new file mode 100644
index 0000000..6b9403f
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/wood-bg.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/AddButtonSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/AddButtonSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/AddButtonSkin.mxml
new file mode 100644
index 0000000..082bb23
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/AddButtonSkin.mxml
@@ -0,0 +1,183 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<!--
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+ minWidth="21" minHeight="21"
+ alpha.disabled="0.5">
+
+ <!-- host component -->
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Button")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ <![CDATA[
+ /* Define the skin elements that should not be colorized.
+
+ For button, the graphics are colorized but the label is not. */
+
+ static private const exclusions:Array = ["labelDisplay"];
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ ]]>
+
+ </fx:Script>
+
+ <!-- states -->
+ <s:states>
+ <s:State name="up" />
+ <s:State name="over" />
+ <s:State name="down" />
+ <s:State name="disabled" />
+ </s:states>
+
+ <!-- layer 1: shadow -->
+ <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0x000000"
+ color.down="0xFFFFFF"
+ alpha="0.01"
+ alpha.down="0" />
+ <s:GradientEntry color="0x000000"
+ color.down="0xFFFFFF"
+ alpha="0.07"
+ alpha.down="0.5" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+
+ <!-- layer 2: fill -->
+ <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xFFFFFF"
+ color.over="0xBBBDBD"
+ color.down="0xAAAAAA"
+ alpha="0.85" />
+ <s:GradientEntry color="0xD8D8D8"
+ color.over="0x9FA0A1"
+ color.down="0x929496"
+ alpha="0.85" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+
+ <!-- layer 3: fill lowlight -->
+ <s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2">
+
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0x000000" alpha="0.0099" />
+ <s:GradientEntry color="0x000000" alpha="0.0627" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 4: fill highlight -->
+ <s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2">
+ <s:fill>
+ <s:SolidColor color="0xFFFFFF"
+ alpha="0.33"
+ alpha.over="0.22"
+ alpha.down="0.12" />
+ </s:fill>
+ </s:Rect>
+
+
+
+ <!-- layer 5: highlight stroke (all states except down) -->
+ <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down">
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
+ <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- layer 6: highlight stroke (down state only) -->
+ <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.07" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.07" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Rect left="2" top="1" right="2" height="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.25" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.09" />
+ </s:fill>
+ </s:Rect>
+
+
+ <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+ <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0x000000"
+ alpha="0.5625"
+ alpha.down="0.6375" />
+ <s:GradientEntry color="0x000000"
+ alpha="0.75"
+ alpha.down="0.85" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- icon symbol with drop shadow -->
+ <s:Group id="symbol" left="3" top="3" right="3" bottom="3">
+ <s:filters>
+ <s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" />
+ </s:filters>
+ <s:BitmapImage source="@Embed('../assets/icon_check.png')"/>
+ </s:Group>
+
+
+</s:SparkSkin>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/BackgroundImageAppSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/BackgroundImageAppSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/BackgroundImageAppSkin.mxml
new file mode 100644
index 0000000..cf478fb
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/BackgroundImageAppSkin.mxml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/halo"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Metadata>
+ [HostComponent("spark.components.Application")]
+ </fx:Metadata>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ </s:states>
+
+ <!-- This image fill also specifies padding around it -->
+ <s:Rect id="backgroundRect" left="100" right="100" top="20" bottom="20">
+ <s:fill>
+ <s:BitmapFill source="@Embed('../assets/wood-bg.png')"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
+</s:SparkSkin>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CloseButtonSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CloseButtonSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CloseButtonSkin.mxml
new file mode 100644
index 0000000..d481c66
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CloseButtonSkin.mxml
@@ -0,0 +1,184 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<!--
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+ minWidth="21" minHeight="21"
+ alpha.disabled="0.5">
+
+ <!-- host component -->
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Button")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ <![CDATA[
+ /* Define the skin elements that should not be colorized.
+ For button, the graphics are colorized but the label is not. */
+ static private const exclusions:Array = ["labelDisplay"];
+
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ ]]>
+
+ </fx:Script>
+
+ <!-- states -->
+ <s:states>
+ <s:State name="up" />
+ <s:State name="over" />
+ <s:State name="down" />
+ <s:State name="disabled" />
+ </s:states>
+
+ <!-- layer 1: shadow -->
+ <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0x000000"
+ color.down="0xFFFFFF"
+ alpha="0.01"
+ alpha.down="0" />
+ <s:GradientEntry color="0x000000"
+ color.down="0xFFFFFF"
+ alpha="0.07"
+ alpha.down="0.5" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 2: fill -->
+ <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xFFFFFF"
+ color.over="0xBBBDBD"
+ color.down="0xAAAAAA"
+ alpha="0.85" />
+ <s:GradientEntry color="0xD8D8D8"
+ color.over="0x9FA0A1"
+ color.down="0x929496"
+ alpha="0.85" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: fill lowlight -->
+ <s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0x000000" alpha="0.0099" />
+ <s:GradientEntry color="0x000000" alpha="0.0627" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 4: fill highlight -->
+ <s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2">
+ <s:fill>
+ <s:SolidColor color="0xFFFFFF"
+ alpha="0.33"
+ alpha.over="0.22"
+ alpha.down="0.12" />
+ </s:fill>
+ </s:Rect>
+
+
+ <!-- layer 5: highlight stroke (all states except down) -->
+ <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down">
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
+ <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- layer 6: highlight stroke (down state only) -->
+ <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.07" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.07" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Rect left="2" top="1" right="2" height="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.25" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.09" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+ <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0x000000"
+ alpha="0.5625"
+ alpha.down="0.6375" />
+ <s:GradientEntry color="0x000000"
+ alpha="0.75"
+ alpha.down="0.85" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- layer 8: text -->
+ <!---
+ @copy spark.components.supportClasses.ButtonBase#labelDisplay
+ -->
+ <s:Rect left="0" top="0" right="0" bottom="0" >
+ <s:fill>
+ <s:BitmapFill source="@Embed('../assets/icon_close16.png')"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:Label id="labelDisplay"
+ textAlign="center"
+ verticalAlign="middle"
+ maxDisplayedLines="1"
+ horizontalCenter="0" verticalCenter="1"
+ left="10" right="10" top="2" bottom="2">
+ </s:Label>
+</s:SparkSkin>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomControlBarAppSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomControlBarAppSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomControlBarAppSkin.mxml
new file mode 100644
index 0000000..0540a95
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomControlBarAppSkin.mxml
@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<!--- The default skin class for the Spark Application component.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+ alpha.disabled="0.5" >
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * A strongly typed property that references the component to which this skin is applied.
+ */
+ [HostComponent("spark.components.Application")]
+ ]]>
+ </fx:Metadata>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ <s:State name="normalWithControlBar" />
+ <s:State name="disabledWithControlBar" />
+ </s:states>
+
+ <!-- fill -->
+ <!---
+ A rectangle with a solid color fill that forms the background of the application.
+ The color of the fill is set to the Application's backgroundColor property.
+ -->
+ <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0" >
+ <s:fill>
+ <s:SolidColor color="0xFFFFFF" alpha="0" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Group left="0" right="0" top="0" bottom="0">
+ <s:layout>
+ <s:VerticalLayout gap="0" horizontalAlign="justify" />
+ </s:layout>
+
+ <!---
+ Application Control Bar
+ -->
+ <s:Group id="topGroup" minWidth="0" minHeight="0"
+ includeIn="normalWithControlBar, disabledWithControlBar">
+
+ <!-- layer 0: control bar background -->
+ <s:Rect left="0" right="0" bottom="0" top="1" >
+ <s:fill>
+ <!-- ADDED CUSTOM GRADIENT FILL ON THE CONTROL BAR FOR SAMPLE -->
+ <s:LinearGradient rotation="90">
+ <s:entries>
+ <s:GradientEntry color="0x000000" ratio="0.00" alpha="0.8"/>
+ <s:GradientEntry color="0xCCCCCC" ratio="0.5" alpha="0.8"/>
+ </s:entries>
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: control bar divider line -->
+ <s:Rect left="0" right="0" bottom="0" height="1" >
+ <s:fill>
+ <s:SolidColor color="0xD1E0F2" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 2: control bar -->
+ <!-- Modified the group constraints to set the content 5 pixels from the right for this sample -->
+ <s:Group id="controlBarGroup" right="5">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
+ </s:layout>
+ </s:Group>
+ </s:Group>
+
+ <!---
+ @copy spark.components.SkinnableContainer#contentGroup
+ -->
+ <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
+
+ </s:Group>
+
+</s:Skin>
\ No newline at end of file
[4/6] Added more spark examples
Posted by jm...@apache.org.
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
new file mode 100644
index 0000000..68da5d6
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
@@ -0,0 +1,50 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html">
+
+ <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>
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
new file mode 100644
index 0000000..721d16b
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ currentState="hide">
+
+
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.ArrayCollection;
+
+ [Bindable]
+ public var items:ArrayCollection = new ArrayCollection([
+ {label:"Medium Pink V-Neck T", itemNum:1932823474, price:"$24.00"},
+ {label:"Small Red Polo", itemNum:2022144432, price:"$40.00"},
+ {label:"X-Large Sweatshirt", itemNum:3769034827, price:"$50.00"} ]);
+
+ protected function myBtn_clickHandler(event:MouseEvent):void
+ {
+ if (showBtn.selected)
+ this.currentState="show";
+ else this.currentState="hide";
+ }
+ ]]>
+ </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: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:HGroup>
+ </s:Panel>
+
+
+ <!--
+ <s:Group width="100%" height="100%">
+ <s:Rect left="0" right="0" bottom="0" top="0">
+ <s:fill>
+ <s:LinearGradient rotation="90" >
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+ <s:VGroup left="15" top="5" 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)"/>
+ <mx:Spacer height="40"/>
+ <s:Label color="#FFFFFF" width="199"
+ verticalAlign="justify"
+ text="Clicking the button toggles it between the up and an 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:VGroup>
+ </s:VGroup>
+ <s:HGroup right="50" top="5">
+ <s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="200"
+ color="#FFFFFF" includeIn="show" baseColor="#000000">
+ <mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/>
+ </s:Panel>
+ </s:HGroup>
+
+ </s:Group>-->
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
index 7bce8ec..422a185 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
@@ -40,11 +40,10 @@
<fx:Declarations>
<fx:Array id="dp">
- <fx:String>Flash</fx:String>
<fx:String>Flex</fx:String>
- <fx:String>AIR</fx:String>
- <fx:String>ColdFusion</fx:String>
- <fx:String>LiveCycle</fx:String>
+ <fx:String>Flex JS</fx:String>
+ <fx:String>Falcon</fx:String>
+ <fx:String>Falcon JX</fx:String>
</fx:Array>
</fx:Declarations>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml
new file mode 100644
index 0000000..d1ca0ca
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml
@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ currentState="hide" viewSourceURL="srcview/index.html">
+
+
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.ArrayCollection;
+
+ [Bindable]
+ public var items:ArrayCollection = new ArrayCollection([
+ {label:"Medium Pink V-Neck T", itemNum:1932823474, price:"$24.00"},
+ {label:"Small Red Polo", itemNum:2022144432, price:"$40.00"},
+ {label:"X-Large Sweatshirt", itemNum:3769034827, price:"$50.00"} ]);
+
+ protected function myBtn_clickHandler(event:MouseEvent):void
+ {
+ if (showBtn.selected)
+ this.currentState="show";
+ else this.currentState="hide";
+ }
+ ]]>
+ </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: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" 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:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml
new file mode 100644
index 0000000..5f64a2a
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ viewSourceURL="srcview/index.html">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.events.ItemClickEvent;
+ import mx.collections.ArrayCollection;
+
+ private function playPauseChange(event:Event):void
+ {
+ videoPlayer.playPauseButton.enabled = checkPlay.selected;
+ }
+ ]]>
+ </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"
+ 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
+to let users control playback of video. It contains a play/pause toggle button; a scrub bar to let
+users seek through video; a volume bar; a timer; and a button to toggle in and out of fullscreen mode."/>
+
+ <!-- note: source can point to a server location or URL -->
+ <s:VGroup left="10">
+ <s:HGroup width="35%">
+ <s:CheckBox id="checkRewind"
+ label="Auto-Rewind"
+ selected="true" />
+ <s:CheckBox id="checkPlay"
+ label="Play/Pause Button"
+ selected="true"
+ change="playPauseChange(event)" />
+ </s:HGroup>
+ <s:VideoPlayer id="videoPlayer"
+ horizontalCenter="-2" y="50"
+ source="assets/sample_vid.flv"
+ autoPlay="false"
+ autoRewind="{checkRewind.selected}"/>
+ </s:VGroup>
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_pause_blue.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_pause_blue.png b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_pause_blue.png
new file mode 100644
index 0000000..ec61099
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_pause_blue.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_play_blue.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_play_blue.png b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_play_blue.png
new file mode 100644
index 0000000..f8c8ec6
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_play_blue.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_stop_blue.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_stop_blue.png b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_stop_blue.png
new file mode 100644
index 0000000..e6f75d2
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_stop_blue.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/assets/icon_close.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/icon_close.png b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/icon_close.png
new file mode 100644
index 0000000..bf9be79
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/icon_close.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/iconclose.gif
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/iconclose.gif b/TourDeFlex/TourDeFlex3/src/spark/controls/iconclose.gif
new file mode 100644
index 0000000..9bcda93
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/iconclose.gif differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/iconinfo.gif
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/iconinfo.gif b/TourDeFlex/TourDeFlex3/src/spark/controls/iconinfo.gif
new file mode 100644
index 0000000..fb181ab
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/iconinfo.gif differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/skins/CloseButtonSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/skins/CloseButtonSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/CloseButtonSkin.mxml
new file mode 100644
index 0000000..23b529e
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/CloseButtonSkin.mxml
@@ -0,0 +1,184 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<!--
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+ minWidth="21" minHeight="21"
+ alpha.disabled="0.5">
+
+ <!-- host component -->
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Button")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ <![CDATA[
+ /* Define the skin elements that should not be colorized.
+ For button, the graphics are colorized but the label is not. */
+ static private const exclusions:Array = ["labelDisplay"];
+
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ ]]>
+
+ </fx:Script>
+
+ <!-- states -->
+ <s:states>
+ <s:State name="up" />
+ <s:State name="over" />
+ <s:State name="down" />
+ <s:State name="disabled" />
+ </s:states>
+
+ <!-- layer 1: shadow -->
+ <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0x000000"
+ color.down="0xFFFFFF"
+ alpha="0.01"
+ alpha.down="0" />
+ <s:GradientEntry color="0x000000"
+ color.down="0xFFFFFF"
+ alpha="0.07"
+ alpha.down="0.5" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 2: fill -->
+ <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xFFFFFF"
+ color.over="0xBBBDBD"
+ color.down="0xAAAAAA"
+ alpha="0.85" />
+ <s:GradientEntry color="0xD8D8D8"
+ color.over="0x9FA0A1"
+ color.down="0x929496"
+ alpha="0.85" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: fill lowlight -->
+ <s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0x000000" alpha="0.0099" />
+ <s:GradientEntry color="0x000000" alpha="0.0627" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 4: fill highlight -->
+ <s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2">
+ <s:fill>
+ <s:SolidColor color="0xFFFFFF"
+ alpha="0.33"
+ alpha.over="0.22"
+ alpha.down="0.12" />
+ </s:fill>
+ </s:Rect>
+
+
+ <!-- layer 5: highlight stroke (all states except down) -->
+ <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down">
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
+ <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- layer 6: highlight stroke (down state only) -->
+ <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.07" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.07" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Rect left="2" top="1" right="2" height="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.25" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.09" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+ <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0x000000"
+ alpha="0.5625"
+ alpha.down="0.6375" />
+ <s:GradientEntry color="0x000000"
+ alpha="0.75"
+ alpha.down="0.85" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- layer 8: text -->
+ <!---
+ @copy spark.components.supportClasses.ButtonBase#labelDisplay
+ -->
+ <s:Rect left="0" top="0" right="0" bottom="0" >
+ <s:fill>
+ <s:BitmapFill source="@Embed('../iconclose.gif')"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:Label id="labelDisplay"
+ textAlign="center"
+ verticalAlign="middle"
+ maxDisplayedLines="1"
+ horizontalCenter="0" verticalCenter="1"
+ left="10" right="10" top="2" bottom="2">
+ </s:Label>
+</s:SparkSkin>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/skins/MyPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/skins/MyPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/MyPanelSkin.mxml
new file mode 100644
index 0000000..d125964
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/MyPanelSkin.mxml
@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<!--- The default skin class for a Spark Panel container.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" blendMode="normal">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Panel")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ /* Define the skin elements that should not be colorized.
+ For panel, border and title backround are skinned, but the content area and title text are not. */
+ static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgfill"];
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+ static private const contentFill:Array = [];
+
+ /**
+ * @inheritDoc
+ */
+ override public function get contentItems():Array {return contentFill};
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ </s:states>
+
+ <!-- background fill -->
+ <s:Rect left="0" right="0" bottom="0" top="0" >
+ <s:fill>
+ <s:LinearGradient rotation="90" >
+ <s:GradientEntry color="0xFFFFFF" />
+ <s:GradientEntry color="0x1a1919" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+ <!-- title bar fill -->
+ <s:Rect left="0" right="0" top="0" height="30">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0x000000" />
+ <s:GradientEntry color="0xC0C0C0" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+
+ <!-- text layer -->
+ <!--- Defines the appearance of the PanelSkin class's title bar. -->
+ <s:Label id="titleDisplay" lineBreak="explicit"
+ right="4" top="2" height="30"
+ verticalAlign="middle" fontWeight="bold"
+ color="0xE2E2E2">
+ </s:Label>
+
+ <!--
+ Note: setting the minimum size to 0 here so that changes to the host component's
+ size will not be thwarted by this skin part's minimum size. This is a compromise,
+ more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+ -->
+ <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1" minWidth="0" minHeight="0"/>
+
+</s:SparkSkin>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
new file mode 100644
index 0000000..c130849
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/css/CSSIDSelectorExample.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html">
+ <fx:Style>
+ #submitButton {
+ baseColor: #1E407E;
+ color: #FFFFFF;
+ }
+
+ </fx:Style>
+ <fx:Script>
+ <![CDATA[
+ private function clickHandler():void
+ {
+ text1.text = "Thank you " + firstName.text + " " + lastName.text;
+ }
+ private function resetClickHandler():void
+ {
+ firstName.text = "";
+ lastName.text = "";
+ }
+ ]]>
+ </fx:Script>
+
+ <s:Panel height="100%" width="100%"
+ horizontalCenter="0" verticalCenter="0"
+ title="Advanced CSS: ID Selector Example"
+ skinClass="skins.TDFPanelSkin">
+ <s:Label top="20" left="30" width="140" color="0x323232" verticalAlign="justify"
+ text="Only the Button with the id 'submitButton' will have custom colors."/>
+
+ <s:VGroup horizontalCenter="0" horizontalAlign="center" verticalCenter="0">
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="First Name:"/>
+ <s:TextInput id="firstName" width="100"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Last Name:"/>
+ <s:TextInput id="lastName" width="100"/>
+ </s:HGroup>
+ <s:HGroup>
+ <s:Button id="submitButton" label="Submit Form" click="clickHandler()"/>
+ <s:Button id="resetButton" label="Reset" click="resetClickHandler()"/>
+ </s:HGroup>
+ <s:Label id="text1"/>
+ </s:VGroup>
+
+ </s:Panel>
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
new file mode 100644
index 0000000..6082791
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimatePropertiesExample.mxml
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ viewSourceURL="srcview/index.html">
+
+ <!-- NOTE: This sample was compiled with Flex SDK version 4.0.0.13875 -->
+
+ <fx:Declarations>
+ <s:Animate id="a"
+ duration="750"
+ target="{tileGroup}"
+ repeatBehavior="reverse"
+ repeatCount="2">
+ <s:SimpleMotionPath valueFrom="1"
+ valueTo="15"
+ property="horizontalGap" />
+ <s:SimpleMotionPath valueFrom="1"
+ valueTo="15"
+ property="verticalGap" />
+ <s:SimpleMotionPath valueFrom="0"
+ valueTo="-50"
+ property="z" />
+ </s:Animate>
+ </fx:Declarations>
+
+ <s:layout>
+ <s:HorizontalLayout
+ horizontalAlign="center"
+ gap="100"
+ paddingTop="8"/>
+ </s:layout>
+
+ <s:TileGroup id="tileGroup"
+ horizontalGap="1"
+ verticalGap="1"
+ direction="ltr"
+ columnWidth="50"
+ rowHeight="50"
+ useHandCursor="true"
+ buttonMode="true">
+
+ <mx:Image source="@Embed('assets/images/2.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/3.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/4.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/5.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/6.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/7.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/8.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/9.jpg')" click="a.play()" />
+
+ </s:TileGroup>
+
+ <s:HGroup top="8" right="8">
+ <s:VGroup width="100%" >
+ <s:Label text="Animate Properties Sample"
+ fontSize="18"
+ color="#B7B6B6"/>
+
+ <s:Label width="250"
+ verticalAlign="justify"
+ color="#323232"
+ text="With the Spark Animate class, you can animate any arbitrary property of an object by using MotionPaths or SimpleMotionPaths. In this sample, the horizontalGap, verticalGap, and z properties of the TileGroup are being incremented over the course of the animation."/>
+
+ <s:Label text="{'horizontalGap = ' + tileGroup.horizontalGap}"/>
+ <s:Label text="{'verticalGap = ' + tileGroup.verticalGap}" />
+ </s:VGroup>
+ </s:HGroup>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
new file mode 100644
index 0000000..e6307a1
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/AnimateTransformExample.mxml
@@ -0,0 +1,116 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Declarations>
+ <s:AnimateTransform id="bounceEffect"
+ target="{myImage}">
+
+ <s:motionPaths>
+ <s:MotionPath property="translationX" >
+ <s:keyframes>
+ <s:Keyframe time="250" value="0"/>
+ <s:Keyframe time="550" value="60"/>
+ <s:Keyframe time="850" value="100"/>
+ <s:Keyframe time="1150" value="140"/>
+ <s:Keyframe time="1450" value="180"/>
+ <s:Keyframe time="1750" value="220"/>
+ <s:Keyframe time="2050" value="140"/>
+ <s:Keyframe time="2350" value="100"/>
+ <s:Keyframe time="2650" value="60"/>
+ <s:Keyframe time="2950" value="0"/>
+ </s:keyframes>
+ </s:MotionPath>
+
+ <s:MotionPath property="translationY" >
+ <s:keyframes>
+ <s:Keyframe time="250" value="100"/>
+ <s:Keyframe time="550" value="0"/>
+ <s:Keyframe time="850" value="100"/>
+ <s:Keyframe time="1150" value="0"/>
+ <s:Keyframe time="1450" value="100"/>
+ <s:Keyframe time="1750" value="0"/>
+ <s:Keyframe time="2050" value="100"/>
+ <s:Keyframe time="2350" value="0"/>
+ <s:Keyframe time="2650" value="100"/>
+ <s:Keyframe time="2950" value="0"/>
+ </s:keyframes>
+ </s:MotionPath>
+ </s:motionPaths>
+ </s:AnimateTransform>
+ </fx:Declarations>
+
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+
+ Button:up{
+ baseColor: #000000;
+ color: #FFFFFF;
+ fontWeight: "bold";
+ }
+ Button:over{
+ baseColor: #878787;
+ color: #FFFFFF;
+ fontWeight: "bold";
+ }
+ Button:down{
+ baseColor: #878787;
+ color: #000000;
+ fontWeight: "bold";
+ }
+ Button:disabled {
+ baseColor: #FFFFFF;
+ color: #878787;
+ fontWeight: "bold";
+ }
+ Label {
+ fontFamily: "Arial";
+ fontWeight: "bold";
+ }
+ </fx:Style>
+
+ <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+ source tabs for each sample. -->
+ <s:Panel title="AnimateTransform Effect Sample (Bounce)"
+ width="100%" height="100%"
+ skinClass="skins.TDFPanelSkin">
+
+ <s:Group left="3">
+ <mx:Image y="0" id="myImage"
+ source="@Embed(source='assets/ApacheFlexIcon.png')"
+ click="bounceEffect.end();bounceEffect.play();"/>
+ </s:Group>
+
+ <s:HGroup bottom="5" left="3">
+ <s:Label text="Click the Apache Flex logo to bounce it!" color="0x000000"/>
+ </s:HGroup>
+ <s:HGroup top="5" right="5">
+ <s:VGroup width="100%" >
+ <s:Label text="Cross Fade Sample" fontSize="18" color="#B7B6B6"/>
+ <s:Label width="250" verticalAlign="justify" color="#323232"
+ text="Unlike the Animate class, which you can use to animate any target property, the AnimateTransform effect only supports the animation of certain properties on the target. To use keyframes and motion paths with the AnimateTransform effect, use the MotionPath class to specify keyframes for one or more of the following properties of the AnimateTransform class:
+ movement (translationX, translationY, and translationZ), rotation (rotationX, rotationY, and rotationZ), scale (scaleX, scaleY, and scaleZ)."/>
+ </s:VGroup>
+ </s:HGroup>
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
new file mode 100644
index 0000000..4ce258e
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/CrossFadeExample.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<s:Application
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <s:states>
+ <s:State name="default"/>
+ <s:State name="flipped"/>
+ </s:states>
+
+ <s:transitions>
+ <s:Transition id="t1" autoReverse="true">
+ <s:CrossFade
+ target="{holder}"
+ duration="1000" />
+ </s:Transition>
+ </s:transitions>
+
+ <s:Panel title="CrossFade Effect Sample with Transition"
+ width="100%" height="100%"
+ skinClass="skins.TDFPanelSkin">
+
+ <s:HGroup verticalCenter="0" horizontalCenter="0">
+ <s:VGroup>
+ <s:Group id="holder">
+ <s:BitmapImage
+ source="@Embed('assets/ApacheFlexLogo.png')"
+ visible="true" visible.flipped="false"/>
+ <s:BitmapImage
+ source="@Embed('assets/ApacheFlexLogo.png')"
+ visible="false" visible.flipped="true"/>
+
+ </s:Group>
+ <s:Button id="playButton" left="264" bottom="174"
+ label="Cross Fade"
+ click="currentState = (currentState == 'flipped') ? 'default' : 'flipped';" y.default="-33"/>
+ </s:VGroup>
+ <mx:Spacer width="50"/>
+ <s:VGroup width="100%" >
+ <s:Label text="Cross Fade Sample" fontSize="18" color="#B7B6B6"/>
+ <s:Label width="250" verticalAlign="justify" color="#323232"
+ text="The CrossFade effect performs a bitmap transition effect by running a crossfade between the first and second bitmaps.
+ The crossfade blends the two bitmaps over the duration of the animation."/>
+ </s:VGroup>
+ </s:HGroup>
+
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
new file mode 100644
index 0000000..e2dba36
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/FadeExample.mxml
@@ -0,0 +1,60 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Declarations>
+ <s:Fade id="fadeEffect" target="{targetImg}" alphaFrom="{Number(fromVal.text)}" alphaTo="{Number(toVal.text)}"
+ repeatCount="2" repeatBehavior="reverse" effectStart="playButton.enabled=false"
+ effectEnd="playButton.enabled=true;"/>
+ </fx:Declarations>
+
+ <s:Panel title="Fade Effect Sample"
+ width="100%" height="100%"
+ skinClass="skins.TDFPanelSkin">
+
+ <s:HGroup verticalCenter="0" horizontalCenter="0">
+ <s:VGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Fade alpha from:" verticalAlign="bottom"/>
+ <s:TextInput id="fromVal" text="1.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Fade alpha to:" verticalAlign="bottom"/>
+ <s:TextInput id="toVal" text="0.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:Button id="playButton"
+ left="5" bottom="5"
+ label="Fade" click="fadeEffect.play();"/>
+ </s:VGroup>
+
+ <s:BitmapImage id="targetImg" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+
+ <s:VGroup width="100%" >
+ <s:Label text="Fade Sample" fontSize="18" color="#B7B6B6"/>
+ <s:Label width="180" verticalAlign="justify" color="#323232"
+ text="The Fade effect changes the alpha of a target using the following parameters: alphaFrom, alphaTo. Click 'Fade' to watch the effect."/>
+ </s:VGroup>
+ </s:HGroup>
+
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
new file mode 100644
index 0000000..8d7f0b3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/Rotate3DExample.mxml
@@ -0,0 +1,114 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+ Label {
+ baseColor: #000000;
+ fontFamily: "Arial";
+ fontWeight: "bold";
+ fontSize: "11";
+ advancedAntiAliasing: true;
+ }
+ Button:up{
+ baseColor: #000000;
+ color: #FFFFFF;
+ fontWeight: "bold";
+ }
+ Button:over{
+ baseColor: #878787;
+ color: #FFFFFF;
+ fontWeight: "bold";
+ }
+ Button:down{
+ baseColor: #878787;
+ color: #000000;
+ fontWeight: "bold";
+ }
+ Button:disabled {
+ baseColor: #FFFFFF;
+ color: #878787;
+ fontWeight: "bold";
+ }
+ </fx:Style>
+
+ <fx:Declarations>
+ <s:Rotate3D id="rotateEffect" target="{targetImg}"
+ angleXFrom="0.0" angleXTo="{Number(xVal.text)}"
+ angleYFrom="0.0" angleYTo="{Number(yVal.text)}"
+ angleZFrom="0.0" angleZTo="{Number(zVal.text)}"
+ duration="{duration.value}"
+ repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}"
+ effectStart="this.targetImg.alpha=.8" effectEnd="this.targetImg.alpha=1.0;"/>
+ </fx:Declarations>
+
+ <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+ source tabs for each sample. -->
+ <s:Panel width="100%" height="100%"
+ horizontalCenter="0"
+ title="Rotate3D Effect Sample"
+ skinClass="skins.TDFPanelSkin">
+
+ <s:HGroup horizontalCenter="0" top="10">
+ <s:VGroup >
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Rotate X To" verticalAlign="bottom"/>
+ <s:TextInput id="xVal" text="0.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Rotate Y By" verticalAlign="bottom"/>
+ <s:TextInput id="yVal" text="360.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Rotate Z To" verticalAlign="bottom"/>
+ <s:TextInput id="zVal" text="0.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Repeat Num" verticalAlign="bottom"/>
+ <s:NumericStepper id="repeatCnt" value="2" width="35" minimum="1"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Duration" verticalAlign="bottom"/>
+ <s:NumericStepper id="duration" width="58"
+ minimum="100" maximum="9999"
+ value="1000"
+ snapInterval="100" />
+ </s:HGroup>
+ <s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
+ <s:Button id="playButton"
+ label="Rotate Image" click="rotateEffect.play();"/>
+ </s:VGroup>
+ <s:HGroup horizontalCenter="0" height="60%" verticalAlign="middle" width="10%">
+ <s:BitmapImage id="targetImg" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+ </s:HGroup>
+ <s:VGroup top="0" right="5" horizontalAlign="right">
+ <s:Label text="Rotate3D Effect Sample" fontSize="18" color="#B7B6B6"/>
+ <s:Label color="#323232" width="200" verticalAlign="justify"
+ text="The Rotate3D class rotates a target object in three dimensions around the x, y, or z
+axes. The rotation occurs around the transform center of the target." textAlign="left"/>
+ </s:VGroup>
+ </s:HGroup>
+
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
new file mode 100644
index 0000000..afb5702
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/Scale3DExample.mxml
@@ -0,0 +1,118 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+ Label {
+ baseColor: #000000;
+ fontFamily: "Arial";
+ fontWeight: "bold";
+ fontSize: "11";
+ advancedAntiAliasing: true;
+ }
+ Button:up{
+ baseColor: #000000;
+ color: #FFFFFF;
+ fontWeight: "bold";
+ }
+ Button:over{
+ baseColor: #878787;
+ color: #FFFFFF;
+ fontWeight: "bold";
+ }
+ Button:down{
+ baseColor: #878787;
+ color: #000000;
+ fontWeight: "bold";
+ }
+ Button:disabled {
+ baseColor: #FFFFFF;
+ color: #878787;
+ fontWeight: "bold";
+ }
+ </fx:Style>
+
+ <fx:Declarations>
+ <s:Scale3D id="scaleEffect" target="{targetImg}"
+ scaleXFrom="1.0" scaleXTo="{Number(xVal.text)}"
+ scaleYFrom="1.0" scaleYBy="{Number(yVal.text)}"
+ scaleZFrom="1.0" scaleZTo="{Number(zVal.text)}"
+ duration="{duration.value}"
+ repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}"
+ effectStart="this.targetImg.alpha=.7" effectEnd="this.targetImg.alpha=1.0;"/>
+ </fx:Declarations>
+
+ <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+ source tabs for each sample. -->
+ <s:Panel width="100%" height="100%"
+ horizontalCenter="0"
+ title="Scale3D Effect Sample"
+ skinClass="skins.TDFPanelSkin">
+
+ <s:HGroup left="5" top="5" width="100%" height="100%" horizontalCenter="0">
+ <s:VGroup width="40%">
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Scale X To" verticalAlign="bottom"/>
+ <s:TextInput id="xVal" text="1.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Scale Y By" verticalAlign="bottom"/>
+ <s:TextInput id="yVal" text="1.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Scale Z To" verticalAlign="bottom"/>
+ <s:TextInput id="zVal" text="1.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Repeat Num" verticalAlign="bottom"/>
+ <s:NumericStepper id="repeatCnt" width="35"
+ value="2" minimum="1"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Duration" verticalAlign="bottom"/>
+ <s:NumericStepper id="duration" width="58"
+ minimum="100" maximum="9999"
+ value="1000"
+ snapInterval="100" />
+ </s:HGroup>
+ <s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
+ <s:Button id="playButton"
+ label="Scale Image" click="scaleEffect.play();"/>
+ </s:VGroup>
+ <s:HGroup horizontalCenter="0" height="30%" verticalAlign="middle" width="40%">
+ <s:BitmapImage id="targetImg" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+ </s:HGroup>
+ <s:VGroup top="0" right="5" horizontalAlign="right" width="30%">
+ <s:Label text="Scale3D Effect Sample" fontSize="18" color="#B7B6B6"/>
+ <s:Label color="#323232" width="200" verticalAlign="justify"
+ text="The Scale3D class scales a target object in three dimensions around the transform center. A scale of
+2.0 means the object has been magnified by a factor of 2, and a scale of 0.5 means the object has been
+reduced by a factor of 2. A scale value of 0.0 is invalid."/>
+ </s:VGroup>
+ </s:HGroup>
+
+
+
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexIcon.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexIcon.png b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexIcon.png
new file mode 100644
index 0000000..e68d831
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexIcon.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/2.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/2.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/2.jpg
new file mode 100644
index 0000000..2533129
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/2.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/3.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/3.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/3.jpg
new file mode 100644
index 0000000..b98cd8a
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/3.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/4.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/4.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/4.jpg
new file mode 100644
index 0000000..657c12b
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/4.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/5.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/5.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/5.jpg
new file mode 100644
index 0000000..e296f9c
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/5.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/6.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/6.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/6.jpg
new file mode 100644
index 0000000..5ebc534
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/6.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/7.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/7.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/7.jpg
new file mode 100644
index 0000000..3047de0
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/7.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/8.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/8.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/8.jpg
new file mode 100644
index 0000000..4e3f9ca
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/8.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/9.jpg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/9.jpg b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/9.jpg
new file mode 100644
index 0000000..ed4e5fe
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/images/9.jpg differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
index b1b5403..e7557f4 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample1.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
index 5448411..075743b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample2.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
index dc23a5d..780d0da 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample3.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
index 52c7628..3347796 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample4.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
index 4bd5339..4ffe293 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample5.mxml
@@ -21,8 +21,7 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:local="*"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
index 2da53d0..eb82cfb 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/events/EventExample6.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
index d1c345d..07c52f5 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
index 77ca8ee..5162dd5 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/DateFormatterExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
index 62f5bda..e0c9127 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/NumberFormatterExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
index e0f35ab..49f114c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/PhoneFormatterExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
index fec712f..084d0aa 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
index 14afe89..16ab586 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml
new file mode 100644
index 0000000..3e123ea
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/halo">
+
+ <s:Panel width="100%" height="100%"
+ title="DropShadows with MXML Graphics Example"
+ skinClass="skins.TDFPanelSkin" x="0">
+
+ <s:Group horizontalCenter="0" y="5" width="117">
+ <s:Graphic id="ellipse1">
+ <s:filters>
+ <s:DropShadowFilter color="0x6080a0" alpha="0.6" distance="5" />
+ </s:filters>
+ <s:Ellipse x="30" y="20" width="60" height="60">
+ <s:fill>
+ <s:SolidColor color="0x60a0e0" />
+ </s:fill>
+ </s:Ellipse>
+ </s:Graphic>
+ <s:Graphic id="rect1" x="47" y="0" width="100">
+ <s:filters>
+ <s:DropShadowFilter color="0x002020" alpha="0.9" distance="8" angle="10"/>
+ </s:filters>
+ <s:Rect right="15" x="120" y="100" width="90" height="90">
+ <s:fill>
+ <s:SolidColor color="0x4060c0" />
+ </s:fill>
+ </s:Rect>
+ </s:Graphic>
+ <s:Graphic id="image1">
+ <s:filters>
+ <s:DropShadowFilter color="0xFF6600" alpha="0.7" distance="10" angle="-30"/>
+ </s:filters>
+ <s:BitmapImage source="@Embed('assets/ApacheFlexIcon.png')" x="180" y="20" />
+ </s:Graphic>
+
+ </s:Group>
+ <s:Label width="250" verticalAlign="justify" color="#323232" 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.
+You can apply the filter to any display object (that is, objects that inherit from the DisplayObject
+class), such as MovieClip, SimpleButton, TextField, and Video objects, as well as to BitmapData objects."/>
+
+
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml
new file mode 100644
index 0000000..19ce21f
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
+ <s:layout>
+ <s:BasicLayout/>
+ </s:layout>
+
+ <fx:Script>
+ <![CDATA[
+
+ private function addMatrix(): void
+ {
+ ellipse1.transform.matrix = rotation20Matrix;
+ descriptionText.text = "A matrix transform was applied moving the Ellipse to coordinates: 100, 310 and skewing it to a 20 degree rotation.";
+ trace(ellipse1.width);
+ }
+ ]]>
+ </fx:Script>
+ <fx:Declarations>
+ <!-- This matrix should cause the rotation of the Ellipse be 20 degrees -->
+ <s:Matrix id="rotation20Matrix"
+ a="0.939692620786"
+ b="0.34202014332"
+ c="0.34202014332"
+ d="0.939692620786"
+ tx="100"
+ ty="310"
+ />
+ </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:fill>
+ <s:LinearGradient>
+ <s:GradientEntry color="#00FF00" alpha="1" ratio="0"/>
+ <s:GradientEntry color="#000000" alpha="0" ratio="1"/>
+ </s:LinearGradient>
+ </s:fill>
+ <s:stroke>
+ <s:SolidColorStroke color="0x666666" weight="1"/>
+ </s:stroke>
+ </s:Ellipse>
+ <s:Button label="Apply Transform" click="addMatrix()" x="40" y="330" />
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
new file mode 100644
index 0000000..71fd6aa
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/halo" viewSourceURL="srcview/index.html">
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.ArrayCollection;
+ ]]>
+ </fx:Script>
+
+ <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"
+ 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>
+ <s:LinearGradient id="gradient1" scaleX="20" x="0">
+ <s:entries>
+ <s:GradientEntry color="0xFF0000" />
+ <s:GradientEntry color="0xFFFFFF" />
+ <s:GradientEntry color="0x0000FF" />
+ </s:entries>
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+ <s:VGroup>
+
+ <s:Label text="scaleX value: " />
+ <s:HSlider id="scaleXVal" value="20" maximum="200" change="gradient1.scaleX=scaleXVal.value"/>
+ <s:Label text="x value: " />
+ <s:HSlider id="XVal" value="0" maximum="200" change="gradient1.x=XVal.value"/>
+ <s:Label text="select a spreadMethod: " />
+ <s:DropDownList id="spreadValue" selectedIndex="0"
+ dataProvider="{new ArrayCollection(['pad', 'reflect', 'repeat'])}"
+ change="gradient1.spreadMethod=spreadValue.selectedItem"/>
+ </s:VGroup>
+
+ </s:HGroup>
+
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/fxg/OrangeCrayonStar.fxg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/OrangeCrayonStar.fxg b/TourDeFlex/TourDeFlex3/src/spark/fxg/OrangeCrayonStar.fxg
new file mode 100644
index 0000000..601841c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/OrangeCrayonStar.fxg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<Graphic version="1.0" xmlns="http://ns.adobe.com/fxg/2008" xmlns:fw="http://ns.adobe.com/fxg/2008/fireworks" viewHeight= "134" viewWidth= "136">
+ <Library>
+ </Library>
+
+ <Group id="Page_1" fw:type="page">
+ <Group id="State_1" fw:type="state">
+ <Group id="Layer_1" fw:type="layer">
+ <Group id="undefined">
+ <Path winding="evenOdd" data="M 68 12 L 85 48 L 125 54 L 96 82 L 103 121 L 68 103 L 32 121 L 39 82 L 10 54 L 50 48 L 68 12 Z " blendMode="normal" alpha="1">
+ <fill>
+ <LinearGradient x = "67" y = "42" scaleX = "113" rotation = "70">
+ <GradientEntry color="#ff6600" ratio="0" alpha="1"/>
+ <GradientEntry color="#ff6600" ratio="0.08" alpha="1"/>
+ <GradientEntry color="#ffcc00" ratio="0.32" alpha="1"/>
+ <GradientEntry color="#ffff99" ratio="0.53" alpha="1"/>
+ <GradientEntry color="#dedede" ratio="0.99" alpha="1"/>
+ <GradientEntry color="#ffffcc" ratio="0.72" alpha="1"/>
+ </LinearGradient>
+ </fill>
+ <stroke>
+ <SolidColorStroke color="#ff6600" weight="6"/>
+ </stroke>
+ </Path>
+ </Group>
+ </Group>
+ </Group>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
new file mode 100644
index 0000000..37b9be0
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:fxg="*" viewSourceURL="srcview/index.html">
+
+
+ <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"
+ 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 bottom="100">
+ <s:HSlider id="star_width" maximum="400" change="crayonStar.width=star_width.value"
+ horizontalCenter="-90" y="250" />
+ <s:Label horizontalCenter="-90" y="269" text="width"/>
+ </s:VGroup>
+ <s:VGroup bottom="60">
+ <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:Panel>
+
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/fxg/assets/ApacheFlexIcon.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/assets/ApacheFlexIcon.png b/TourDeFlex/TourDeFlex3/src/spark/fxg/assets/ApacheFlexIcon.png
new file mode 100644
index 0000000..e68d831
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/fxg/assets/ApacheFlexIcon.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
index 89f51e1..815f269 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.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"
- width="100%" height="100%" creationComplete="compareStrings()"
- viewSourceURL="srcview/index.html">
+ width="100%" height="100%" creationComplete="compareStrings()">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
index d69e63d..96af06a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.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"
- width="100%" height="100%" creationComplete="matchRB_clickHandler()"
- viewSourceURL="srcview/index.html">
+ 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";
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
index 6d7cd1b..1c24727 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.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"
- width="100%" height="100%" viewSourceURL="srcview/index.html">
+ width="100%" height="100%">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
[2/6] Added more spark examples
Posted by jm...@apache.org.
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomSkinnableContainerSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomSkinnableContainerSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomSkinnableContainerSkin.mxml
new file mode 100644
index 0000000..421f82a
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomSkinnableContainerSkin.mxml
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
+
+ <fx:Metadata>
+ <![CDATA[
+ [HostComponent("spark.components.SkinnableContainer")]
+ ]]>
+ </fx:Metadata>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ </s:states>
+
+ <s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
+ <s:stroke>
+ <s:LinearGradientStroke weight="2"/>
+ </s:stroke>
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:entries>
+ <s:GradientEntry color="0xCCCCCC"/>
+ <s:GradientEntry color="0x323232" alpha=".8" />
+ </s:entries>
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
+ <s:layout>
+ <s:BasicLayout/>
+ </s:layout>
+ </s:Group>
+
+</s:Skin>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/FancyButtonSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/FancyButtonSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/FancyButtonSkin.mxml
new file mode 100644
index 0000000..f961641
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/FancyButtonSkin.mxml
@@ -0,0 +1,271 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<!--
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+ minWidth="21" minHeight="21"
+ alpha.disabled="0.5">
+
+ <!-- host component -->
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Button")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ <![CDATA[
+ /* Define the skin elements that should not be colorized.
+
+ For button, the graphics are colorized but the label is not. */
+
+ static private const exclusions:Array = ["labelDisplay"];
+
+
+
+ /**
+
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+
+ */
+
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ ]]>
+
+ </fx:Script>
+
+
+
+ <!-- states -->
+ <s:states>
+ <s:State name="up" />
+ <s:State name="over" />
+ <s:State name="down" />
+ <s:State name="disabled" />
+ </s:states>
+
+
+
+ <!-- layer 1: shadow -->
+ <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0x000000"
+ color.down="0xFFFFFF"
+ alpha="0.01"
+ alpha.down="0" />
+ <s:GradientEntry color="0x000000"
+ color.down="0xFFFFFF"
+ alpha="0.07"
+ alpha.down="0.5" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+
+
+ <!-- layer 2: fill -->
+
+ <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xFFFFFF"
+ color.over="0xBBBDBD"
+ color.down="0xAAAAAA"
+ alpha="0.85" />
+ <s:GradientEntry color="0xD8D8D8"
+ color.over="0x9FA0A1"
+ color.down="0x929496"
+ alpha="0.85" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+
+ <!-- layer 3: fill lowlight -->
+
+ <s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2">
+
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0x000000" alpha="0.0099" />
+ <s:GradientEntry color="0x000000" alpha="0.0627" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+
+
+ <!-- layer 4: fill highlight -->
+
+ <s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2">
+ <s:fill>
+ <s:SolidColor color="0xFFFFFF"
+ alpha="0.33"
+ alpha.over="0.22"
+ alpha.down="0.12" />
+ </s:fill>
+ </s:Rect>
+
+
+
+ <!-- layer 5: highlight stroke (all states except down) -->
+ <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down">
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
+ <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- layer 6: highlight stroke (down state only) -->
+
+ <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.07" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.07" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Rect left="2" top="1" right="2" height="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.25" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
+
+ <s:fill>
+
+ <s:SolidColor color="0x000000" alpha="0.09" />
+
+ </s:fill>
+
+ </s:Rect>
+
+
+
+ <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+
+ <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
+
+ <s:stroke>
+
+ <s:LinearGradientStroke rotation="90" weight="1">
+
+ <s:GradientEntry color="0x000000"
+
+ alpha="0.5625"
+
+ alpha.down="0.6375" />
+
+ <s:GradientEntry color="0x000000"
+
+ alpha="0.75"
+
+ alpha.down="0.85" />
+
+ </s:LinearGradientStroke>
+
+ </s:stroke>
+
+ </s:Rect>
+
+
+
+ <!-- layer 8: text -->
+
+ <!---
+
+ @copy spark.components.supportClasses.ButtonBase#labelDisplay
+
+ -->
+ <!--<s:Rect left="1" top="1" width="36" height="16" >
+ <s:fill>
+ <s:BitmapFill source="@Embed('assets/icon_remove.png')">
+ </s:BitmapFill>
+ </s:fill>
+ </s:Rect>-->
+ <!-- The divider between symbol and text -->
+ <!--<s:Line blendMode="overlay" verticalCenter="0" height="90%" left="27">
+ <s:stroke>
+ <s:SolidColorStroke color="#3d3d3d" weight=".25" />
+ </s:stroke>
+ </s:Line>
+ <s:Group id="textGroup" verticalCenter="1" left="33">
+ <s:filters>
+ <s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" />
+ </s:filters>
+ <s:SimpleText id="labelDisplay"
+ textAlign="center"
+ verticalAlign="middle"
+ maxDisplayedLines="1"
+ horizontalCenter="0" verticalCenter="1"
+ left="10" right="10" top="2" bottom="2">
+ </s:SimpleText>
+ </s:Group>-->
+ <!-- The divider between symbol and text -->
+ <s:Line blendMode="overlay" verticalCenter="0" height="90%" left="27">
+ <s:stroke>
+ <s:SolidColorStroke color="#3d3d3d" weight=".25" />
+ </s:stroke>
+ </s:Line>
+
+ <!-- Label with a shadow applied to it. In a group for colorization exclusion -->
+ <s:Group id="textGroup" verticalCenter="1" left="33">
+ <s:filters>
+ <s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" />
+ </s:filters>
+ <s:SimpleText id="labelDisplay"
+ textAlign="center"
+ verticalAlign="middle"
+ lineBreak="toFit"
+ right="10">
+ </s:SimpleText>
+ </s:Group>
+
+ <!-- The group with the symbol with a shadow applied to. In a group for colorization exclusion -->
+ <s:Group id="symbol" verticalCenter="0" left="7" top="9" right="7" bottom="7">
+ <s:filters>
+ <s:DropShadowFilter id="dsfSymbol" blurX="0" blurY="0" distance="1" strength="1" strength.down="0"/>
+ </s:filters>
+ <s:Path winding="nonZero" data="M12.6924 0L5.76855 6.92383 2.30762 3.46191 0 5.76855 3.46191 9.23145 5.76855 11.5391 8.07617 9.23145 15 2.30762 12.6924 0Z" >
+ <s:fill>
+ <s:SolidColor color="#ffffff"/>
+ </s:fill>
+ </s:Path>
+ </s:Group>
+
+</s:SparkSkin>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/GradientBackgroundAppSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/GradientBackgroundAppSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/GradientBackgroundAppSkin.mxml
new file mode 100644
index 0000000..faf0c68
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/GradientBackgroundAppSkin.mxml
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Metadata>
+ [HostComponent("spark.components.Application")]
+ </fx:Metadata>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ </s:states>
+
+ <!-- border -->
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="9" radiusY="9">
+ <s:stroke>
+ <mx:SolidColorStroke color="0xCCCCCC" alpha=".5" weight="4"/>
+ </s:stroke>
+ </s:Rect>
+
+ <s:Rect id="backgroundRect" left="10" right="10" top="10" bottom="10" radiusX="9" radiusY="9">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:entries>
+ <s:GradientEntry color="0x0000FF" ratio="0.00" alpha="0.8"/>
+ <s:GradientEntry color="0x336699" ratio="1.0" alpha="0.5"/>
+ <s:GradientEntry color="0xCCCCCC" ratio="0.5" alpha="0.8"/>
+ </s:entries>
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
+</s:SparkSkin>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/IconTextButtonSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/IconTextButtonSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/IconTextButtonSkin.mxml
new file mode 100644
index 0000000..27d4a38
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/IconTextButtonSkin.mxml
@@ -0,0 +1,195 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<!--
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+ minWidth="21" minHeight="21"
+ alpha.disabled="0.5">
+
+ <!-- host component -->
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Button")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ <![CDATA[
+ /* Define the skin elements that should not be colorized.
+ For button, the graphics are colorized but the label is not. */
+ static private const exclusions:Array = ["labelDisplay"];
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ ]]>
+ </fx:Script>
+
+ <!-- states -->
+ <s:states>
+ <s:State name="up" />
+ <s:State name="over" />
+ <s:State name="down" />
+ <s:State name="disabled" />
+ </s:states>
+
+ <!-- layer 1: shadow -->
+ <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="7" radiusY="7">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0x000000"
+ color.down="0xFFFFFF"
+ alpha="0.01"
+ alpha.down="0" />
+ <s:GradientEntry color="0x000000"
+ color.down="0xFFFFFF"
+ alpha="0.07"
+ alpha.down="0.5" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+
+ <!-- layer 2: fill -->
+ <s:Rect left="1" right="1" top="1" bottom="1" radiusX="7" radiusY="7">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xFFFFFF"
+ color.over="0xBBBDBD"
+ color.down="0xAAAAAA"
+ alpha="0.85" />
+ <s:GradientEntry color="0xD8D8D8"
+ color.over="0x9FA0A1"
+ color.down="0x929496"
+ alpha="0.85" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+
+ <!-- layer 3: fill lowlight -->
+ <s:Rect left="1" right="1" bottom="1" height="9" radiusX="7" radiusY="7">
+
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0x000000" alpha="0.0099" />
+ <s:GradientEntry color="0x000000" alpha="0.0627" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 4: fill highlight -->
+ <s:Rect left="1" right="1" top="1" height="9" radiusX="7" radiusY="7">
+ <s:fill>
+ <s:SolidColor color="0xFFFFFF"
+ alpha="0.33"
+ alpha.over="0.22"
+ alpha.down="0.12" />
+ </s:fill>
+ </s:Rect>
+
+
+ <!-- layer 5: highlight stroke (all states except down) -->
+ <s:Rect left="1" right="1" top="1" bottom="1" radiusX="7" radiusY="7" excludeFrom="down">
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
+ <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- layer 6: highlight stroke (down state only) -->
+ <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.07" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.07" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Rect left="2" top="1" right="2" height="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.25" />
+ </s:fill>
+ </s:Rect>
+
+ <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
+ <s:fill>
+ <s:SolidColor color="0x000000" alpha="0.09" />
+ </s:fill>
+ </s:Rect>
+
+
+ <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+ <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="7" radiusY="7">
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0x000000"
+ alpha="0.5625"
+ alpha.down="0.6375" />
+ <s:GradientEntry color="0x000000"
+ alpha="0.75"
+ alpha.down="0.85" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- icon/symbol layer -->
+ <s:Group id="symbol" left="7" top="7" right="3" bottom="3">
+ <s:filters>
+ <s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" />
+ </s:filters>
+ <s:BitmapImage source="@Embed('../assets/icon_plus.png')"/>
+
+ </s:Group>
+
+ <!-- The divider between symbol and text -->
+ <s:Line blendMode="overlay" verticalCenter="0" height="90%" left="20">
+ <s:stroke>
+ <s:SolidColorStroke color="#3d3d3d" weight=".25" />
+ </s:stroke>
+ </s:Line>
+
+ <!-- layer 8: text -->
+ <s:Group id="textGroup" verticalCenter="1" left="25">
+ <s:filters>
+ <s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" />
+ </s:filters>
+ <s:Label id="labelDisplay"
+ textAlign="center"
+ verticalAlign="middle"
+ maxDisplayedLines="1">
+ </s:Label>
+ </s:Group>
+</s:SparkSkin>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/MyPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/MyPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/MyPanelSkin.mxml
new file mode 100644
index 0000000..300af66
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/MyPanelSkin.mxml
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<!--- The default skin class for a Spark Panel container.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" blendMode="normal">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Panel")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ /* Define the skin elements that should not be colorized.
+ For panel, border and title backround are skinned, but the content area and title text are not. */
+ static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgfill"];
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+ static private const contentFill:Array = [];
+
+ /**
+ * @inheritDoc
+ */
+ override public function get contentItems():Array {return contentFill};
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ </s:states>
+
+ <!-- background fill -->
+ <s:Rect left="0" right="0" bottom="0" top="0" >
+ <s:fill>
+ <s:LinearGradient rotation="90" >
+ <s:GradientEntry color="0xFFFFFF" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- title bar fill -->
+ <s:Rect left="0" right="0" top="0" height="30">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0x000000" />
+ <s:GradientEntry color="0xC0C0C0" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+
+ <!-- text layer -->
+ <!--- Defines the appearance of the PanelSkin class's title bar. -->
+ <s:SimpleText id="titleDisplay" lineBreak="explicit"
+ right="4" top="2" height="30"
+ verticalAlign="middle" fontWeight="bold"
+ color="0xE2E2E2">
+ </s:SimpleText>
+
+ <!--
+ Note: setting the minimum size to 0 here so that changes to the host component's
+ size will not be thwarted by this skin part's minimum size. This is a compromise,
+ more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+ -->
+ <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1" minWidth="0" minHeight="0">
+ </s:Group>
+
+</s:SparkSkin>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/TDFPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/TDFPanelSkin.mxml
new file mode 100644
index 0000000..f9151dc
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/TDFPanelSkin.mxml
@@ -0,0 +1,171 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<!--- Custom Spark Panel Skin created for Tour de Flex.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
+ blendMode.disabled="layer">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Panel")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ /* Define the skin elements that should not be colorized.
+ For panel, border and title backround are skinned, but the content area and title text are not. */
+ static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+ static private const contentFill:Array = [];
+
+ /**
+ * @inheritDoc
+ */
+ override public function get contentItems():Array {return contentFill};
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ <s:State name="normalWithControlBar" />
+ <s:State name="disabledWithControlBar" />
+ </s:states>
+
+ <!-- drop shadow -->
+ <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11"
+ angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
+
+ <!-- layer 1: border -->
+ <s:Rect left="0" right="0" top="0" bottom="0">
+ <s:stroke>
+ <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- layer 2: background fill -->
+ <!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. -->
+ <s:Rect left="0" right="0" bottom="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: contents -->
+ <!--- contains the vertical stack of titlebar content and controlbar -->
+ <s:Group left="1" right="1" top="1" bottom="1" >
+ <s:layout>
+ <s:VerticalLayout gap="0" horizontalAlign="justify" />
+ </s:layout>
+
+ <s:Group id="topGroup" >
+ <!-- layer 0: title bar fill -->
+ <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
+ <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
+ <s:fill>
+ <s:SolidColor color="0x000000" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: title bar highlight -->
+ <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xEAEAEA" />
+ <s:GradientEntry color="0xD9D9D9" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- layer 2: title bar divider -->
+ <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+ <s:fill>
+ <s:SolidColor color="0xC0C0C0" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: text -->
+ <!--- Defines the appearance of the PanelSkin class's title bar. -->
+ <!-- Note: The title text display has been slightly modified for Tour de Flex. -->
+ <s:Label id="titleDisplay" lineBreak="explicit"
+ left="9" top="1" bottom="0" minHeight="30"
+ verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
+ </s:Label>
+ </s:Group>
+
+ <!--
+ Note: setting the minimum size to 0 here so that changes to the host component's
+ size will not be thwarted by this skin part's minimum size. This is a compromise,
+ more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+ -->
+ <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+ </s:Group>
+
+ <s:Group id="bottomGroup" minWidth="0" minHeight="0"
+ includeIn="normalWithControlBar, disabledWithControlBar" >
+
+ <!-- layer 0: control bar background -->
+ <!-- Note: We are skinning this to be the gradient in case we do specify control
+ bar content, but it will only display if there's a controlBarContent
+ property specified.-->
+ <s:Rect left="0" right="0" bottom="0" top="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: control bar divider line -->
+ <s:Rect left="0" right="0" top="0" height="1" >
+ <s:fill>
+ <s:SolidColor color="0xCDCDCD" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 2: control bar -->
+ <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+ </s:Group>
+ </s:Group>
+ </s:Group>
+</s:SparkSkin>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/tlf/TextLayoutEditorSample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/tlf/TextLayoutEditorSample.mxml b/TourDeFlex/TourDeFlex3/src/spark/tlf/TextLayoutEditorSample.mxml
index efe13ca..5ba3f7a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/tlf/TextLayoutEditorSample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/tlf/TextLayoutEditorSample.mxml
@@ -21,7 +21,7 @@
-<s:Application xmlns="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:local="*" viewSourceURL="srcview/index.html">
+<s:Application xmlns="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:local="*">
<local:TextLayoutEditorCanvas width="100%" height="100%"/>
<Style source="/flashx/textLayout/ui/VellumGUIStyles.css"/>
<!--<Style source="VellumGUIStyles.css"/>-->
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml
index 8d13797..12145af 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
import mx.controls.Alert;
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml
index 6bce0e6..93724c5 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/validators/EmailValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/EmailValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/EmailValidatorExample.mxml
index a5adaa6..4314b35 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/EmailValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/EmailValidatorExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml
index 3a149f9..8230ac4 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/validators/NumberValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/NumberValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/NumberValidatorExample.mxml
index 76da726..07ae1ab 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/NumberValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/NumberValidatorExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/validators/RegExpValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/RegExpValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/RegExpValidatorExample.mxml
index c704718..1ab3b13 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/RegExpValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/RegExpValidatorExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml
index 90995a1..3d5488e 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml
index 7264296..41d478e 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml
index 697be46..b1ac856 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.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"
- skinClass="TDFGradientBackgroundSkin"
- viewSourceURL="srcview/index.html">
+ skinClass="TDFGradientBackgroundSkin">
<fx:Script>
<![CDATA[