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/f8cd5238 Tree: http://git-wip-us.apache.org/repos/asf/flex-utilities/tree/f8cd5238 Diff: http://git-wip-us.apache.org/repos/asf/flex-utilities/diff/f8cd5238 Branch: refs/heads/develop Commit: f8cd523876c2d0effc4ee82b81d255a4ca3747a6 Parents: bf1d7a5 Author: Justin Mclean <jmcl...@apache.org> Authored: Sat Aug 9 16:05:08 2014 +1000 Committer: Justin Mclean <jmcl...@apache.org> Committed: Sat Aug 9 16:05:08 2014 +1000 ---------------------------------------------------------------------- .../spark/charts/SeriesInterplateExample.mxml | 115 ++++++++++++++++++ .../src/spark/charts/SeriesSlideExample.mxml | 117 +++++++++++++++++++ .../src/spark/charts/SeriesZoomExample.mxml | 116 ++++++++++++++++++ .../src/spark/controls/SWFLoaderExample.mxml | 57 +++++++++ .../controls/SimpleTitleWindowExample.mxml | 62 ++++++++++ .../src/spark/controls/TabNavigatorExample.mxml | 67 +++++++++++ .../src/spark/controls/TitleWindowExample.mxml | 81 +++++++++++++ .../spark/controls/ToggleButtonBarExample.mxml | 73 ++++++++++++ .../src/spark/controls/ToolTipExample.mxml | 60 ++++++++++ .../src/spark/controls/TreeExample.mxml | 82 +++++++++++++ .../src/spark/controls/VideoDisplayExample.mxml | 56 +++++++++ .../src/spark/controls/ViewStackExample.mxml | 113 ++++++++++++++++++ .../formatters/SwitchFormatterExample.mxml | 85 ++++++++++++++ .../formatters/ZipCodeFormatterExample.mxml | 84 +++++++++++++ .../src/spark/other/RepeaterExample.mxml | 66 +++++++++++ .../spark/validators/FormValidatorExample.mxml | 92 +++++++++++++++ .../SocialSecurityValidatorExample.mxml | 64 ++++++++++ .../validators/StringValidatorExample.mxml | 67 +++++++++++ .../validators/ZipCodeValidatorExample.mxml | 64 ++++++++++ 19 files changed, 1521 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterplateExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterplateExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterplateExample.mxml new file mode 100644 index 0000000..16a51bf --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterplateExample.mxml @@ -0,0 +1,115 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + [Bindable] + private var companyAAC:ArrayCollection = new ArrayCollection( [ + { Date: "25-Jul", Open: 40.75, High: 40.75, Low: 40.24, Close:40.31}, + { Date: "26-Jul", Open: 39.98, High: 40.78, Low: 39.97, Close:40.34}, + { Date: "27-Jul", Open: 40.38, High: 40.66, Low: 40, Close:40.63}, + { Date: "28-Jul", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98}, + { Date: "29-Jul", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95}, + { Date: "1-Aug", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6}, + { Date: "2-Aug", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84}, + { Date: "3-Aug", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12}, + { Date: "4-Aug", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69}, + { Date: "5-Aug", Open: 36.61, High: 37, Low: 36.48, Close:36.86} ]); + + [Bindable] + private var companyBAC:ArrayCollection = new ArrayCollection( [ + { Date: "25-Jul", Open: 18.50, High: 19, Low: 18.48, Close:18.86}, + { Date: "26-Jul", Open: 19.56, High: 19.98, Low: 18.6, Close:18.69}, + { Date: "27-Jul", Open: 20.81, High: 20.99, Low: 20.03, Close:20.12}, + { Date: "28-Jul", Open: 20.70, High: 21.00, Low: 19.5, Close:20.84}, + { Date: "29-Jul", Open: 21.7, High: 21.79, Low: 20.45, Close:20.6}, + { Date: "1-Aug", Open: 22.45, High: 22.65, Low: 21.65, Close:21.95}, + { Date: "2-Aug", Open: 22.56, High: 22.6, Low: 22.05, Close:22.98}, + { Date: "3-Aug", Open: 22.42, High: 22.70, Low: 22.1, Close:22.63}, + { Date: "4-Aug", Open: 21.67, High: 22.82, Low: 21.67, Close:22.34}, + { Date: "5-Aug", Open: 22.44, High: 22.85, Low: 22.12, Close:22.31} ]); + + ]]> + </fx:Script> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <fx:Declarations> + <mx:SeriesInterpolate id="interpolateIn" duration="1000"/> + </fx:Declarations> + + <s:Panel title="Interpolate Effect" width="600" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:HorizontalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:CandlestickChart id="candlestickchart" height="100%" paddingRight="5" paddingLeft="5" color="0x323232" + showDataTips="true" dataProvider="{companyAAC}"> + + <mx:verticalAxis> + <mx:LinearAxis baseAtZero="false" /> + </mx:verticalAxis> + + <mx:horizontalAxis> + <mx:CategoryAxis categoryField="Date" title="Date"/> + </mx:horizontalAxis> + + <mx:series> + <mx:CandlestickSeries + openField="Open" highField="High" + lowField="Low" closeField="Close" + showDataEffect="{interpolateIn}"/> + </mx:series> + </mx:CandlestickChart> + + + <s:BorderContainer color="0x323232" width="30%" borderColor="0xDCDCDC" borderStyle="solid" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="5" paddingRight="0" paddingTop="5" /> + </s:layout> + + <s:Label color="0x0050AA" width="100%" + text="Choose a company to view recent stock data."/> + + <s:RadioButton groupName="stocks" label="View Company A" + selected="true" click="candlestickchart.dataProvider=companyAAC;"/> + <s:RadioButton groupName="stocks" label="View Company B" + click="candlestickchart.dataProvider=companyBAC;"/> + </s:BorderContainer> + + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/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 new file mode 100644 index 0000000..58f88a4 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml @@ -0,0 +1,117 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + [Bindable] + private var companyAAC:ArrayCollection = new ArrayCollection( [ + { Date: "25-Jul", Open: 40.75, High: 40.75, Low: 40.24, Close:40.31}, + { Date: "26-Jul", Open: 39.98, High: 40.78, Low: 39.97, Close:40.34}, + { Date: "27-Jul", Open: 40.38, High: 40.66, Low: 40, Close:40.63}, + { Date: "28-Jul", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98}, + { Date: "29-Jul", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95}, + { Date: "1-Aug", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6}, + { Date: "2-Aug", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84}, + { Date: "3-Aug", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12}, + { Date: "4-Aug", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69}, + { Date: "5-Aug", Open: 36.61, High: 37, Low: 36.48, Close:36.86} ]); + + [Bindable] + private var companyBAC:ArrayCollection = new ArrayCollection( [ + { Date: "25-Jul", Open: 18.50, High: 19, Low: 18.48, Close:18.86}, + { Date: "26-Jul", Open: 19.56, High: 19.98, Low: 18.6, Close:18.69}, + { Date: "27-Jul", Open: 20.81, High: 20.99, Low: 20.03, Close:20.12}, + { Date: "28-Jul", Open: 20.70, High: 21.00, Low: 19.5, Close:20.84}, + { Date: "29-Jul", Open: 21.7, High: 21.79, Low: 20.45, Close:20.6}, + { Date: "1-Aug", Open: 22.45, High: 22.65, Low: 21.65, Close:21.95}, + { Date: "2-Aug", Open: 22.56, High: 22.6, Low: 22.05, Close:22.98}, + { Date: "3-Aug", Open: 22.42, High: 22.70, Low: 22.1, Close:22.63}, + { Date: "4-Aug", Open: 21.67, High: 22.82, Low: 21.67, Close:22.34}, + { Date: "5-Aug", Open: 22.44, High: 22.85, Low: 22.12, Close:22.31} ]); + + ]]> + </fx:Script> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <fx:Declarations> + <mx:SeriesSlide id="slideIn" duration="1000" direction="up"/> + <mx:SeriesSlide id="slideOut" duration="1000" direction="down"/> + </fx:Declarations> + + + <s:Panel title="Slide Effect" width="600" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:HorizontalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:CandlestickChart id="candlestickchart" height="100%" paddingRight="5" paddingLeft="5" color="0x323232" + showDataTips="true" dataProvider="{companyAAC}"> + + <mx:verticalAxis> + <mx:LinearAxis baseAtZero="false" /> + </mx:verticalAxis> + + <mx:horizontalAxis> + <mx:CategoryAxis categoryField="Date" title="Date"/> + </mx:horizontalAxis> + + <mx:series> + <mx:CandlestickSeries + openField="Open" highField="High" + lowField="Low" closeField="Close" + showDataEffect="{slideIn}" + hideDataEffect="{slideOut}"/> + </mx:series> + </mx:CandlestickChart> + + <s:BorderContainer color="0x323232" width="30%" borderColor="0xDCDCDC" borderStyle="solid" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="5" paddingRight="0" paddingTop="5" /> + </s:layout> + + <s:Label color="0x0050AA" width="100%" + text="Choose a company to view recent stock data."/> + + <s:RadioButton groupName="stocks" label="View Company A" + selected="true" click="candlestickchart.dataProvider=companyAAC;"/> + <s:RadioButton groupName="stocks" label="View Company B" + click="candlestickchart.dataProvider=companyBAC;"/> + </s:BorderContainer> + + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/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 new file mode 100644 index 0000000..d5b85d2 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.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" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + [Bindable] + private var companyAAC:ArrayCollection = new ArrayCollection( [ + { Date: "25-Jul", Open: 40.75, High: 40.75, Low: 40.24, Close:40.31}, + { Date: "26-Jul", Open: 39.98, High: 40.78, Low: 39.97, Close:40.34}, + { Date: "27-Jul", Open: 40.38, High: 40.66, Low: 40, Close:40.63}, + { Date: "28-Jul", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98}, + { Date: "29-Jul", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95}, + { Date: "1-Aug", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6}, + { Date: "2-Aug", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84}, + { Date: "3-Aug", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12}, + { Date: "4-Aug", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69}, + { Date: "5-Aug", Open: 36.61, High: 37, Low: 36.48, Close:36.86} ]); + + [Bindable] + private var companyBAC:ArrayCollection = new ArrayCollection( [ + { Date: "25-Jul", Open: 18.50, High: 19, Low: 18.48, Close:18.86}, + { Date: "26-Jul", Open: 19.56, High: 19.98, Low: 18.6, Close:18.69}, + { Date: "27-Jul", Open: 20.81, High: 20.99, Low: 20.03, Close:20.12}, + { Date: "28-Jul", Open: 20.70, High: 21.00, Low: 19.5, Close:20.84}, + { Date: "29-Jul", Open: 21.7, High: 21.79, Low: 20.45, Close:20.6}, + { Date: "1-Aug", Open: 22.45, High: 22.65, Low: 21.65, Close:21.95}, + { Date: "2-Aug", Open: 22.56, High: 22.6, Low: 22.05, Close:22.98}, + { Date: "3-Aug", Open: 22.42, High: 22.70, Low: 22.1, Close:22.63}, + { Date: "4-Aug", Open: 21.67, High: 22.82, Low: 21.67, Close:22.34}, + { Date: "5-Aug", Open: 22.44, High: 22.85, Low: 22.12, Close:22.31} ]); + + ]]> + </fx:Script> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <fx:Declarations> + <mx:SeriesZoom id="zoomIn" duration="1000"/> + <mx:SeriesZoom id="zoomOut" duration="1000"/> + </fx:Declarations> + + + <s:Panel title="Zoom Effect" width="600" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:HorizontalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:CandlestickChart id="candlestickchart" height="100%" paddingRight="5" paddingLeft="5" color="0x323232" + showDataTips="true" dataProvider="{companyAAC}"> + + <mx:verticalAxis> + <mx:LinearAxis baseAtZero="false" /> + </mx:verticalAxis> + + <mx:horizontalAxis> + <mx:CategoryAxis categoryField="Date" title="Date"/> + </mx:horizontalAxis> + + <mx:series> + <mx:CandlestickSeries + openField="Open" highField="High" + lowField="Low" closeField="Close" + showDataEffect="{zoomIn}" + hideDataEffect="{zoomOut}"/> + </mx:series> + </mx:CandlestickChart> + + <s:BorderContainer color="0x323232" width="30%" borderColor="0xDCDCDC" borderStyle="solid" height="100%"> + <s:layout> + <s:VerticalLayout paddingLeft="5" paddingRight="0" paddingTop="5" /> + </s:layout> + + <s:Label color="0x0050AA" width="100%" + text="Choose a company to view recent stock data."/> + + <s:RadioButton groupName="stocks" label="View Company A" + selected="true" click="candlestickchart.dataProvider=companyAAC;"/> + <s:RadioButton groupName="stocks" label="View Company B" + click="candlestickchart.dataProvider=companyBAC;"/> + </s:BorderContainer> + + </s:Panel> +</s:Application> + http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml new file mode 100644 index 0000000..f198e82 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml @@ -0,0 +1,57 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html" + creationComplete="init()"> + + <fx:Script> + <![CDATA[ + private function init():void{ + swfObj.content.addEventListener("SWF_EVENT",ballHandler); + } + private function ballHandler(ev:Event):void{ + txt.text = "Flash content embedded at compile time | " + ev.target.ballCnt + " gumballs left"; + } + ]]> + </fx:Script> + + <s:layout> + <s:HorizontalLayout horizontalAlign="center" /> + </s:layout> + + <s:Panel title="SWFLoader Control" color="0x000000" + borderAlpha="0.15" + width="600"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label id="txt" color="0x323232" fontWeight="bold" text="Flash content embedded at compile time | 10 gumballs left" /> + + <mx:SWFLoader id="swfObj" source="@Embed('assets/swf_sample.swf')" /> + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml new file mode 100644 index 0000000..204daab --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml @@ -0,0 +1,62 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<!-- Simple custom MXML TitleWindow component. + The TitleWindowApp application displays this component. + You cannot run it independently. --> + +<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + title="Title Window" + close="PopUpManager.removePopUp(this);" > + + <fx:Script> + <![CDATA[ + import mx.managers.PopUpManager; + + import spark.components.RichText; + + // A reference to the TextInput control in which to put the result. + public var loginName:RichText; + + // Event handler for the OK button. + private function returnName():void { + loginName.text="Name entered: " + userName.text; + PopUpManager.removePopUp(this); + } + ]]> + </fx:Script> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" /> + </s:layout> + + <s:HGroup> + <s:Label text="Enter Name: "/> + <s:TextInput id="userName" width="100%"/> + </s:HGroup> + + <s:HGroup> + <s:Button label="OK" click="returnName();"/> + <s:Button label="Cancel" click="PopUpManager.removePopUp(this);"/> + </s:HGroup> + +</s:TitleWindow> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml new file mode 100644 index 0000000..969c4b8 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml @@ -0,0 +1,67 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <s:Panel title="TabNavigator Container" width="600" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label width="100%" color="0x323232" fontWeight="bold" + text="Select the tabs to change the panel."/> + + <mx:TabNavigator id="tn" width="100%" height="100%" color="0x323232" > + <!-- Define each panel using a VBox container. --> + + <s:NavigatorContent label="Panel 1"> + <s:Label text="TabNavigator container panel 1"/> + </s:NavigatorContent> + + <s:NavigatorContent label="Panel 2"> + <s:Label text="TabNavigator container panel 2"/> + </s:NavigatorContent> + + <s:NavigatorContent label="Panel 3"> + <s:Label text="TabNavigator container panel 3"/> + </s:NavigatorContent> + </mx:TabNavigator> + + <s:Label width="100%" color="0x323232" + text="Programmatically select the panel using a Button control."/> + + <s:HGroup> + <s:Button label="Select Tab 1" click="tn.selectedIndex=0" color="0x545454" /> + <s:Button label="Select Tab 2" click="tn.selectedIndex=1" color="0x545454" /> + <s:Button label="Select Tab 3" click="tn.selectedIndex=2" color="0x545454" /> + </s:HGroup> + + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml new file mode 100644 index 0000000..9414f7f --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml @@ -0,0 +1,81 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <fx:Script> + <![CDATA[ + import flash.geom.Point; + + import mx.containers.TitleWindow; + import mx.managers.PopUpManager; + + import spark.components.TitleWindow; + + private var point1:Point = new Point(); + + // Open the TitleWindow container. + // Cast the return value of the createPopUp() method + // to SimpleTitleWindowExample, the name of the + // component containing the TitleWindow container. + private function showWindow():void { + var login:SimpleTitleWindowExample=SimpleTitleWindowExample(PopUpManager.createPopUp( + this, SimpleTitleWindowExample , true) as spark.components.TitleWindow); + + // Calculate position of TitleWindow in Application's coordinates. + point1.x=myButton.x; + point1.y=myButton.y; + point1=myButton.localToGlobal(point1); + login.x=point1.x+25; + login.y=point1.y+25; + + // Pass a reference to the TextInput control + // to the TitleWindow container so that the + // TitleWindow container can return data to the main application. + login.loginName=returnedName; + } + ]]> + </fx:Script> + + <s:layout> + <s:HorizontalLayout horizontalAlign="center" /> + </s:layout> + + <s:Panel title="TitleWindow Container" color="0x000000" + borderAlpha="0.15" + width="600"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Button id="myButton" color="0x323232" height="32" label="Click to open the TitleWindow container" + click="showWindow();"/> + + <s:RichText id="returnedName" width="100%" color="0x323232" text="Waiting..."/> + + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml new file mode 100644 index 0000000..f152cba --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml @@ -0,0 +1,73 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <fx:Script> + <![CDATA[ + + import mx.events.ItemClickEvent; + + // Event handler function to print a message + // describing the selected Button control. + private function clickHandler(event:ItemClickEvent):void { + tgPanel.title = "ToggleButtonBar: " + event.label; + myTA.text="Selected button index: " + String(event.index) + + "\n" + "Selected button label: " + event.label; + } + ]]> + </fx:Script> + + <fx:Declarations> + + <fx:Array id="dp"> + <fx:String>Flash</fx:String> + <fx:String>Flex</fx:String> + <fx:String>AIR</fx:String> + <fx:String>ColdFusion</fx:String> + <fx:String>LiveCycle</fx:String> + </fx:Array> + + </fx:Declarations> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <s:Panel id="tgPanel" title="ToggleButtonBar: Flash" width="600" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:ToggleButtonBar color="0x323232" horizontalGap="5" itemClick="clickHandler(event);" dataProvider="{dp}" /> + + <s:Label width="100%" textAlign="center" color="0x323232" + text="Select a button in the ToggleButtonBar control."/> + + <s:TextArea color="0x323232" id="myTA" width="100%" height="100%" text="{'Selected button index: 0' + '\n' +'Selected button label: Flash'}"/> + + </s:Panel> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml new file mode 100644 index 0000000..51aa8e4 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <fx:Style> + @namespace mx "library://ns.adobe.com/flex/mx"; + + mx|ToolTip + { + fontFamily: "Arial"; + fontSize: 12; + fontStyle: "italic"; + color: #000000; + backgroundColor: #FCEA1E; + } + </fx:Style> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <s:Panel title="ToolTip Samples" + width="600" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Button label="Roll over me!" toolTip="This button doesn't do anything This tip could provide more instructions" /> + <s:TextInput toolTip="Enter some data here"/> + + </s:Panel> + +</s:Application> + http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml new file mode 100644 index 0000000..88fd9f3 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml @@ -0,0 +1,82 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <fx:Script> + <![CDATA[ + + [Bindable] + public var selectedNode:XML; + + // Event handler for the Tree control change event. + public function treeChanged(event:Event):void { + selectedNode=Tree(event.target).selectedItem as XML; + } + ]]> + </fx:Script> + + <fx:Declarations> + <fx:XMLList id="treeData"> + <node label="Mail Box"> + <node label="Inbox"> + <node label="Marketing"/> + <node label="Product Management"/> + <node label="Personal"/> + </node> + <node label="Outbox"> + <node label="Professional"/> + <node label="Personal"/> + </node> + <node label="Spam"/> + <node label="Sent"/> + </node> + </fx:XMLList> + </fx:Declarations> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" /> + </s:layout> + + <s:Panel title="Tree Control" color="0x000000" + borderAlpha="0.15" + width="600"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label width="100%" color="0x323232" + text="Select a node in the Tree control."/> + + <mx:HDividedBox width="100%" height="100%" color="0x323232"> + <mx:Tree id="myTree" width="50%" height="100%" labelField="@label" + showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/> + <s:TextArea height="100%" width="50%" + text="Selected Item: {selectedNode.@label}"/> + </mx:HDividedBox> + + </s:Panel> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml new file mode 100644 index 0000000..f43e379 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <s:layout> + <s:HorizontalLayout horizontalAlign="center" /> + </s:layout> + + <fx:Script> + <![CDATA[ + import flashx.textLayout.conversion.TextConverter; + ]]> + </fx:Script> + + <fx:Declarations> + <fx:String id="TitleText"><![CDATA["<b>VideoDisplay Control:</b><br />Use the buttons to control the video."]]></fx:String> + </fx:Declarations> + + <s:VGroup width="600" horizontalAlign="center" paddingTop="10"> + + <s:RichText width="75%" color="0xffffff" textAlign="center" + textFlow="{TextConverter.importToFlow(TitleText, TextConverter.TEXT_FIELD_HTML_FORMAT)}" + horizontalCenter="0" verticalCenter="0" /> + + <s:VideoDisplay id="myVid" height="146" width="220" source="assets/sample_vid.flv" autoPlay="false"/> + + <s:HGroup> + <s:Button label="Play" color="0x00000" click="myVid.play();"/> + <s:Button label="Pause" color="0x00000" click="myVid.pause();"/> + <s:Button label="Stop" color="0x00000" click="myVid.stop();"/> + </s:HGroup> + + </s:VGroup> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml new file mode 100644 index 0000000..3685017 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml @@ -0,0 +1,113 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <s:Panel title="ViewStack Container" width="600" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label width="100%" color="0x323232" textAlign="center" + text="Use the Button controls to change panels of the ViewStack container."/> + + <s:BorderContainer borderStyle="solid" width="100%" color="0x323232"> + + <s:layout> + <s:HorizontalLayout horizontalAlign="center" + paddingTop="5" paddingLeft="5" + paddingRight="5" paddingBottom="5" /> + </s:layout> + + <s:Button id="searchButton" label="Search Panel" + click="myViewStack.selectedChild=search;"/> + <s:Button id="cInfoButton" label="Customer Info Panel" + click="myViewStack.selectedChild=custInfo;"/> + <s:Button id="aInfoButton" label="Account Panel" + click="myViewStack.selectedChild=accountInfo;"/> + </s:BorderContainer> + + <!-- Define the ViewStack and the three child containers and have it + resize up to the size of the container for the buttons. --> + <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%" color="0x323232"> + + <s:NavigatorContent id="search" label="Search" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" > + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingTop="5" paddingLeft="5" + paddingRight="5" paddingBottom="5" /> + </s:layout> + + <s:Label text="Search Panel" /> + <s:HGroup > + <s:TextInput id="Searchtxt" width="200" /> + <mx:Button label="search" click="Searchtxt.text=''" /> + </s:HGroup> + </s:NavigatorContent> + + <s:NavigatorContent id="custInfo" label="Customer Info" backgroundColor="0xDCDCDC" + width="100%" height="100%" fontWeight="bold" > + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingTop="5" paddingLeft="5" + paddingRight="5" paddingBottom="5" /> + </s:layout> + + <s:Label text="Customer Info" /> + <s:HGroup> + <s:Label text="Email Address"/> + <s:TextInput id="email" width="200"/> + <s:Button label="Submit" click="email.text='';" /> + </s:HGroup> + </s:NavigatorContent> + + <s:NavigatorContent id="accountInfo" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" > + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingTop="5" paddingLeft="5" + paddingRight="5" paddingBottom="5" /> + </s:layout> + + <s:Label text="Account Info" /> + <s:HGroup> + <s:Button label="Purchases" /> + <s:Button label="Sales" /> + <s:Button label="Reports" /> + </s:HGroup> + </s:NavigatorContent> + + </mx:ViewStack> + + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml new file mode 100644 index 0000000..fec712f --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml @@ -0,0 +1,85 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <fx:Script> + <![CDATA[ + + import mx.formatters.SwitchSymbolFormatter; + import mx.events.ValidationResultEvent; + + private var vResult:ValidationResultEvent; + + // Event handler to validate and format input. + private function Format():void + { + vResult = scVal.validate(); + + if (vResult.type==ValidationResultEvent.VALID) { + var switcher:SwitchSymbolFormatter=new SwitchSymbolFormatter('#'); + + formattedSCNumber.text = + switcher.formatValue("###-##-####", scNum.text); + } + + else { + formattedSCNumber.text= ""; + } + } + ]]> + </fx:Script> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <fx:Declarations> + <mx:SocialSecurityValidator id="scVal" source="{scNum}" property="text"/> + </fx:Declarations> + + + <s:Panel title="SwitchSymbolFormatter Example" width="600" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:HorizontalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:Form color="0x323232" width="100%"> + <s:Label text="Enter a 9 digit Social Security number with no separator characters:" /> + + <s:TextInput id="scNum" text="" width="50%" maxChars="9"/> + <s:Button label="Validate and Format" click="Format();"/> + + <mx:FormItem label="formatted Social Security number:"> + <s:Label id="formattedSCNumber" text="" /> + </mx:FormItem> + </mx:Form> + + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml new file mode 100644 index 0000000..14afe89 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml @@ -0,0 +1,84 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <fx:Script> + <![CDATA[ + + import mx.events.ValidationResultEvent; + private var vResult:ValidationResultEvent; + + // Event handler to validate and format input. + private function Format():void + { + vResult = zcVal.validate(); + + if (vResult.type==ValidationResultEvent.VALID) { + formattedZipcode.text= zipFormatter.format(zip.text); + } + + else { + formattedZipcode.text= ""; + } + } + ]]> + </fx:Script> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <fx:Declarations> + <mx:ZipCodeFormatter id="zipFormatter" formatString="#####-####"/> + + <mx:ZipCodeValidator id="zcVal" source="{zip}" property="text" allowedFormatChars=""/> + </fx:Declarations> + + <s:Panel title="ZipCodeFormatter Example" width="600" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:HorizontalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:Form width="100%" color="0x323232"> + <mx:FormItem label="Enter a 5 or 9 digit U.S. ZIP code:" width="100%"> + <s:TextInput id="zip" text=""/> + </mx:FormItem> + + <mx:FormItem label="Formatted ZIP code: " width="100%"> + <s:Label id="formattedZipcode" text="" /> + </mx:FormItem> + + <mx:FormItem> + <s:Button label="Validate and Format" click="Format();"/> + </mx:FormItem> + </mx:Form> + + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml new file mode 100644 index 0000000..3228c60 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.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" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <fx:Script> + <![CDATA[ + + import mx.controls.Alert; + + [Bindable] + private var dp:Array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; + + ]]> + </fx:Script> + + <s:layout> + <s:HorizontalLayout horizontalAlign="center" /> + </s:layout> + + <s:Panel title="Repeater Example" color="0x000000" + borderAlpha="0.15" + width="600"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label width="100%" color="0x323232" textAlign="center" + text="Use the Repeater class to create multi-Button controls in a Tile container."/> + + <mx:Tile direction="horizontal" borderStyle="inset" horizontalGap="10" verticalGap="10" color="0x323232" + paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10"> + + <mx:Repeater id="rp" dataProvider="{dp}"> + <s:Button height="24" width="50" + label="{String(rp.currentItem)}" + click="Alert.show(String(event.currentTarget.getRepeaterItem()) + ' pressed')"/> + </mx:Repeater> + </mx:Tile> + + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml new file mode 100644 index 0000000..3a149f9 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml @@ -0,0 +1,92 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <fx:Script> + <![CDATA[ + + // Import necessary classes. + import mx.controls.Alert; + import mx.events.ValidationResultEvent; + + // Event listener for the valid and invalid events. + private function handleValid(eventObj:ValidationResultEvent):void { + if(eventObj.type==ValidationResultEvent.VALID) + // Enable Submit button. + submitButton.enabled = true; + else + submitButton.enabled = false; + } + + // Submit form is everything is valid. + private function submitForm():void { + Alert.show("Form Submitted!"); + } + + ]]> + </fx:Script> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <fx:Declarations> + <!-- The Validator class defines the required property and the validator events + used by all validator subclasses. --> + <mx:Validator id="reqValid" required="true" + source="{fname}" property="text" + valid="handleValid(event)" invalid="handleValid(event)"/> + </fx:Declarations> + + <s:Panel title="Validator Example" width="620" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:Form color="0x323232"> + <s:Label width="100%" + text="Enter a value in the Name field before you can submit. The E-mail field is optional."/> + + <mx:FormItem label="Name: " required="true"> + <s:TextInput id="fname" width="100%"/> + </mx:FormItem> + + <mx:FormItem label="E-mail address: " required="false"> + <s:TextInput id="email" width="100%"/> + </mx:FormItem> + + <mx:FormItem> + <s:Button id="submitButton" enabled="false" + label="Submit" click="submitForm();"/> + </mx:FormItem> + </mx:Form> + + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml new file mode 100644 index 0000000..90995a1 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml @@ -0,0 +1,64 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <fx:Script> + <![CDATA[ + import mx.controls.Alert; + ]]> + </fx:Script> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <fx:Declarations> + <mx:SocialSecurityValidator source="{ssn}" property="text" + trigger="{myButton}" triggerEvent="click" + valid="Alert.show('Validation Succeeded!');"/> + </fx:Declarations> + + <s:Panel title="SocialSecurityValidator Example" width="620" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:Form color="0x323232"> + <mx:FormItem label="Enter Social Security number: "> + <s:TextInput id="ssn" width="100%"/> + </mx:FormItem> + + <mx:FormItem > + <s:Button id="myButton" label="Validate" /> + </mx:FormItem> + </mx:Form> + + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml new file mode 100644 index 0000000..7264296 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml @@ -0,0 +1,67 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <fx:Script> + <![CDATA[ + import mx.controls.Alert; + ]]> + </fx:Script> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <fx:Declarations> + <mx:StringValidator source="{fname}" property="text" + tooShortError="This string is shorter than the minimum allowed length of 4. " + tooLongError="This string is longer than the maximum allowed length of 20." + minLength="4" maxLength="20" + trigger="{myButton}" triggerEvent="click" + valid="Alert.show('Validation Succeeded!');"/> + </fx:Declarations> + + <s:Panel title="StringValidator Example" width="620" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:Form color="0x323232"> + <mx:FormItem label="Enter a name between 4 and 20 characters: "> + <s:TextInput id="fname" width="100%"/> + </mx:FormItem> + + <mx:FormItem > + <s:Button id="myButton" label="Validate" /> + </mx:FormItem> + </mx:Form> + + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml new file mode 100644 index 0000000..697be46 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml @@ -0,0 +1,64 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin" + viewSourceURL="srcview/index.html"> + + <fx:Script> + <![CDATA[ + import mx.controls.Alert; + ]]> + </fx:Script> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <fx:Declarations> + <mx:ZipCodeValidator source="{zip}" property="text" + trigger="{myButton}" triggerEvent="click" + valid="Alert.show('Validation Succeeded!');"/> + </fx:Declarations> + + <s:Panel title="ZipCodeValidator Example" width="620" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:Form color="0x323232"> + <mx:FormItem label="Enter a 5 or 9 digit U.S. Zip code: "> + <s:TextInput id="zip" width="100%"/> + </mx:FormItem> + + <mx:FormItem > + <s:Button id="myButton" label="Validate" /> + </mx:FormItem> + </mx:Form> + + </s:Panel> + +</s:Application>
