You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by bi...@apache.org on 2014/08/23 10:48:22 UTC

svn commit: r1619987 [16/22] - in /flex/site/trunk/content/tourdeflex: ./ mx/ mx/charts/ mx/containers/ mx/containers/assets/ mx/controls/ mx/controls/assets/ mx/core/ mx/effects/ mx/effects/assets/ mx/formatters/ mx/printing/ mx/states/ mx/validators/...

Added: flex/site/trunk/content/tourdeflex/spark/i18n/SparkSortandSortFieldExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/i18n/SparkSortandSortFieldExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/i18n/SparkSortandSortFieldExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/i18n/SparkSortandSortFieldExample.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,122 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+			   xmlns:s="library://ns.adobe.com/flex/spark"
+			   xmlns:mx="library://ns.adobe.com/flex/mx"
+			   width="100%" height="100%">
+	<fx:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		s|Label {
+			color: #FFFFFF;
+			font-weight: bold;
+		}
+		#titleL {
+			font-size: 20;
+		}
+		s|ComboBox {
+			alternating-item-colors: #424242;
+		}
+		
+		s|Form {
+			background-color: #424242;
+		}
+	</fx:Style>
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			private var _locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN']);
+			
+			private function sortInOrder(order:int):void {
+				switch (order)
+				{
+					case 1:
+						mySort.fields = [firstField,lastField,ageField];
+						break;
+					case 2:
+						mySort.fields = [lastField,firstField,ageField];
+						break;
+					case 3:
+						mySort.fields = [ageField,firstField,lastField];
+						break;
+					case 4:
+						mySort.fields = [firstField,ageField,lastField];
+						break;
+				}
+				
+				employeeArrColl.sort = mySort;
+				employeeArrColl.refresh();
+			}
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		<s:Sort id="mySort" locale="{localeCB.selectedItem}"/>
+		
+		<s:SortField id="firstField" name="first"/>
+		<s:SortField id="lastField" name="last"/>
+		<s:SortField id="ageField" name="age"/>
+		
+		<s:ArrayCollection id="employeeArrColl">
+			<fx:Object first="Anders" last="Öhlund" age="36"/>
+			<fx:Object first="Eileen" last="Oehland" age="25"/>
+			<fx:Object first="Anders" last="Zorn" age="36"/>
+			<fx:Object first="Steve" last="Aaron" age="40"/>
+			<fx:Object first="Toren" last="Ohlin" age="20"/>
+			<fx:Object first="Toren" last="Aaron" age="36"/>
+			<fx:Object first="Torolf" last="Aaron" age="40"/>
+		</s:ArrayCollection>
+	</fx:Declarations>
+	<s:Scroller id="scroller" width="100%" height="100%">
+		<s:Group>
+			<s:Form>
+				<s:Label id="titleL" text="Spark Sort and SortField"/>
+				<s:Label text="Select a locale to see the strings sorting result:"/>
+				<s:Spacer height="15"/>
+				
+				<s:FormItem label="Locale: ">
+					<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
+				</s:FormItem>
+				<s:Label text="     ==========================================================================="/>
+				<s:FormItem label="Sorting Priority:" toolTip="Click priority radio button to sort multiple columns">
+					<s:RadioButton id="flaRB" groupName="priority" label="first name > last name > age" click="sortInOrder(1)"/>
+					<s:RadioButton id="lfaRB" groupName="priority" label="last name > first name > age" click="sortInOrder(2)"/>
+					<s:RadioButton id="alfRB" groupName="priority" label="age > first name > last name" click="sortInOrder(3)"/>
+					<s:RadioButton id="falRB" groupName="priority" label="first name > age > last name" click="sortInOrder(4)"/>
+				</s:FormItem>
+				<s:FormItem label="Employee Table:" toolTip="Click data grid column header to sort single one column">
+					<s:DataGrid id="dg" dataProvider="{employeeArrColl}" width="100%">
+						<s:columns>
+							<s:ArrayList>
+								<s:GridColumn dataField="first" headerText="First Name"/>
+								<s:GridColumn dataField="last" headerText="Last Name"/>
+								<s:GridColumn dataField="age" headerText="Age"/>
+							</s:ArrayList>
+						</s:columns>
+					</s:DataGrid>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+	
+</s:Application>

Propchange: flex/site/trunk/content/tourdeflex/spark/i18n/SparkSortandSortFieldExample.mxml
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/i18n/SparkSortandSortFieldExample.swf
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/i18n/SparkSortandSortFieldExample.swf?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/i18n/SparkSortandSortFieldExample.swf
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Added: flex/site/trunk/content/tourdeflex/spark/i18n/SparkStringToolsExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/i18n/SparkStringToolsExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/i18n/SparkStringToolsExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/i18n/SparkStringToolsExample.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,124 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+			   xmlns:s="library://ns.adobe.com/flex/spark"
+			   xmlns:mx="library://ns.adobe.com/flex/mx"
+			   width="100%" height="100%">
+	<fx:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		s|Label {
+			color: #FFFFFF;
+			font-weight: bold;
+		}
+		#titleL {
+			font-size: 20;
+		}
+		s|ComboBox {
+			alternating-item-colors: #424242;
+		}
+		
+		s|Form {
+			background-color: #424242;
+		}
+		
+		s|List {
+			alternating-item-colors: #424242;
+		}
+	</fx:Style>
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			private var _locales:ArrayCollection = new ArrayCollection(['en-US','zh-CN','ja-JP','de-DE','fr-FR','ru-RU','ar-SA']);
+			[Bindable]
+			private var _initStr:String = 'Turkish I: iI & ıİ; Greek: ΣςσβΰΐΣ; German: ß';
+			protected function localesCB_changeHandler():void
+			{
+				st.setStyle('locale',localesCB.selectedItem);
+				initStrs(localesCB.selectedItem);
+				converString();
+			}
+			
+			private function initStrs(locale:String):void 
+			{
+				switch(locale)
+				{
+					case 'en-US':
+						_initStr = 'Turkish I: iI & ıİ; Greek: ΣςσβΰΐΣ; German: ß';
+						break;
+					case 'zh-CN':
+						_initStr = '这是一个中文测试语句';
+						break;
+					case 'ja-JP':
+						_initStr = '現代の日本語では、主に以下の3種類の文字体系が用いられる。';
+						break;
+					case 'de-DE':
+						_initStr = 'Wie heißen Sie?';
+						break;
+					case 'fr-FR':
+						_initStr = 'Le français parlé aujourd’hui tire son nom de cet ancien franceis';
+						break;
+					case 'ru-RU':
+						_initStr = 'большой';
+						break;
+					case 'ar-SA':
+						_initStr = 'جامعة الدول العربية';
+						break;
+				}
+			}
+			private function converString():void
+			{
+				upperL.text = st.toUpperCase(inputTI.text);
+				lowerL.text = st.toLowerCase(inputTI.text);
+			}  
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		<s:StringTools id="st"/>
+	</fx:Declarations>
+	<s:layout>
+		<s:VerticalLayout/>
+	</s:layout>
+	<s:Scroller id="scroller" width="100%" height="100%">
+		<s:Group>
+			<s:Form>
+				<s:Label id="titleL" text="Spark StringTools"/>
+				<s:Label text="Enter strings and find the case conversion result"/>
+				<s:Spacer height="15"/>
+				<s:FormItem label="Locales:">
+					<s:ComboBox id="localesCB" dataProvider="{_locales}" selectedIndex="0" change="localesCB_changeHandler()"/>
+				</s:FormItem>
+				<s:FormItem label="Please enter a string:">
+					<s:TextInput id="inputTI" width="380" text="{_initStr}" change="converString()"/>
+				</s:FormItem>
+				<s:FormItem label="ToLowerCase:">
+					<s:Label id="lowerL"/>
+				</s:FormItem>
+				<s:FormItem label="ToUpperCase:">
+					<s:Label id="upperL"/>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+</s:Application>
+

Propchange: flex/site/trunk/content/tourdeflex/spark/i18n/SparkStringToolsExample.mxml
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/i18n/SparkStringToolsExample.swf
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/i18n/SparkStringToolsExample.swf?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/i18n/SparkStringToolsExample.swf
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/Item.as
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/Item.as?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/itemRenderers/Item.as (added)
+++ flex/site/trunk/content/tourdeflex/spark/itemRenderers/Item.as Sat Aug 23 08:47:51 2014
@@ -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

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/Item.as
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer1Example.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer1Example.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer1Example.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer1Example.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx" 
+			   initialize="init()">
+	
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.XMLListCollection;
+			
+			import skins.TDFPanelSkin;
+			
+			[Bindable]
+			private var employees:XMLListCollection;
+			
+			[Embed(source="data/list.xml", mimeType="application/octet-stream")]
+			private var XMLData:Class;
+			
+			private function init():void
+			{
+				var data:XML = XML(new XMLData());
+				
+				employees = new XMLListCollection(data.employee);
+			}			
+		]]>
+	</fx:Script>
+
+	<s:Panel width="100%" height="100%" title="Custom Item Renderer with Animation" skinClass="skins.TDFPanelSkin">
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="100" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:DataGroup dataProvider="{employees}" width="300" itemRenderer="renderers.ImageRenderer1">
+			<s:layout>
+				<s:TileLayout horizontalGap="0" verticalGap="0"/>
+			</s:layout>
+		</s:DataGroup>
+		<s:Label color="0x323232" width="200" text="The item renderer on this DataGroup uses the Spark Animate to scale the image
+when hovered over each item. See the ImageRenderer1.mxml source for more information."/>
+	</s:Panel>
+	
+</s:Application>

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer1Example.mxml
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer1Example.swf
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer1Example.swf?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer1Example.swf
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer2Example.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer2Example.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer2Example.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer2Example.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,69 @@
+<?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" 
+			   initialize="init()">
+	
+	<fx:Style>
+
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/halo";
+		
+		s|Application {
+			font-size: 14;
+		}
+		
+	</fx:Style>
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.XMLListCollection;
+			
+			[Bindable]
+			private var employees:XMLListCollection;
+			
+			[Embed(source="data/list.xml", mimeType="application/octet-stream")]
+			private var XMLData:Class;
+			
+			private function init():void
+			{
+				var data:XML = XML(new XMLData());
+				
+				employees = new XMLListCollection(data.employee);
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel width="100%" height="100%" title="Custom Item Renderer with Animation" skinClass="skins.TDFPanelSkin">
+		<s:layout>
+			<s:HorizontalLayout paddingTop="2" paddingLeft="50" paddingRight="8"/>
+		</s:layout>
+		
+		<s:DataGroup dataProvider="{employees}" width="440" itemRenderer="renderers.ImageRenderer2" horizontalCenter="0" verticalCenter="0">
+			<s:layout>
+				<s:TileLayout />
+			</s:layout>
+		</s:DataGroup>
+		<s:Label color="0x323232" width="200" text="The item renderer on this DataGroup uses effects to provide a
+Spark 3D rotation effect when hovered over each item. See the ImageRenderer2.mxml source for more information. This sample also 
+shows the use of a special font for the text."/>
+	</s:Panel>
+</s:Application>

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer2Example.mxml
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer2Example.swf
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer2Example.swf?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/ItemRenderer2Example.swf
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/ListItemRendererExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/ListItemRendererExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/itemRenderers/ListItemRendererExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/itemRenderers/ListItemRendererExample.mxml Sat Aug 23 08:47:51 2014
@@ -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/ApacheFlexIcon.png" price="29.99"/>
+							<local:Item name="Boots" photo="assets/ApacheFlexIcon.png" price="69.99"/>
+							<local:Item name="Compass" photo="assets/ApacheFlexIcon.png" price="12.99"/>
+							<local:Item name="Goggles" photo="assets/ApacheFlexIcon.png" price="14.99"/>
+							<local:Item name="Helmet" photo="assets/ApacheFlexIcon.png" 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>

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/ListItemRendererExample.mxml
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/ListItemRendererExample.swf
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/ListItemRendererExample.swf?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/ListItemRendererExample.swf
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/MyListItemRenderer.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/MyListItemRenderer.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/itemRenderers/MyListItemRenderer.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/itemRenderers/MyListItemRenderer.mxml Sat Aug 23 08:47:51 2014
@@ -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

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/MyListItemRenderer.mxml
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/1.jpg
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/1.jpg?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/1.jpg
------------------------------------------------------------------------------
    svn:mime-type = image/jpeg

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/2.jpg
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/2.jpg?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/2.jpg
------------------------------------------------------------------------------
    svn:mime-type = image/jpeg

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/3.jpg
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/3.jpg?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/3.jpg
------------------------------------------------------------------------------
    svn:mime-type = image/jpeg

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/4.jpg
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/4.jpg?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/4.jpg
------------------------------------------------------------------------------
    svn:mime-type = image/jpeg

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/5.jpg
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/5.jpg?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/5.jpg
------------------------------------------------------------------------------
    svn:mime-type = image/jpeg

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/6.jpg
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/6.jpg?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/6.jpg
------------------------------------------------------------------------------
    svn:mime-type = image/jpeg

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/7.jpg
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/7.jpg?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/7.jpg
------------------------------------------------------------------------------
    svn:mime-type = image/jpeg

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/8.jpg
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/8.jpg?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/8.jpg
------------------------------------------------------------------------------
    svn:mime-type = image/jpeg

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/9.jpg
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/9.jpg?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/9.jpg
------------------------------------------------------------------------------
    svn:mime-type = image/jpeg

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/ApacheFlexIcon.png
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/ApacheFlexIcon.png?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/assets/ApacheFlexIcon.png
------------------------------------------------------------------------------
    svn:mime-type = image/png

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/data/list.xml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/data/list.xml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/itemRenderers/data/list.xml (added)
+++ flex/site/trunk/content/tourdeflex/spark/itemRenderers/data/list.xml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,96 @@
+<?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.
+
+-->
+<list>
+    <employee employeeId="1">
+    	<firstName>Michael</firstName>
+    	<lastName>Scott</lastName>
+    	<image>assets/2.jpg</image>
+    </employee>
+    <employee employeeId="2">
+    	<firstName>Pam</firstName>
+    	<lastName>Beesly</lastName>
+    	<image>assets/3.jpg</image>
+    </employee>
+    <employee employeeId="3">
+    	<firstName>Andy</firstName>
+    	<lastName>Bernard</lastName>
+    	<image>assets/4.jpg</image>
+    </employee>
+    <employee employeeId="3">
+    	<firstName>Creed</firstName>
+    	<lastName>Bratton</lastName>
+    	<image>assets/5.jpg</image>
+    </employee>
+    <employee employeeId="3">
+    	<firstName>Toby</firstName>
+    	<lastName>Flenderson</lastName>
+    	<image>assets/6.jpg</image>
+    </employee>
+    <employee employeeId="3">
+    	<firstName>Jim</firstName>
+    	<lastName>Halpert</lastName>
+    	<image>assets/7.jpg</image>
+    </employee>
+    <employee employeeId="3">
+    	<firstName>Ryan</firstName>
+    	<lastName>Howard</lastName>
+    	<image>assets/8.jpg</image>
+    </employee>
+    <employee employeeId="3">
+    	<firstName>Stanley</firstName>
+    	<lastName>Hudson</lastName>
+    	<image>assets/9.jpg</image>
+    </employee>
+    <employee employeeId="3">
+    	<firstName>Kelly</firstName>
+    	<lastName>Kapoor</lastName>
+    	<image>assets/1.jpg</image>
+    </employee>
+    <employee employeeId="3">
+    	<firstName>Phyllis</firstName>
+    	<lastName>Lapin</lastName>
+    	<image>assets/2.jpg</image>
+    </employee>
+    <employee employeeId="3">
+    	<firstName>Kevin</firstName>
+    	<lastName>Malone</lastName>
+    	<image>assets/3.jpg</image>
+    </employee>
+    <employee employeeId="3">
+    	<firstName>Angela</firstName>
+    	<lastName>Martin</lastName>
+    	<image>assets/4.jpg</image>
+    </employee>
+    <employee employeeId="3">
+    	<firstName>Oscar</firstName>
+    	<lastName>Martinez</lastName>
+    	<image>assets/5.jpg</image>
+    </employee>
+    <employee employeeId="3">
+    	<firstName>Meredith</firstName>
+    	<lastName>Palmer</lastName>
+    	<image>assets/6.jpg</image>
+    </employee>
+    <employee employeeId="3">
+    	<firstName>Dwight</firstName>
+    	<lastName>Schrute</lastName>
+    	<image>assets/7.jpg</image>
+    </employee>
+</list>
\ No newline at end of file

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/data/list.xml
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/renderers/ImageRenderer1.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/renderers/ImageRenderer1.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/itemRenderers/renderers/ImageRenderer1.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/itemRenderers/renderers/ImageRenderer1.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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" 
+				autoDrawBackground="false" 
+				depth="0" depth.hovered="1">
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="hovered" />
+	</s:states>
+
+	<s:postLayoutTransformOffsets>
+		<mx:TransformOffsets id="offsets" x.hovered="-40" y.hovered="-40" scaleX.hovered="2" scaleY.hovered="2" />
+	</s:postLayoutTransformOffsets>	
+	
+	<s:transitions>
+		<mx:Transition fromState="normal" toState="hovered" autoReverse="true">
+			<s:Animate target="{offsets}" duration="200">
+				<s:SimpleMotionPath property="scaleX" />
+				<s:SimpleMotionPath property="scaleY" />
+				<s:SimpleMotionPath property="x" />
+				<s:SimpleMotionPath property="y" />
+			</s:Animate>
+		</mx:Transition>
+		<mx:Transition fromState="hovered" toState="normal" autoReverse="true">
+			<s:Animate target="{offsets}" duration="200">
+				<s:SimpleMotionPath property="scaleX" />
+				<s:SimpleMotionPath property="scaleY" />
+				<s:SimpleMotionPath property="x" />
+				<s:SimpleMotionPath property="y" />
+			</s:Animate>
+		</mx:Transition>
+	</s:transitions>	
+	
+	<mx:Image id="image" source="{data.image}" width="60" height="60" horizontalCenter="0" verticalCenter="0"/>
+
+</s:ItemRenderer>
\ No newline at end of file

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/renderers/ImageRenderer1.mxml
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/renderers/ImageRenderer2.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/renderers/ImageRenderer2.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/itemRenderers/renderers/ImageRenderer2.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/itemRenderers/renderers/ImageRenderer2.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,54 @@
+<?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: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" 
+				autoDrawBackground="false" 
+				depth="0" depth.hovered="1">
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="hovered" />
+	</s:states>
+
+	<s:transitions>
+		<s:Transition fromState="normal" toState="hovered" autoReverse="true">
+			<s:Parallel>
+				<s:Rotate3D target="{image}" angleYFrom="0" angleYTo="360" autoCenterProjection="true" autoCenterTransform="true" duration="400"/>
+				<s:Fade target="{image}" startDelay="400" duration="200"/>
+				<s:Fade target="{group}" startDelay="400" duration="200"/>
+			</s:Parallel>
+		</s:Transition>
+	</s:transitions>
+	
+	<s:Rect id="rect" left="0" right="0" top="0" bottom="0">
+		<s:fill>
+			<s:SolidColor color="black" alpha="0.7"/>
+		</s:fill>
+	</s:Rect>
+
+	<s:Group id="group" left="0" right="0" top="0" bottom="0" visible.normal="false">
+		<s:Label text="{data.firstName}" verticalCenter="-10" horizontalCenter="0" color="white"/> 
+		<s:Label text="{data.lastName}" verticalCenter="10" horizontalCenter="0" color="white"/> 
+	</s:Group>
+
+	<mx:Image id="image" source="{data.image}" width="70" height="70" horizontalCenter="0" verticalCenter="0" visible.hovered="false"/>
+	
+</s:ItemRenderer>
\ No newline at end of file

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/renderers/ImageRenderer2.mxml
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/itemRenderers/skins/TDFPanelSkin.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/itemRenderers/skins/TDFPanelSkin.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/itemRenderers/skins/TDFPanelSkin.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/itemRenderers/skins/TDFPanelSkin.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+
+<!--- Custom Spark Panel Skin created for Tour de Flex.  
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
+			 blendMode.disabled="layer">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Panel")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script>
+		/* Define the skin elements that should not be colorized. 
+		For panel, border and title backround are skinned, but the content area and title text are not. */
+		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
+		
+		/** 
+		 * @copy spark.skins.SparkSkin#colorizeExclusions
+		 */     
+		override public function get colorizeExclusions():Array {return exclusions;}
+		
+		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+		static private const contentFill:Array = [];
+		
+		/**
+		 * @inheritDoc
+		 */
+		override public function get contentItems():Array {return contentFill};
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+		<s:State name="normalWithControlBar" />
+		<s:State name="disabledWithControlBar" />
+	</s:states>
+	
+	<!-- drop shadow -->
+	<s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
+							 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
+	
+	<!-- layer 1: border -->
+	<s:Rect left="0" right="0" top="0" bottom="0">
+		<s:stroke>
+			<s:SolidColorStroke color="0" alpha="0.50" weight="1" />
+		</s:stroke>
+	</s:Rect>
+	
+	
+	<!-- layer 2: background fill -->
+	<s:Rect left="0" right="0" bottom="0" height="15">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0xE2E2E2" />
+				<s:GradientEntry color="0x000000" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 3: contents -->
+	<!--- contains the vertical stack of titlebar content and controlbar -->
+	<s:Group left="1" right="1" top="1" bottom="1" >
+		<s:layout>
+			<s:VerticalLayout gap="0" horizontalAlign="justify" />
+		</s:layout>
+		
+		<s:Group id="topGroup" >
+			<!-- layer 0: title bar fill -->
+			<!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
+			<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
+				<s:fill>
+					<s:SolidColor color="0x000000" />
+				</s:fill>
+			</s:Rect>
+			
+			<!-- layer 1: title bar highlight -->
+			<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
+				<s:stroke>
+					<s:LinearGradientStroke rotation="90" weight="1">
+						<s:GradientEntry color="0xEAEAEA" />
+						<s:GradientEntry color="0xD9D9D9" />
+					</s:LinearGradientStroke>
+				</s:stroke>
+			</s:Rect>
+			
+			<!-- layer 2: title bar divider -->
+			<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+				<s:fill>
+					<s:SolidColor color="0xC0C0C0" />
+				</s:fill>
+			</s:Rect>
+			
+			<!-- layer 3: text -->
+			<!--- Defines the appearance of the PanelSkin class's title bar. -->
+			<!-- Note: The title text display has been slightly modified for Tour de Flex. -->
+			<s:Label id="titleDisplay" lineBreak="explicit"
+						  left="9" top="1" bottom="0" minHeight="30"
+						  verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
+			</s:Label>
+		</s:Group>
+		
+		<!--
+		Note: setting the minimum size to 0 here so that changes to the host component's
+		size will not be thwarted by this skin part's minimum size.   This is a compromise,
+		more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+		-->
+		<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+		</s:Group>
+		
+		<s:Group id="bottomGroup" minWidth="0" minHeight="0"
+				 includeIn="normalWithControlBar, disabledWithControlBar" >
+			
+			<!-- layer 0: control bar background -->
+			<!-- Note: We are skinning this to be the gradient in case we do specify control
+			bar content, but it will only display if there's a controlBarContent
+			property specified.-->
+			<s:Rect left="0" right="0" bottom="0" top="0" height="15">
+				<s:fill>
+					<s:LinearGradient rotation="90">
+						<s:GradientEntry color="0xE2E2E2" />
+						<s:GradientEntry color="0x000000" />
+					</s:LinearGradient>
+				</s:fill>
+			</s:Rect>
+			
+			<!-- layer 1: control bar divider line -->
+			<s:Rect left="0" right="0" top="0" height="1" >
+				<s:fill>
+					<s:SolidColor color="0xCDCDCD" />
+				</s:fill>
+			</s:Rect>
+			
+			<!-- layer 2: control bar -->
+			<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
+				<s:layout>
+					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+				</s:layout>
+			</s:Group>
+		</s:Group>
+	</s:Group>
+</s:SparkSkin>

Propchange: flex/site/trunk/content/tourdeflex/spark/itemRenderers/skins/TDFPanelSkin.mxml
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutAnimatedExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutAnimatedExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutAnimatedExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutAnimatedExample.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,112 @@
+<?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="*" xmlns:layouts="layouts.*"
+			   backgroundColor="0x323232" color="0xFFFFFF"
+			   initialize="init()">
+	
+	<fx:Style>
+
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		
+		
+		s|Application {
+			font-family: main;
+			font-size: 14;
+		}
+		
+	</fx:Style>
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			import mx.rpc.xml.SimpleXMLDecoder;
+			import mx.rpc.xml.SimpleXMLEncoder;
+			import mx.utils.ArrayUtil;
+			
+			[Bindable]
+			private var items:ArrayCollection;
+			
+			[Bindable]
+			private var filteredItems:ArrayCollection;
+			
+			[Bindable]
+			private var _maxPrice:Number = 1000;
+			
+			[Bindable]
+			private var _camera:Boolean = false;
+			
+			[Bindable]
+			private var _video:Boolean = false;
+			
+			[Bindable]
+			private var _triband:Boolean = false;
+			
+			[Embed(source="data/catalog.xml", mimeType="application/octet-stream")]
+			private var XMLData:Class;
+			
+			private function init():void
+			{
+				var data:XML = XML(new XMLData());
+				var xmlDoc:XMLDocument = new XMLDocument(data);
+                var decoder:SimpleXMLDecoder = new SimpleXMLDecoder(true);
+                var object:Object = decoder.decodeXML(xmlDoc);
+				
+				items = object.catalog.product;
+				filteredItems = new ArrayCollection(items.source);
+				filteredItems.filterFunction = filter;
+			}
+			
+			private function selectionChange():void
+			{
+				filteredItems.refresh();
+				filterLayout.filter();
+			}
+			
+			private function filter(item:Object):Boolean
+			{
+				return	(item.price <= _maxPrice) &&
+					(!_camera || item.camera) &&
+					(!_video || item.video) &&
+					(!_triband || item.triband);
+			}			
+			
+		]]>
+	</fx:Script>
+
+	<s:HGroup verticalAlign="middle" paddingLeft="8" left="50" top="5">
+		<s:Label text="Max Price:"/>
+		<s:HSlider id="priceSlider" minimum="0" maximum="1000" snapInterval="100" value="@{_maxPrice}" change="selectionChange()"/>
+		<mx:Spacer width="20"/>
+		<s:CheckBox label="Camera" selected="@{_camera}" change="selectionChange()"/>
+		<s:CheckBox label="Video" selected="@{_video}" change="selectionChange()"/>
+		<s:CheckBox label="Triband" selected="@{_triband}" change="selectionChange()"/>
+	</s:HGroup>
+	
+	<s:DataGroup dataProvider="{items}" itemRenderer="renderers.PhoneRenderer" top="50" left="0" right="0" horizontalCenter="0">
+		<s:layout>
+			<layouts:FilteredTileLayout id="filterLayout" filteredItems="{filteredItems}" />
+		</s:layout>
+	</s:DataGroup>
+	
+</s:Application>

Propchange: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutAnimatedExample.mxml
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutAnimatedExample.swf
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutAnimatedExample.swf?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutAnimatedExample.swf
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Added: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlickrWheelExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlickrWheelExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlickrWheelExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlickrWheelExample.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<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:my="*" minWidth="600" minHeight="350" 
+				applicationComplete="requestPhotos()" backgroundColor="0x323232">
+
+    <fx:Script>
+        <![CDATA[
+            import mx.collections.ArrayCollection;
+            import mx.rpc.events.ResultEvent;
+            
+            import spark.components.Group;
+            import spark.components.supportClasses.GroupBase;
+            import spark.effects.animation.MotionPath;
+
+            [Bindable]
+            private var photoFeed:ArrayCollection;
+            
+            private function requestPhotos():void {
+                var params:Object = new Object();
+                params.format = 'rss_200_enc';
+                params.tags = searchTerms.text;
+                photoService.send(params);
+            }
+
+            private function photoHandler(event:ResultEvent):void {
+                photoFeed = event.result.rss.channel.item as ArrayCollection;
+            }
+         ]]>
+    </fx:Script>
+
+    <fx:Declarations>
+        <s:HTTPService id="photoService"
+            url="http://api.flickr.com/services/feeds/photos_public.gne"
+            result="photoHandler(event)" />
+    </fx:Declarations>
+    
+    <s:layout>
+        <s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"/>
+    </s:layout>
+	
+	<s:HGroup verticalAlign="middle">
+		<s:Label text="Flickr tags or search terms:" color="0xFFFFFF"/>
+		<s:TextInput id="searchTerms"
+			enter="requestPhotos()" text="bugs" />
+		<s:Button label="Search" 
+			click="requestPhotos()" />
+		<!-- The slider to control the axis angle -->
+		<s:HSlider id="axisSlider" minimum="-90" maximum="90"
+				   value="10" liveDragging="true" width="300"/>
+	</s:HGroup>
+
+	<s:List width="700" height="225"
+		dataProvider="{photoFeed}"
+		itemRenderer="FlickrThumbnail"
+        id="theList">
+		
+		<s:layout>
+		    <my:WheelLayout gap="20" axisAngle="{axisSlider.value}"/>
+		</s:layout>
+	</s:List>
+
+   
+</s:Application>

Propchange: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlickrWheelExample.mxml
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlickrWheelExample.swf
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlickrWheelExample.swf?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlickrWheelExample.swf
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Added: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlowExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlowExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlowExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlowExample.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application  xmlns:fx="http://ns.adobe.com/mxml/2009"
+				xmlns:s="library://ns.adobe.com/flex/spark"
+				xmlns:mx="library://ns.adobe.com/flex/halo"
+				xmlns:my="*">
+	
+	<s:Panel width="100%" height="100%" title="Custom Layout - Flow Layout" skinClass="skins.TDFPanelSkin">
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center"
+							  paddingTop="10" gap="10"/>
+		</s:layout>
+		
+		<!-- The drop-down to select vertical alignment -->
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Vertical align"/>
+			<s:DropDownList id="vAlign" requireSelection="true" color="0x000000">
+				<s:ArrayCollection>
+					<fx:String>bottom</fx:String>
+					<fx:String>middle</fx:String>
+					<fx:String>top</fx:String>
+				</s:ArrayCollection>
+			</s:DropDownList>                         
+		</s:HGroup>
+		
+		<!-- The drop-down to select vertical alignment -->                         
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Horizontal align"/>
+			<s:DropDownList id="hAlign" requireSelection="true">
+				<s:ArrayCollection>
+					<fx:String>left</fx:String>
+					<fx:String>center</fx:String>
+					<fx:String>right</fx:String>
+				</s:ArrayCollection>
+			</s:DropDownList>                         
+		</s:HGroup>
+		
+		<!-- The slider to control the list width -->
+		<s:HGroup verticalAlign="bottom">
+			<s:Label text="Container width"/>
+			<s:HSlider id="widthSlider" minimum="10" maximum="400"
+					   value="200" liveDragging="true"/>
+		</s:HGroup>
+		
+		<!-- The slider to control the horizontal gap -->
+		<s:HGroup verticalAlign="bottom">
+			<s:Label text="Horizontal gap"/>
+			<s:HSlider id="hGapSlider" minimum="0" maximum="50"
+					   value="10" liveDragging="true"/>
+		</s:HGroup>
+		
+		<!-- A Spark List -->
+		<s:List id="list1" width="{widthSlider.value}" height="112"
+				selectedIndex="7"
+				dataProvider="{new ArrayCollection(
+				'The quick fox jumped over the lazy sleepy\n\dog'.split(' '))}">
+			
+			<!-- Configure the layout to be the FlowLayout -->    
+			<s:layout>
+				<my:FlowLayout1 horizontalAlign="{hAlign.selectedItem}"
+								verticalAlign="{vAlign.selectedItem}"
+								horizontalGap="{hGapSlider.value}"/>
+			</s:layout>
+		</s:List>
+	</s:Panel>
+
+</s:Application>
+

Propchange: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlowExample.mxml
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlowExample.swf
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlowExample.swf?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutFlowExample.swf
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Added: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutHBaselineExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutHBaselineExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutHBaselineExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutHBaselineExample.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- http://evtimmy.com/2010/02/extending-horizontallayout-to-support-baseline-align-to-text/ -->
+<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.FlexEvent;
+			
+			import skins.TDFPanelSkin;
+			
+			protected function update(event:Event):void
+			{
+				globalBaseline.top = theLayout.actualBaseline;
+				checkBoxBaseline.top = checkBox.y + checkBox.baselinePosition;
+				labelBaseline.top = label.y + label.baselinePosition;
+				labelBaseline.left = label.x;
+				buttonBaseline.top = button.y + button.baselinePosition; 
+				buttonBaseline.left = button.x;
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="CustomLayout with HBaselineLayout">
+		
+		<!-- Controls -->
+		<s:HGroup left="14" top="5">
+			<s:VGroup>
+				<s:CheckBox label="Checkbox" id="showCheckBox" selected="true"/>
+				<s:CheckBox label="Label" id="showLabel" selected="true"/>
+				<s:CheckBox label="Button " id="showButton" selected="true"/>
+				<s:CheckBox label="Layout " id="showLayout" selected="true"/>
+			</s:VGroup>
+			
+			<s:TileGroup requestedColumnCount="2">
+				<s:CheckBox id="baseline1Check" label="Offset Checkbox baseline" selected="true"/>
+				<s:HSlider id="baseline1Slider" minimum="-100" maximum="100" enabled="{baseline1Check.selected}" width="160"/>
+				<s:CheckBox id="baseline2Check" label="Offset Label baseline" selected="true"/>
+				<s:HSlider id="baseline2Slider" minimum="-100" maximum="100" enabled="{baseline2Check.selected}" width="160"/>
+				<s:CheckBox id="baseline3Check" label="Offset Button baseline" selected="true"/>
+				<s:HSlider id="baseline3Slider" minimum="-100" maximum="100" enabled="{baseline3Check.selected}" width="160"/>
+				<s:CheckBox id="baseline4Check" label="Offset Layout baseline"/>
+				<s:HSlider id="baseline4Slider" minimum="-100" maximum="100" enabled="{baseline4Check.selected}" width="160" value="15"/>
+				<s:CheckBox id="buttonHeightCheck" label="Override Button height" selected="true"/>
+				<s:HSlider id="buttonHeightSlider" minimum="21" maximum="150" enabled="{buttonHeightCheck.selected}" width="160" value="21"/>
+			</s:TileGroup>
+		</s:HGroup>
+		
+		
+		<s:Group id="container" updateComplete="update(event)" top="138" horizontalCenter="0">
+			<s:layout>
+				<local:HBaselineLayout id="theLayout" verticalAlign="baseline"
+									   globalBaseline="{baseline4Check.selected ? baseline4Slider.value : NaN}"/>
+			</s:layout>
+			<s:CheckBox id="checkBox" label="One check box" move="update(event)"
+						baseline="{baseline1Check.selected ? baseline1Slider.value : 0}"/>
+			<s:Label id="label" text="...and some random text..." move="update(event)"
+					 baseline="{baseline2Check.selected ? baseline2Slider.value : 0}"/>
+			<s:Button id="button" label="and a Button!" move="update(event)"
+					  height="{buttonHeightCheck.selected ? buttonHeightSlider.value : 21}"
+					  baseline="{baseline3Check.selected ? baseline3Slider.value : 0}"/>
+			<!-- visual guides for the baselines -->
+			<s:Group includeInLayout="false">
+				<s:Line width="{container.width}" id="globalBaseline" top="{theLayout.actualBaseline}"
+						visible="{showLayout.selected}">
+					<s:stroke>
+						<s:SolidColorStroke color="0x00FF00" weight="2"/>
+					</s:stroke>
+				</s:Line>
+				
+				<s:Line width="{checkBox.width-1}" id="checkBoxBaseline"
+						visible="{showCheckBox.selected}">
+					<s:stroke>
+						<s:SolidColorStroke color="0xFF0000" alpha="0.5" weight="2"/>
+					</s:stroke>
+				</s:Line>
+				
+				<s:Line width="{label.width-1}" id="labelBaseline"
+						visible="{showLabel.selected}">
+					<s:stroke>
+						<s:SolidColorStroke color="0x0000FF" alpha="0.5" weight="2"/>
+					</s:stroke>
+				</s:Line>
+				
+				<s:Line width="{button.width-1}" id="buttonBaseline"
+						visible="{showButton.selected}">
+					<s:stroke>
+						<s:SolidColorStroke color="0xFF00FF" alpha="0.5" weight="2"/>
+					</s:stroke>
+				</s:Line>
+			</s:Group>
+		</s:Group>
+		<s:Label right="14" top="7" color="0x323232" width="200"
+				 text="This sample shows how you can create a custom layout to extend the HorizontalLayout to provide
+				 baseline alignment functionality."/>
+	</s:Panel>
+	
+</s:Application>

Propchange: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutHBaselineExample.mxml
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutHBaselineExample.swf
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutHBaselineExample.swf?rev=1619987&view=auto
==============================================================================
Binary file - no diff available.

Propchange: flex/site/trunk/content/tourdeflex/spark/layouts/CustomLayoutHBaselineExample.swf
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Added: flex/site/trunk/content/tourdeflex/spark/layouts/FlickrThumbnail.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/layouts/FlickrThumbnail.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/layouts/FlickrThumbnail.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/layouts/FlickrThumbnail.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,80 @@
+<?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: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" click="itemrenderer1_clickHandler(event)">
+
+    <fx:Script>
+        <![CDATA[
+            import spark.components.supportClasses.GroupBase;
+            import spark.effects.Animate;
+            import spark.effects.animation.MotionPath;
+            import spark.effects.animation.SimpleMotionPath;
+            protected function itemrenderer1_clickHandler(event:MouseEvent):void
+            {
+                var g:GroupBase = parent as GroupBase;
+                var p:Point = g.layout.getScrollPositionDeltaToElement(this.itemIndex);
+                if (p)
+                {
+                    var startX:Number = g.horizontalScrollPosition;
+                    var startY:Number = g.verticalScrollPosition;
+                    var anim:Animate = new Animate();
+                    anim.motionPaths = new <MotionPath>[
+                        new SimpleMotionPath("horizontalScrollPosition", startX, startX + p.x, 500),
+                        new SimpleMotionPath("verticalScrollPosition", startY, startY + p.y, 500)
+                    ];
+                    
+                    var interpolator:NumberInterpolatorWrapping = new NumberInterpolatorWrapping(0, g.contentWidth - g.width);
+                    var scrollLength:Number = interpolator.getLength(startX, startX + p.x);
+                    anim.interpolator = interpolator;
+                    anim.duration = Math.max(550, Math.min(2500, scrollLength * 2));
+                    
+                    anim.play([g]);
+                }
+            }
+        ]]>
+    </fx:Script>
+
+	
+	<s:states>
+	    <s:State name="normal"/>
+        <s:State name="hovered"/>
+        <s:State name="selected"/>
+	</s:states>
+	
+    <s:Rect id="border" left="0" right="0" top="0" bottom="0">
+        <s:fill>
+            <s:SolidColor color="0xDFDFDF" color.hovered="0xFF0000" color.selected="0x00FF00"/>
+        </s:fill>
+    </s:Rect>
+
+	<s:Group left="1" right="1" top="1" bottom="1">
+    	<s:layout>
+    	    <s:VerticalLayout horizontalAlign="center"/>
+    	</s:layout>
+    	
+    	<mx:Image 
+    		width="75" height="75"
+    		source="{data.thumbnail.url}" />
+    	<s:Label text="{data.credit}" maxWidth="100" textAlign="center"/>
+    </s:Group>
+	
+</s:ItemRenderer>
+

Propchange: flex/site/trunk/content/tourdeflex/spark/layouts/FlickrThumbnail.mxml
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/layouts/FlowLayout1.as
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/layouts/FlowLayout1.as?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/layouts/FlowLayout1.as (added)
+++ flex/site/trunk/content/tourdeflex/spark/layouts/FlowLayout1.as Sat Aug 23 08:47:51 2014
@@ -0,0 +1,195 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+import mx.core.ILayoutElement;
+
+import spark.components.supportClasses.GroupBase;
+import spark.layouts.supportClasses.LayoutBase;
+
+public class FlowLayout1 extends LayoutBase
+{
+    
+    //---------------------------------------------------------------
+    //
+    //  Class properties
+    //
+    //---------------------------------------------------------------
+    
+    //---------------------------------------------------------------
+    //  horizontalGap
+    //---------------------------------------------------------------
+
+    private var _horizontalGap:Number = 10;
+
+    public function set horizontalGap(value:Number):void
+    {
+        _horizontalGap = value;
+        
+        // We must invalidate the layout
+        var layoutTarget:GroupBase = target;
+        if (layoutTarget)
+            layoutTarget.invalidateDisplayList();
+    }
+    
+    //---------------------------------------------------------------
+    //  verticalAlign
+    //---------------------------------------------------------------
+
+    private var _verticalAlign:String = "bottom";
+    
+    public function set verticalAlign(value:String):void
+    {
+        _verticalAlign = value;
+        
+        // We must invalidate the layout
+        var layoutTarget:GroupBase = target;
+        if (layoutTarget)
+            layoutTarget.invalidateDisplayList();
+    }
+    
+	//---------------------------------------------------------------
+	//  horizontalAlign
+	//---------------------------------------------------------------
+	
+	private var _horizontalAlign:String = "left"; // center, right
+	
+	public function set horizontalAlign(value:String):void
+	{
+		_horizontalAlign = value;
+		
+		// We must invalidate the layout
+		var layoutTarget:GroupBase = target;
+		if (layoutTarget)
+			layoutTarget.invalidateDisplayList();
+	}
+	
+    //---------------------------------------------------------------
+    //
+    //  Class methods
+    //
+    //---------------------------------------------------------------
+    
+    override public function updateDisplayList(containerWidth:Number,
+                                               containerHeight:Number):void
+    {
+        var element:ILayoutElement;
+        var layoutTarget:GroupBase = target;
+        var count:int = layoutTarget.numElements;
+        var hGap:Number = _horizontalGap;
+
+        // The position for the current element
+        var x:Number = 0;
+        var y:Number = 0;
+        var elementWidth:Number;
+        var elementHeight:Number;
+
+        var vAlign:Number = 0;
+        switch (_verticalAlign)
+        {
+            case "middle" : vAlign = 0.5; break;
+            case "bottom" : vAlign = 1; break;
+        }
+
+        // Keep track of per-row height, maximum row width
+        var maxRowWidth:Number = 0;
+
+        // loop through the elements
+        // while we can start a new row
+        var rowStart:int = 0;
+        while (rowStart < count)
+        {
+            // The row always contains the start element
+            element = useVirtualLayout ? layoutTarget.getVirtualElementAt(rowStart) :
+										 layoutTarget.getElementAt(rowStart);
+									     
+            var rowWidth:Number = element.getPreferredBoundsWidth();
+            var rowHeight:Number =  element.getPreferredBoundsHeight();
+            
+            // Find the end of the current row
+            var rowEnd:int = rowStart;
+            while (rowEnd + 1 < count)
+            {
+                element = useVirtualLayout ? layoutTarget.getVirtualElementAt(rowEnd + 1) :
+										     layoutTarget.getElementAt(rowEnd + 1);
+                
+                // Since we haven't resized the element just yet, get its preferred size
+                elementWidth = element.getPreferredBoundsWidth();
+                elementHeight = element.getPreferredBoundsHeight();
+
+                // Can we add one more element to this row?
+                if (rowWidth + hGap + elementWidth > containerWidth)
+                    break;
+
+                rowWidth += hGap + elementWidth;
+                rowHeight = Math.max(rowHeight, elementHeight);
+                rowEnd++;
+            }
+            
+			x = 0;
+			switch (_horizontalAlign)
+			{
+				case "center" : x = Math.round(containerWidth - rowWidth) / 2; break;
+				case "right" : x = containerWidth - rowWidth;
+			}
+			
+            // Keep track of the maximum row width so that we can
+            // set the correct contentSize
+            maxRowWidth = Math.max(maxRowWidth, x + rowWidth);
+
+            // Layout all the elements within the row
+            for (var i:int = rowStart; i <= rowEnd; i++) 
+            {
+                element = useVirtualLayout ? layoutTarget.getVirtualElementAt(i) : 
+											 layoutTarget.getElementAt(i);
+
+                // Resize the element to its preferred size by passing
+                // NaN for the width and height constraints
+                element.setLayoutBoundsSize(NaN, NaN);
+
+                // Find out the element's dimensions sizes.
+                // We do this after the element has been already resized
+                // to its preferred size.
+                elementWidth = element.getLayoutBoundsWidth();
+                elementHeight = element.getLayoutBoundsHeight();
+
+                // Calculate the position within the row
+                var elementY:Number = Math.round((rowHeight - elementHeight) * vAlign);
+
+                // Position the element
+                element.setLayoutBoundsPosition(x, y + elementY);
+
+                x += hGap + elementWidth;
+            }
+
+            // Next row will start with the first element after the current row's end
+            rowStart = rowEnd + 1;
+
+            // Update the position to the beginning of the row
+            x = 0;
+            y += rowHeight;
+        }
+
+        // Set the content size which determines the scrolling limits
+        // and is used by the Scroller to calculate whether to show up
+        // the scrollbars when the the scroll policy is set to "auto"
+        layoutTarget.setContentSize(maxRowWidth, y);
+    }
+}
+}
\ No newline at end of file

Propchange: flex/site/trunk/content/tourdeflex/spark/layouts/FlowLayout1.as
------------------------------------------------------------------------------
    svn:eol-style = native

Added: flex/site/trunk/content/tourdeflex/spark/layouts/HBaselineLayout.as
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/layouts/HBaselineLayout.as?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/layouts/HBaselineLayout.as (added)
+++ flex/site/trunk/content/tourdeflex/spark/layouts/HBaselineLayout.as Sat Aug 23 08:47:51 2014
@@ -0,0 +1,199 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 {
+
+import mx.core.ILayoutElement;
+import mx.events.PropertyChangeEvent;
+import mx.formatters.NumberBase;
+
+import spark.components.supportClasses.GroupBase;
+import spark.layouts.HorizontalLayout;
+
+public class HBaselineLayout extends HorizontalLayout
+{
+	public function HBaselineLayout()
+	{
+		super();
+	}
+
+	//----------------------------------
+	//  globalBaseline
+	//----------------------------------
+	
+	[Inspectable(category="General")]
+
+	private var _globalBaseline:Number = NaN;
+	public function get globalBaseline():Number
+	{
+		return _globalBaseline;
+	}
+
+	public function set globalBaseline(value:Number):void
+	{
+		_globalBaseline = value;
+		var target:GroupBase = this.target;
+		if (target)
+		{
+			target.invalidateSize();
+			target.invalidateDisplayList();
+		}
+	}
+
+	//----------------------------------
+	//  actualBaseline
+	//----------------------------------
+	
+	private var _actualBaseline:Number;
+	
+	[Bindable("propertyChange")]
+	[Inspectable(category="General")]
+	
+	public function get actualBaseline():Number
+	{
+		return _actualBaseline;
+	}
+	
+	private function setActualBaseline(value:Number):void
+	{
+		if (value == _actualBaseline)
+			return;
+
+		var oldValue:Number = _actualBaseline;
+		_actualBaseline = value;
+		dispatchEvent(PropertyChangeEvent.createUpdateEvent(this, "actualBaseline", oldValue, value));
+	}
+	
+	//----------------------------------
+	//  verticalAlign
+	//----------------------------------
+	
+	[Inspectable(category="General", enumeration="top,bottom,middle,justify,contentJustify,baseline", defaultValue="top")]
+	override public function get verticalAlign():String
+	{
+		return super.verticalAlign;		
+	}
+
+	/**
+	 *  @private 
+	 */
+	override public function measure():void
+	{
+		super.measure();
+		
+		var target:GroupBase = this.target;
+		if (!target || verticalAlign != "baseline")
+			return;
+		
+		measureBaseline(true /*usePreferredSize*/);
+		if (!isNaN(_globalBaseline))
+			measuredBaselineTop = _globalBaseline;
+		
+		// The measured height is the sum of the space above and below the baseline
+		if (isNaN(paddingTop))
+			measuredBaselineTop += paddingTop;
+		if (isNaN(paddingBottom))
+			measuredBaselineBottom += paddingBottom;
+		target.measuredHeight = Math.round(measuredBaselineTop + measuredBaselineBottom);
+	}
+	
+	/**
+	 *  @private 
+	 */
+	override public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+	{
+		super.updateDisplayList(unscaledWidth, unscaledHeight);
+		
+		var target:GroupBase = this.target;
+		if (!target || verticalAlign != "baseline")
+			return;
+
+		measureBaseline(false /*usePreferredSize*/);
+		if (!isNaN(_globalBaseline))
+			measuredBaselineTop = _globalBaseline;
+
+		if (isNaN(paddingTop))
+			measuredBaselineTop += paddingTop;
+		
+		// Adjust the position of the elements
+		var contentHeight:Number = 0;
+		var count:int = target.numElements;
+		for (var i:int = 0; i < count; i++)
+		{
+			var element:ILayoutElement = target.getElementAt(i);
+			if (!element || !element.includeInLayout)
+				continue;
+			
+			var elementBaseline:Number = element.baseline as Number;
+			if (isNaN(elementBaseline))
+				elementBaseline = 0;
+
+			var baselinePosition:Number = element.baselinePosition;
+			var y:Number = measuredBaselineTop + (elementBaseline - baselinePosition);
+			element.setLayoutBoundsPosition(element.getLayoutBoundsX(), y);
+			contentHeight = Math.max(contentHeight, element.getLayoutBoundsHeight() + y);
+		}
+
+		// Adjust the content height
+		if (isNaN(paddingBottom))
+			contentHeight += paddingBottom;
+		target.setContentSize(target.contentWidth, contentHeight);
+		
+		// Update the baseline
+		setActualBaseline(measuredBaselineTop);
+	}
+
+	private var measuredBaselineTop:Number = 0;			// How much space is needed above the baseline to fit all the elements
+	private var measuredBaselineBottom:Number = 0;		// How much space is needed below the baseline to fit all the elements
+	
+	/**
+	 *  @private 
+	 */
+	private function measureBaseline(usePreferredSize:Boolean):void
+	{
+		var elementBaseline:Number = 0; 			// The current element's explicit baseline constraint
+		var elementBaselineTop:Number = 0;			// The portiono of the current element that's above the baseline
+		var elementBaselineBottom:Number = 0;		// The portion of the current element that's below the baseline
+
+		measuredBaselineTop = 0;
+		measuredBaselineBottom = 0;
+
+		var count:int = target.numElements;
+		for (var i:int = 0; i < count; i++)
+		{
+			var element:ILayoutElement = target.getElementAt(i);
+			if (!element || !element.includeInLayout)
+				continue;
+			
+			var elementHeight:Number = usePreferredSize ? element.getPreferredBoundsHeight() :
+														  element.getLayoutBoundsHeight();
+			elementBaseline = element.baseline as Number;
+			if (isNaN(elementBaseline))
+				elementBaseline = 0;
+			
+			var baselinePosition:Number = element.baselinePosition;
+			
+			elementBaselineTop = baselinePosition - elementBaseline;
+			elementBaselineBottom = elementHeight - elementBaselineTop;
+			
+			measuredBaselineTop = Math.max(elementBaselineTop, measuredBaselineTop);
+			measuredBaselineBottom = Math.max(elementBaselineBottom, measuredBaselineBottom);
+		}
+	}
+}
+}
\ No newline at end of file

Propchange: flex/site/trunk/content/tourdeflex/spark/layouts/HBaselineLayout.as
------------------------------------------------------------------------------
    svn:eol-style = native