First checkin into flex-examples repo!  Flex 4.10 demo app graciously donated by Sven van Zanten here: https://issues.apache.org/jira/browse/FLEX-33626
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..67f3386
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+/showcase/4.10/layouts/mobilelayouts/.actionScriptProperties
+/showcase/4.10/layouts/mobilelayouts/.flexProperties
+/showcase/4.10/layouts/mobilelayouts/.fxpProperties
+/showcase/4.10/layouts/mobilelayouts/.project
+/showcase/4.10/layouts/mobilelayouts/.settings/*.prefs
+bin-debug
diff --git a/showcase/4.10/layouts/mobilelayouts/src/Main-app.xml b/showcase/4.10/layouts/mobilelayouts/src/Main-app.xml
new file mode 100644
index 0000000..5533775
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/Main-app.xml
@@ -0,0 +1,313 @@
+<?xml version="1.0" encoding="utf-8" standalone="no"?>
+<!--
+
+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.
+
+-->
+<application xmlns="http://ns.adobe.com/air/application/3.8">
+
+<!-- Adobe AIR Application Descriptor File Template.
+
+	Specifies parameters for identifying, installing, and launching AIR applications.
+
+	xmlns - The Adobe AIR namespace: http://ns.adobe.com/air/application/3.5
+			The last segment of the namespace specifies the version 
+			of the AIR runtime required for this application to run.
+			
+	minimumPatchLevel - The minimum patch level of the AIR runtime required to run 
+			the application. Optional.
+-->
+
+	<!-- A universally unique application identifier. Must be unique across all AIR applications.
+	Using a reverse DNS-style name as the id is recommended. (Eg. com.example.ExampleApplication.) Required. -->
+	<id>Flex4.10MobileLayoutsExample</id>
+
+	<!-- Used as the filename for the application. Required. -->
+	<filename>Flex4.10MobileLayoutsExample</filename>
+
+	<!-- The name that is displayed in the AIR application installer. 
+	May have multiple values for each language. See samples or xsd schema file. Optional. -->
+	<name>Flex4.10MobileLayoutsExample</name>
+	
+	<!-- A string value of the format <0-999>.<0-999>.<0-999> that represents application version which can be used to check for application upgrade. 
+	Values can also be 1-part or 2-part. It is not necessary to have a 3-part value.
+	An updated version of application must have a versionNumber value higher than the previous version. Required for namespace >= 2.5 . -->
+	<versionNumber>0.5.0</versionNumber>
+		         
+	<!-- A string value (such as "v1", "2.5", or "Alpha 1") that represents the version of the application, as it should be shown to users. Optional. -->
+	<!-- <versionLabel></versionLabel> -->
+
+	<!-- Description, displayed in the AIR application installer.
+	May have multiple values for each language. See samples or xsd schema file. Optional. -->
+	<!-- <description></description> -->
+
+	<!-- Copyright information. Optional -->
+	<!-- <copyright></copyright> -->
+
+	<!-- Publisher ID. Used if you're updating an application created prior to 1.5.3 -->
+	<!-- <publisherID></publisherID> -->
+
+	<!-- Settings for the application's initial window. Required. -->
+	<initialWindow>
+		<!-- The main SWF or HTML file of the application. Required. -->
+		<!-- Note: In Flash Builder, the SWF reference is set automatically. -->
+		<content>[This value will be overwritten by Flash Builder in the output app.xml]</content>
+		
+		<!-- The title of the main window. Optional. -->
+		<!-- <title></title> -->
+
+		<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
+		<!-- <systemChrome></systemChrome> -->
+
+		<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
+		<!-- <transparent></transparent> -->
+
+		<!-- Whether the window is initially visible. Optional. Default false. -->
+		<!-- <visible></visible> -->
+
+		<!-- Whether the user can minimize the window. Optional. Default true. -->
+		<!-- <minimizable></minimizable> -->
+
+		<!-- Whether the user can maximize the window. Optional. Default true. -->
+		<!-- <maximizable></maximizable> -->
+
+		<!-- Whether the user can resize the window. Optional. Default true. -->
+		<!-- <resizable></resizable> -->
+
+		<!-- The window's initial width in pixels. Optional. -->
+		<!-- <width></width> -->
+
+		<!-- The window's initial height in pixels. Optional. -->
+		<!-- <height></height> -->
+
+		<!-- The window's initial x position. Optional. -->
+		<!-- <x></x> -->
+
+		<!-- The window's initial y position. Optional. -->
+		<!-- <y></y> -->
+
+		<!-- The window's minimum size, specified as a width/height pair in pixels, such as "400 200". Optional. -->
+		<!-- <minSize></minSize> -->
+
+		<!-- The window's initial maximum size, specified as a width/height pair in pixels, such as "1600 1200". Optional. -->
+		<!-- <maxSize></maxSize> -->
+
+        <!-- The aspect ratio of the app ("portrait" or "landscape" or "any"). Optional. Mobile only. Default is the natural orientation of the device -->
+
+        <!-- <aspectRatio></aspectRatio> -->
+
+        <!-- Whether the app will begin auto-orienting on launch. Optional. Mobile only. Default false -->
+
+        <!-- <autoOrients></autoOrients> -->
+
+        <!-- Whether the app launches in full screen. Optional. Mobile only. Default false -->
+
+        <!-- <fullScreen></fullScreen> -->
+
+        <!-- The render mode for the app (either auto, cpu, gpu, or direct). Optional. Default auto -->
+
+        <!-- <renderMode></renderMode> -->
+
+        <!-- Whether the default direct mode rendering context allocates storage for depth and stencil buffers.  Optional.  Default false. -->
+        <!-- <depthAndStencil></depthAndStencil> -->
+
+		<!-- Whether or not to pan when a soft keyboard is raised or lowered (either "pan" or "none").  Optional.  Defaults "pan." -->
+		<!-- <softKeyboardBehavior></softKeyboardBehavior> -->
+
+		<!-- Display Resolution for the app (either "standard" or "high"). Optional, OSX-only. Default "standard" -->
+		<!-- <requestedDisplayResolution></requestedDisplayResolution> -->
+	<autoOrients>true</autoOrients>
+        <fullScreen>false</fullScreen>
+        <visible>true</visible>
+        <softKeyboardBehavior>none</softKeyboardBehavior>
+    </initialWindow>
+
+	<!-- We recommend omitting the supportedProfiles element, -->
+	<!-- which in turn permits your application to be deployed to all -->
+	<!-- devices supported by AIR. If you wish to restrict deployment -->
+	<!-- (i.e., to only mobile devices) then add this element and list -->
+	<!-- only the profiles which your application does support. -->
+	<!-- <supportedProfiles>desktop extendedDesktop mobileDevice extendedMobileDevice</supportedProfiles> -->
+
+	<!-- Languages supported by application -->
+	<!-- Only these languages can be specified -->
+	<!-- <supportedLanguages>en de cs es fr it ja ko nl pl pt ru sv tr zh</supportedLanguages> -->
+
+	<!-- The subpath of the standard default installation location to use. Optional. -->
+	<!-- <installFolder></installFolder> -->
+
+	<!-- The subpath of the Programs menu to use. (Ignored on operating systems without a Programs menu.) Optional. -->
+	<!-- <programMenuFolder></programMenuFolder> -->
+
+	<!-- The icon the system uses for the application. For at least one resolution,
+	specify the path to a PNG file included in the AIR package. Optional. -->
+	<!-- <icon>
+		<image16x16></image16x16>
+		<image29x29></image29x29>
+		<image32x32></image32x32>
+		<image36x36></image36x36>
+		<image48x48></image48x48>
+		<image50x50></image50x50>
+		<image57x57></image57x57>
+		<image58x58></image58x58>
+		<image72x72></image72x72>
+		<image96x96></image96x96>
+		<image100x100></image100x100>
+		<image114x114></image114x114>
+		<image128x128></image128x128>
+		<image144x144></image144x144>
+		<image512x512></image512x512>
+		<image732x412></image732x412>
+		<image1024x1024></image1024x1024>
+	</icon> -->
+
+	<!-- Whether the application handles the update when a user double-clicks an update version
+	of the AIR file (true), or the default AIR application installer handles the update (false).
+	Optional. Default false. -->
+	<!-- <customUpdateUI></customUpdateUI> -->
+	
+	<!-- Whether the application can be launched when the user clicks a link in a web browser.
+	Optional. Default false. -->
+	<!-- <allowBrowserInvocation></allowBrowserInvocation> -->
+
+	<!-- Listing of file types for which the application can register. Optional. -->
+	<!-- <fileTypes> -->
+
+		<!-- Defines one file type. Optional. -->
+		<!-- <fileType> -->
+
+			<!-- The name that the system displays for the registered file type. Required. -->
+			<!-- <name></name> -->
+
+			<!-- The extension to register. Required. -->
+			<!-- <extension></extension> -->
+			
+			<!-- The description of the file type. Optional. -->
+			<!-- <description></description> -->
+			
+			<!-- The MIME content type. -->
+			<!-- <contentType></contentType> -->
+			
+			<!-- The icon to display for the file type. Optional. -->
+			<!-- <icon>
+				<image16x16></image16x16>
+				<image32x32></image32x32>
+				<image48x48></image48x48>
+				<image128x128></image128x128>
+			</icon> -->
+			
+		<!-- </fileType> -->
+	<!-- </fileTypes> -->
+
+    <!-- iOS specific capabilities -->
+	<!-- <iPhone> -->
+		<!-- A list of plist key/value pairs to be added to the application Info.plist -->
+		<!-- <InfoAdditions>
+            <![CDATA[
+                <key>UIDeviceFamily</key>
+                <array>
+                    <string>1</string>
+                    <string>2</string>
+                </array>
+                <key>UIStatusBarStyle</key>
+                <string>UIStatusBarStyleBlackOpaque</string>
+                <key>UIRequiresPersistentWiFi</key>
+                <string>YES</string>
+            ]]>
+        </InfoAdditions> -->
+        <!-- A list of plist key/value pairs to be added to the application Entitlements.plist -->
+		<!-- <Entitlements>
+            <![CDATA[
+                <key>keychain-access-groups</key>
+                <array>
+                    <string></string>
+                    <string></string>
+                </array>
+            ]]>
+        </Entitlements> -->
+	<!-- Display Resolution for the app (either "standard" or "high"). Optional. Default "standard" -->
+	<!-- <requestedDisplayResolution></requestedDisplayResolution> -->
+	<!-- Forcing Render Mode CPU for the devices mentioned. Optional  -->
+	<!-- <forceCPURenderModeForDevices></forceCPURenderModeForDevices> -->
+	<!-- File containing line separated list of external swf paths. These swfs won't be 
+	packaged inside the application and corresponding stripped swfs will be output in 
+	externalStrippedSwfs folder. -->
+	<!-- <externalSwfs></externalSwfs> -->
+	<!-- </iPhone> -->
+
+	<!-- Specify Android specific tags that get passed to AndroidManifest.xml file. -->
+    <!--<android> -->
+    <!--	<manifestAdditions>
+		<![CDATA[
+			<manifest android:installLocation="auto">
+				<uses-permission android:name="android.permission.INTERNET"/>
+				<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+				<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
+				<uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch"/>
+				<application android:enabled="true">
+					<activity android:excludeFromRecents="false">
+						<intent-filter>
+							<action android:name="android.intent.action.MAIN"/>
+							<category android:name="android.intent.category.LAUNCHER"/>
+						</intent-filter>
+					</activity>
+				</application>
+            </manifest>
+		]]>
+        </manifestAdditions> -->
+	    <!-- Color depth for the app (either "32bit" or "16bit"). Optional. Default 16bit before namespace 3.0, 32bit after -->
+        <!-- <colorDepth></colorDepth> -->
+        <!-- Indicates if the app contains video or not. Necessary for ordering of video planes with graphics plane, especially in Jellybean - if you app does video this must be set to true - valid values are true or false -->
+        <!-- <containsVideo></containsVideo> -->
+    <!-- </android> -->
+	<!-- End of the schema for adding the android specific tags in AndroidManifest.xml file -->
+
+<android>
+        <colorDepth>16bit</colorDepth>
+        <manifestAdditions><![CDATA[
+			<manifest android:installLocation="auto">
+			    <!--See the Adobe AIR documentation for more information about setting Google Android permissions-->
+			    <!--Removing the permission android.permission.INTERNET will have the side effect
+					of preventing you from debugging your application on your device-->
+			    <uses-permission android:name="android.permission.INTERNET"/>
+			    <!--<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>-->
+			    <!--<uses-permission android:name="android.permission.READ_PHONE_STATE"/>-->
+			    <!--<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>-->
+			    <!--The DISABLE_KEYGUARD and WAKE_LOCK permissions should be toggled together
+					in order to access AIR's SystemIdleMode APIs-->
+			    <!--<uses-permission android:name="android.permission.DISABLE_KEYGUARD"/>-->
+			    <!--<uses-permission android:name="android.permission.WAKE_LOCK"/>-->
+			    <!--<uses-permission android:name="android.permission.CAMERA"/>-->
+			    <!--<uses-permission android:name="android.permission.RECORD_AUDIO"/>-->
+			    <!--The ACCESS_NETWORK_STATE and ACCESS_WIFI_STATE permissions should be toggled
+					together in order to use AIR's NetworkInfo APIs-->
+			    <!--<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>-->
+			    <!--<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>-->
+			</manifest>
+			
+		]]></manifestAdditions>
+    </android>
+    <iPhone>
+        <InfoAdditions><![CDATA[
+			<key>UIDeviceFamily</key>
+			<array>
+				<string>1</string>
+				<string>2</string>
+			</array>
+		]]></InfoAdditions>
+        <requestedDisplayResolution>high</requestedDisplayResolution>
+    </iPhone>
+</application>
diff --git a/showcase/4.10/layouts/mobilelayouts/src/Main.mxml b/showcase/4.10/layouts/mobilelayouts/src/Main.mxml
new file mode 100644
index 0000000..29e4c36
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/Main.mxml
@@ -0,0 +1,32 @@
+<?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:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
+								  xmlns:s="library://ns.adobe.com/flex/spark" 
+								  applicationDPI="160">
+	
+	<fx:Style source="skins/skin.css"/>
+
+	<s:ViewNavigator label="Accordion" width="100%" height="100%" firstView="views.AccordionView"/>
+	<s:ViewNavigator label="Coverflow" width="100%" height="100%" firstView="views.CoverflowView"/>
+	<s:ViewNavigator label="Carousel" width="100%" height="100%" firstView="views.CarouselView"/>
+	<s:ViewNavigator label="Rolodex" width="100%" height="100%" firstView="views.RolodexView"/>
+	<s:ViewNavigator label="Timemachine" width="100%" height="100%" firstView="views.TimemachineView"/>
+	
+</s:TabbedViewNavigatorApplication>
\ No newline at end of file
diff --git a/showcase/4.10/layouts/mobilelayouts/src/README.md b/showcase/4.10/layouts/mobilelayouts/src/README.md
new file mode 100644
index 0000000..1e51087
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/README.md
@@ -0,0 +1,8 @@
+Flex-Demo-4.10.0-mobile
+=======================
+
+Flex 4.10.0 Experimental Layouts Demo Mobile App
+
+This project is created using the Apache Flex framework 4.10.0 rc2.
+
+In its current state it only supports a iPad like display.
diff --git a/showcase/4.10/layouts/mobilelayouts/src/assets/img.png b/showcase/4.10/layouts/mobilelayouts/src/assets/img.png
new file mode 100644
index 0000000..7263341
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/assets/img.png
Binary files differ
diff --git a/showcase/4.10/layouts/mobilelayouts/src/assets/img2.png b/showcase/4.10/layouts/mobilelayouts/src/assets/img2.png
new file mode 100644
index 0000000..b7f23de
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/assets/img2.png
Binary files differ
diff --git a/showcase/4.10/layouts/mobilelayouts/src/assets/logo_01_fullcolor.png b/showcase/4.10/layouts/mobilelayouts/src/assets/logo_01_fullcolor.png
new file mode 100644
index 0000000..376a380
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/assets/logo_01_fullcolor.png
Binary files differ
diff --git a/showcase/4.10/layouts/mobilelayouts/src/components/AccordionElement.mxml b/showcase/4.10/layouts/mobilelayouts/src/components/AccordionElement.mxml
new file mode 100644
index 0000000..b3571df
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/components/AccordionElement.mxml
@@ -0,0 +1,32 @@
+<?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:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		 xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%" xmlns:ns="http://flex.apache.org/experimental/ns">
+	
+	<s:Rect width="100%" height="100%">
+		<s:fill>
+			<s:SolidColor color="{Math.random() * 0xffffff}"/>
+		</s:fill>
+	</s:Rect>
+	
+	<s:HGroup verticalCenter="0" horizontalCenter="0" verticalAlign="middle">
+		<s:Image source="@Embed('assets/logo_01_fullcolor.png')"/>
+	</s:HGroup>
+</s:Group>
diff --git a/showcase/4.10/layouts/mobilelayouts/src/components/img1.mxml b/showcase/4.10/layouts/mobilelayouts/src/components/img1.mxml
new file mode 100644
index 0000000..20eabc3
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/components/img1.mxml
@@ -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:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		 xmlns:s="library://ns.adobe.com/flex/spark" width="300" height="220"
+		 
+		 click="mouseDownHandler(event)"
+		 mouseUp="mouseUpHandler(event)"
+		 mouseOut="mouseUpHandler(event)">
+	
+	<fx:Script>
+		<![CDATA[
+			protected function mouseDownHandler(event:MouseEvent):void
+			{
+				currentState = "down";
+			}
+			
+			protected function mouseUpHandler(event:MouseEvent):void
+			{
+				currentState = "up";
+			}
+			
+		]]>
+	</fx:Script>
+	
+	
+	<s:states>
+		<s:State name="up"/>
+		<s:State name="down"/>
+	</s:states>
+	
+	<s:Image>
+		<s:source>
+			<s:MultiDPIBitmapSource source320dpi="@Embed('assets/img.png')"/>
+		</s:source>
+	</s:Image>
+	
+	<s:Rect includeIn="down" top="0" left="0" right="0" bottom="20" radiusX="10">
+		<s:fill>
+			<s:SolidColor color="#000000" alpha="0.4"/>
+		</s:fill>
+	</s:Rect>
+	
+</s:Group>
diff --git a/showcase/4.10/layouts/mobilelayouts/src/components/img2.mxml b/showcase/4.10/layouts/mobilelayouts/src/components/img2.mxml
new file mode 100644
index 0000000..8a2e058
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/components/img2.mxml
@@ -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:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		 xmlns:s="library://ns.adobe.com/flex/spark" width="300" height="220"
+		 
+		 click="mouseDownHandler(event)"
+		 mouseUp="mouseUpHandler(event)"
+		 mouseOut="mouseUpHandler(event)">
+	
+	<fx:Script>
+		<![CDATA[
+			protected function mouseDownHandler(event:MouseEvent):void
+			{
+				currentState = "down";
+			}
+			
+			protected function mouseUpHandler(event:MouseEvent):void
+			{
+				currentState = "up";
+			}
+			
+		]]>
+	</fx:Script>
+	
+	
+	<s:states>
+		<s:State name="up"/>
+		<s:State name="down"/>
+	</s:states>
+	
+	<s:Image>
+		<s:source>
+			<s:MultiDPIBitmapSource source320dpi="@Embed('assets/img2.png')"/>
+		</s:source>
+	</s:Image>
+	
+	<s:Rect includeIn="down" top="0" left="0" right="0" bottom="20" radiusX="10">
+		<s:fill>
+			<s:SolidColor color="#000000" alpha="0.4"/>
+		</s:fill>
+	</s:Rect>
+	
+</s:Group>
diff --git a/showcase/4.10/layouts/mobilelayouts/src/components/indicator.mxml b/showcase/4.10/layouts/mobilelayouts/src/components/indicator.mxml
new file mode 100644
index 0000000..dfae66a
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/components/indicator.mxml
@@ -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.
+
+-->
+<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		 xmlns:s="library://ns.adobe.com/flex/spark" 
+		 
+		 width="{widthComp}"
+		 creationComplete="init()">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.events.FlexEvent;
+			import mx.events.TouchInteractionEvent;
+			
+			private var indicatorSize:uint = 18;
+			private var _suspendPageIndicatorShortcut:Boolean;
+			[Bindable]private var widthComp:Number;
+			
+			public var direction:String;
+			
+			public function touchInteractionStart(event:TouchInteractionEvent):void
+			{
+				_suspendPageIndicatorShortcut = true;
+			}
+			
+			public function positionChanged(event:TouchInteractionEvent):void
+			{
+				init();
+				_suspendPageIndicatorShortcut = false;
+			}
+			
+			protected function init():void
+			{
+				var pos:Number;
+				var viewportSize:Number;
+				
+				if(direction == "horizontal")
+				{
+					pos = parentDocument.scroll.viewport.horizontalScrollPosition;
+					viewportSize = parentDocument.scroll.viewport.width;
+				}
+				else
+				{
+					pos = parentDocument.scroll.viewport.verticalScrollPosition;
+					viewportSize = parentDocument.scroll.viewport.height;
+				}
+				
+				var selectedIndex:int = Math.round(pos / viewportSize);
+				var numElements:int = parentDocument.group.numElements;
+				widthComp = numElements * 18;
+				
+				
+				var g:Graphics = pageIndicator.graphics;
+				g.clear();
+				
+				var axisPos:Number = 0;
+				var centerPos:Number = indicatorSize / 2;
+				var radius:Number = indicatorSize / 4;
+				
+				for (var i:uint = 0; i < numElements; i++)
+				{
+					if (i == selectedIndex)
+						g.beginFill(0x000000, .7);
+					else
+						g.beginFill(0.000000, .3);
+					
+					g.drawCircle(axisPos + centerPos, centerPos, radius); 
+					
+					g.endFill();
+					
+					axisPos += indicatorSize;
+				}
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:SpriteVisualElement id="pageIndicator"/>
+	
+</s:Group>
diff --git a/showcase/4.10/layouts/mobilelayouts/src/navigator/MenuLeft.mxml b/showcase/4.10/layouts/mobilelayouts/src/navigator/MenuLeft.mxml
new file mode 100644
index 0000000..98208c2
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/navigator/MenuLeft.mxml
@@ -0,0 +1,23 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:s="library://ns.adobe.com/flex/spark" title="MenuLeft">
+	
+</s:View>
diff --git a/showcase/4.10/layouts/mobilelayouts/src/navigator/WelcomeView.mxml b/showcase/4.10/layouts/mobilelayouts/src/navigator/WelcomeView.mxml
new file mode 100644
index 0000000..de62dbb
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/navigator/WelcomeView.mxml
@@ -0,0 +1,31 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:s="library://ns.adobe.com/flex/spark" title="WelcomeView">
+	
+	<s:TabbedViewNavigator width="100%" height="100%">
+		<s:ViewNavigator label="Accordion" width="100%" height="100%" firstView="views.AccordionView"/>
+		<s:ViewNavigator label="Coverflow" width="100%" height="100%" firstView="views.CoverflowView"/>
+		<s:ViewNavigator label="Carousel" width="100%" height="100%" firstView="views.CarouselView"/>
+		<s:ViewNavigator label="Rolodex" width="100%" height="100%" firstView="views.RolodexView"/>
+		<s:ViewNavigator label="Timemachine" width="100%" height="100%" firstView="views.TimemachineView"/>
+	</s:TabbedViewNavigator>
+	
+</s:View>
diff --git a/showcase/4.10/layouts/mobilelayouts/src/skins/PagedIndicatorScrollerSkin.mxml b/showcase/4.10/layouts/mobilelayouts/src/skins/PagedIndicatorScrollerSkin.mxml
new file mode 100644
index 0000000..d7298e9
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/skins/PagedIndicatorScrollerSkin.mxml
@@ -0,0 +1,88 @@
+<?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.
+
+-->
+
+<!--
+
+Scroller unconditionally sets its skin's layout to private layout
+implementation that handles the scroll policies.  Scroller skins can
+only provide replacement scrollbars.  The skin's layout and
+constraints or dimensions set on skin parts will not be honored.  To
+gain more control over the layout of a viewport and its scrollbars,
+instead of using Scroller, add them to a Group and use the ScrollBar component's
+viewport property to link them together.
+ 
+-->
+
+<!--- The default skin class for the Spark Scroller component. 
+
+     @see spark.components.Scroller
+    
+      @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">
+
+    <fx:Metadata>
+    <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("spark.components.Scroller")]
+    ]]>
+    </fx:Metadata> 
+        
+    <fx:Script>
+    <![CDATA[    
+        /**
+         *  @private
+         */
+        override public function beginHighlightBitmapCapture() : Boolean
+        {
+            var needUpdate:Boolean = super.beginHighlightBitmapCapture();
+            
+            // Draw an opaque rect that fill our entire skin. Our background
+            // is transparent, but we don't want focus/error skins to
+            // poke through.  This is safe to do since we don't have any 
+            // graphic elements as direct children.
+            graphics.beginFill(0);
+            graphics.drawRect(0, 0, width, height);
+            graphics.endFill();
+
+            return needUpdate;
+        }
+        
+        /**
+         *  @private
+         */
+        override public function endHighlightBitmapCapture() : Boolean
+        {
+            var needUpdate:Boolean = super.endHighlightBitmapCapture();
+            
+            // Clear the rect we drew in beginBitmapCapture();
+            graphics.clear();
+
+            return needUpdate;
+        }
+    ]]>
+    </fx:Script>
+	
+</s:SparkSkin>
diff --git a/showcase/4.10/layouts/mobilelayouts/src/skins/alertButtonSkin.mxml b/showcase/4.10/layouts/mobilelayouts/src/skins/alertButtonSkin.mxml
new file mode 100644
index 0000000..df64d01
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/skins/alertButtonSkin.mxml
@@ -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:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:s="library://ns.adobe.com/flex/spark">
+	<!-- host component -->
+	<fx:Metadata>
+		[HostComponent("spark.components.Button")]
+	</fx:Metadata>
+	
+	<!-- states -->
+	<s:states>
+		<s:State name="disabled" />
+		<s:State name="down" />
+		<s:State name="over" />
+		<s:State name="up" />
+	</s:states>
+	
+	<!-- SkinParts
+	name=iconDisplay, type=spark.primitives.BitmapImage, required=false
+	name=labelDisplay, type=spark.core.IDisplayText, required=false
+	-->
+	
+	<!-- Background & Stroke -->
+	<s:Rect width="100%" height="100%" top="0" left="0" right="0" bottom="0" radiusX="5">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="#515151"/>
+				<s:GradientEntry color="#000101"/>
+			</s:LinearGradient>
+		</s:fill>
+		<s:stroke>
+			<s:LinearGradientStroke rotation="90">
+				<s:GradientEntry color="#bebebe"/>
+				<s:GradientEntry color="#000101" ratio="0.1"/>
+			</s:LinearGradientStroke>
+		</s:stroke>
+	</s:Rect>
+	
+	<s:Group width="100%" height="100%">
+		<s:layout>
+			<s:HorizontalLayout gap="10" horizontalAlign="center" verticalAlign="middle"/>
+		</s:layout>
+		
+		<!-- Label -->
+		<s:Label id="labelDisplay" color="#ffffff" fontWeight="bold" fontSize="18" maxDisplayedLines="1" 
+				 top="10" bottom="10" left="15" right="15"
+				 height="30" horizontalCenter="0" verticalCenter="1"/>
+	</s:Group>
+	
+</s:Skin>
diff --git a/showcase/4.10/layouts/mobilelayouts/src/skins/alertSkin.mxml b/showcase/4.10/layouts/mobilelayouts/src/skins/alertSkin.mxml
new file mode 100644
index 0000000..b01b2ba
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/skins/alertSkin.mxml
@@ -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:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:s="library://ns.adobe.com/flex/spark" maxWidth="350">
+	<!-- host component -->
+	<fx:Metadata>
+		[HostComponent("spark.components.Alert")]
+	</fx:Metadata>
+	
+	<!-- states -->
+	<s:states>
+		<s:State name="disabledWithControlBar" />
+		<s:State name="normalWithControlBar" />
+		<s:State name="disabled" />
+		<s:State name="normal" />
+	</s:states>
+	
+	<!-- SkinParts
+	name=buttonGroup, type=spark.components.Group, required=false
+	name=contentGroup, type=spark.components.Group, required=false
+	name=iconGroup, type=spark.components.Group, required=false
+	name=messageDisplay, type=spark.components.supportClasses.TextBase, required=false
+	name=titleDisplay, type=spark.core.IDisplayText, required=false
+	name=controlBarGroup, type=spark.components.Group, required=false
+	-->
+	
+	<!-- Background & Stroke -->
+	<s:Rect width="100%" height="100%" top="0" left="0" right="0" bottom="0" radiusX="10">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="#515151" alpha="0.9"/>
+				<s:GradientEntry color="#000101" alpha="0.9"/>
+			</s:LinearGradient>
+		</s:fill>
+		<s:stroke>
+			<s:LinearGradientStroke rotation="90">
+				<s:GradientEntry color="#bebebe"/>
+				<s:GradientEntry color="#000101" ratio="0.1"/>
+			</s:LinearGradientStroke>
+		</s:stroke>
+	</s:Rect>
+	
+	<s:VGroup width="100%" height="100%" top="0" left="0" right="0" bottom="0" gap="20"
+			  paddingBottom="20" paddingLeft="30" paddingRight="20" paddingTop="20">
+		<s:Label id="titleDisplay" fontWeight="bold" fontSize="15" maxDisplayedLines="1" color="#ffffff"/>
+		<s:Label id="messageDisplay" color="#ffffff" paddingLeft="5" paddingRight="5" width="100%"/>
+		<s:Group id="buttonGroup" width="100%">
+			<s:layout>
+				<s:HorizontalLayout gap="10" horizontalAlign="center"/>
+			</s:layout>
+		</s:Group>
+	</s:VGroup>
+	
+</s:Skin>
diff --git a/showcase/4.10/layouts/mobilelayouts/src/skins/skin.css b/showcase/4.10/layouts/mobilelayouts/src/skins/skin.css
new file mode 100644
index 0000000..b6df488
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/skins/skin.css
@@ -0,0 +1,29 @@
+/*//////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+///////////////////////////////////////////////////////////////////////////////*/
+
+@namespace s "library://ns.adobe.com/flex/spark";
+@namespace ns "http://flex.apache.org/experimental/ns";
+
+ns|Alert {
+	skinClass:ClassReference("skins.AlertSkin");
+}
+
+s|ActionBar {
+	skinClass:ClassReference("spark.skins.mobile.ActionBarSkin")
+}
\ No newline at end of file
diff --git a/showcase/4.10/layouts/mobilelayouts/src/views/AccordionView.mxml b/showcase/4.10/layouts/mobilelayouts/src/views/AccordionView.mxml
new file mode 100644
index 0000000..7fd9b59
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/views/AccordionView.mxml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:s="library://ns.adobe.com/flex/spark" title="Accordion" xmlns:ns="http://flex.apache.org/experimental/ns"
+		destructionPolicy="never" xmlns:components="components.*" creationComplete="init(event)">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.events.FlexEvent;
+			
+			import spark.components.Alert;
+			
+			[Bindable]private var direction:String = "horizontal";
+			
+			protected function clickHandler(event:MouseEvent):void
+			{
+				navigator.pushView(NewView);
+			}
+			
+			protected function direc_changeHandler(event:Event):void
+			{
+				direction = String(direc.selectedValue);
+			}
+			
+			protected function init(event:FlexEvent):void
+			{
+				Alert.show("Experience the newest layoutcomponents in Flex Apache 4.10.0", "Experimental components in 4.10.0")
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:RadioButtonGroup id="direc" change="direc_changeHandler(event)"/>
+	</fx:Declarations>
+	
+	<s:actionContent>
+		<s:CalloutButton id="callOutButton" label="Settings" calloutDestructionPolicy="never" 
+						 horizontalPosition="end" verticalPosition="after">
+			<s:calloutLayout>
+				<s:VerticalLayout paddingTop="10" paddingBottom="10" paddingRight="10" paddingLeft="10"/>
+			</s:calloutLayout>
+			<s:calloutContent>
+				<s:VGroup fontWeight="bold" fontSize="12" alternatingItemColors="{new Array([0xf6f6f6,0xe5e5e5])}">
+					<s:VGroup>
+						<s:Label text="duration"/>
+						<s:HSlider id="duration" minimum="0" value="500" maximum="2000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="direction"/>
+						<s:HGroup>
+							<s:RadioButton label="Horizontal" value="horizontal" groupName="direc" selected="true"/>
+							<s:RadioButton label="Vertical" value="vertical" groupName="direc"/>
+						</s:HGroup>
+					</s:VGroup>
+				</s:VGroup>
+			</s:calloutContent>
+		</s:CalloutButton>
+	</s:actionContent>
+	
+	<s:Scroller id="scroll" width="100%" height="100%" pageScrollingEnabled="true"  skinClass="skins.PagedIndicatorScrollerSkin"
+				touchInteractionStart="Indicator.touchInteractionStart(event)" touchInteractionEnd="Indicator.positionChanged(event)">
+		<s:Group id="group">
+			<s:layout>
+				<ns:AccordionLayout useScrollBarForNavigation="true" scrollBarDirection="{direction}" 
+									duration="{duration.value}" direction="{direction}"/>
+			</s:layout>
+			
+			<components:AccordionElement/>
+			<components:AccordionElement/>
+			<components:AccordionElement/>
+			<components:AccordionElement/>
+			<components:AccordionElement/>
+			<components:AccordionElement/>
+			<components:AccordionElement/>
+			<components:AccordionElement/>
+			<components:AccordionElement/>
+			<components:AccordionElement/>
+			
+		</s:Group>
+	</s:Scroller>
+	
+	<components:Indicator id="Indicator" horizontalCenter="0" bottom="40" direction="{direction}"/>
+	
+</s:View>
diff --git a/showcase/4.10/layouts/mobilelayouts/src/views/CarouselView.mxml b/showcase/4.10/layouts/mobilelayouts/src/views/CarouselView.mxml
new file mode 100644
index 0000000..aa4be6d
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/views/CarouselView.mxml
@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:s="library://ns.adobe.com/flex/spark" title="Carousel" xmlns:ns="http://flex.apache.org/experimental/ns"
+		destructionPolicy="never" xmlns:components="components.*">
+	
+	<fx:Script>
+		<![CDATA[
+			
+			protected function clickHandler(event:MouseEvent):void
+			{
+				navigator.pushView(NewView);
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:actionContent>
+		<s:CalloutButton id="callOutButton" label="Settings" calloutDestructionPolicy="never" 
+						 horizontalPosition="end" verticalPosition="after">
+			<s:calloutLayout>
+				<s:VerticalLayout paddingTop="10" paddingBottom="10" paddingRight="10" paddingLeft="10"/>
+			</s:calloutLayout>
+			<s:calloutContent>
+				<s:VGroup fontWeight="bold" fontSize="12" alternatingItemColors="{new Array([0xf6f6f6,0xe5e5e5])}">
+					<s:VGroup>
+						<s:Label text="angle"/>
+						<s:HSlider id="angle" minimum="0" value="360" maximum="700" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="radiusX"/>
+						<s:HSlider id="radiusX" minimum="0" value="580" maximum="2000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="radiusY"/>
+						<s:HSlider id="radiusY" minimum="0" value="0" maximum="2000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="radiusZ"/>
+						<s:HSlider id="radiusZ" minimum="0" value="650" maximum="2000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="fieldOfView"/>
+						<s:HSlider id="fieldOfView" minimum="10" value="10" maximum="179" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="focalLength"/>
+						<s:HSlider id="focalLength" minimum="10" value="2000" maximum="6000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="duration"/>
+						<s:HSlider id="duration" minimum="0" value="250" maximum="2000" stepSize="10"/>
+					</s:VGroup>
+				</s:VGroup>
+			</s:calloutContent>
+		</s:CalloutButton>
+	</s:actionContent>
+	
+	<s:Rect width="100%" height="100%">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="#000000" alpha="0.05"/>
+				<s:GradientEntry color="#000000" alpha="0.2"/>
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	
+	<s:Scroller id="scroll" width="100%" height="100%" horizontalScrollPolicy="on" verticalScrollPolicy="off" pageScrollingEnabled="true"
+				touchInteractionStart="Indicator.touchInteractionStart(event)" touchInteractionEnd="Indicator.positionChanged(event)" skinClass="skins.PagedIndicatorScrollerSkin">
+		<s:Group id="group">
+			<s:layout>
+				<ns:CarouselLayout useScrollBarForNavigation="true" scrollBarDirection="horizontal" angle="{angle.value}" radiusX="{radiusX.value}" depthColor="1" depthColorAlpha="0.5"
+								   fieldOfView="{fieldOfView.value}" focalLength="{focalLength.value}"
+								   duration="{duration.value}" radiusY="{radiusY.value}" radiusZ="{radiusZ.value}"/>
+			</s:layout>
+			
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+
+		</s:Group>
+	</s:Scroller>
+	
+	<components:Indicator id="Indicator" horizontalCenter="0" bottom="40" direction="horizontal"/>
+	
+</s:View>
diff --git a/showcase/4.10/layouts/mobilelayouts/src/views/CoverflowView.mxml b/showcase/4.10/layouts/mobilelayouts/src/views/CoverflowView.mxml
new file mode 100644
index 0000000..7bd72c9
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/views/CoverflowView.mxml
@@ -0,0 +1,119 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:s="library://ns.adobe.com/flex/spark" title="Coverflow" xmlns:ns="http://flex.apache.org/experimental/ns"
+		destructionPolicy="never" xmlns:components="components.*">
+	
+	<fx:Script>
+		<![CDATA[
+			
+			protected function clickHandler(event:MouseEvent):void
+			{
+				navigator.pushView(NewView);
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:actionContent>
+		<s:CalloutButton id="callOutButton" label="Settings" calloutDestructionPolicy="never" 
+						 horizontalPosition="end" verticalPosition="after">
+			<s:calloutLayout>
+				<s:VerticalLayout paddingTop="10" paddingBottom="10" paddingRight="10" paddingLeft="10"/>
+			</s:calloutLayout>
+			<s:calloutContent>
+				<s:VGroup fontWeight="bold" fontSize="12" alternatingItemColors="{new Array([0xf6f6f6,0xe5e5e5])}">
+					<s:VGroup>
+						<s:Label text="SelectedHoriontalDisplacement"/>
+						<s:HSlider id="SelectedHoriontalDisplacement" minimum="0" value="320" maximum="700" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="horizontalDisplacement"/>
+						<s:HSlider id="horizontalDisplacement" minimum="0" value="370" maximum="500" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="SelectedVerticalDisplacement"/>
+						<s:HSlider id="SelectedVerticalDisplacement" minimum="0" value="0" maximum="600" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="verticalDisplacement"/>
+						<s:HSlider id="verticalDisplacement" minimum="0" value="0" maximum="600" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="fieldOfView"/>
+						<s:HSlider id="fieldOfView" minimum="10" value="40" maximum="179" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="focalLength"/>
+						<s:HSlider id="focalLength" minimum="10" value="660" maximum="2000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="duration"/>
+						<s:HSlider id="duration" minimum="0" value="250" maximum="2000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="maximumZ"/>
+						<s:HSlider id="maximumZ" minimum="0" value="50" maximum="5000" stepSize="10"/>
+					</s:VGroup>
+				</s:VGroup>
+			</s:calloutContent>
+		</s:CalloutButton>
+	</s:actionContent>
+	
+	<s:Rect width="100%" height="100%">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="#000000" alpha="0.05"/>
+				<s:GradientEntry color="#000000" alpha="0.2"/>
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	
+	<s:Scroller id="scroll" width="100%" height="100%" horizontalScrollPolicy="on" verticalScrollPolicy="off" pageScrollingEnabled="true"
+				touchInteractionStart="Indicator.touchInteractionStart(event)" touchInteractionEnd="Indicator.positionChanged(event)" skinClass="skins.PagedIndicatorScrollerSkin">
+		<s:Group id="group">
+			<s:layout>
+				<ns:CoverflowLayout id="coverFlowLayoutID" useScrollBarForNavigation="true" scrollBarDirection="horizontal"
+									selectedHorizontalDisplacement="{SelectedHoriontalDisplacement.value}" 
+									horizontalDisplacement="{horizontalDisplacement.value}" 
+									selectedVerticalDisplacement="{SelectedVerticalDisplacement.value}"
+									verticalDisplacement="{verticalDisplacement.value}" horizontalScrollPosition="4096"
+									fieldOfView="{fieldOfView.value}" focalLength="{focalLength.value}"
+									duration="{duration.value}" maximumZ="{maximumZ.value}"/>
+			</s:layout>
+			
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			
+		</s:Group>
+	</s:Scroller>
+	
+	<components:Indicator id="Indicator" horizontalCenter="0" bottom="40" direction="horizontal"/>
+	
+</s:View>
diff --git a/showcase/4.10/layouts/mobilelayouts/src/views/RolodexView.mxml b/showcase/4.10/layouts/mobilelayouts/src/views/RolodexView.mxml
new file mode 100644
index 0000000..c328793
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/views/RolodexView.mxml
@@ -0,0 +1,130 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:s="library://ns.adobe.com/flex/spark" title="Rolodex" xmlns:ns="http://flex.apache.org/experimental/ns"
+		destructionPolicy="never" xmlns:components="components.*">
+	
+	<fx:Script>
+		<![CDATA[
+			
+			[Bindable]private var rotateAnchor:String = "top";
+			
+			protected function clickHandler(event:MouseEvent):void
+			{
+				navigator.pushView(NewView);
+			}
+			
+			protected function rotate_changeHandler(event:Event):void
+			{
+				rotateAnchor = String(rotate.selectedValue);
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:DropShadowFilter id="drop" alpha="0.2" blurX="40" blurY="40"/>
+		
+		<s:RadioButtonGroup id="rotate" change="rotate_changeHandler(event)"/>
+	</fx:Declarations>
+	
+	<s:actionContent>
+		<s:CalloutButton id="callOutButton" label="Settings" calloutDestructionPolicy="never" 
+						 horizontalPosition="end" verticalPosition="after">
+			<s:calloutLayout>
+				<s:VerticalLayout paddingTop="10" paddingBottom="10" paddingRight="10" paddingLeft="10"/>
+			</s:calloutLayout>
+			<s:calloutContent>
+				<s:VGroup fontWeight="bold" fontSize="12" alternatingItemColors="{new Array([0xf6f6f6,0xe5e5e5])}">
+					<s:VGroup>
+						<s:Label text="horizontalDisplacement"/>
+						<s:HSlider id="horizontalDisplacement" minimum="0" value="0" maximum="2000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="verticalDisplacement"/>
+						<s:HSlider id="verticalDisplacement" minimum="0" value="180" maximum="2000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="fieldOfView"/>
+						<s:HSlider id="fieldOfView" minimum="10" value="30" maximum="179" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="focalLength"/>
+						<s:HSlider id="focalLength" minimum="10" value="870" maximum="6000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="maximumZ"/>
+						<s:HSlider id="maximumZ" minimum="10" value="2000" maximum="6000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="duration"/>
+						<s:HSlider id="duration" minimum="0" value="500" maximum="2000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="rotationAnchor"/>
+						<s:HGroup>
+							<s:RadioButton label="Top" value="top" groupName="rotate" selected="true"/>
+							<s:RadioButton label="Bottom" value="bottom" groupName="rotate"/>
+							<s:RadioButton label="Left" value="left" groupName="rotate"/>
+							<s:RadioButton label="Right" value="right" groupName="rotate"/>
+						</s:HGroup>
+					</s:VGroup>
+				</s:VGroup>
+			</s:calloutContent>
+		</s:CalloutButton>
+	</s:actionContent>
+	
+	<s:Rect width="100%" height="100%">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="#000000" alpha="0.05"/>
+				<s:GradientEntry color="#000000" alpha="0.2"/>
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	
+	<s:Scroller id="scroll" width="100%" height="100%" pageScrollingEnabled="true" skinClass="skins.PagedIndicatorScrollerSkin"
+				touchInteractionStart="Indicator.touchInteractionStart(event)" touchInteractionEnd="Indicator.positionChanged(event)" >
+		<s:Group id="group">
+			<s:layout>
+				<ns:RolodexLayout useScrollBarForNavigation="true" scrollBarDirection="vertical"
+								  duration="{duration.value}" fieldOfView="{fieldOfView.value}" focalLength="{focalLength.value}"
+								  horizontalDisplacement="{horizontalDisplacement.value}" verticalDisplacement="{verticalDisplacement.value}"
+								  maximumZ="{maximumZ.value}" rotationAnchor="{rotateAnchor}"/>
+			</s:layout>
+			
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			
+		</s:Group>
+	</s:Scroller>
+	
+	<components:Indicator id="Indicator" horizontalCenter="0" bottom="40" direction="vertical"/>
+	
+</s:View>
diff --git a/showcase/4.10/layouts/mobilelayouts/src/views/TimemachineView.mxml b/showcase/4.10/layouts/mobilelayouts/src/views/TimemachineView.mxml
new file mode 100644
index 0000000..ffe5958
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/views/TimemachineView.mxml
@@ -0,0 +1,108 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:s="library://ns.adobe.com/flex/spark" title="Timemachine" xmlns:ns="http://flex.apache.org/experimental/ns"
+		destructionPolicy="never" xmlns:components="components.*">
+	
+	<fx:Script>
+		<![CDATA[
+			
+			protected function clickHandler(event:MouseEvent):void
+			{
+				navigator.pushView(NewView);
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:actionContent>
+		<s:CalloutButton id="callOutButton" label="Settings" calloutDestructionPolicy="never" 
+						 horizontalPosition="end" verticalPosition="after">
+			<s:calloutLayout>
+				<s:VerticalLayout paddingTop="10" paddingBottom="10" paddingRight="10" paddingLeft="10"/>
+			</s:calloutLayout>
+			<s:calloutContent>
+				<s:VGroup fontWeight="bold" fontSize="12" alternatingItemColors="{new Array([0xf6f6f6,0xe5e5e5])}">
+					<s:VGroup>
+						<s:Label text="horizontalDisplacement"/>
+						<s:HSlider id="horizontalDisplacement" minimum="0" value="0" maximum="2000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="verticalDisplacement"/>
+						<s:HSlider id="verticalDisplacement" minimum="0" value="0" maximum="2000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="fieldOfView"/>
+						<s:HSlider id="fieldOfView" minimum="10" value="30" maximum="179" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="focalLength"/>
+						<s:HSlider id="focalLength" minimum="10" value="870" maximum="6000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="maximumZ"/>
+						<s:HSlider id="maximumZ" minimum="10" value="3000" maximum="6000" stepSize="10"/>
+					</s:VGroup>
+					<s:VGroup>
+						<s:Label text="duration"/>
+						<s:HSlider id="duration" minimum="0" value="500" maximum="2000" stepSize="10"/>
+					</s:VGroup>
+				</s:VGroup>
+			</s:calloutContent>
+		</s:CalloutButton>
+	</s:actionContent>
+	
+	<s:Rect width="100%" height="100%">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="#000000" alpha="0.05"/>
+				<s:GradientEntry color="#000000" alpha="0.2"/>
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	
+	<s:Scroller id="scroll" width="100%" height="100%" pageScrollingEnabled="true" skinClass="skins.PagedIndicatorScrollerSkin"
+				touchInteractionStart="Indicator.touchInteractionStart(event)" touchInteractionEnd="Indicator.positionChanged(event)" >
+		<s:Group id="group">
+			<s:layout>
+				<ns:TimeMachineLayout useScrollBarForNavigation="true" scrollBarDirection="vertical" 
+									  duration="{duration.value}" fieldOfView="{fieldOfView.value}" focalLength="{focalLength.value}"
+									  horizontalDisplacement="{horizontalDisplacement.value}" verticalDisplacement="{verticalDisplacement.value}"
+									  maximumZ="{maximumZ.value}"/>
+			</s:layout>
+			
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			<components:Img1 click="clickHandler(event)"/>
+			<components:Img2 click="clickHandler(event)"/>
+			
+		</s:Group>
+	</s:Scroller>
+	
+	<components:Indicator id="Indicator" horizontalCenter="0" bottom="40" direction="vertical"/>
+	
+</s:View>
diff --git a/showcase/4.10/layouts/mobilelayouts/src/views/newView.mxml b/showcase/4.10/layouts/mobilelayouts/src/views/newView.mxml
new file mode 100644
index 0000000..aa4db44
--- /dev/null
+++ b/showcase/4.10/layouts/mobilelayouts/src/views/newView.mxml
@@ -0,0 +1,29 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:s="library://ns.adobe.com/flex/spark" title="newView">
+	
+	<s:navigationContent>
+		<s:Button label="back" click="navigator.popView()"/>
+	</s:navigationContent>
+	
+	<s:Label text="Hallo" verticalCenter="0" horizontalCenter="0"/>
+	
+</s:View>