You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by jm...@apache.org on 2014/08/10 13:20:38 UTC
[3/6] Added more spark examples
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