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/master Commit: d4e368dce6dca399b938360a62cf8b0519da27ec Parents: e39606c Author: Justin Mclean <[email protected]> Authored: Sun Aug 10 21:19:39 2014 +1000 Committer: Justin Mclean <[email protected]> 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>
