flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jmcl...@apache.org
Subject [3/6] Added more spark examples
Date Sun, 10 Aug 2014 11:20:38 GMT
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


Mime
View raw message