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 [12/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/controls/Scroller1Example.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/Scroller1Example.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/Scroller1Example.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/Scroller1Example.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,75 @@
+<?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 width="100%" height="100%"
+		skinClass="skins.MyPanelSkin"
+		title="Scroller Sample">
+		<s:VGroup horizontalCenter="0">
+			<s:HGroup>
+				<s:Label text="Min Viewport Inset:"/>
+				<s:HSlider id="slider1"
+						   maximum="50"
+						   liveDragging="true" />
+				<s:Label text="Viewport Width:"/>
+				<s:HSlider id="slider2"
+						   minimum="100"
+						   maximum="550"
+						   value="300"
+						   liveDragging="true" />
+				<s:Label text="Viewport Height:"/>
+				<s:HSlider id="slider3"
+						   minimum="100"
+						   maximum="550"
+						   value="200"
+						   liveDragging="true" />
+			</s:HGroup>
+			<s:HGroup>
+			<s:Scroller id="scroller"
+						minViewportInset="{slider1.value}"
+						width="300" height="200">
+				<s:Group>
+					<s:Rect id="rect"
+							width="{slider2.value}"
+							height="{slider3.value}">
+						<s:fill>
+							<s:LinearGradient rotation="45">
+								<s:GradientEntry color="red" />
+								<s:GradientEntry color="yellow" />
+								<s:GradientEntry color="haloBlue" />
+							</s:LinearGradient>
+						</s:fill>
+					</s:Rect>
+				</s:Group>
+			</s:Scroller>
+			<s:Label textAlign="justify" width="280" verticalAlign="justify"
+						  text="The Scroller control contains a pair of scroll bars and a viewport. A viewport displays a rectangular subset of the area of
+a component, rather than displaying the entire component. You can use the Scroller control to make any container that implements the IViewport interface,
+such as Group, scrollable. The Scroller's horizontal and vertical scroll policies are set to auto which indicates that scroll bars are displayed when the
+content within a viewport is larger than the actual size of the viewport."/>
+			</s:HGroup>
+		</s:VGroup>
+	</s:Panel>
+	
+</s:Application>

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

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

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/Scroller2Example.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/Scroller2Example.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/Scroller2Example.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/Scroller2Example.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.
+
+-->
+<!-- Also see http://blog.flexexamples.com/2009/07/29/enabling-tabbing-on-spark-scroller-children/ -->
+<s:Application name="Spark_Scroller_hasFocusableChildren_test"
+			   xmlns:fx="http://ns.adobe.com/mxml/2009"
+			   xmlns:mx="library://ns.adobe.com/flex/mx"
+			   xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.events.TextOperationEvent;
+			
+			private function txtChangeHandler(event:TextOperationEvent):void
+			{
+				if (event.target is TextInput)
+				{
+					var textInput:TextInput = event.target as TextInput;
+					textInput.clearStyle("color");
+				}	
+			}
+		]]>
+	</fx:Script>
+	<!-- you want to mark the children of the viewport as focusable so you're able to tab to them, 
+	but if you don't want the container itself to be focusable then you must turn tabEnabled off on it -->
+	
+	<s:Panel width="100%" height="100%" 
+			 skinClass="skins.TDFPanelSkin" 
+			 title="Scrollers and Tabbing">
+		
+		<!-- The fields are tab-able within the VGroup container -->
+		<s:HGroup horizontalCenter="0" top="10">
+			<s:VGroup left="0" horizontalAlign="center" width="20%">
+				<s:BitmapImage id="img" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+				<s:Label text="Item For Sale"/>
+			</s:VGroup>
+			<s:Scroller tabEnabled="true" hasFocusableChildren="true">
+				<s:VGroup>
+					<s:Label text="First Name:"/>
+					<s:TextInput id="firstName" text="firstname" color="#959494" change="txtChangeHandler(event)"/>
+					<s:Label text="Last Name:"/>
+					<s:TextInput id="lastName" text="lastname" color="#959494" change="txtChangeHandler(event)"/>
+					<s:Label text="Email:"/>
+					<s:TextInput id="emailAdd" text="email" color="#959494" change="txtChangeHandler(event)"/>
+				</s:VGroup>
+			</s:Scroller>
+			
+			<!-- Note: The scroller container automatically sets the clipAndEnableScrolling to false for
+			containers within it. See 'Controlling Viewport' sample under 'Coding Techniques' --> 
+			
+			<s:Scroller hasFocusableChildren="true" tabEnabled="false">
+				<s:VGroup width="200" height="200"> 
+					<s:Label text="Enter item name:"/>
+					<s:TextInput id="itemNameTxt" text="image-name" width="100%" color="#959494" change="txtChangeHandler(event)"/>
+					<s:Label text="Enter description of your item:"/>
+					<s:TextArea id="itemDescTxt" text="title" color="#959494" change="txtChangeHandler(event)"/>
+				</s:VGroup>
+			</s:Scroller>	
+			<s:Label right="10" width="180" verticalAlign="justify"
+						  text="If you have items within a Scroller that need to be tabbed to, you can
+need to set hasFocusableChildren to true. If you do not want the container itself to be tab enabled, 
+then you must set tabEnabled to false, such as shown here."/>
+		</s:HGroup>
+	</s:Panel>
+</s:Application>
+

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

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

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/SimpleTitleWindowExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/SimpleTitleWindowExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/SimpleTitleWindowExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/SimpleTitleWindowExample.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- Simple custom MXML TitleWindow component.
+     The TitleWindowApp application displays this component. 
+     You cannot run it independently. -->
+     
+<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"  
+				xmlns:s="library://ns.adobe.com/flex/spark" 
+				xmlns:mx="library://ns.adobe.com/flex/mx"  
+    			title="Title Window"
+				close="PopUpManager.removePopUp(this);" >
+
+    <fx:Script>
+        <![CDATA[       
+			import mx.managers.PopUpManager;
+			
+			import spark.components.RichText;
+	       
+            // A reference to the TextInput control in which to put the result.
+            public var loginName:RichText;
+		   
+            // Event handler for the OK button.
+            private function returnName():void {
+                loginName.text="Name entered: " + userName.text; 
+                PopUpManager.removePopUp(this);
+            }
+        ]]>
+    </fx:Script>
+	
+	<s:layout>
+		<s:VerticalLayout horizontalAlign="center" 
+						  paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" />
+	</s:layout>
+
+    <s:HGroup>
+		<s:Label text="Enter Name: "/>
+		<s:TextInput id="userName" width="100%"/>
+	</s:HGroup>
+   
+	<s:HGroup>
+        <s:Button label="OK" click="returnName();"/>
+        <s:Button label="Cancel" click="PopUpManager.removePopUp(this);"/>
+	</s:HGroup>
+
+</s:TitleWindow>  
\ No newline at end of file

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/SliderExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/SliderExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/SliderExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/SliderExample.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx" 
+			   viewSourceURL="srcview/index.html">
+	
+	<s:Panel width="100%" height="100%"
+			 skinClass="skins.TDFPanelSkin"
+			 title="HSlider/VSlider Sample">
+		
+		<s:VGroup left="10" top="10">
+			<s:Label text="Height:"/>
+			<s:VSlider id="slider3"
+					   minimum="50"
+					   maximum="180"
+					   value="160"
+					   liveDragging="true"/>
+		</s:VGroup>
+		<s:Group  left="40" top="25">
+			<s:Ellipse id="rect"
+					   width="{slider2.value}"
+					   height="{slider3.value}">
+				<s:fill>
+					<s:LinearGradient rotation="45">
+						<s:GradientEntry color="0x5008f3" />
+						<s:GradientEntry color="0x7a2a84" />
+						<s:GradientEntry color="0xfe08a4" />
+					</s:LinearGradient>
+				</s:fill>
+			</s:Ellipse>
+		</s:Group>
+		
+		<s:HGroup right="315" top="10" verticalAlign="middle">
+			<s:Label text="Width:"/>
+			<s:HSlider id="slider2"
+					   minimum="50"
+					   maximum="250"
+					   value="200"
+					   liveDragging="true" />	
+			
+		</s:HGroup>
+		
+		<s:Label right="40" top="10" width="200" verticalAlign="justify" color="0x323232"
+				 text="The slider controls can be used to select a value by moving a slider thumb between 
+the end points of the slider track. The current value of the slider is determined by the relative location 
+of the thumb between the end points of the slider. The slider end points correspond to the slider’s minimum and maximum values."/>
+	</s:Panel>
+	
+</s:Application>

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

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

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/SpinnerExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/SpinnerExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/SpinnerExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/SpinnerExample.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,50 @@
+<?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 title="Spinner Control Example" height="100%" width="100%"
+			 skinClass="skins.TDFPanelSkin">
+		<s:VGroup width="100%" height="100%" left="10" top="10">
+			<s:HGroup>
+				<mx:Text text="Use the arrows to change tabs:"/>            
+				<s:Spinner id="mySpinner" maximum="3"/>                    
+			</s:HGroup>
+				
+			<!-- Two way binding is being used so that changes to the tab navigator remain synced with Spinner value -->
+			<mx:TabNavigator id="myTabNav" width="75%" height="75%" selectedIndex="@{mySpinner.value}">
+				<mx:HBox label="Tab 1">
+					<mx:Text text="Text on Tab 1 " fontSize="14" color="red"/>
+				</mx:HBox>    	
+				<mx:HBox label="Tab 2">
+					<mx:Text text="Text on Tab 2" fontSize="16" color="blue"/>
+				</mx:HBox>    	    
+				<mx:HBox label="Tab 3">
+					<mx:Text text="Text on Tab 3" fontSize="18" color="green"/>
+				</mx:HBox>    	    
+				<mx:HBox label="Tab 4">
+					<mx:Text text="Text on Tab 4" fontSize="20" color="purple"/>
+				</mx:HBox>    
+			</mx:TabNavigator>  
+		</s:VGroup>
+		
+	</s:Panel>          
+</s:Application> 
\ No newline at end of file

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

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

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/TDFGradientBackgroundSkin.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TDFGradientBackgroundSkin.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/TDFGradientBackgroundSkin.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/TDFGradientBackgroundSkin.mxml Sat Aug 23 08:47:51 2014
@@ -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:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			 xmlns:mx="library://ns.adobe.com/flex/mx" 
+			 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>
+	
+	<s:layout>
+		<s:BasicLayout />
+	</s:layout>
+	
+	<s:Rect id="bg" width="100%" height="100%">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:entries>
+					<s:GradientEntry color="0x000000" ratio="0.00" />
+					<s:GradientEntry color="0x323232" ratio="1.0" />
+				</s:entries>
+			</s:LinearGradient>    
+		</s:fill>
+	</s:Rect>
+	
+	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
+</s:SparkSkin>
\ No newline at end of file

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/TabNavigatorExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TabNavigatorExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/TabNavigatorExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/TabNavigatorExample.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx" 
+			   skinClass="TDFGradientBackgroundSkin">
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="TabNavigator Container" width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label width="100%" color="0x323232" fontWeight="bold"
+				 text="Select the tabs to change the panel."/>
+		
+		<mx:TabNavigator id="tn"  width="100%" height="100%" color="0x323232" >
+			<!-- Define each panel using a VBox container. -->
+			
+			<s:NavigatorContent label="Panel 1">
+				<s:Label text="TabNavigator container panel 1"/>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent label="Panel 2">
+				<s:Label text="TabNavigator container panel 2"/>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent label="Panel 3">
+				<s:Label text="TabNavigator container panel 3"/>
+			</s:NavigatorContent>
+		</mx:TabNavigator>
+		
+		<s:Label width="100%" color="0x323232"
+				 text="Programmatically select the panel using a Button control."/>
+		
+		<s:HGroup>
+			<s:Button label="Select Tab 1" click="tn.selectedIndex=0" color="0x545454" />
+			<s:Button label="Select Tab 2" click="tn.selectedIndex=1" color="0x545454" />
+			<s:Button label="Select Tab 3" click="tn.selectedIndex=2" color="0x545454" />
+		</s:HGroup>
+		
+	</s:Panel>
+	
+</s:Application>

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/TextAreaExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextAreaExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/TextAreaExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/TextAreaExample.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,90 @@
+<?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">
+	<fx:Script>
+		<![CDATA[
+			import skins.TDFPanelSkin;
+			
+			protected function changeHandler():void
+			{
+				txt.maxChars = this.maxChars.value;
+				txt.restrict = this.restrictStr.text;
+				txt.textFlow.textAlign = alignVal.selectedItem;
+				txt.textFlow.direction = direction.selectedItem;
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="TextArea Sample"
+			 width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+		
+		<s:HGroup  top="8" width="100%" height="100%" left="80">
+			<s:VGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Specify Max Character Input:"/>
+					<s:NumericStepper id="maxChars" maximum="200" value="100" stepSize="2" change="this.changeHandler()"/>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Specify Text Alignment:"/>
+					<s:DropDownList id="alignVal" prompt="left" change="this.changeHandler()">
+						<s:dataProvider>
+							<mx:ArrayList>
+								<fx:String>left</fx:String>
+								<fx:String>right</fx:String>
+								<fx:String>center</fx:String>
+								<fx:String>justify</fx:String>
+								<fx:String>start</fx:String>
+								<fx:String>end</fx:String>
+							</mx:ArrayList>
+						</s:dataProvider>
+					</s:DropDownList>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Direction:"/>
+					<s:DropDownList id="direction" prompt="ltr" change="this.changeHandler()">
+						<s:dataProvider>
+							<mx:ArrayList>
+								<fx:String>ltr</fx:String>
+								<fx:String>rtl</fx:String>
+							</mx:ArrayList>
+						</s:dataProvider>
+					</s:DropDownList>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Specify characters to restrict (use - for range):"/>
+					<s:TextInput id="restrictStr" change="this.changeHandler()" text="a-z 1-9"/> 
+				</s:HGroup>
+				<s:VGroup>
+					<s:Label text="Text:"/>
+					<s:TextArea id="txt" width="300" height="70" color="0x323232" horizontalCenter="0" verticalCenter="0" restrict="a-z 1-9"
+								change="this.changeHandler()"/>
+				</s:VGroup>
+			</s:VGroup>	
+			<s:Label width="200" color="#323232" top="20" right="80"
+					 text="TextArea is a text-entry control that lets users enter and edit multiple lines of richly formatted text. 
+It can display horizontal and vertical scrollbars for scrolling through the text and supports vertical scrolling with the mouse wheel. This sample also shows
+how you can restrict character input on the text area. The default when this is run will not allow the number 0 or caps based on the restrict range shown. The
+sample also shows how you can specify a direction on the text."/>
+		</s:HGroup>
+		
+	</s:Panel>
+</s:Application>

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

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

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/TextInputExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextInputExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/TextInputExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/TextInputExample.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,100 @@
+<?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">
+	<fx:Script>
+		<![CDATA[
+			import spark.events.TextOperationEvent;
+			import spark.components.RichEditableText;
+			
+			private function txtChangeHandler(event:TextOperationEvent):void
+			{
+				var textInput:TextInput = event.target as TextInput;
+				textInput.clearStyle("color");
+			}
+			
+
+			protected function changeHandler(event:MouseEvent):void
+			{
+				txt.maxChars = this.maxChars.value;
+				txt.restrict = this.restrictStr.text;
+				RichEditableText(txt.textDisplay).textFlow.textAlign = alignVal.selectedItem;
+				RichEditableText(txt.textDisplay).textFlow.direction = direction.selectedItem;
+			}
+
+		]]>
+	</fx:Script>
+	 
+	<s:Panel skinClass="skins.TDFPanelSkin" 
+			 width="100%" height="100%"
+			 title="TextInput Sample">
+		
+		<s:VGroup top="20" width="100%" height="100%" left="200">
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Specify Max Character Input:"/>
+				<s:NumericStepper id="maxChars" value="30" stepSize="2" change="this.changeHandler(null)"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Specify Text Alignment:"/>
+				<s:DropDownList id="alignVal" prompt="left" change="this.changeHandler(null)">
+					<s:dataProvider>
+						<mx:ArrayList>
+							<fx:String>left</fx:String>
+							<fx:String>right</fx:String>
+							<fx:String>center</fx:String>
+							<fx:String>justify</fx:String>
+							<fx:String>start</fx:String>
+							<fx:String>end</fx:String>
+						</mx:ArrayList>
+					</s:dataProvider>
+				</s:DropDownList>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Direction:"/>
+				<s:DropDownList id="direction" prompt="ltr" change="this.changeHandler(null)">
+					<s:dataProvider>
+						<mx:ArrayList>
+							<fx:String>rtl</fx:String>
+							<fx:String>ltr</fx:String>
+						</mx:ArrayList>
+					</s:dataProvider>
+				</s:DropDownList>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Specify characters to restrict (use - for range):"/>
+				<s:TextInput id="restrictStr" change="this.changeHandler(null)"/> 
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Text Input:"/>
+				<s:TextInput id="txt" maxChars="{maxChars.value}" maxWidth="150" 
+							 change="txtChangeHandler(event)" textAlign="{alignVal.selectedItem}"/>	
+			</s:HGroup>
+			<mx:Spacer height="10"/>
+			<s:Label width="85%" horizontalCenter="0" color="#323232"
+					 text="TextInput is a text-entry control that lets users enter and edit a single line of uniformly-formatted text.
+This Spark version of TextInput makes use of the Text Layout Framework (TLF). Numerous properties are available to be set using the 
+textFlow object from the TLF framework. Uses of some are shown above."/>
+		</s:VGroup>
+		
+	</s:Panel>
+	
+
+</s:Application>

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

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

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/TextLayout1Example.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextLayout1Example.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/TextLayout1Example.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/TextLayout1Example.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,165 @@
+<?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" minWidth="955" minHeight="600"
+			   xmlns:local="*" creationComplete="init()">
+	
+	<!-- Based on original code from here and updated and enhanced for Flex 4:
+		http://www.adobe.com/devnet/flex/articles/text_layout_framework_04.html
+	-->
+	
+	<fx:Script>
+		<![CDATA[
+			import flashx.textLayout.container.ContainerController;
+			import flashx.textLayout.conversion.ITextImporter;
+			import flashx.textLayout.conversion.TextConverter;
+			import flashx.textLayout.edit.EditManager;
+			import flashx.textLayout.edit.ISelectionManager;
+			import flashx.textLayout.edit.SelectionState;
+			import flashx.textLayout.elements.InlineGraphicElement;
+			import flashx.textLayout.elements.ParagraphElement;
+			import flashx.textLayout.elements.TextFlow;
+			import flashx.textLayout.events.SelectionEvent;
+			import flashx.textLayout.events.StatusChangeEvent;
+			import flashx.textLayout.formats.Direction;
+			import flashx.textLayout.formats.TextLayoutFormat;
+			import flashx.undo.UndoManager;
+			
+			import mx.collections.ArrayCollection;
+			import mx.controls.CheckBox;
+			import mx.events.FlexEvent;
+			import mx.events.SliderEvent;
+			
+			import skins.TDFPanelSkin;
+			
+			import spark.components.Group;
+			import spark.core.SpriteVisualElement;
+			
+			[Bindable]
+			public var directions:ArrayCollection = new ArrayCollection(
+				[
+					{label:"Left-to-Right", data:Direction.LTR},
+					{label:"Right-to-Left", data:Direction.RTL}
+				]
+			);
+			
+			[Embed(source="assets/ApacheFlexLogo.png")]
+			[Bindable]
+			static public var imgClass:Class;
+			
+			private var _textContainer:SpriteVisualElement = null;
+			
+			private static const textInput:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
+				<div>
+					<p><span>The Text Layout Framework is an extensible library, built on the new text engine in Adobe Flash Player 10, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web. 
+				Some benefits provided by this framework include: 1) rich typographical controls, including kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens
+				2) cut, copy, paste, undo and standard keyboard and mouse gestures for editing 3) selection, editing and flowing text across multiple columns and linked containers 
+				4) bidirectional text, vertical text and over 30 writing scripts including Arabic, Hebrew, Chinese, Japanese, Korean, Thai, Lao, Vietnamese, and others
+				5) vertical text, Tate-Chu-Yoko (horizontal within vertical text) and justifier for East Asian typography. Try editing this text and playing with the options below! Notice an inline image is also included.</span></p>
+				</div>
+				</TextFlow>;
+			
+			private var _textFlow:TextFlow;
+			
+			private function init():void {
+				
+				_textContainer = new SpriteVisualElement();
+				
+				canvas.addElement(_textContainer);
+				var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_LAYOUT_FORMAT);
+				importer.throwOnError = true; // will throw exception if parsing error occurs on import
+
+				_textFlow = importer.importToFlow(textInput);
+				_textFlow.flowComposer.addController(new ContainerController(_textContainer, canvas.width-40, canvas.height));
+				
+				// add the graphic
+				var p:ParagraphElement = new ParagraphElement();
+				var inlineGraphicElement:InlineGraphicElement = new InlineGraphicElement();
+				inlineGraphicElement.source = imgClass;
+				inlineGraphicElement.width=32;
+				inlineGraphicElement.height=32;
+				p.addChild(inlineGraphicElement);
+				_textFlow.addChild(p);
+				
+				//adding Select/Edit/Copy/Paste/Undo features
+				_textFlow.interactionManager = new EditManager(new UndoManager());
+				
+				// initialize with a selection before the first character
+				_textFlow.interactionManager.selectRange(0,0);
+				_textFlow.flowComposer.updateAllControllers();
+			}
+			
+			private function changeFontSize(event:Event):void {
+				_textFlow.fontSize = fontSize.value;
+				_textFlow.direction = direction.selectedItem.data;
+				_textFlow.flowComposer.updateAllControllers();
+			}
+			
+			private function changeNoColumns(event:Event):void {
+				var tlf:TextLayoutFormat = new TextLayoutFormat();
+				tlf.columnCount = cols.value;
+				tlf.columnGap = 15;
+				tlf.direction = direction.selectedItem.data;
+				_textFlow.format = tlf;
+				_textFlow.flowComposer.updateAllControllers();
+			}
+			
+			private function changeTextDirection(event:Event):void {
+				_textFlow.direction = (event.target as DropDownList).selectedItem.data;
+				_textFlow.flowComposer.updateAllControllers();
+			}
+			
+			protected function undo_clickHandler(event:MouseEvent):void
+			{
+				var em:EditManager = _textFlow.interactionManager as EditManager;
+				trace("Can undo " + em.undoManager.canUndo() + " can redo " + em.undoManager.canRedo());
+				em.undoManager.undo();
+			}
+			protected function redo_clickHandler(event:MouseEvent):void
+			{
+				var em:EditManager = _textFlow.interactionManager as EditManager;
+				em.undoManager.redo();
+			}
+
+		]]>
+	</fx:Script>
+	<s:Panel skinClass="skins.TDFPanelSkin" title="Text Layout Framework Sample" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingTop="8" paddingLeft="8"/>
+		</s:layout>
+		
+		<s:VGroup>
+			<s:Group id="canvas" width="600" height="200" />
+			<s:HGroup width="100%" verticalAlign="middle">
+				<s:Label text="Font Size:"/>
+				<s:NumericStepper id="fontSize" minimum="6" maximum="22" snapInterval="1" change="changeFontSize(event)" value="12" />
+				<s:Label text="# Columns:"/>
+				<s:NumericStepper id="cols"  minimum="1" maximum="20" snapInterval="1" change="changeNoColumns(event)" />
+				<s:Label text="Text Direction:"/>
+				<s:DropDownList id="direction" change="changeTextDirection(event)" dataProvider="{directions}" 
+								selectedItem="{directions.getItemAt(0)}"/>
+				<s:Button label="Undo" click="undo_clickHandler(event)"/>
+				<s:Button label="Redo" click="redo_clickHandler(event)"/>
+			</s:HGroup>
+		</s:VGroup>
+	</s:Panel>
+	
+</s:Application>
\ No newline at end of file

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

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

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/TextLayout2Example.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextLayout2Example.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/TextLayout2Example.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/TextLayout2Example.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,135 @@
+<?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" maxWidth="690" maxHeight="300"
+			   creationComplete="init()">
+	
+<!-- This sample is based on this page: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3_Flex/WS0d70b2a8565d75766ba6608d121cc29f375-8000.html -->
+	
+	<fx:Script>
+		<![CDATA[
+			import flash.display.StageAlign; 
+			import flash.display.StageScaleMode; 
+			import flash.events.Event; 
+			import flash.geom.Rectangle; 
+			
+			import flashx.textLayout.compose.StandardFlowComposer; 
+			import flashx.textLayout.container.ContainerController; 
+			import flashx.textLayout.container.ScrollPolicy; 
+			import flashx.textLayout.conversion.TextConverter; 
+			import flashx.textLayout.elements.TextFlow; 
+			import flashx.textLayout.formats.TextLayoutFormat; 
+			
+			import spark.core.SpriteVisualElement;
+			
+			private var hTextFlow:TextFlow; 
+			private var headContainer:SpriteVisualElement; 
+			private var headlineController:ContainerController; 
+			private var hContainerFormat:TextLayoutFormat; 
+			
+			private var bTextFlow:TextFlow; 
+			private var bodyTextContainer:SpriteVisualElement; 
+			private var bodyController:ContainerController; 
+			private var bodyTextContainerFormat:TextLayoutFormat; 
+			
+			private const headlineMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008'><flow:p textAlign='center'><flow:span fontFamily='Helvetica' fontSize='18'>TLF News Layout Example</flow:span><flow:br/><flow:span fontFamily='Helvetica' fontSize='14'>This example formats text like a newspaper page with a headline, a subtitle, and multiple columns</flow:span></flow:p></flow:TextFlow>"; 
+			
+			private const bodyMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008' fontSize='12' textIndent='10' marginBottom='15' paddingTop='4' paddingLeft='4'><flow:p marginBottom='inherit'><flow:span>There are many </flow:span><flow:span fontStyle='italic'>such</flow:span><flow:span> lime-kilns in that tract of country, for the purpose of burning the white marble which composes a large part of the substance of the hills. Some of them, built years ago, and long deserted, with weeds growing in the vacant round of the interior, which is open to the sky, and grass and wild-flowers rooting themselves into the chinks of the stones, look already like relics of antiquity, and may yet be overspread with the lichens of centuries to come. Others, where the lime-burner still feeds his daily and nightlong fire, afford points of interest to the wanderer among the hills, who seats himself on a log of wood or a fragment of marble, to hold a chat with the solitary man. It is a
  lonesome, and, when the character is inclined to thought, may be an intensely thoughtful occupation; as it proved in the case of Ethan Brand, who had mused to such strange purpose, in days gone by, while the fire in this very kiln was burning.</flow:span></flow:p><flow:p marginBottom='inherit'><flow:span>The man who now watched the fire was of a different order, and troubled himself with no thoughts save the very few that were requisite to his business. At frequent intervals, he flung back the clashing weight of the iron door, and, turning his face from the insufferable glare, thrust in huge logs of oak, or stirred the immense brands with a long pole.</flow:span></flow:p></flow:TextFlow>"; 
+			
+			public function init():void
+			{ 
+				// Headline text flow and flow composer 
+				hTextFlow = TextConverter.importToFlow(headlineMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 
+				hTextFlow.flowComposer = new StandardFlowComposer(); 
+				
+				// initialize the headline container and controller objects 
+				headContainer = new SpriteVisualElement(); 
+				headlineController = new ContainerController(headContainer); 
+				headlineController.verticalScrollPolicy = ScrollPolicy.OFF; 
+				hContainerFormat = new TextLayoutFormat(); 
+				hContainerFormat.paddingTop = 4; 
+				hContainerFormat.paddingRight = 4; 
+				hContainerFormat.paddingBottom = 4; 
+				hContainerFormat.paddingLeft = 4; 
+				
+				headlineController.format = hContainerFormat; 
+				hTextFlow.flowComposer.addController(headlineController); 
+				addElement(headContainer); 
+				this.addEventListener(flash.events.Event.RESIZE, resizeHandler); 
+				
+				// Body text TextFlow and flow composer 
+				bTextFlow = TextConverter.importToFlow(bodyMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 
+				bTextFlow.flowComposer = new StandardFlowComposer(); 
+				
+				// The body text container is below, and has three columns 
+				bodyTextContainer = new SpriteVisualElement(); 
+				bodyController = new ContainerController(bodyTextContainer); 
+				bodyTextContainerFormat = new TextLayoutFormat(); 
+				bodyTextContainerFormat.columnCount = 4; 
+				bodyTextContainerFormat.columnGap = 30; 
+				
+				bodyController.format = bodyTextContainerFormat; 
+				bTextFlow.flowComposer.addController(bodyController); 
+				addElement(bodyTextContainer); 
+				resizeHandler(null); 
+			} 
+			
+			private function resizeHandler(event:Event):void 
+			{ 
+				trace("Resizing!");
+				const verticalGap:Number = 25; 
+				const stagePadding:Number = 16; 
+				var stageWidth:Number = this.width - stagePadding; 
+				var stageHeight:Number = this.height - stagePadding; 
+				var headlineWidth:Number = stageWidth; 
+				var headlineContainerHeight:Number = stageHeight; 
+				
+				// Initial compose to get height of headline after resize 
+				headlineController.setCompositionSize(headlineWidth, headlineContainerHeight); 
+				hTextFlow.flowComposer.compose(); 
+				var rect:Rectangle = headlineController.getContentBounds(); 
+				headlineContainerHeight = rect.height; 
+				
+				// Initial compose to get height of headline after resize 
+				headlineController.setCompositionSize(headlineWidth, headlineContainerHeight); 
+				hTextFlow.flowComposer.compose(); 
+				rect = headlineController.getContentBounds(); 
+				headlineContainerHeight = rect.height; 
+				
+				// Resize and place headline text container 
+				// Call setCompositionSize() again with updated headline height 
+				headlineController.setCompositionSize(headlineWidth, headlineContainerHeight ); 
+				headlineController.container.x = stagePadding / 2; 
+				headlineController.container.y = stagePadding / 2; 
+				hTextFlow.flowComposer.updateAllControllers(); 
+				
+				// Resize and place body text container 
+				var bodyContainerHeight:Number = (stageHeight - verticalGap - headlineContainerHeight); 
+				bodyController.format = bodyTextContainerFormat; 
+				bodyController.setCompositionSize(stageWidth, bodyContainerHeight ); 
+				bodyController.container.x = (stagePadding/2); 
+				bodyController.container.y = (stagePadding/2) + headlineContainerHeight + verticalGap; 
+				bTextFlow.flowComposer.updateAllControllers(); 
+			} 
+		]]>
+	</fx:Script>
+
+</s:Application>

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

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

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/TextLayout3Example.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextLayout3Example.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/TextLayout3Example.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/TextLayout3Example.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,90 @@
+<?xml version="1.0"?>
+<!--
+
+  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:mx="library://ns.adobe.com/flex/mx"     
+	xmlns:s="library://ns.adobe.com/flex/spark"
+	creationComplete="init()">
+	
+	<fx:Declarations>
+		<fx:XML id="textFlowAsXML" source="MyTextFlow.xml" />
+	</fx:Declarations>
+	
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		Label { 
+			baseColor: #000000; 
+			fontFamily: "Verdana";
+			fontSize: "12";
+			advancedAntiAliasing: true;
+		}
+		
+	</fx:Style>
+	<fx:Script><![CDATA[
+		import flashx.textLayout.conversion.TextConverter;
+		import flashx.textLayout.elements.TextFlow;
+		import spark.components.RichEditableText;
+		import spark.utils.TextFlowUtil;
+		
+		XML.ignoreWhitespace = false; 
+		
+		private function init():void {
+			// Creates a TextFlow by importing a String containing the markup language used by the Text Layout Framework.
+			// If you specify it, don't forget the namespace -> xmlns="http://ns.adobe.com/textLayout/2008"
+			var markup:String = "<TextFlow xmlns='http://ns.adobe.com/textLayout/2008'><p fontFamily='Arial'>This is TLF markup with paragraphs.</p><p color='0x663399'>The root TextFlow tag is inlcuded.</p></TextFlow>"; 
+			rt1.textFlow = TextFlowUtil.importFromString(markup);
+			
+			// This next string shows that if the root TextFlow tag is omitted, it will be added for you. 
+			markup = "<p color='0xCE267D'>This is TLF markup with paragraphs.</p><p fontSize='10' fontWeight='bold' fontFamily='Arial'>The root TextFlow tag is omitted and therefore created automatically.</p>"; 
+			rt2.textFlow = TextFlowUtil.importFromString(markup);
+			
+			// This line shows how you would import plain text with no paragraph spacing
+			var autoMarkup:String = "This is just a plain old string that has no markup within it."; 
+			RichEditableText(rt3.textDisplay).textFlow = TextFlowUtil.importFromString(autoMarkup);
+			
+			// This example shows how you can use the TextConverter class from TLF to import HTML formatted text
+			// See the docs for the subset of HTML that is supported: 
+			//		http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flashx/textLayout/conversion/TextConverter.html#TEXT_FIELD_HTML_FORMAT
+			var myHTML:String = "<p>This is <i>HTML</i> markup.<br><b>Hello Tour de Flex Users!</b></p>";
+			rt4.textFlow = TextConverter.importToFlow(myHTML,TextConverter.TEXT_FIELD_HTML_FORMAT);
+		}
+	]]></fx:Script>
+	
+	<s:Panel skinClass="skins.TDFPanelSkin" title="Importing Text using TLF and Flex 4" width="100%" height="100%">
+		<s:layout>
+			<s:HorizontalLayout paddingTop="8" paddingLeft="8" paddingRight="12"/>
+		</s:layout>
+		
+		<s:VGroup>
+			<s:RichText id="rt1" width="200"/>
+			<s:TextArea id="rt2" width="300" height="50"/>
+			<s:TextInput id="rt3" width="260"/>
+			<s:RichEditableText id="rt4" width="200"/>
+			
+			<s:RichText id="rt5" width="280"
+						textFlow="{TextFlowUtil.importFromXML(textFlowAsXML)}"
+						horizontalCenter="0" verticalCenter="0" />
+		</s:VGroup>
+		<s:Label width="200" color="0x323232" verticalAlign="justify" text="This sample shows how you can use different types of text markup within
+the Flex 4 components that are based on TLF through an import. This can be especially useful for dynamically loading text
+that is returned from an HTTPService call at runtime for instance."/>
+		
+	</s:Panel>
+</s:Application>
\ No newline at end of file

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

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

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/TextLayout4Example.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextLayout4Example.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/TextLayout4Example.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/TextLayout4Example.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,77 @@
+<?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.
+
+-->
+<!-- Sample derived from: http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS02f7d8d4857b1677-165a04e1126951a2d98-7ff8.html --> 
+<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"> 
+	
+	<fx:Script> 
+		<![CDATA[ 
+			import flashx.textLayout.conversion.TextConverter; 
+			
+			XML.ignoreWhitespace = false; 
+		]]> 
+	</fx:Script> 
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		Label { 
+			baseColor: #000000; 
+			fontFamily: "Verdana";
+			fontSize: "12";
+			advancedAntiAliasing: true;
+		}
+	</fx:Style>
+	<fx:Declarations> 
+		<!-- Define a String to use with HTML and plain text format. --> 
+		<fx:String id="htmlTextAsHTML"><![CDATA[<p>Text containing <b>HTML</b> markup</p>]]></fx:String> 
+		
+		<!-- Define an XML object to use with TLF format. --> 
+		<fx:XML id="tfTextAsTextFlow"> 
+			<TextFlow xmlns="http://ns.adobe.com/textLayout/2008"> 
+				<p>Text Using  <span fontWeight="bold">Text Layout Framework</span> Markup</p> 
+			</TextFlow> 
+		</fx:XML> 
+	</fx:Declarations> 
+	
+	<s:Panel skinClass="skins.TDFPanelSkin" title="Text Import Format Types Sample" width="100%" height="100%">
+		<s:layout>
+			<s:HorizontalLayout paddingTop="8" paddingLeft="8" paddingRight="12"/>
+		</s:layout>
+		
+		<s:Label verticalAlign="justify" width="200" text="This example shows how you can use different format types for importing text
+and what the result will be in the Flex 4 component shown."/>
+		<s:VGroup>
+			<s:TextArea id="txt1" width="200" height="50"
+						textFlow="{TextConverter.importToFlow(htmlTextAsHTML, TextConverter.TEXT_FIELD_HTML_FORMAT)}" 
+						horizontalCenter="0" verticalCenter="0" /> 
+			
+				<s:Label text="Same marked up text with plain format specified:"/>
+				<s:TextArea id="txt2" height="50" width="200"
+							textFlow="{TextConverter.importToFlow(htmlTextAsHTML, TextConverter.PLAIN_TEXT_FORMAT)}" 
+							horizontalCenter="0" verticalCenter="0" /> 
+			
+			<s:TextArea id="txt3" width="200" height="50"
+						textFlow="{TextConverter.importToFlow(tfTextAsTextFlow, TextConverter.TEXT_LAYOUT_FORMAT)}" 
+						horizontalCenter="0" verticalCenter="0" /> 
+		</s:VGroup>
+		
+	</s:Panel>
+	
+</s:Application>
\ No newline at end of file

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

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

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/TitleWindowExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TitleWindowExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/TitleWindowExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/TitleWindowExample.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: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">
+	
+	<fx:Script>
+		<![CDATA[
+			import flash.geom.Point;
+			
+			import mx.containers.TitleWindow;
+			import mx.managers.PopUpManager;
+			
+			import spark.components.TitleWindow;
+			
+			private var point1:Point = new Point();
+			
+			// Open the TitleWindow container.
+			// Cast the return value of the createPopUp() method
+			// to SimpleTitleWindowExample, the name of the 
+			// component containing the TitleWindow container.
+			private function showWindow():void {
+				var login:SimpleTitleWindowExample=SimpleTitleWindowExample(PopUpManager.createPopUp( 
+					this, SimpleTitleWindowExample , true) as spark.components.TitleWindow);
+				
+				// Calculate position of TitleWindow in Application's coordinates. 
+				point1.x=myButton.x;
+				point1.y=myButton.y;                
+				point1=myButton.localToGlobal(point1);
+				login.x=point1.x+25;
+				login.y=point1.y+25;
+				
+				// Pass a reference to the TextInput control
+				// to the TitleWindow container so that the 
+				// TitleWindow container can return data to the main application.
+				login.loginName=returnedName;
+			}
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="TitleWindow Container" color="0x000000" 
+			 borderAlpha="0.15" 
+			 width="600">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Button id="myButton" color="0x323232" height="32" label="Click to open the TitleWindow container" 
+				  click="showWindow();"/>
+		
+		<s:RichText id="returnedName" width="100%" color="0x323232" text="Waiting..."/>
+		
+	</s:Panel>
+	
+</s:Application>

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

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

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/ToggleButton2Example.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/ToggleButton2Example.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/ToggleButton2Example.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/ToggleButton2Example.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,146 @@
+<?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"
+			   currentState="hide">
+	
+
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			public var items:ArrayCollection = new ArrayCollection([
+				{label:"Medium Pink V-Neck T", itemNum:1932823474, price:"$24.00"}, 
+				{label:"Small Red Polo", itemNum:2022144432, price:"$40.00"}, 
+				{label:"X-Large Sweatshirt", itemNum:3769034827, price:"$50.00"} ]);
+
+			protected function myBtn_clickHandler(event:MouseEvent):void
+			{
+				if (showBtn.selected) 
+					this.currentState="show";
+				else this.currentState="hide";
+			}
+		]]>
+	</fx:Script>
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		
+		ToggleButton:upAndSelected,
+		ToggleButton:overAndSelected {
+			baseColor: #000000;
+			color: #FFFFFF;
+		}
+		ToggleButton:downAndSelected {
+			baseColor: #336699;
+			color: #FFFFFF;
+		}
+		ToggleButton:disabledAndSelected {
+			baseColor: #E2E2E2;
+			color: #212799;
+		}
+		ToggleButton:up {
+			baseColor: #C0C0C0;
+			color: #323232;
+		}
+		ToggleButton:over {
+			baseColor: #FFFFFF;
+			color: #000000;
+		}
+		ToggleButton:down {
+			baseColor: #014f9f;
+			color: #FFFFFF;
+		}
+	</fx:Style>
+	<s:states> 
+		<s:State name="show"/>    
+		<s:State name="hide"/> 
+	</s:states> 
+	
+	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+	source tabs for each sample.	-->
+	<s:Panel width="100%" height="100%" 
+			 horizontalCenter="0" 
+			 title="ToggleButton Sample"
+			 skinClass="skins.TDFPanelSkin">
+				
+			<s:HGroup left="5" top="5" width="100%" height="100%">
+				<s:VGroup color="0x000000">
+						<s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/>
+						<s:Label text="Order Number: 904234113441-2342"/>
+						<s:VGroup width="80%"  horizontalCenter="0">
+							<s:Label text="Purchaser: Anna Thomas"/>
+							<s:Label text="Date: 7/20/2009"/>
+							<s:Label text="Order Total: $114.00"/>
+							<s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
+											click="myBtn_clickHandler(event)"/>
+						</s:VGroup>
+				</s:VGroup>
+				<s:HGroup right="50" top="5">
+					<s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170"  
+							color="#FFFFFF" includeIn="show">
+						<mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/>
+					</s:Panel>
+				</s:HGroup>
+			</s:HGroup>
+			<s:HGroup horizontalCenter="0" bottom="15"  verticalAlign="middle" width="88%">
+			<s:Label fontSize="13" color="0x323232" verticalAlign="justify" width="100%"
+						  text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click
+the button again to toggle it back to the up state."/>
+		</s:HGroup>
+	</s:Panel>	
+	
+	
+	<!--
+	<s:Group width="100%" height="100%">
+		<s:Rect left="0" right="0" bottom="0" top="0">
+			<s:fill>
+				<s:LinearGradient rotation="90" >
+					<s:GradientEntry color="0xE2E2E2" />
+					<s:GradientEntry color="0x000000" />
+				</s:LinearGradient>
+			</s:fill>
+		</s:Rect>
+		<s:VGroup left="15" top="5" color="0x000000">
+			<s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/>
+			<s:Label text="Order Number: 904234113441-2342"/>
+			<s:VGroup width="80%"  horizontalCenter="0">
+				<s:Label text="Purchaser: Anna Thomas"/>
+				<s:Label text="Date: 7/20/2009"/>
+				<s:Label text="Order Total: $114.00"/>
+				<s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
+								click="myBtn_clickHandler(event)"/>
+				<mx:Spacer height="40"/>
+				<s:Label color="#FFFFFF" width="199" 
+							  verticalAlign="justify"
+							  text="Clicking the button toggles it between the up and an down states. If you click the button while it is in the up state, it toggles to the down state. You must click the button again to toggle it back to the up state."/>
+			</s:VGroup>
+		</s:VGroup>
+		<s:HGroup right="50" top="5">
+			<s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="200"  
+					 color="#FFFFFF"  includeIn="show" baseColor="#000000">
+				<mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/>
+			</s:Panel>
+		</s:HGroup>
+		
+	</s:Group>-->
+	
+</s:Application>

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

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

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonBarExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonBarExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonBarExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonBarExample.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx" 
+			   skinClass="TDFGradientBackgroundSkin">
+	
+	<fx:Script>
+		<![CDATA[
+			
+			import mx.events.ItemClickEvent;	
+			
+			// Event handler function to print a message
+			// describing the selected Button control.        
+			private function clickHandler(event:ItemClickEvent):void {
+				tgPanel.title = "ToggleButtonBar: " + event.label;
+				myTA.text="Selected button index: " + String(event.index) + 
+					"\n" + "Selected button label: " + event.label;
+			}
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		
+		<fx:Array id="dp">
+			<fx:String>Flex</fx:String>
+			<fx:String>Flex JS</fx:String>
+			<fx:String>Falcon</fx:String>
+			<fx:String>Falcon JX</fx:String>
+		</fx:Array>
+		
+	</fx:Declarations>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel id="tgPanel" title="ToggleButtonBar: Flash" width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:ToggleButtonBar color="0x323232" horizontalGap="5" itemClick="clickHandler(event);" dataProvider="{dp}" />
+		
+		<s:Label width="100%" textAlign="center" color="0x323232" 
+				 text="Select a button in the ToggleButtonBar control."/>
+		
+		<s:TextArea color="0x323232" id="myTA" width="100%" height="100%" text="{'Selected button index: 0' + '\n' +'Selected button label: Flash'}"/>
+		
+	</s:Panel>
+</s:Application>

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

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

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonExample.mxml Sat Aug 23 08:47:51 2014
@@ -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" 
+			   currentState="hide" viewSourceURL="srcview/index.html">
+	
+
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			public var items:ArrayCollection = new ArrayCollection([
+				{label:"Medium Pink V-Neck T", itemNum:1932823474, price:"$24.00"}, 
+				{label:"Small Red Polo", itemNum:2022144432, price:"$40.00"}, 
+				{label:"X-Large Sweatshirt", itemNum:3769034827, price:"$50.00"} ]);
+
+			protected function myBtn_clickHandler(event:MouseEvent):void
+			{
+				if (showBtn.selected) 
+					this.currentState="show";
+				else this.currentState="hide";
+			}
+		]]>
+	</fx:Script>
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		
+		ToggleButton:upAndSelected,
+		ToggleButton:overAndSelected {
+			baseColor: #000000;
+			color: #FFFFFF;
+		}
+		ToggleButton:downAndSelected {
+			baseColor: #336699;
+			color: #FFFFFF;
+		}
+		ToggleButton:disabledAndSelected {
+			baseColor: #E2E2E2;
+			color: #212799;
+		}
+		ToggleButton:up {
+			baseColor: #C0C0C0;
+			color: #323232;
+		}
+		ToggleButton:over {
+			baseColor: #FFFFFF;
+			color: #000000;
+		}
+		ToggleButton:down {
+			baseColor: #014f9f;
+			color: #FFFFFF;
+		}
+	</fx:Style>
+	<s:states> 
+		<s:State name="show"/>    
+		<s:State name="hide"/> 
+	</s:states> 
+	
+	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+	source tabs for each sample.	-->
+	<s:Panel width="100%" height="100%" 
+			 horizontalCenter="0" 
+			 title="ToggleButton Sample" 
+			 skinClass="skins.TDFPanelSkin">
+		
+			
+			<s:HGroup left="5" top="5" width="100%" height="100%">
+				<s:VGroup color="0x000000">
+						<s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/>
+						<s:Label text="Order Number: 904234113441-2342"/>
+						<s:VGroup width="80%"  horizontalCenter="0">
+							<s:Label text="Purchaser: Anna Thomas"/>
+							<s:Label text="Date: 7/20/2009"/>
+							<s:Label text="Order Total: $114.00"/>
+							<s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
+											click="myBtn_clickHandler(event)"/>
+						</s:VGroup>
+				</s:VGroup>
+				<s:HGroup right="50" top="5">
+					<s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170"  
+							color="#FFFFFF"  includeIn="show">
+						<mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/>
+					</s:Panel>
+				</s:HGroup>
+			</s:HGroup>
+			<s:HGroup horizontalCenter="0" bottom="15"  verticalAlign="middle" clipAndEnableScrolling="true" width="88%">
+			<s:Label fontSize="13" color="0x323232" verticalAlign="justify" width="100%"
+						  text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click
+the button again to toggle it back to the up state."/>
+			</s:HGroup>
+	</s:Panel>	
+</s:Application>

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

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

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/ToolTipExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/ToolTipExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/ToolTipExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/ToolTipExample.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx" 
+			   skinClass="TDFGradientBackgroundSkin">
+	
+	<fx:Style>
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		
+		mx|ToolTip 
+		{
+			fontFamily: "Arial";
+			fontSize: 12;
+			fontStyle: "italic";
+			color: #000000;
+			backgroundColor: #FCEA1E;
+		}
+	</fx:Style>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="ToolTip Samples"
+			 width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Button label="Roll over me!" toolTip="This button doesn't do anything &#13;This tip could provide more instructions" />        
+		<s:TextInput toolTip="Enter some data here"/>
+		
+	</s:Panel>
+	
+</s:Application>
+

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

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

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

Added: flex/site/trunk/content/tourdeflex/spark/controls/TreeExample.mxml
URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TreeExample.mxml?rev=1619987&view=auto
==============================================================================
--- flex/site/trunk/content/tourdeflex/spark/controls/TreeExample.mxml (added)
+++ flex/site/trunk/content/tourdeflex/spark/controls/TreeExample.mxml Sat Aug 23 08:47:51 2014
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx" 
+			   skinClass="TDFGradientBackgroundSkin">
+	
+	<fx:Script>
+        <![CDATA[
+
+            [Bindable]
+            public var selectedNode:XML;
+
+            // Event handler for the Tree control change event.
+            public function treeChanged(event:Event):void {
+                selectedNode=Tree(event.target).selectedItem as XML;
+            }
+        ]]>
+    </fx:Script>
+    
+	<fx:Declarations>
+		<fx:XMLList id="treeData">
+			<node label="Mail Box">
+				<node label="Inbox">
+					<node label="Marketing"/>
+					<node label="Product Management"/>
+					<node label="Personal"/>
+				</node>
+				<node label="Outbox">
+					<node label="Professional"/>
+					<node label="Personal"/>
+				</node>
+				<node label="Spam"/>
+				<node label="Sent"/>
+			</node>	
+		</fx:XMLList>
+	</fx:Declarations>
+	
+	<s:layout>
+		<s:VerticalLayout horizontalAlign="center" />
+	</s:layout>
+    
+	<s:Panel title="Tree Control" color="0x000000" 
+			 borderAlpha="0.15" 
+			 width="600">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <s:Label width="100%" color="0x323232" 
+            text="Select a node in the Tree control."/>
+
+        <mx:HDividedBox width="100%" height="100%" color="0x323232">
+            <mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
+                showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
+            <s:TextArea height="100%" width="50%"
+                text="Selected Item: {selectedNode.@label}"/>
+        </mx:HDividedBox>
+        
+	</s:Panel>
+</s:Application>

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

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

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