http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml index a4bf99a..b198370 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml @@ -20,7 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - width="100%" height="100%" viewSourceURL="srcview/index.html"> + width="100%" height="100%"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx";
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml index 9f22e16..05f17de 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml @@ -20,7 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - width="100%" height="100%" viewSourceURL="srcview/index.html"> + width="100%" height="100%"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml index d6bc0fa..c988d93 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml @@ -20,7 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - width="100%" height="100%" viewSourceURL="srcview/index.html"> + width="100%" height="100%"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml index 6fcbad9..4761dd1 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml @@ -20,7 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - width="100%" height="100%" viewSourceURL="srcview/index.html"> + width="100%" height="100%"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml index 64a0802..15733c4 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml @@ -20,7 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - width="100%" height="100%" viewSourceURL="srcview/index.html"> + width="100%" height="100%"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml new file mode 100644 index 0000000..7b92c15 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + backgroundColor="haloSilver" fontSize="18" locale="{c.selectedItem}"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" + gap="8"/> + </s:layout> + + <fx:Declarations> + <s:CurrencyFormatter id="cf" useCurrencySymbol="true"/> + <s:DateTimeFormatter id="df"/> + </fx:Declarations> + + <s:Label text="Select a locale to see the formatted currency and date:"/> + <s:ComboBox id="c" selectedItem="en-US..."> + <s:dataProvider> + <s:ArrayList> + <fx:String>de-DE</fx:String> + <fx:String>en-US</fx:String> + <fx:String>es-ES</fx:String> + <fx:String>fi-FI</fx:String> + <fx:String>fr-FR</fx:String> + <fx:String>it-IT</fx:String> + <fx:String>ja-JP</fx:String> + <fx:String>ko-KR</fx:String> + <fx:String>nb-NO</fx:String> + <fx:String>pt-PT</fx:String> + <fx:String>ru-RU</fx:String> + <fx:String>zh-CN</fx:String> + </s:ArrayList> + </s:dataProvider> + </s:ComboBox> + + <s:Label text="{cf.format(12.3)}"/> + <s:Label text="{df.format(new Date())}"/> + +</s:Application> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml index 0c5dfec..ac05b0c 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml @@ -20,7 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - width="100%" height="100%" viewSourceURL="srcview/index.html"> + width="100%" height="100%"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml index 729894c..f48f021 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml @@ -20,7 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - width="100%" height="100%" viewSourceURL="srcview/index.html"> + width="100%" height="100%"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml index d1e0b07..4372338 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml @@ -20,7 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - width="100%" height="100%" viewSourceURL="srcview/index.html"> + width="100%" height="100%"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml index 44ccce6..f35634e 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml @@ -20,7 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - width="100%" height="100%" viewSourceURL="srcview/index.html"> + width="100%" height="100%"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml index 8db6555..3fcd65c 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml @@ -20,7 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - width="100%" height="100%" viewSourceURL="srcview/index.html"> + width="100%" height="100%"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml index 7ebd45e..fad6eb8 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml @@ -20,7 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - width="100%" height="100%" viewSourceURL="srcview/index.html"> + width="100%" height="100%"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/Item.as ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/Item.as b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/Item.as new file mode 100644 index 0000000..f5f0a30 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/Item.as @@ -0,0 +1,62 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package +{ + [Bindable] + public class Item + { + private var _name:String; + private var _photo:String; + private var _price:String; + + public function Item() + { + } + + public function get name():String + { + return _name; + } + + public function set name(name:String):void + { + _name = name; + } + + public function get photo():String + { + return _photo; + } + + public function set photo(photo:String):void + { + _photo = photo; + } + + public function get price():String + { + return _price; + } + public function set price(price:String):void + { + _price = price; + } + + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml new file mode 100644 index 0000000..564ddf0 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml @@ -0,0 +1,102 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + xmlns:local="*" viewSourceURL="srcview/index.html"> + <fx:Script> + <![CDATA[ + import spark.events.IndexChangeEvent; + + [Bindable] + private var totalPrice:Number = 0.00; + + protected function itemIndexChangeHandler(event:IndexChangeEvent):void + { + if (ta.text.length!=0) + ta.text=ta.text+"\n"+myList.selectedItem.name + " $"+myList.selectedItem.price; + else ta.text=myList.selectedItem.name+ " $"+myList.selectedItem.price; + totalPrice += Number(myList.selectedItem.price); + } + protected function buyBtn_clickHandler(event:MouseEvent):void + { + txtResponse.text="Thank you for your order totaling: " + usdFormatter.format(totalPrice) + "\nItems will ship in 3 days."; + } + + ]]> + </fx:Script> + <fx:Declarations> + <mx:CurrencyFormatter id="usdFormatter" precision="2" currencySymbol="$" + decimalSeparatorFrom="." decimalSeparatorTo="." useNegativeSign="true" + useThousandsSeparator="true" alignSymbol="left"/> + </fx:Declarations> + <fx:Style> + @namespace "library://ns.adobe.com/flex/spark"; + #vGrp { + color: #000000; + fontFamily: "Arial"; + fontSize: "12"; + } + </fx:Style> + + <s:Panel title="List Sample" + width="100%" height="100%" + skinClass="skins.TDFPanelSkin"> + <s:VGroup id="vGrp" horizontalCenter="0" top="3" + width="80%" height="75%"> + <s:HGroup verticalAlign="middle"> + <s:Label text="Select items to add, price will be shown when added:" + verticalAlign="bottom"/> + </s:HGroup> + <s:HGroup > + <s:List id="myList" height="157" width="160" + itemRenderer="MyListItemRenderer" + change="itemIndexChangeHandler(event)"> + <s:dataProvider> + <s:ArrayCollection> + <local:Item name="Backpack" photo="assets/backpack.jpg" price="29.99"/> + <local:Item name="Boots" photo="assets/boots.jpg" price="69.99"/> + <local:Item name="Compass" photo="assets/compass.jpg" price="12.99"/> + <local:Item name="Goggles" photo="assets/goggles.jpg" price="14.99"/> + <local:Item name="Helmet" photo="assets/helmet.jpg" price="47.99"/> + </s:ArrayCollection> + </s:dataProvider> + </s:List> + <s:TextArea id="ta" width="{myList.width}" height="{myList.height}" + color="0xAE0A0A" fontWeight="bold"/> + <s:VGroup> + <mx:Spacer height="10"/> + <s:Label text="Total of Items selected: {usdFormatter.format(this.totalPrice)}"/> + <s:Button id="buyBtn" horizontalCenter="0" bottom="30" label="Buy Now!" + fontWeight="bold" + click="buyBtn_clickHandler(event)"/> + <s:Label id="txtResponse"/> + </s:VGroup> + </s:HGroup> + </s:VGroup> + <s:Label bottom="15" horizontalCenter="0" width="95%" verticalAlign="justify" color="#323232" + text="The Spark List control displays a list of data items. Its functionality is +very similar to that of the SELECT form element in HTML. The user can select one or more items from the list. +The List control automatically displays horizontal and vertical scroll bar when the list items do not fit +the size of the control."/> + </s:Panel> + + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/MyListItemRenderer.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/MyListItemRenderer.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/MyListItemRenderer.mxml new file mode 100644 index 0000000..73228d6 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/MyListItemRenderer.mxml @@ -0,0 +1,39 @@ +<!-- + +Licensed to the Apache Software Foundation (ASF) under one or more +contributor license agreements. See the NOTICE file distributed with +this work for additional information regarding copyright ownership. +The ASF licenses this file to You under the Apache License, Version 2.0 +(the "License"); you may not use this file except in compliance with +the License. You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. + +--> +<s:ItemRenderer + xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:states> + <s:State name="normal"/> + <s:State name="hovered"/> + <s:State name="selected" /> + </s:states> + + <s:layout> + <s:VerticalLayout/> + </s:layout> + + <s:HGroup verticalAlign="middle" paddingTop="0" paddingBottom="0"> + <mx:Image source="{data.photo}" width="50" height="40" alpha.hovered=".5"/> + <s:Label text="{data.name}" color.hovered="0x1313cd" color.selected="0x000000" verticalAlign="bottom"/> + </s:HGroup> + +</s:ItemRenderer> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml index 3ef1105..0c6dcdd 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml @@ -20,8 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin" - viewSourceURL="srcview/index.html"> + skinClass="TDFGradientBackgroundSkin"> <fx:Script> <![CDATA[ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml new file mode 100644 index 0000000..ebe35cf --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml @@ -0,0 +1,45 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application + xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel width="100%" height="100%" + title="Bidirectional Binding" + horizontalCenter="0" + skinClass="skins.TDFPanelSkin"> + <s:Label top="10" left="15" verticalAlign="justify" color="#323232" width="200" + text="Flex 4 interprets the @ binding syntax differently than Flex 3 in +that it will now represent a two-way binding. In this example, the text2 TextInput is bound to text1 bidirectionally, +so any change to the text2 value will also update the text1 value. "/> + + <s:VGroup horizontalCenter="15" top="40"> + <s:Label text="Enter Text:"/> + <s:TextInput id="text1" widthInChars="20" /> + <s:TextInput id="text2" color="0xFF3366" widthInChars="20" + text="@{text1.text}"/> + <s:Label id="text3" color="0x009966" + text="@{text2.text}" /> + </s:VGroup> + + </s:Panel> + +</s:Application> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml new file mode 100644 index 0000000..37b1b61 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml @@ -0,0 +1,111 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*"> + + <fx:Script> + <![CDATA[ + import mx.events.ListEvent; + + //[Bindable] + //private var contact:Contact = new Contact(); + + protected function submitBtn_clickHandler(event:MouseEvent):void + { + // Note: this sample uses bidirectional data binding, so we do not have to + // explicitly set the contact fields to save them! + if (!contacts.contains(contact)) + contacts.addItem(contact); + contact = new Contact(); + } + + protected function dg_itemClickHandler(event:ListEvent):void + { + contact = dg.selectedItem as Contact; + } + + ]]> + </fx:Script> + + <fx:Declarations> + <s:ArrayCollection id="contacts"/> + <local:Contact id="contact"/> + </fx:Declarations> + + <s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="TabBar Sample with Custom Skin and Bidirectional Binding" > + <s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}" skinClass="skins.CustomTabBarSkin" cornerRadius="4"/> + <mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23"> + <s:NavigatorContent label="Contact Info" width="100%" height="100%"> + <s:BorderContainer borderColor="0xCC0000" width="100%" height="100%" borderWeight="2" cornerRadius="3" + dropShadowVisible="true"> + <!-- This background fill could also be specified in a custom skin to apply to other containers as well --> + <s:backgroundFill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2"/> + <s:GradientEntry color="0xCC0000" alpha=".5" /> + </s:LinearGradient> + </s:backgroundFill> + <mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%"> + <mx:FormItem label="Name:"> + <s:TextInput id="nameTxt" text="@{contact.name}"/> + </mx:FormItem> + <mx:FormItem label="Address:"> + <s:TextInput id="address" text="@{contact.address}"/> + </mx:FormItem> + <mx:FormItem label="City:"> + <s:TextInput id="city" text="@{contact.city}"/> + </mx:FormItem> + <mx:FormItem label="State:"> + <s:TextInput id="state" text="@{contact.state}"/> + </mx:FormItem> + <mx:FormItem label="Zip:"> + <s:TextInput id="zip" text="@{contact.zip}" maxChars="5"/> + </mx:FormItem> + <mx:FormItem> + <s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event)"/> + </mx:FormItem> + </mx:Form> + </s:BorderContainer> + </s:NavigatorContent> + <s:NavigatorContent label="Contact List" width="100%" height="100%" > + <s:BorderContainer borderColor="0xCC0000" width="100%" height="100%" borderWeight="2" cornerRadius="3" + dropShadowVisible="true"> + <s:backgroundFill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xCC0000" /> + <s:GradientEntry color="0xE2E2E2" /> + </s:LinearGradient> + </s:backgroundFill> + <mx:DataGrid id="dg" dataProvider="{contacts}" x="5" y="5" doubleClickEnabled="true" + doubleClick="{tabs.selectedIndex=0}" itemClick="dg_itemClickHandler(event)"> + <mx:columns> + <mx:DataGridColumn headerText="Name" dataField="name"/> + <mx:DataGridColumn headerText="Address" dataField="address"/> + <mx:DataGridColumn headerText="City" dataField="city"/> + <mx:DataGridColumn headerText="State" dataField="state"/> + <mx:DataGridColumn headerText="Zip" dataField="zip"/> + </mx:columns> + </mx:DataGrid> + </s:BorderContainer> + </s:NavigatorContent> + </mx:ViewStack> + </s:Panel> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/Contact.as ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/Contact.as b/TourDeFlex/TourDeFlex3/src/spark/other/Contact.as new file mode 100644 index 0000000..2cc13c9 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/other/Contact.as @@ -0,0 +1,37 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package +{ + [Bindable] + public class Contact + { + public var name:String; + public var phone:String; + public var email:String; + public var address:String; + public var city:String; + public var state:String; + public var zip:String; + + + public function Contact() + { + } + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml new file mode 100644 index 0000000..b410197 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html"> + + <!-- To show only a certain area of a viewport, you can control it by setting the size of the viewport container + to be less than the size of the item you want to clip, and set the following parameters, where the scroll + positions specify which part of the viewport to show (from container location 0,0)--> + + <s:VGroup top="10" left="10"> + <s:Label text="This image is clipped with the viewport position set:"/> + <s:Group width="100" height="100" + horizontalScrollPosition="20" verticalScrollPosition="30" + clipAndEnableScrolling="true"> + <s:BitmapImage source="@Embed(source='assets/ApacheFlexLogo.png')"/> + </s:Group> + <s:Label text="This image is scrollable with the viewport position set:"/> + <s:Scroller hasFocusableChildren="true" tabEnabled="false"> + <s:VGroup paddingLeft="2" paddingRight="2" paddingTop="2" paddingBottom="2" + width="100" height="100" horizontalScrollPosition="20" verticalScrollPosition="30"> + <s:BitmapImage source="@Embed(source='assets/ApacheFlexLogo.png')"/> + </s:VGroup> + </s:Scroller> + </s:VGroup> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml index 896b671..8a10492 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml @@ -20,8 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin" - viewSourceURL="srcview/index.html"> + skinClass="TDFGradientBackgroundSkin"> <fx:Script> <![CDATA[ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml index 970be50..88f0d1b 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml @@ -20,8 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin" - viewSourceURL="srcview/index.html"> + skinClass="TDFGradientBackgroundSkin"> <fx:Script> <![CDATA[ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml index d849d97..b4e0a23 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml @@ -20,8 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin" - viewSourceURL="srcview/index.html"> + skinClass="TDFGradientBackgroundSkin"> <s:layout> <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml index 241074b..6cea57e 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml @@ -20,8 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin" - viewSourceURL="srcview/index.html"> + skinClass="TDFGradientBackgroundSkin"> <fx:Script> <![CDATA[ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml index a6e4822..b7887d1 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/other/FilterExample.mxml @@ -20,8 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin" - viewSourceURL="srcview/index.html" + skinClass="TDFGradientBackgroundSkin" creationComplete="init()"> <fx:Script> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml index 3228c60..d5a7112 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml @@ -20,8 +20,7 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin" - viewSourceURL="srcview/index.html"> + skinClass="TDFGradientBackgroundSkin"> <fx:Script> <![CDATA[ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml index 664e1ee..0324d14 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/other/ScrollBarsExample.mxml @@ -20,7 +20,7 @@ <!-- controls\bar\SBarSimple.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html"> + xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/assets/ApacheFlexLogo.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/assets/ApacheFlexLogo.png b/TourDeFlex/TourDeFlex3/src/spark/other/assets/ApacheFlexLogo.png new file mode 100644 index 0000000..4ff037f Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/other/assets/ApacheFlexLogo.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarButtonSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarButtonSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarButtonSkin.mxml new file mode 100644 index 0000000..f574ff4 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarButtonSkin.mxml @@ -0,0 +1,262 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> + + +<!--- +The default skin class for Spark TabBar buttons. + +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 +--> + +<s:SparkSkin + xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:fb="http://ns.adobe.com/flashbuilder/2009"; + minWidth="21" minHeight="21" alpha.disabledStates="0.5"> + + <!-- host component --> + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.ButtonBarButton")] + ]]> + </fx:Metadata> + + <fx:Script fb:purpose="styling" > + + import spark.components.TabBar; + + static private const exclusions:Array = ["labelDisplay"]; + + /** + * @private + */ + override public function get colorizeExclusions():Array {return exclusions;} + + /** + * @private + */ + override protected function initializationComplete():void + { + super.initializationComplete(); + } + + private var cornerRadius:Number = 4 + + /** + * @private + * The borderTop s:Path is just a s:Rect with the bottom edge left out. + * Given the rounded corners per the cornerRadius style, the result is + * roughly an inverted U with the specified width, height, and cornerRadius. + * + * Circular arcs are drawn with two curves per flash.display.Graphics.GraphicsUtil. + */ + private function updateBorderTop(width:Number, height:Number):void + { + var left:Number = -0.5; + var right:Number = width - 0.5; + var top:Number = 0.5; + var bottom:Number = height; + + var a:Number = cornerRadius * 0.292893218813453; + var s:Number = cornerRadius * 0.585786437626905; + + var path:String = ""; + path += "M " + left + " " + bottom; + path += " L " + left + " " + (top + cornerRadius); + path += " Q " + left + " " + (top + s) + " " + (left + a) + " " + (top + a); + path += " Q " + (left + s) + " " + top + " " + (left + cornerRadius) + " " + top; + path += " L " + (right - cornerRadius) + " " + top; + path += " Q " + (right - s) + " " + top + " " + (right - a) + " " + (top + a); + path += " Q " + right + " " + (top + s) + " " + right + " " + (top + cornerRadius); + path += " L " + right + " " + bottom; + borderTop.data = path; + } + + /** + * @private + * The cornerRadius style is specified by the TabBar, not the button itself. + * + * Rather than bind the corner radius properties of the s:Rect's in the markup + * below to hostComponent.owner.getStyle("cornerRadius"), we reset them here, + * each time a change in the value of the style is detected. Note that each + * corner radius property is explicitly initialized to the default value of + * the style; the initial value of the private cornerRadius property. + */ + private function updateCornerRadius():void + { + var cr:Number = getStyle("cornerRadius"); + if (cornerRadius != cr) + { + cornerRadius = cr; + fill.topLeftRadiusX = cornerRadius; + fill.topRightRadiusX = cornerRadius; + lowlight.radiusX = cornerRadius; + highlight.radiusX = cornerRadius; + highlightStroke.topLeftRadiusX = cornerRadius; + highlightStroke.topRightRadiusX = cornerRadius; + } + } + + /** + * @private + */ + override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void + { + updateCornerRadius(); + updateBorderTop(unscaledWidth, unscaledHeight); + super.updateDisplayList(unscaledWidth, unscaledHeight); + } + </fx:Script> + + <!-- states --> + <s:states> + <s:State name="up" /> + <s:State name="over" stateGroups="overStates" /> + <s:State name="down" stateGroups="downStates" /> + <s:State name="disabled" stateGroups="disabledStates" /> + <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" /> + <s:State name="overAndSelected" stateGroups="overStates, selectedStates" /> + <s:State name="downAndSelected" stateGroups="downStates, selectedStates" /> + <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" /> + </s:states> + + <s:Group left="-1" right="0" top="-1" bottom="-1"> + + <!-- layer 2: fill --> + <s:Rect id="fill" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4" width="69" height="21"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xFFFFFF" + color.selectedUpStates="0xFFFFFF" + color.overStates="0xCC0000" + color.downStates="0xCC0000" + alpha="0.85" + alpha.overAndSelected="1" /> + <s:GradientEntry color="0xCCCCCC" + color.selectedUpStates="0x9FA0A1" + color.over="0xCC0000" + color.overAndSelected="0xFFFFFF" + color.downStates="0xCC0000" + alpha="0.85" + alpha.overAndSelected="1" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 3: fill lowlight --> + <s:Rect id="lowlight" left="2" right="1" bottom="2" height="9" radiusX="4"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xCC0000" alpha="0.0099" /> + <s:GradientEntry color="0xCC0000" alpha="0.0627" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 4: fill highlight --> + <s:Rect id="highlight" left="2" right="1" top="2" height="9" radiusX="4"> + <s:fill> + <s:SolidColor color="0xCC0000" + alpha="0.33" + alpha.selectedUpStates="0.22" + alpha.overStates="0.22" + alpha.downStates="0.12" /> + </s:fill> + </s:Rect> + + <!-- layer 5: highlight stroke (all states except down) --> + <s:Rect id="highlightStroke" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4"> + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xCC0000" alpha.overStates="0.22" alpha.selectedUpStates="0.33" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + <!-- layer 6: highlight stroke (down state only) --> + <s:Rect left="2" top="2" bottom="2" width="1" includeIn="downStates, selectedUpStates, overAndSelected"> + <s:fill> + <s:SolidColor color="0xCC0000" alpha="0.07" /> + </s:fill> + </s:Rect> + <s:Rect right="1" top="2" bottom="2" width="1" includeIn="downStates, selectedUpStates, overAndSelected"> + <s:fill> + <s:SolidColor color="0xCC0000" alpha="0.07" /> + </s:fill> + </s:Rect> + <s:Rect left="3" top="2" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected"> + <s:fill> + <s:SolidColor color="0xCC0000" alpha="0.25" /> + </s:fill> + </s:Rect> + <s:Rect left="2" top="3" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected"> + <s:fill> + <s:SolidColor color="0xCC0000" alpha="0.09" /> + </s:fill> + </s:Rect> + + <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 --> + <s:Line id="borderBottom" left="1" right="0" bottom="1"> + <s:stroke> + <s:SolidColorStroke weight="1" + color="0xCC0000" + color.selectedStates="0x434343" + alpha="0.75" + alpha.down="0.85" + alpha.selectedStates="0.5" /> + </s:stroke> + </s:Line> + <s:Path id="borderTop" left="1" right="0" top="1" bottom="1" width="69" height="21"> + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xCC0000" + alpha="0.5625" + /> + <s:GradientEntry color="0xFFFFFF" + color.selectedUpStates="0xFFFFFF" + color.overStates="0xFFFFFF" + color.downStates="0xCC0000" + alpha="0.85" + alpha.overAndSelected="1" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Path> + </s:Group> + + <!-- layer 8: text --> + <!--- The defines the appearance of the label for the first button in the ButtonBar component. --> + <s:Group left="2" top="2"> + + <s:Label id="labelDisplay" + textAlign="center" + verticalAlign="middle" + maxDisplayedLines="1" + horizontalCenter="7" verticalCenter="1" + left="10" right="10" top="2" bottom="2" color.down="#FFFFFF"> + </s:Label> + </s:Group> + +</s:SparkSkin> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarSkin.mxml new file mode 100644 index 0000000..3621cac --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/other/skins/CustomTabBarSkin.mxml @@ -0,0 +1,97 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> + + +<!--- + +The default skin class for the Spark TabBar component. The ButtonBarButtons +created by the TabBar component use the TabBarButtonSkin class. + +@see spark.components.TabBar +@see spark.components.ButtonBarButton + +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 + +--> + +<s:Skin + xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:fb="http://ns.adobe.com/flashbuilder/2009"; + alpha.disabled="0.5"> + + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.TabBar")] + ]]> + </fx:Metadata> + + <fx:Script fb:purpose="styling" > + <![CDATA[ + + import mx.core.UIComponent; + + /** + * @private + * Push the cornerRadius style to the item renderers. + */ + override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void + { + const numElements:int = dataGroup.numElements; + const cornerRadius:int = hostComponent.getStyle("cornerRadius"); + for (var i:int = 0; i < numElements; i++) + { + var elt:UIComponent = dataGroup.getElementAt(i) as UIComponent; + if (elt) + elt.setStyle("cornerRadius", cornerRadius); + } + + super.updateDisplayList(unscaledWidth, unscaledHeight); + } + + ]]> + </fx:Script> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + </s:states> + + <!--- + @copy spark.components.SkinnableDataContainer#dataGroup + --> + <s:DataGroup id="dataGroup" width="100%" height="100%"> + <s:layout> + <s:ButtonBarHorizontalLayout gap="-1"/> + </s:layout> + <s:itemRenderer> + <fx:Component> + <s:ButtonBarButton skinClass="skins.CustomTabBarButtonSkin" /> + </fx:Component> + </s:itemRenderer> + </s:DataGroup> + +</s:Skin> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml new file mode 100644 index 0000000..3c1420e --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/ButtonWithIconExample.mxml @@ -0,0 +1,49 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + viewSourceURL="srcview/index.html"> + + <!-- Custom skins used for this example are shown in the source tabs for reference --> + <s:Panel width="100%" height="100%" title="Button Skinned With Icon" + skinClass="skins.TDFPanelSkin"> + <s:HGroup width="100%" left="35" top="15"> + <s:VGroup width="50%"> + <s:HGroup verticalAlign="middle"> + <s:Label text="Button with Icon Only Skin"/> + <s:Button skinClass="skins.CloseButtonSkin" width="16" height="16"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Button with Icon And Drop Shadow Skin"/> + <s:Button skinClass="skins.AddButtonSkin" width="20" height="20"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Rounded Corner Button with Icon And Text Skin"/> + <s:Button skinClass="skins.IconTextButtonSkin" label="Add" width="53" /> + </s:HGroup> + </s:VGroup> + <s:Label width="50%" text="Buttons can be skinned to contain an icon and to include or not include the text label. Check the source for the 3 skin classes that handle the different combinations." + verticalAlign="middle"/> + + </s:HGroup> + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication1Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication1Example.mxml new file mode 100644 index 0000000..3a5ee03 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication1Example.mxml @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="skins.GradientBackgroundAppSkin" + backgroundColor="0x000000" viewSourceURL="srcview/index.html"> + + <s:VGroup horizontalCenter="0" verticalCenter="0"> + <s:Label text="Wood Sales Int'l" fontSize="42" /> + <s:BorderContainer borderColor="0x000000" borderWeight="3" cornerRadius="7" horizontalCenter="0" verticalCenter="0"> + <s:VGroup> + <mx:Form fontSize="16"> + <mx:FormItem label="Userid:"> + <s:TextInput id="userid"/> + </mx:FormItem> + <mx:FormItem label="Password:"> + <s:TextInput id="pw"/> + </mx:FormItem> + <mx:FormItem> + <s:Button label="Login"/> + </mx:FormItem> + </mx:Form> + </s:VGroup> + </s:BorderContainer> + </s:VGroup> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication2Example.mxml new file mode 100644 index 0000000..6ddc6ef --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication2Example.mxml @@ -0,0 +1,43 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="skins.BackgroundImageAppSkin" viewSourceURL="srcview/index.html"> + + <s:VGroup horizontalCenter="0" verticalCenter="0"> + <s:Label text="Wood Sales Int'l" fontSize="42" /> + <s:BorderContainer borderColor="0x000000" borderWeight="3" cornerRadius="7" horizontalCenter="0" verticalCenter="0"> + <s:VGroup> + <mx:Form fontSize="16"> + <mx:FormItem label="Userid:"> + <s:TextInput id="userid"/> + </mx:FormItem> + <mx:FormItem label="Password:"> + <s:TextInput id="pw"/> + </mx:FormItem> + <mx:FormItem> + <s:Button label="Login"/> + </mx:FormItem> + </mx:Form> + </s:VGroup> + </s:BorderContainer> + </s:VGroup> +</s:Application> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication3Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication3Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication3Example.mxml new file mode 100644 index 0000000..30b92a7 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningApplication3Example.mxml @@ -0,0 +1,48 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="skins.CustomControlBarAppSkin" + controlBarVisible="true" viewSourceURL="srcview/index.html"> + <s:controlBarContent> + <s:TextInput id="textInput"/> + <s:Button id="searchBtn" label="Search"/> + </s:controlBarContent> + + <s:VGroup horizontalCenter="0" verticalCenter="0"> + <s:Label text="Wood Sales Int'l" fontSize="42" /> + <s:BorderContainer borderColor="0x000000" borderWeight="3" cornerRadius="7" horizontalCenter="0" verticalCenter="0"> + <s:VGroup> + <mx:Form fontSize="16"> + <mx:FormItem label="Userid:"> + <s:TextInput id="userid"/> + </mx:FormItem> + <mx:FormItem label="Password:"> + <s:TextInput id="pw"/> + </mx:FormItem> + <mx:FormItem> + <s:Button label="Login"/> + </mx:FormItem> + </mx:Form> + </s:VGroup> + </s:BorderContainer> + </s:VGroup> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml new file mode 100644 index 0000000..fe122fe --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/SkinningContainerExample.mxml @@ -0,0 +1,49 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html"> + + <s:Panel id="myPanel" title="SkinnableContainer sample" + width="100%" height="100%" skinClass="skins.TDFPanelSkin"> + + <!-- Set a custom skin for the container to show a gradient background and border --> + <s:SkinnableContainer skinClass="skins.CustomSkinnableContainerSkin" + width="50%" height="50%" + horizontalCenter="0" + verticalCenter="0"> + + <s:VGroup horizontalCenter="0" verticalCenter="0"> + <mx:Form fontSize="16"> + <mx:FormItem label="Userid:"> + <s:TextInput id="userid"/> + </mx:FormItem> + <mx:FormItem label="Password:"> + <s:TextInput id="pw"/> + </mx:FormItem> + <mx:FormItem> + <s:Button label="Login"/> + </mx:FormItem> + </mx:Form> + </s:VGroup> + </s:SkinnableContainer> + + </s:Panel> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/arrow_icon_sm.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/arrow_icon_sm.png b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/arrow_icon_sm.png new file mode 100644 index 0000000..33debc8 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/arrow_icon_sm.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_add.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_add.png b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_add.png new file mode 100644 index 0000000..4382d33 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_add.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_check.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_check.png b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_check.png new file mode 100644 index 0000000..1c122a4 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_check.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_close16.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_close16.png b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_close16.png new file mode 100644 index 0000000..e972065 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_close16.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_plus.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_plus.png b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_plus.png new file mode 100644 index 0000000..b4ecdba Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_plus.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_remove.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_remove.png b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_remove.png new file mode 100644 index 0000000..24089c5 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/icon_remove.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/wood-bg.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/wood-bg.png b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/wood-bg.png new file mode 100644 index 0000000..6b9403f Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/skinning/assets/wood-bg.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/AddButtonSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/AddButtonSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/AddButtonSkin.mxml new file mode 100644 index 0000000..082bb23 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/AddButtonSkin.mxml @@ -0,0 +1,183 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<!-- +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 +--> +<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" + minWidth="21" minHeight="21" + alpha.disabled="0.5"> + + <!-- host component --> + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.Button")] + ]]> + </fx:Metadata> + + <fx:Script> + <![CDATA[ + /* Define the skin elements that should not be colorized. + + For button, the graphics are colorized but the label is not. */ + + static private const exclusions:Array = ["labelDisplay"]; + + /** + * @copy spark.skins.SparkSkin#colorizeExclusions + */ + override public function get colorizeExclusions():Array {return exclusions;} + + ]]> + + </fx:Script> + + <!-- states --> + <s:states> + <s:State name="up" /> + <s:State name="over" /> + <s:State name="down" /> + <s:State name="disabled" /> + </s:states> + + <!-- layer 1: shadow --> + <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0x000000" + color.down="0xFFFFFF" + alpha="0.01" + alpha.down="0" /> + <s:GradientEntry color="0x000000" + color.down="0xFFFFFF" + alpha="0.07" + alpha.down="0.5" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + + <!-- layer 2: fill --> + <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xFFFFFF" + color.over="0xBBBDBD" + color.down="0xAAAAAA" + alpha="0.85" /> + <s:GradientEntry color="0xD8D8D8" + color.over="0x9FA0A1" + color.down="0x929496" + alpha="0.85" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + + <!-- layer 3: fill lowlight --> + <s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2"> + + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0x000000" alpha="0.0099" /> + <s:GradientEntry color="0x000000" alpha="0.0627" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 4: fill highlight --> + <s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2"> + <s:fill> + <s:SolidColor color="0xFFFFFF" + alpha="0.33" + alpha.over="0.22" + alpha.down="0.12" /> + </s:fill> + </s:Rect> + + + + <!-- layer 5: highlight stroke (all states except down) --> + <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down"> + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" /> + <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + + <!-- layer 6: highlight stroke (down state only) --> + <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.07" /> + </s:fill> + </s:Rect> + + <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.07" /> + </s:fill> + </s:Rect> + + <s:Rect left="2" top="1" right="2" height="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.25" /> + </s:fill> + </s:Rect> + + <s:Rect left="1" top="2" right="1" height="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.09" /> + </s:fill> + </s:Rect> + + + <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 --> + <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2"> + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0x000000" + alpha="0.5625" + alpha.down="0.6375" /> + <s:GradientEntry color="0x000000" + alpha="0.75" + alpha.down="0.85" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + + <!-- icon symbol with drop shadow --> + <s:Group id="symbol" left="3" top="3" right="3" bottom="3"> + <s:filters> + <s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" /> + </s:filters> + <s:BitmapImage source="@Embed('../assets/icon_check.png')"/> + </s:Group> + + +</s:SparkSkin> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/BackgroundImageAppSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/BackgroundImageAppSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/BackgroundImageAppSkin.mxml new file mode 100644 index 0000000..cf478fb --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/BackgroundImageAppSkin.mxml @@ -0,0 +1,41 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:mx="library://ns.adobe.com/flex/halo" + xmlns:s="library://ns.adobe.com/flex/spark"> + + <fx:Metadata> + [HostComponent("spark.components.Application")] + </fx:Metadata> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + </s:states> + + <!-- This image fill also specifies padding around it --> + <s:Rect id="backgroundRect" left="100" right="100" top="20" bottom="20"> + <s:fill> + <s:BitmapFill source="@Embed('../assets/wood-bg.png')"/> + </s:fill> + </s:Rect> + + <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" /> +</s:SparkSkin> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CloseButtonSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CloseButtonSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CloseButtonSkin.mxml new file mode 100644 index 0000000..d481c66 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CloseButtonSkin.mxml @@ -0,0 +1,184 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<!-- +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 +--> +<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" + minWidth="21" minHeight="21" + alpha.disabled="0.5"> + + <!-- host component --> + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.Button")] + ]]> + </fx:Metadata> + + <fx:Script> + <![CDATA[ + /* Define the skin elements that should not be colorized. + For button, the graphics are colorized but the label is not. */ + static private const exclusions:Array = ["labelDisplay"]; + + + /** + * @copy spark.skins.SparkSkin#colorizeExclusions + */ + override public function get colorizeExclusions():Array {return exclusions;} + + ]]> + + </fx:Script> + + <!-- states --> + <s:states> + <s:State name="up" /> + <s:State name="over" /> + <s:State name="down" /> + <s:State name="disabled" /> + </s:states> + + <!-- layer 1: shadow --> + <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0x000000" + color.down="0xFFFFFF" + alpha="0.01" + alpha.down="0" /> + <s:GradientEntry color="0x000000" + color.down="0xFFFFFF" + alpha="0.07" + alpha.down="0.5" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 2: fill --> + <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xFFFFFF" + color.over="0xBBBDBD" + color.down="0xAAAAAA" + alpha="0.85" /> + <s:GradientEntry color="0xD8D8D8" + color.over="0x9FA0A1" + color.down="0x929496" + alpha="0.85" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 3: fill lowlight --> + <s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0x000000" alpha="0.0099" /> + <s:GradientEntry color="0x000000" alpha="0.0627" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 4: fill highlight --> + <s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2"> + <s:fill> + <s:SolidColor color="0xFFFFFF" + alpha="0.33" + alpha.over="0.22" + alpha.down="0.12" /> + </s:fill> + </s:Rect> + + + <!-- layer 5: highlight stroke (all states except down) --> + <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down"> + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" /> + <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + + <!-- layer 6: highlight stroke (down state only) --> + <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.07" /> + </s:fill> + </s:Rect> + + <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.07" /> + </s:fill> + </s:Rect> + + <s:Rect left="2" top="1" right="2" height="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.25" /> + </s:fill> + </s:Rect> + + <s:Rect left="1" top="2" right="1" height="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.09" /> + </s:fill> + </s:Rect> + + <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 --> + <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2"> + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0x000000" + alpha="0.5625" + alpha.down="0.6375" /> + <s:GradientEntry color="0x000000" + alpha="0.75" + alpha.down="0.85" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + <!-- layer 8: text --> + <!--- + @copy spark.components.supportClasses.ButtonBase#labelDisplay + --> + <s:Rect left="0" top="0" right="0" bottom="0" > + <s:fill> + <s:BitmapFill source="@Embed('../assets/icon_close16.png')"/> + </s:fill> + </s:Rect> + + <s:Label id="labelDisplay" + textAlign="center" + verticalAlign="middle" + maxDisplayedLines="1" + horizontalCenter="0" verticalCenter="1" + left="10" right="10" top="2" bottom="2"> + </s:Label> +</s:SparkSkin> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomControlBarAppSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomControlBarAppSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomControlBarAppSkin.mxml new file mode 100644 index 0000000..0540a95 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomControlBarAppSkin.mxml @@ -0,0 +1,106 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> + + +<!--- The default skin class for the Spark Application component. + +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 +--> +<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" + alpha.disabled="0.5" > + + <fx:Metadata> + <![CDATA[ + /** + * A strongly typed property that references the component to which this skin is applied. + */ + [HostComponent("spark.components.Application")] + ]]> + </fx:Metadata> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + <s:State name="normalWithControlBar" /> + <s:State name="disabledWithControlBar" /> + </s:states> + + <!-- fill --> + <!--- + A rectangle with a solid color fill that forms the background of the application. + The color of the fill is set to the Application's backgroundColor property. + --> + <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0" > + <s:fill> + <s:SolidColor color="0xFFFFFF" alpha="0" /> + </s:fill> + </s:Rect> + + <s:Group left="0" right="0" top="0" bottom="0"> + <s:layout> + <s:VerticalLayout gap="0" horizontalAlign="justify" /> + </s:layout> + + <!--- + Application Control Bar + --> + <s:Group id="topGroup" minWidth="0" minHeight="0" + includeIn="normalWithControlBar, disabledWithControlBar"> + + <!-- layer 0: control bar background --> + <s:Rect left="0" right="0" bottom="0" top="1" > + <s:fill> + <!-- ADDED CUSTOM GRADIENT FILL ON THE CONTROL BAR FOR SAMPLE --> + <s:LinearGradient rotation="90"> + <s:entries> + <s:GradientEntry color="0x000000" ratio="0.00" alpha="0.8"/> + <s:GradientEntry color="0xCCCCCC" ratio="0.5" alpha="0.8"/> + </s:entries> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 1: control bar divider line --> + <s:Rect left="0" right="0" bottom="0" height="1" > + <s:fill> + <s:SolidColor color="0xD1E0F2" /> + </s:fill> + </s:Rect> + + <!-- layer 2: control bar --> + <!-- Modified the group constraints to set the content 5 pixels from the right for this sample --> + <s:Group id="controlBarGroup" right="5"> + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" /> + </s:layout> + </s:Group> + </s:Group> + + <!--- + @copy spark.components.SkinnableContainer#contentGroup + --> + <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" /> + + </s:Group> + +</s:Skin> \ No newline at end of file
