move some sample spark examples into the component explorer
Project: http://git-wip-us.apache.org/repos/asf/flex-utilities/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-utilities/commit/051a1e55 Tree: http://git-wip-us.apache.org/repos/asf/flex-utilities/tree/051a1e55 Diff: http://git-wip-us.apache.org/repos/asf/flex-utilities/diff/051a1e55 Branch: refs/heads/develop Commit: 051a1e5582fb16dd5334844560db2600e9844386 Parents: 9835c32 Author: Justin Mclean <jmcl...@apache.org> Authored: Sat Aug 9 13:57:56 2014 +1000 Committer: Justin Mclean <jmcl...@apache.org> Committed: Sat Aug 9 13:57:56 2014 +1000 ---------------------------------------------------------------------- TourDeFlex/TourDeFlex3/build.xml | 29 ++ TourDeFlex/TourDeFlex3/src/explorer.xml | 301 ++++++----- .../src/spark/containers/SampleHGroup.mxml | 98 ++++ .../src/spark/containers/SampleVGroup.mxml | 97 ++++ .../SampleVerticalHorizontalAlign.mxml | 83 +++ .../spark/containers/skins/TDFPanelSkin.mxml | 171 ++++++ .../src/spark/controls/ComboBoxExample.mxml | 66 +++ .../src/spark/controls/DataGroupExample.mxml | 134 +++++ .../src/spark/controls/MenuExample.mxml | 90 ++++ .../spark/controls/RichEditableTextExample.mxml | 100 ++++ .../src/spark/controls/skins/TDFPanelSkin.mxml | 171 ++++++ .../spark/css/CSSDescendantSelectorExample.mxml | 74 +++ .../spark/css/CSSTypeClassSelectorExample.mxml | 72 +++ .../src/spark/css/skins/TDFPanelSkin.mxml | 171 ++++++ .../src/spark/effects/Move3DExample.mxml | 99 ++++ .../src/spark/effects/assets/ApacheFlexLogo.png | Bin 0 -> 71228 bytes .../src/spark/effects/skins/TDFPanelSkin.mxml | 170 ++++++ .../src/spark/fxg/BitmapImageExample.mxml | 72 +++ .../src/spark/fxg/EclipseExample.mxml | 46 ++ .../TourDeFlex3/src/spark/fxg/LineExample.mxml | 96 ++++ .../TourDeFlex3/src/spark/fxg/RectExample.mxml | 87 ++++ .../src/spark/fxg/RichTextExample.mxml | 58 +++ .../src/spark/fxg/skins/TDFPanelSkin.mxml | 170 ++++++ .../itemRenderers/ItemRenderer1Example.mxml | 61 +++ .../itemRenderers/ItemRenderer2Example.mxml | 75 +++ .../src/spark/itemRenderers/data/list.xml | 96 ++++ .../itemRenderers/renderers/ImageRenderer1.mxml | 56 ++ .../itemRenderers/renderers/ImageRenderer2.mxml | 54 ++ .../spark/itemRenderers/skins/TDFPanelSkin.mxml | 170 ++++++ .../layouts/CustomLayoutAnimatedExample.mxml | 106 ++++ .../layouts/CustomLayoutFlickrWheelExample.mxml | 83 +++ .../spark/layouts/CustomLayoutFlowExample.mxml | 85 +++ .../layouts/CustomLayoutHBaselineExample.mxml | 118 +++++ .../src/spark/layouts/FlickrThumbnail.mxml | 80 +++ .../src/spark/layouts/FlowLayout1.as | 195 +++++++ .../src/spark/layouts/HBaselineLayout.as | 199 +++++++ .../spark/layouts/NumberInterpolatorWrapping.as | 110 ++++ .../src/spark/layouts/WheelLayout.as | 516 +++++++++++++++++++ .../src/spark/layouts/assets/xdslider.png | Bin 0 -> 359 bytes .../src/spark/layouts/data/catalog.xml | 193 +++++++ .../spark/layouts/layouts/FilteredTileLayout.as | 260 ++++++++++ .../spark/layouts/renderers/PhoneRenderer.mxml | 61 +++ .../src/spark/layouts/skins/TDFPanelSkin.mxml | 171 ++++++ .../states/AnimateShaderTransitionEffect.mxml | 58 +++ .../src/spark/states/assets/back.png | Bin 0 -> 121035 bytes 45 files changed, 5070 insertions(+), 132 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/build.xml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/build.xml b/TourDeFlex/TourDeFlex3/build.xml index b220bbb..8d2b919 100644 --- a/TourDeFlex/TourDeFlex3/build.xml +++ b/TourDeFlex/TourDeFlex3/build.xml @@ -176,6 +176,35 @@ <compile-mxml example="/mx/validators/StringValidatorExample"/> <compile-mxml example="/mx/validators/ZipCodeValidatorExample"/> + <!-- Spark examples --> + <compile-mxml example="/spark/controls/ComboBoxExample"/> + <compile-mxml example="/spark/controls/DataGroupExample"/> + <compile-mxml example="/spark/controls/MenuExample"/> + <compile-mxml example="/spark/controls/RichEditableTextExample"/> + + <compile-mxml example="/spark/css/CSSDescendantSelectorExample"/> + <compile-mxml example="/spark/css/CSSTypeClassSelectorExample"/> + + <compile-mxml example="/spark/layouts/CustomLayoutAnimatedExample"/> + <compile-mxml example="/spark/layouts/CustomLayoutFlickrWheelExample"/> + <compile-mxml example="/spark/layouts/CustomLayoutFlowExample"/> + <compile-mxml example="/spark/layouts/CustomLayoutHBaselineExample"/> + + <compile-mxml example="/spark/itemRenderers/ItemRenderer1Example"/> + <compile-mxml example="/spark/itemRenderers/ItemRenderer2Example"/> + + <compile-mxml example="/spark/fxg/BitmapImageExample"/> + <compile-mxml example="/spark/fxg/ElipseExample"/> + <compile-mxml example="/spark/fxg/LineExample"/> + <compile-mxml example="/spark/fxg/RectExample"/> + <compile-mxml example="/spark/fxg/RichTextExample"/> + + <compile-mxml example="/spark/containers/SampleHGroup"/> + <compile-mxml example="/spark/containers/SampleVGroup"/> + <compile-mxml example="/spark/containers/SampleVerticalHorizontalAlign"/> + + <compile-mxml example="/spark/effects/Move3DExample"/> + <!-- Explorer shell --> <compile-mxml example="/explorer"/> <compile-mxml example="/loaderPanel"/> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/explorer.xml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/explorer.xml b/TourDeFlex/TourDeFlex3/src/explorer.xml index 7062167..625cc44 100755 --- a/TourDeFlex/TourDeFlex3/src/explorer.xml +++ b/TourDeFlex/TourDeFlex3/src/explorer.xml @@ -21,190 +21,227 @@ <node label="MX Framework Components"> <node label="Visual Components"> <node label="General Controls"> - <node label="Alert" app="controls/SimpleAlert" /> - <node label="ColorPicker" app="controls/ColorPickerExample" /> - <node label="ComboBox" app="controls/SimpleComboBox" /> - <node label="DataGrid" app="controls/SimpleDataGrid" /> - <node label="HorizontalList" app="controls/HorizontalListExample" /> - <node label="HRule" app="controls/SimpleHRule" /> - <node label="HScrollBar" app="controls/HScrollBarExample" /> - <node label="HSlider" app="controls/SimpleImageHSlider" /> - <node label="List" app="controls/SimpleList" /> - <node label="NumericStepper" app="controls/NumericStepperExample" /> - <node label="ProgressBar" app="controls/SimpleProgressBar" /> - <node label="Spacer" app="controls/SpacerExample" /> - <node label="TabBar" app="controls/TabBarExample" /> - <node label="TileList" app="controls/TileListExample" /> - <node label="Tree" app="controls/TreeExample" /> - <node label="VRule" app="controls/SimpleVRule" /> - <node label="VScrollBar" app="controls/VScrollBarExample" /> - <node label="VSlider" app="controls/SimpleImageVSlider" /> + <node label="Alert" app="mx/controls/SimpleAlert" /> + <node label="ColorPicker" app="mx/controls/ColorPickerExample" /> + <node label="ComboBox" app="mx/controls/SimpleComboBox" /> + <node label="DataGrid" app="mx/controls/SimpleDataGrid" /> + <node label="HorizontalList" app="mx/controls/HorizontalListExample" /> + <node label="HRule" app="mx/controls/SimpleHRule" /> + <node label="HScrollBar" app="mx/controls/HScrollBarExample" /> + <node label="HSlider" app="mx/controls/SimpleImageHSlider" /> + <node label="List" app="mx/controls/SimpleList" /> + <node label="NumericStepper" app="mx/controls/NumericStepperExample" /> + <node label="ProgressBar" app="mx/controls/SimpleProgressBar" /> + <node label="Spacer" app="mx/controls/SpacerExample" /> + <node label="TabBar" app="mx/controls/TabBarExample" /> + <node label="TileList" app="mx/controls/TileListExample" /> + <node label="Tree" app="mx/controls/TreeExample" /> + <node label="VRule" app="mx/controls/SimpleVRule" /> + <node label="VScrollBar" app="mx/controls/VScrollBarExample" /> + <node label="VSlider" app="mx/controls/SimpleImageVSlider" /> </node> <node label="Button Controls"> - <node label="Button" app="controls/ButtonExample" /> - <node label="ButtonBar" app="controls/ButtonBarExample" /> - <node label="CheckBox" app="controls/CheckBoxExample" /> - <node label="LinkBar" app="controls/LinkBarExample" /> - <node label="LinkButton" app="controls/LinkButtonExample" /> - <node label="PopUpButton" app="controls/PopUpButtonExample" /> - <node label="RadioButton" app="controls/RadioButtonExample" /> - <node label="RadioButtonGroup" app="controls/RadioButtonGroupExample" /> - <node label="ToggleButtonBar" app="controls/ToggleButtonBarExample" /> + <node label="Button" app="mx/controls/ButtonExample" /> + <node label="ButtonBar" app="mx/controls/ButtonBarExample" /> + <node label="CheckBox" app="mx/controls/CheckBoxExample" /> + <node label="LinkBar" app="mx/controls/LinkBarExample" /> + <node label="LinkButton" app="mx/controls/LinkButtonExample" /> + <node label="PopUpButton" app="mx/controls/PopUpButtonExample" /> + <node label="RadioButton" app="mx/controls/RadioButtonExample" /> + <node label="RadioButtonGroup" app="mx/controls/RadioButtonGroupExample" /> + <node label="ToggleButtonBar" app="mx/controls/ToggleButtonBarExample" /> </node> <node label="Date Controls"> - <node label="DateChooser" app="controls/DateChooserExample" /> - <node label="DateField" app="controls/DateFieldExample" /> + <node label="DateChooser" app="mx/controls/DateChooserExample" /> + <node label="DateField" app="mx/controls/DateFieldExample" /> </node> <node label="Loader Controls"> - <node label="Image" app="controls/SimpleImage" /> - <node label="SWFLoader" app="controls/SimpleLoader" src="controls/Local.mxml" /> - <node label="VideoDisplay" app="controls/VideoDisplayExample" /> + <node label="Image" app="mx/controls/SimpleImage" /> + <node label="SWFLoader" app="mx/controls/SimpleLoader" src="controls/Local.mxml" /> + <node label="VideoDisplay" app="mx/controls/VideoDisplayExample" /> </node> <node label="Menu Controls"> - <node label="Menu" app="controls/SimpleMenuExample" /> - <node label="MenuBar" app="controls/MenuBarExample" /> - <node label="PopUpMenuButton" app="controls/PopUpButtonMenuExample" /> + <node label="Menu" app="mx/controls/SimpleMenuExample" /> + <node label="MenuBar" app="mx/controls/MenuBarExample" /> + <node label="PopUpMenuButton" app="mx/controls/PopUpButtonMenuExample" /> </node> <node label="Text Controls"> - <node label="Label" app="controls/LabelExample" /> - <node label="RichTextEditor" app="controls/RichTextEditorExample" /> - <node label="Text" app="controls/TextExample" /> - <node label="TextArea" app="controls/TextAreaExample" /> - <node label="TextInput" app="controls/TextInputExample" /> + <node label="Label" app="mx/controls/LabelExample" /> + <node label="RichTextEditor" app="mx/controls/RichTextEditorExample" /> + <node label="Text" app="mx/controls/TextExample" /> + <node label="TextArea" app="mx/controls/TextAreaExample" /> + <node label="TextInput" app="mx/controls/TextInputExample" /> </node> <node label="Containers"> - <node label="Application" app="core/SimpleApplicationExample" /> - <node label="Accordion" app="containers/AccordionExample" /> - <node label="ApplicationControlBar" app="containers/SimpleApplicationControlBarExample" /> - <node label="Box" app="containers/SimpleBoxExample" /> - <node label="Canvas" app="containers/SimpleCanvasExample" /> - <node label="ControlBar" app="containers/SimpleControlBarExample" /> - <node label="DividedBox" app="containers/DividedBoxExample" /> - <node label="Form, FormHeading, FormItem" app="containers/FormExample" /> - <node label="Grid, GridItem, GridRow" app="containers/GridLayoutExample" /> - <node label="HBox" app="containers/HBoxExample" /> - <node label="HDividedBox" app="containers/HDividedBoxExample" /> - <node label="Panel" app="containers/SimplePanelExample" /> - <node label="TabNavigator" app="containers/TabNavigatorExample" /> - <node label="Tile" app="containers/TileLayoutExample" /> - <node label="TitleWindow" app="containers/TitleWindowApp" + <node label="Application" app="mx/core/SimpleApplicationExample" /> + <node label="Accordion" app="mx/containers/AccordionExample" /> + <node label="ApplicationControlBar" app="mx/containers/SimpleApplicationControlBarExample" /> + <node label="Box" app="mx/containers/SimpleBoxExample" /> + <node label="Canvas" app="mx/containers/SimpleCanvasExample" /> + <node label="ControlBar" app="mx/containers/SimpleControlBarExample" /> + <node label="DividedBox" app="mx/containers/DividedBoxExample" /> + <node label="Form, FormHeading, FormItem" app="mx/containers/FormExample" /> + <node label="Grid, GridItem, GridRow" app="mx/containers/GridLayoutExample" /> + <node label="HBox" app="mx/containers/HBoxExample" /> + <node label="HDividedBox" app="mx/containers/HDividedBoxExample" /> + <node label="Panel" app="mx/containers/SimplePanelExample" /> + <node label="TabNavigator" app="mx/containers/TabNavigatorExample" /> + <node label="Tile" app="mx/containers/TileLayoutExample" /> + <node label="TitleWindow" app="mx/containers/TitleWindowApp" src="containers/SimpleTitleWindowExample.mxml" /> - <node label="VBox" app="containers/VBoxExample" /> - <node label="VDividedBox" app="containers/VDividedBoxExample" /> - <node label="ViewStack" app="containers/ViewStackExample" /> + <node label="VBox" app="mx/containers/VBoxExample" /> + <node label="VDividedBox" app="mx/containers/VDividedBoxExample" /> + <node label="ViewStack" app="mx/containers/ViewStackExample" /> </node> <node label="Repeater Control"> - <node label="Repeater" app="core/RepeaterExample" /> + <node label="Repeater" app="mx/core/RepeaterExample" /> </node> </node> <node label="Print Controls"> - <node label="FlexPrintJob, PrintDataGrid" app="printing/PrintDataGridExample" + <node label="FlexPrintJob, PrintDataGrid" app="mx/printing/PrintDataGridExample" src="printing/FormPrintView.mxml&printing/FormPrintHeader.mxml&printing/FormPrintFooter.mxml" /> </node> <node label="Validators and Formatters"> <node label="Validators"> - <node label="CreditCardValidator" app="validators/CreditCardValidatorExample" /> - <node label="CurrencyValidator" app="validators/CurrencyValidatorExample" /> - <node label="DateValidator" app="validators/DateValidatorExample" /> - <node label="EmailValidator" app="validators/EmailValidatorExample" /> - <node label="NumberValidator" app="validators/NumberValidatorExample" /> - <node label="PhoneNumberValidator" app="validators/PhoneNumberValidatorExample" /> - <node label="RegExpValidator" app="validators/RegExValidatorExample" /> - <node label="SocialSecurityValidator" app="validators/SocialSecurityValidatorExample" /> - <node label="StringValidator" app="validators/StringValidatorExample" /> - <node label="Validator" app="validators/SimpleValidatorExample" /> - <node label="ZipCodeValidator" app="validators/ZipCodeValidatorExample" /> + <node label="CreditCardValidator" app="mx/validators/CreditCardValidatorExample" /> + <node label="CurrencyValidator" app="mx/validators/CurrencyValidatorExample" /> + <node label="DateValidator" app="mx/validators/DateValidatorExample" /> + <node label="EmailValidator" app="mx/validators/EmailValidatorExample" /> + <node label="NumberValidator" app="mx/validators/NumberValidatorExample" /> + <node label="PhoneNumberValidator" app="mx/validators/PhoneNumberValidatorExample" /> + <node label="RegExpValidator" app="mx/validators/RegExValidatorExample" /> + <node label="SocialSecurityValidator" app="mx/validators/SocialSecurityValidatorExample" /> + <node label="StringValidator" app="mx/validators/StringValidatorExample" /> + <node label="Validator" app="mx/validators/SimpleValidatorExample" /> + <node label="ZipCodeValidator" app="mx/validators/ZipCodeValidatorExample" /> </node> <node label="Formatters"> - <node label="CurrencyFormatter" app="formatters/CurrencyFormatterExample" /> - <node label="DateFormatter" app="formatters/DateFormatterExample" /> - <node label="Formatter" app="formatters/SimpleFormatterExample" /> - <node label="NumberFormatter" app="formatters/NumberFormatterExample" /> - <node label="PhoneFormatter" app="formatters/PhoneFormatterExample" /> - <node label="SwitchSymbolFormatter" app="formatters/SwitchSymbolFormatterExample" /> - <node label="ZipCodeFormatter" app="formatters/ZipCodeFormatterExample" /> + <node label="CurrencyFormatter" app="mx/formatters/CurrencyFormatterExample" /> + <node label="DateFormatter" app="mx/formatters/DateFormatterExample" /> + <node label="Formatter" app="mx/formatters/SimpleFormatterExample" /> + <node label="NumberFormatter" app="mx/formatters/NumberFormatterExample" /> + <node label="PhoneFormatter" app="mx/formatters/PhoneFormatterExample" /> + <node label="SwitchSymbolFormatter" app="mx/formatters/SwitchSymbolFormatterExample" /> + <node label="ZipCodeFormatter" app="mx/formatters/ZipCodeFormatterExample" /> </node> </node> <node label="Effects, View States, and Transitions"> <node label="Effects"> - <node label="AddItemActionEffect" app="effects/AddItemActionEffectExample" /> - <node label="AnimateProperty" app="effects/AnimatePropertyEffectExample" /> - <node label="Blur" app="effects/BlurEffectExample" /> - <node label="Dissolve" app="effects/DissolveEffectExample" /> - <node label="Effect" app="effects/SimpleEffectExample" /> - <node label="Fade" app="effects/FadeEffectExample" /> - <node label="Glow" app="effects/GlowEffectExample" /> - <node label="Iris" app="effects/IrisEffectExample" /> - <node label="Move" app="effects/MoveEffectExample" /> - <node label="Parallel" app="effects/ParallelEffectExample" /> - <node label="Pause" app="effects/PauseEffectExample" /> - <node label="RemoveItemActionEffect" app="effects/AddItemActionEffectExample" /> - <node label="Resize" app="effects/ResizeEffectExample" /> - <node label="Rotate" app="effects/RotateEffectExample" /> - <node label="Sequence" app="effects/SequenceEffectExample" /> - <node label="SoundEffect" app="effects/SoundEffectExample" /> - <node label="WipeDown" app="effects/WipeDownExample" /> - <node label="WipeLeft" app="effects/WipeLeftExample" /> - <node label="WipeRight" app="effects/WipeRightExample" /> - <node label="WipeUp" app="effects/WipeUpExample" /> - <node label="Zoom" app="effects/ZoomEffectExample" /> + <node label="AddItemActionEffect" app="mx/effects/AddItemActionEffectExample" /> + <node label="AnimateProperty" app="mx/effects/AnimatePropertyEffectExample" /> + <node label="Blur" app="mx/effects/BlurEffectExample" /> + <node label="Dissolve" app="mx/effects/DissolveEffectExample" /> + <node label="Effect" app="mx/effects/SimpleEffectExample" /> + <node label="Fade" app="mx/effects/FadeEffectExample" /> + <node label="Glow" app="mx/effects/GlowEffectExample" /> + <node label="Iris" app="mx/effects/IrisEffectExample" /> + <node label="Move" app="mx/effects/MoveEffectExample" /> + <node label="Parallel" app="mx/effects/ParallelEffectExample" /> + <node label="Pause" app="mx/effects/PauseEffectExample" /> + <node label="RemoveItemActionEffect" app="mx/effects/AddItemActionEffectExample" /> + <node label="Resize" app="mx/effects/ResizeEffectExample" /> + <node label="Rotate" app="mx/effects/RotateEffectExample" /> + <node label="Sequence" app="mx/effects/SequenceEffectExample" /> + <node label="SoundEffect" app="mx/effects/SoundEffectExample" /> + <node label="WipeDown" app="mx/effects/WipeDownExample" /> + <node label="WipeLeft" app="mx/effects/WipeLeftExample" /> + <node label="WipeRight" app="mx/effects/WipeRightExample" /> + <node label="WipeUp" app="mx/effects/WipeUpExample" /> + <node label="Zoom" app="mx/effects/ZoomEffectExample" /> </node> <node label="View States"> - <node label="State" app="states/StatesExample" /> + <node label="State" app="mx/states/StatesExample" /> </node> <node label="Transitions"> - <node label="Transition" app="states/TransitionExample" /> + <node label="Transition" app="mx/states/TransitionExample" /> </node> </node> <node label="Datavisualization Components"> <node label="Charts"> <node label="Chart Controls"> - <node label="AreaChart" app="charts/Line_AreaChartExample" /> - <node label="AxisRenderer" app="charts/HLOCChartExample" /> - <node label="BarChart" app="charts/Column_BarChartExample" /> - <node label="BubbleChart" app="charts/BubbleChartExample" /> - <node label="CandlestickChart" app="charts/CandlestickChartExample" /> - <node label="CategoryAxis" app="charts/HLOCChartExample" /> - <node label="ColumnChart" app="charts/Column_BarChartExample" /> - <node label="DateTimeAxis" app="charts/DateTimeAxisExample" /> - <node label="GridLines" app="charts/GridLinesExample" /> - <node label="HLOCChart" app="charts/HLOCChartExample" /> - <node label="Legend" app="charts/PlotChartExample" /> - <node label="LinearAxis" app="charts/HLOCChartExample" /> - <node label="LineChart" app="charts/Line_AreaChartExample" /> - <node label="LogAxis" app="charts/LogAxisExample" /> - <node label="PieChart" app="charts/PieChartExample" /> - <node label="PlotChart" app="charts/PlotChartExample" /> + <node label="AreaChart" app="mx/charts/Line_AreaChartExample" /> + <node label="AxisRenderer" app="mx/charts/HLOCChartExample" /> + <node label="BarChart" app="mx/charts/Column_BarChartExample" /> + <node label="BubbleChart" app="mx/charts/BubbleChartExample" /> + <node label="CandlestickChart" app="mx/charts/CandlestickChartExample" /> + <node label="CategoryAxis" app="mx/charts/HLOCChartExample" /> + <node label="ColumnChart" app="mx/charts/Column_BarChartExample" /> + <node label="DateTimeAxis" app="mx/charts/DateTimeAxisExample" /> + <node label="GridLines" app="mx/charts/GridLinesExample" /> + <node label="HLOCChart" app="mx/charts/HLOCChartExample" /> + <node label="Legend" app="mx/charts/PlotChartExample" /> + <node label="LinearAxis" app="mx/charts/HLOCChartExample" /> + <node label="LineChart" app="mx/charts/Line_AreaChartExample" /> + <node label="LogAxis" app="mx/charts/LogAxisExample" /> + <node label="PieChart" app="mx/charts/PieChartExample" /> + <node label="PlotChart" app="mx/charts/PlotChartExample" /> </node> <node label="Chart Series"> - <node label="AreaSeries" app="charts/Line_AreaChartExample" /> - <node label="BarSeries" app="charts/Column_BarChartExample" /> - <node label="BubbleSeries" app="charts/BubbleChartExample" /> - <node label="CandlestickSeries" app="charts/CandlestickChartExample" /> - <node label="ColumnSeries" app="charts/Column_BarChartExample" /> - <node label="HLOCSeries" app="charts/HLOCChartExample" /> - <node label="LineSeries" app="charts/Line_AreaChartExample" /> - <node label="PieSeries" app="charts/PieChartExample" /> - <node label="PlotSeries" app="charts/PlotChartExample" /> + <node label="AreaSeries" app="mx/charts/Line_AreaChartExample" /> + <node label="BarSeries" app="mx/charts/Column_BarChartExample" /> + <node label="BubbleSeries" app="mx/charts/BubbleChartExample" /> + <node label="CandlestickSeries" app="mx/charts/CandlestickChartExample" /> + <node label="ColumnSeries" app="mx/charts/Column_BarChartExample" /> + <node label="HLOCSeries" app="mx/charts/HLOCChartExample" /> + <node label="LineSeries" app="mx/charts/Line_AreaChartExample" /> + <node label="PieSeries" app="mx/charts/PieChartExample" /> + <node label="PlotSeries" app="mx/charts/PlotChartExample" /> </node> = <node label="Chart Effects"> - <node label="SeriesInterpolate" app="charts/SeriesInterpolateExample" /> - <node label="SeriesSlide" app="charts/SeriesSlideExample" /> - <node label="SeriesZoom" app="charts/SeriesZoomExample" /> + <node label="SeriesInterpolate" app="mx/charts/SeriesInterpolateExample" /> + <node label="SeriesSlide" app="mx/charts/SeriesSlideExample" /> + <node label="SeriesZoom" app="mx/charts/SeriesZoomExample" /> </node> </node> <node label="AdancedDataGrid"> - <node label="AdvancedDataGrid" app="controls/AdvancedDataGridExample" /> + <node label="AdvancedDataGrid" app="mx/controls/AdvancedDataGridExample" /> </node> <node label="OLAPDataGrid"> - <node label="OLAPDataGrid" app="controls/OLAPDataGridExample" /> + <node label="OLAPDataGrid" app="mx/controls/OLAPDataGridExample" /> </node> <node label="Printing"> - <node label="ADG Printing" app="printing/AdvancedPrintDataGridExample" /> + <node label="ADG Printing" app="mx/printing/AdvancedPrintDataGridExample" /> </node> </node> </node> <node label="Spark Framework Components"> + <node label="Advanced CSS"> + <node label="Descendant Selector" app="spark/css/CSSDescendantSelectorExample" /> + <node label="Type + Class Selector" app="spark/css/CSSTypeClassSelectorExample" /> + </node> + <node label="Item Renderers"> + <node label="Scale Image" app="spark/itemRenderers/ItemRenderer1Example" /> + <node label="3D Rotate" app="spark/itemRenderers/ItemRenderer2Example" /> + </node> + <node label="Effects"> + <node label="Move 3D" app="spark/effects/Move3DExample" /> + </node> + <node label="Visual Components"> + <node label="Containers"> + <node label="HGroup" app="spark/containers/SampleHGroup" /> + <node label="VGroup" app="spark/containers/SampleVGroup" /> + <node label="Vertical Horizontal Align" app="spark/containers/SampleVerticalHorizontalAlign" /> + </node> + <node label="FXG"> + <node label="Image" app="spark/fxg/BitmapImageExample" /> + <node label="Elipse" app="spark/fxg/EclipseExample" /> + <node label="Line" app="spark/fxg/LineExample" /> + <node label="Rectangle" app="spark/fxg/RectExample" /> + <node label="RichText" app="spark/fxg/RichTextExample" /> + </node> + <node label="General Controls"> + <node label="ComboBox" app="spark/controls/ComboBoxExample" /> + <node label="DataGroup" app="spark/controls/DataGroupExample" /> + <node label="Menu" app="spark/controls/MenuExample" /> + <node label="Rich Editable Text" app="spark/controls/RichEditableTextExample" /> + </node> + <node label="Layouts"> + <node label="Animated" app="spark/layouts/CustomLayoutAnimatedExample" /> + <node label="Baseline" app="spark/layouts/CustomLayoutHBaselineExample" /> + <node label="Image Wheel" app="spark/layouts/CustomLayoutFlickrWheelExample" /> + <node label="Text Flow" app="spark/layouts/CustomLayoutFlowExample" /> + </node> + </node> </node> </node> </compTree> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml new file mode 100644 index 0000000..1e76815 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml @@ -0,0 +1,98 @@ +<?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:Declarations> + <!-- Place non-visual elements (e.g., services, value objects) here --> + </fx:Declarations> + + <fx:Script> + <![CDATA[ + import skins.TDFPanelSkin; + + private function applyProperties():void + { + this.mainHGroup.paddingTop = this.padTop.value; + this.mainHGroup.paddingLeft = this.padLeft.value; + this.mainHGroup.paddingRight = this.padRight.value; + this.mainHGroup.paddingBottom = this.padBottom.value; + this.mainHGroup.gap = this.gap.value; + } + ]]> + </fx:Script> + + <s:Panel skinClass="skins.TDFPanelSkin" title="HGroup" width="100%" height="100%"> + + <s:HGroup left="300" top="25" id="mainHGroup"> + <s:Rect width="100" height="75"> + <s:fill> + <s:SolidColor color="0xd54f4f"/> + </s:fill> + </s:Rect> + <s:Rect width="100" height="75"> + <s:fill> + <s:SolidColor color="0x2f977d"/> + </s:fill> + </s:Rect> + <s:Rect width="100" height="75"> + <s:fill> + <s:SolidColor color="0xfffca2"/> + </s:fill> + </s:Rect> + </s:HGroup> + + <s:VGroup top="10" left="15"> + <s:HGroup verticalAlign="middle"> + <s:Label text="Gap:"/> + <s:NumericStepper id="gap" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Top:"/> + <s:NumericStepper id="padTop" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Left:"/> + <s:NumericStepper id="padLeft" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Right:"/> + <s:NumericStepper id="padRight" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Bottom:"/> + <s:NumericStepper id="padBottom" maximum="400"/> + </s:HGroup> + + <s:Button label="Apply Properties" click="this.applyProperties()"/> + <s:Label width="75%" horizontalCenter="0" color="#323232" + text="The HGroup container is an instance of the Group container that uses the HorizontalLayout class. You can use + the properties of the HGroup class to modify the characteristics of the HorizontalLayout class."/> + </s:VGroup> + + + </s:Panel> + +</s:Application> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml new file mode 100644 index 0000000..4ebd23d --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.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. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> + + <fx:Declarations> + <!-- Place non-visual elements (e.g., services, value objects) here --> + </fx:Declarations> + + <fx:Script> + <![CDATA[ + import skins.TDFPanelSkin; + + private function applyProperties():void + { + this.mainVGroup.paddingTop = this.padTop.value; + this.mainVGroup.paddingLeft = this.padLeft.value; + this.mainVGroup.paddingRight = this.padRight.value; + this.mainVGroup.paddingBottom = this.padBottom.value; + this.mainVGroup.gap = this.gap.value; + } + ]]> + </fx:Script> + + <s:Panel skinClass="skins.TDFPanelSkin" title="VGroup Sample" width="100%" height="100%"> + <s:HGroup width="100%" height="100%" top="10" left="10"> + <s:VGroup top="10" left="10" width="172"> + <s:HGroup verticalAlign="middle"> + <s:Label text="Gap:"/> + <s:NumericStepper id="gap" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Top:"/> + <s:NumericStepper id="padTop" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Left:"/> + <s:NumericStepper id="padLeft" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Right:"/> + <s:NumericStepper id="padRight" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Bottom:"/> + <s:NumericStepper id="padBottom" maximum="400"/> + </s:HGroup> + + <s:Button label="Apply Properties" click="this.applyProperties()"/> + </s:VGroup> + <s:VGroup left="300" top="10" id="mainVGroup"> + <s:Rect width="100" height="75"> + <s:fill> + <s:SolidColor color="0xd54f4f"/> + </s:fill> + </s:Rect> + <s:Rect width="100" height="75"> + <s:fill> + <s:SolidColor color="0x2f977d"/> + </s:fill> + </s:Rect> + <s:Rect width="100" height="75"> + <s:fill> + <s:SolidColor color="0xfffca2"/> + </s:fill> + </s:Rect> + </s:VGroup> + <mx:Spacer width="10"/> + <s:Label width="40%" horizontalCenter="0" color="#323232" + text="The VGroup container is an instance of the Group container that uses the VerticalLayout class. You can use the properties of the VGroup class to modify the characteristics of the VerticalLayout class." height="100%"/> + + </s:HGroup> + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/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 new file mode 100644 index 0000000..a30bc57 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.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. + +--> +<!-- 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"> + + <s:VGroup verticalAlign="middle" width="526" height="230" top="57" left="10"> + <s:HGroup verticalAlign="middle" height="100%" color="0x000000"> + <s:Label text="VGroup" rotation="-90" color="0xFF0000"/> + <s:BorderContainer minWidth="0" minHeight="0"> + <s:VGroup height="{heightSlider.value}" + verticalAlign="{verticalAlignChoice.selectedItem}" + gap="0"> + <s:Label text="Lorem ipsum dolor sit amet, " height="22" verticalAlign="middle"/> + <s:Label text="consectetur adipiscing elit." height="22" verticalAlign="middle"/> + + </s:VGroup> + </s:BorderContainer> + + <s:Label text="VGroup in Scroller" rotation="-90" color="0xFF0000"/> + <s:BorderContainer minWidth="0" minHeight="0"> + <s:Scroller height="{heightSlider.value}"> + <s:VGroup verticalAlign="{verticalAlignChoice.selectedItem}" + gap="0"> + <s:Label text="Lorem ipsum dolor sit amet, " height="22" verticalAlign="middle"/> + <s:Label text="consectetur adipiscing elit." height="22" verticalAlign="middle"/> + + </s:VGroup> + </s:Scroller> + </s:BorderContainer> + + <s:Label text="List" rotation="-90" color="0xFF0000"/> + + <s:List minWidth="0" minHeight="0" height="{heightSlider.value+2}"> + <s:layout> + <s:VerticalLayout requestedMinRowCount="0" + verticalAlign="{verticalAlignChoice.selectedItem}" + gap="0"/> + </s:layout> + <s:ArrayCollection> + <fx:String>Lorem ipsum dolor sit amet, </fx:String> + <fx:String>consectetur adipiscing elit.</fx:String> + </s:ArrayCollection> + </s:List> + </s:HGroup> + </s:VGroup> + + <s:HGroup horizontalAlign="center" paddingTop="10" paddingLeft="10"> + <s:HGroup> + <s:Label text="VerticalAlign:"/> + <s:DropDownList id="verticalAlignChoice" requireSelection="true" color="0x000000"> + <s:dataProvider> + <s:ArrayCollection source="{'top bottom middle'.split(' ')}"/> + </s:dataProvider> + </s:DropDownList> + </s:HGroup> + <s:HGroup> + <s:Label text="Height:"/> + <s:HSlider id="heightSlider" minimum="0" maximum="425" value="100" width="300"/> + </s:HGroup> + </s:HGroup> + <s:Label right="7" top="26" width="200" + text="This sample show the use of the verticalAlign and horizontalAlign properties for use with a VGroup and +HGroup accordingly."/> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/containers/skins/TDFPanelSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/skins/TDFPanelSkin.mxml new file mode 100644 index 0000000..f9151dc --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/containers/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/051a1e55/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml new file mode 100644 index 0000000..7276b06 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.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/mx"> + + <fx:Script> + <![CDATA[ + import mx.collections.ArrayCollection; + + import skins.TDFPanelSkin; + + [Bindable] + public var cards:ArrayCollection = new ArrayCollection( + [ {label:"Visa", data:1}, + {label:"MasterCard", data:2}, + {label:"American Express", data:3} ]); + + private function changeHandler(event:Event):void { + + myLabel.text = "You selected: " + ComboBox(event.target).selectedItem.label; + myData.text = "Data: " + ComboBox(event.target).selectedItem.data; + } + ]]> + </fx:Script> + + <s:Panel title="ComboBox Sample" skinClass="skins.TDFPanelSkin" + height="100%" width="100%"> + + <s:HGroup top="20" horizontalCenter="0" > + <s:VGroup> + <s:Label width="200" color="0x336699" text="Select credit card type:"/> + <s:ComboBox dataProvider="{cards}" width="150" color="0x000000" + change="changeHandler(event);" selectedIndex="0"/> + + </s:VGroup> + <mx:Spacer width="20"/> + <s:VGroup> + <s:Label id="myLabel" text="You selected:" fontWeight="bold"/> + <s:Label id="myData" text="Data:" fontWeight="bold"/> + </s:VGroup> + + </s:HGroup> + <s:Label color="#323232" width="75%" bottom="20" horizontalCenter="0" + text="The ComboBox component is similar to a DropDownList but includes a TextInput instead of a Label. A user can type into the TextInput and the drop-down will scroll to and highlight the closest match. +Users are allowed to type in an item not found in the dataProvider. With this behavior, a ComboBox acts as a list of suggested values, while a DropDownList acts as a list of possible values. "/> + + </s:Panel> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml new file mode 100644 index 0000000..28c1e46 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml @@ -0,0 +1,134 @@ +<?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. + +--> +<!-- Simple example to demonstrate a DataGroup with a virtualized layout. + Written by Flex 4 Team +--> +<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:Script> + <![CDATA[ + import mx.collections.ArrayCollection; + + import skins.TDFPanelSkin; + + public function generateDataProvider(nItems:int = 10000):ArrayCollection { + var ac:ArrayCollection = new ArrayCollection(); + + var sources:Array = ['San Francisco', 'New York', 'Vancouver', 'Denver', 'Hong Kong']; + var destinations:Array = ['London', 'Houston', 'Orlando', 'Los Angeles', 'Seattle']; + var airlines:Array = ['Green Jet', 'Orange Jet', 'Yellow Jet', 'Blue Jet', 'Red Jet']; + var dates:Array = ['March 23-29', 'April 23-29', 'May 1-3', 'May 10-13', 'June 6']; + + // create a collection of random flights + for (var i:int = 0; i < nItems; i++){ + var temp:Object = new Object(); + var random:int = Math.random() * 5; + + temp.start = sources[random]; + temp.end = destinations[random]; + temp.details = dates[random] + ', ' + airlines[random] + " (Flight " + i + ")"; + ac.addItem(temp); + } + + return ac; + + } + ]]> + </fx:Script> + + <s:Panel title="DataGroup with Virtual Layout" + width="100%" height="100%" + skinClass="skins.TDFPanelSkin"> + + <s:Scroller horizontalCenter="0" top="10"> + <s:DataGroup width="600" height="123" clipAndEnableScrolling="true" dataProvider="{generateDataProvider(9000)}"> + <s:layout> + <s:VerticalLayout gap="1" useVirtualLayout="true" /> + </s:layout> + <s:itemRenderer> + <fx:Component> + <s:ItemRenderer width="600" height="20"> + <s:states> + <s:State name="normal" /> + <s:State name="hovered" /> + <s:State name="selected" /> + </s:states> + + <fx:Script> + <![CDATA[ + override public function set data(value:Object):void { + super.data = value; + + if (data == null) // a renderer's data is set to null when it goes out of view + return; + + txtStart.text = data.start; + txtEnd.text = data.end; + txtDetails.text = data.details; + } + ]]> + </fx:Script> + + <s:transitions> + <mx:Transition fromState="normal" toState="hovered"> + <s:Animate target="{flightPlan}" duration="200"> + <s:SimpleMotionPath property="width" /> + </s:Animate> + </mx:Transition> + <mx:Transition fromState="hovered" toState="normal"> + <s:Animate target="{flightPlan}" duration="200" > + <s:SimpleMotionPath property="width" /> + </s:Animate> + </mx:Transition> + </s:transitions> + + <s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5"> + <s:fill> + <s:SolidColor color="#E1ECF4" /> + </s:fill> + </s:Rect> + + <s:HGroup verticalAlign="middle"> + <s:Group id="flightPlan" height="20" width="300" width.hovered="330"> + <s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5"> + <s:fill> + <s:SolidColor color="#65A3CE" color.hovered="#65A3FF" /> + </s:fill> + </s:Rect> + <s:Label id="txtStart" color="#FFFFFF" fontWeight="bold" left="20" verticalCenter="2" /> + <s:Label id="txtEnd" color="#FFFFFF" fontWeight="bold" right="20" verticalCenter="2" textAlign="right" /> + </s:Group> + <s:Label id="txtDetails" color="#32353f" fontSize="11" /> + </s:HGroup> + </s:ItemRenderer> + </fx:Component> + </s:itemRenderer> + </s:DataGroup> + </s:Scroller> + <s:Label width="90%" horizontalCenter="0" color="#323232" bottom="40" + text="Apache Flex DataGroups support virtualization. Virtualization is an optimization for layout and rendering +that reduces the footprint and startup time for containers with large numbers of items. This sample shows how +virtualization can be achieved by only creating enough objects for the items currently being displayed. The +useVirtualLayout property should be set on the layout object to achieve virtualization."/> + </s:Panel> + +</s:Application> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml new file mode 100644 index 0000000..d2e6d08 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.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"> + <fx:Script> + <![CDATA[ + import mx.controls.Menu; + import mx.events.FlexEvent; + import mx.events.MenuEvent; + + import skins.TDFPanelSkin; + + protected var myMenu:Menu; + + protected function showHandler(event:MouseEvent):void + { + myMenu = Menu.createMenu(null, myMenuData, false); + myMenu.labelField="@label"; + myMenu.show(90, 35); + myMenu.addEventListener(MenuEvent.CHANGE,onMenuChange); + } + + protected function hideHandler(event:MouseEvent):void + { + myMenu.hide(); + } + + protected function onMenuChange(event:MenuEvent):void + { + lblSelected.text = event.label; + } + + ]]> + </fx:Script> + + + <fx:Declarations> + <fx:XML format="e4x" id="myMenuData"> + <root> + <menuitem label="MenuItem A" > + <menuitem label="SubMenuItem A-1" enabled="false"/> + <menuitem label="SubMenuItem A-2"/> + </menuitem> + <menuitem label="MenuItem B" type="check" toggled="true"/> + <menuitem label="MenuItem C" type="check" toggled="false"/> + <menuitem type="separator"/> + <menuitem label="MenuItem D" > + <menuitem label="SubMenuItem D-1" type="radio" + groupName="one"/> + <menuitem label="SubMenuItem D-2" type="radio" + groupName="one" toggled="true"/> + <menuitem label="SubMenuItem D-3" type="radio" + groupName="one"/> + </menuitem> + </root> + </fx:XML> + </fx:Declarations> + + <s:Panel title="Menu Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin"> + <s:HGroup bottom="15" horizontalCenter="0" verticalAlign="middle"> + <s:Button label="Show Menu" click="showHandler(event)" /> + <s:Button label="Hide Menu" click="hideHandler(event)" /> + <s:Label text="Menu Item Selected:" fontWeight="bold" fontSize="12" color="0x336699"/> + <s:Label id="lblSelected" /> + </s:HGroup> + <s:Label width="220" color="#323232" top="15" right="50" + text="The Menu control is a pop-up control that contains a menu of individually selectable choices. You use ActionScript + to create a Menu control that pops up in response to a user action, typically as part of an event listener."/> + + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml new file mode 100644 index 0000000..e9f419d --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml @@ -0,0 +1,100 @@ +<?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" + preinitialize="init();" viewSourceURL="srcview/index.html"> + + <!-- Based on samples from Peter DeHaan's blog: http://blog.flexexamples.com/ --> + + <fx:Script> + import flashx.textLayout.elements.Configuration; + import flashx.textLayout.elements.TextFlow; + import flashx.textLayout.formats.TextDecoration; + import flashx.textLayout.formats.TextLayoutFormat; + + import spark.events.TextOperationEvent; + + [Bindable] + protected static var lineCount:uint = 0; + + protected function richEdTxt_changeHandler(evt:TextOperationEvent):void { + lineCount = richEdTxt.mx_internal::textContainerManager.numLines; + lineCnt.text = lineCount.toString(); + } + + protected function init():void { + var cfg:Configuration = TextFlow.defaultConfiguration; + + var normalTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkNormalFormat); + normalTLF.color = 0xFF0000; + + var hoverTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkHoverFormat); + hoverTLF.color = 0xFF00FF; + hoverTLF.textDecoration = TextDecoration.NONE; + + var activeTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkActiveFormat); + activeTLF.color = 0x00FF00; + + cfg.defaultLinkNormalFormat = normalTLF; + cfg.defaultLinkHoverFormat = hoverTLF; + cfg.defaultLinkActiveFormat = activeTLF; + TextFlow.defaultConfiguration = cfg; + } + </fx:Script> + <fx:Style> + @namespace s "library://ns.adobe.com/flex/spark"; + @namespace mx "library://ns.adobe.com/flex/mx"; + + s|VGroup s|Label { + fontWeight: "bold"; + } + </fx:Style> + <s:Panel width="100%" height="100%" + skinClass="skins.TDFPanelSkin" + title="RichEditableText Sample"> + + <s:VGroup id="vgrp" width="100%" height="100%" top="10" left="15"> + <s:HGroup> + <s:Label text="Uneditable text with formatted link:"/> + <s:RichEditableText editable="false"> + <s:content> + <s:p>The quick brown <s:a href="http://www.adobe.com/";>fox</s:a> jumps over the lazy dog.</s:p> + </s:content> + </s:RichEditableText> + </s:HGroup> + <s:HGroup> + <s:Label text="Editable text:"/> + <s:RichEditableText id="richEdTxt" widthInChars="20" heightInLines="10" + change="richEdTxt_changeHandler(event);" backgroundColor="0xCCCCCC" text="Hello world!"> + </s:RichEditableText> + </s:HGroup> + <s:HGroup> + <s:Label text="Line Count of editable text:"/> + <s:Label id="lineCnt"/> + </s:HGroup> + + </s:VGroup> + <s:Label width="266" height="180" right="10" top="38" color="0x323232" text="RichEditableText is a low-level UIComponent for displaying, scrolling, selecting, and editing richly-formatted text. +The rich text can contain clickable hyperlinks and inline graphics that are either embedded or loaded from URLs. RichEditableText does not have scrollbars, but it implements +the IViewport interface for programmatic scrolling so that it can be controlled by a Scroller, which does provide scrollbars. It also supports vertical scrolling with the mouse wheel." /> + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/controls/skins/TDFPanelSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/TDFPanelSkin.mxml new file mode 100644 index 0000000..f9151dc --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/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/051a1e55/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml new file mode 100644 index 0000000..e66c90e --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml @@ -0,0 +1,74 @@ +<?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" width="680" height="275" viewSourceURL="srcview/index.html"> + + <fx:Style> + @namespace s "library://ns.adobe.com/flex/spark"; + @namespace mx "library://ns.adobe.com/flex/mx"; + + s|ButtonBar s|ToggleButton:upAndSelected, + s|ButtonBar s|ToggleButton:overAndSelected, + s|ButtonBar s|ToggleButton:downAndSelected, + + s|ButtonBar s|ToggleButton:disabledAndSelected { + baseColor: #FF6633; + color: #FFFFCC; + } + + s|ButtonBar { + baseColor: #FFFFCC; + } + + s|Button { + baseColor: #000000; + color: #269d6c; + } + + s|VGroup s|Label { + fontWeight: "bold"; + color: #336699; + } + + s|VGroup mx|Text { + color: #0A436B; + fontWeight: "bold"; + } + </fx:Style> + + <s:Panel title="Advanced CSS: Descendant Selector Example" height="100%" width="100%" skinClass="skins.TDFPanelSkin"> + <s:Group width="50%" height="50%"> + <s:ButtonBar id="viewMenu" requireSelection="true" x="10" y="10"> + <s:dataProvider> + <mx:ArrayCollection source="['Home', 'Events', 'Rooms', 'Dining']" /> + </s:dataProvider> + </s:ButtonBar> + <s:Button label="Click Me!" x="12" y="48"/> + <s:Label x="10" y="90" text="Only text in the VGroup below has bold content." /> + <s:VGroup x="10" y="109"> + <s:Label text="This text component has the style setting referring to the Spark Label component." /> + <mx:Text text="This text component has a style setting with a reference to a Halo Text component."/> + </s:VGroup> + </s:Group> + <s:Label width="200" color="0x323232" text="Descendant selectors can be used to specifically qualify the component you +want to style via the namespace and component. See the Style settings in the code for reference." x="440" y="10"/> + </s:Panel> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml new file mode 100644 index 0000000..3a0b598 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml @@ -0,0 +1,72 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" width="680" height="275"> + <fx:Style> + @namespace "library://ns.adobe.com/flex/spark"; + + List.blueTheme { + selectionColor: #7FACF6; + } + + List.greenTheme { + selectionColor: #00CF3F; + } + + Panel.blueTheme { + contentBackgroundColor: #9abbdc; + + } + + .blueTheme { + focusColor: #3D73EF; + symbolColor: #2A3982; + + } + </fx:Style> + + <s:Panel title="Advanced CSS: Type+Class Selector Sample" height="100%" width="100%" + styleName="blueTheme" skinClass="skins.TDFPanelSkin"> + <s:HGroup horizontalCenter="0" top="15"> + <s:Label width="270" color="0x323232" text="This Panel has a styleName, but the Lists and Panel have some different styles defined in a Type+Class selector. See the style section for the styles applied."/> + <s:ComboBox selectedIndex="0"> + <s:ArrayCollection source="[Monday,Tuesday,Wednesday,Thursday,Friday]"/> + </s:ComboBox> + <s:VGroup horizontalCenter="0" top="8"> + <s:Label text="Text:"/> + <s:TextInput text="some text" styleName="blueTheme"/> + <s:Label text="Units:"/> + <s:NumericStepper styleName="blueTheme"/> + <s:List id="carList" selectedIndex="2" styleName="blueTheme"> + <s:dataProvider> + <mx:ArrayCollection source="[Civic, M3, Prius, Blazer, Tahoe]" /> + </s:dataProvider> + </s:List> + </s:VGroup> + <s:List id="fruitList" selectedIndex="2" styleName="greenTheme"> + <s:dataProvider> + <mx:ArrayCollection source="[Apples,Bananas,Grapes]" /> + </s:dataProvider> + </s:List> + </s:HGroup> + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/css/skins/TDFPanelSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/skins/TDFPanelSkin.mxml new file mode 100644 index 0000000..539c4fb --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/css/skins/TDFPanelSkin.mxml @@ -0,0 +1,171 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> + + +<!--- Custom Spark Panel Skin created for Tour de Flex. + +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 +--> +<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" + blendMode.disabled="layer"> + + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.Panel")] + ]]> + </fx:Metadata> + + <fx:Script> + /* Define the skin elements that should not be colorized. + For panel, border and title backround are skinned, but the content area and title text are not. */ + static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"]; + + /** + * @copy spark.skins.SparkSkin#colorizeExclusions + */ + override public function get colorizeExclusions():Array {return exclusions;} + + /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */ + static private const contentFill:Array = []; + + /** + * @inheritDoc + */ + override public function get contentItems():Array {return contentFill}; + </fx:Script> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + <s:State name="normalWithControlBar" /> + <s:State name="disabledWithControlBar" /> + </s:states> + + <!-- drop shadow --> + <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" + angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/> + + <!-- layer 1: border --> + <s:Rect left="0" right="0" top="0" bottom="0"> + <s:stroke> + <s:SolidColorStroke color="0" alpha="0.50" weight="1" /> + </s:stroke> + </s:Rect> + + + <!-- layer 2: background fill --> + <!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. --> + <s:Rect left="0" right="0" bottom="0" height="15"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 3: contents --> + <!--- contains the vertical stack of titlebar content and controlbar --> + <s:Group left="1" right="1" top="1" bottom="1" > + <s:layout> + <s:VerticalLayout gap="0" horizontalAlign="justify" /> + </s:layout> + + <s:Group id="topGroup" > + <!-- layer 0: title bar fill --> + <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex --> + <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" > + <s:fill> + <s:SolidColor color="0x000000" /> + </s:fill> + </s:Rect> + + <!-- layer 1: title bar highlight --> + <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" > + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xEAEAEA" /> + <s:GradientEntry color="0xD9D9D9" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + <!-- layer 2: title bar divider --> + <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0"> + <s:fill> + <s:SolidColor color="0xC0C0C0" /> + </s:fill> + </s:Rect> + + <!-- layer 3: text --> + <!--- Defines the appearance of the PanelSkin class's title bar. --> + <!-- Note: The title text display has been slightly modified for Tour de Flex. --> + <s:Label id="titleDisplay" lineBreak="explicit" + left="9" top="1" bottom="0" minHeight="30" + verticalAlign="middle" fontWeight="bold" color="#E2E2E2"/> + + </s:Group> + + <!-- + Note: setting the minimum size to 0 here so that changes to the host component's + size will not be thwarted by this skin part's minimum size. This is a compromise, + more about it here: http://bugs.adobe.com/jira/browse/SDK-21143 + --> + <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"> + </s:Group> + + <s:Group id="bottomGroup" minWidth="0" minHeight="0" + includeIn="normalWithControlBar, disabledWithControlBar" > + + <!-- layer 0: control bar background --> + <!-- Note: We are skinning this to be the gradient in case we do specify control + bar content, but it will only display if there's a controlBarContent + property specified.--> + <s:Rect left="0" right="0" bottom="0" top="0" height="15"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 1: control bar divider line --> + <s:Rect left="0" right="0" top="0" height="1" > + <s:fill> + <s:SolidColor color="0xCDCDCD" /> + </s:fill> + </s:Rect> + + <!-- layer 2: control bar --> + <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0"> + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + </s:Group> + </s:Group> + </s:Group> +</s:SparkSkin> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml new file mode 100644 index 0000000..fda6db2 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml @@ -0,0 +1,99 @@ +<?xml version="1.0"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application + xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:mx="library://ns.adobe.com/flex/mx" + xmlns:s="library://ns.adobe.com/flex/spark"> + + <fx:Style> + @namespace "library://ns.adobe.com/flex/spark"; + Label { + baseColor: #000000; + fontFamily: "Arial"; + fontWeight: "bold"; + fontSize: "11"; + advancedAntiAliasing: true; + } + + </fx:Style> + + <fx:Declarations> + <s:Move3D id="moveEffect" target="{targetImg}" + xFrom="{targetImg.x}" xBy="{Number(xVal.text)}" + yFrom="{targetImg.y}" yBy="{Number(yVal.text)}" + zFrom="{targetImg.z}" zBy="{Number(zVal.text)}" + duration="{duration.value}" + repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}" + effectStart="this.targetImg.alpha=.7" effectEnd="this.targetImg.alpha=1.0;"/> + </fx:Declarations> + + <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the + source tabs for each sample. --> + <s:Panel width="100%" height="100%" + horizontalCenter="0" + title="Move3D Effect Sample" + skinClass="skins.TDFPanelSkin"> + + <s:HGroup left="10" top="5" width="100%" height="100%" horizontalCenter="0"> + <s:VGroup width="40%"> + + + <s:HGroup verticalAlign="middle"> + <s:Label text="Move X By" verticalAlign="bottom"/> + <s:TextInput id="xVal" text="40" widthInChars="3"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Move Y By" verticalAlign="bottom"/> + <s:TextInput id="yVal" text="40" widthInChars="3"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Move Z By" verticalAlign="bottom"/> + <s:TextInput id="zVal" text="-150" widthInChars="3"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Repeat Num" verticalAlign="bottom"/> + <s:NumericStepper id="repeatCnt" width="35" + value="2" minimum="1"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Duration" verticalAlign="bottom"/> + <s:NumericStepper id="duration" width="58" + minimum="100" maximum="9999" + value="1000" + snapInterval="100" /> + </s:HGroup> + <s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/> + <s:Button id="playButton" + label="Move Image" click="moveEffect.play();"/> + </s:VGroup> + <s:HGroup horizontalCenter="0" height="30%" verticalAlign="middle" width="40%"> + <s:BitmapImage id="targetImg" source="@Embed(source='assets/ApacheFlexLogo.png')"/> + </s:HGroup> + <s:VGroup top="0" right="5" horizontalAlign="right" width="30%"> + <s:Label text="Move3D Effect Sample" fontSize="18" color="#B7B6B6"/> + <s:Label color="#323232" width="200" verticalAlign="justify" + text="The Move3D class moves a target object in three dimensions around the transform center. A scale of +2.0 means the object has been magnified by a factor of 2, and a scale of 0.5 means the object has been +reduced by a factor of 2. A scale value of 0.0 is invalid."/> + </s:VGroup> + </s:HGroup> + </s:Panel> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexLogo.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexLogo.png b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexLogo.png new file mode 100644 index 0000000..4ff037f Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexLogo.png differ
