flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bigosma...@apache.org
Subject [2/2] git commit: [flex-examples] [refs/heads/develop] - Adding the new Tour de Flex Mobile app contributed by George Yabra JIRA Ticket: https://issues.apache.org/jira/browse/FLEX-33839
Date Thu, 07 Nov 2013 01:06:08 GMT
Adding the new Tour de Flex Mobile app contributed by George Yabra
JIRA Ticket: https://issues.apache.org/jira/browse/FLEX-33839


Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/351fb18f
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/351fb18f
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/351fb18f

Branch: refs/heads/develop
Commit: 351fb18f037f5c4e01f89f463621fe6c2448c582
Parents: a75f536
Author: Om <bigosmallm@gmail.com>
Authored: Wed Nov 6 17:02:48 2013 -0800
Committer: Om <bigosmallm@gmail.com>
Committed: Wed Nov 6 17:02:48 2013 -0800

----------------------------------------------------------------------
 tourdeflexmobile/NOTICE                         |   3 +
 .../src/AIRViews/AccelerometerView.mxml         | 152 +++++++++
 tourdeflexmobile/src/AIRViews/SQLiteView.mxml   | 153 +++++++++
 .../src/LayoutViews/AccordionLayoutView.mxml    |  57 ++++
 .../src/LayoutViews/CarouselLayoutView.mxml     |  57 ++++
 .../src/LayoutViews/CoverFlowLayoutView.mxml    |  57 ++++
 .../src/LayoutViews/HorizontalLayoutView.mxml   |  57 ++++
 .../src/LayoutViews/RolodexLayoutView.mxml      |  57 ++++
 .../src/LayoutViews/StackLayoutView.mxml        |  57 ++++
 .../src/LayoutViews/TileLayoutView.mxml         |  60 ++++
 .../src/LayoutViews/TimeMachineLayoutView.mxml  |  57 ++++
 .../src/LayoutViews/VerticalLayoutView.mxml     |  57 ++++
 tourdeflexmobile/src/TourDeFlexMobile-app.xml   | 313 +++++++++++++++++++
 tourdeflexmobile/src/TourDeFlexMobile.mxml      | 171 ++++++++++
 tourdeflexmobile/src/UIViews/ButtonBarView.mxml |  79 +++++
 .../src/UIViews/CalloutButtonView.mxml          |  72 +++++
 tourdeflexmobile/src/UIViews/CheckboxView.mxml  |  69 ++++
 .../src/UIViews/DateSpinnerView.mxml            |  59 ++++
 tourdeflexmobile/src/UIViews/ListView.mxml      |  85 +++++
 .../src/UIViews/MobileGridView.mxml             | 106 +++++++
 .../src/UIViews/RadiobuttonView.mxml            |  70 +++++
 .../src/UIViews/SpinnerListView.mxml            | 116 +++++++
 tourdeflexmobile/src/UIViews/TextInputView.mxml |  87 ++++++
 .../src/UIViews/ToggleSwitchView.mxml           |  58 ++++
 tourdeflexmobile/src/assets/icons/160/about.png | Bin 0 -> 1333 bytes
 tourdeflexmobile/src/assets/icons/160/add.png   | Bin 0 -> 1090 bytes
 tourdeflexmobile/src/assets/icons/160/dock.png  | Bin 0 -> 1129 bytes
 tourdeflexmobile/src/assets/icons/240/about.png | Bin 0 -> 1629 bytes
 tourdeflexmobile/src/assets/icons/240/add.png   | Bin 0 -> 1142 bytes
 tourdeflexmobile/src/assets/icons/240/dock.png  | Bin 0 -> 1211 bytes
 tourdeflexmobile/src/assets/icons/320/about.png | Bin 0 -> 2040 bytes
 tourdeflexmobile/src/assets/icons/320/add.png   | Bin 0 -> 1221 bytes
 tourdeflexmobile/src/assets/icons/320/dock.png  | Bin 0 -> 1337 bytes
 tourdeflexmobile/src/assets/images/bg.png       | Bin 0 -> 2848 bytes
 tourdeflexmobile/src/assets/images/box1.png     | Bin 0 -> 11909 bytes
 tourdeflexmobile/src/assets/images/box2.png     | Bin 0 -> 9023 bytes
 tourdeflexmobile/src/assets/images/box3.png     | Bin 0 -> 11479 bytes
 tourdeflexmobile/src/assets/images/logo.png     | Bin 0 -> 18070 bytes
 .../src/renderers/MenuRenderer.mxml             |  59 ++++
 tourdeflexmobile/src/styles.css                 |  66 ++++
 tourdeflexmobile/src/views/BlogView.mxml        |  52 +++
 tourdeflexmobile/src/views/HttpServiceView.mxml |  76 +++++
 42 files changed, 2362 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/NOTICE
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/NOTICE b/tourdeflexmobile/NOTICE
new file mode 100644
index 0000000..4078b02
--- /dev/null
+++ b/tourdeflexmobile/NOTICE
@@ -0,0 +1,3 @@
+The Android icons used here are licensed under Creative Commons Attribution 2.5 license (the http://creativecommons.org/licenses/by/2.5/)
+The icons are from this URL under the Action Bar section:
+http://developer.android.com/design/style/iconography.html
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/AIRViews/AccelerometerView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/AIRViews/AccelerometerView.mxml b/tourdeflexmobile/src/AIRViews/AccelerometerView.mxml
new file mode 100644
index 0000000..50b8553
--- /dev/null
+++ b/tourdeflexmobile/src/AIRViews/AccelerometerView.mxml
@@ -0,0 +1,152 @@
+<?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="Accelerometer" viewActivate="init()" viewDeactivate="deactivate(event)">
+	
+	<fx:Script>
+		<![CDATA[
+			import flash.display.Sprite;
+			import flash.events.AccelerometerEvent;
+			import flash.events.Event;
+			import flash.sensors.Accelerometer;
+			
+			import spark.events.ViewNavigatorEvent;
+			import spark.skins.mobile.TextAreaSkin;		
+			
+			private var ball:Sprite;
+			private var accelerometer:Accelerometer;        
+			private var xSpeed:Number = 0;
+			private var ySpeed:Number = 0;
+			private const RADIUS:Number = 20;
+			
+			private function init():void
+			{
+				stage.autoOrients = false;
+				
+				createBall();
+				
+				if (Accelerometer.isSupported)
+				{
+					accelerometer = new Accelerometer();
+					accelerometer.addEventListener(AccelerometerEvent.UPDATE, accUpdateHandler);
+					stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
+				}
+			}
+			
+			private function createBall():void
+			{	
+				ball = new Sprite();
+				ball.graphics.beginFill(0xFF0000);
+				ball.graphics.drawCircle(0, 0, RADIUS);
+				ball.cacheAsBitmap = true;
+				ball.x = stage.stageWidth / 2;
+				ball.y = stage.stageHeight / 2;
+				container.addChild(ball);
+			}
+			
+			private function enterFrameHandler(event:Event):void
+			{
+				event.stopPropagation();
+				moveBall();
+			}
+			
+			private function moveBall():void
+			{
+				var newX:Number = ball.x + xSpeed;
+				var newY:Number = ball.y + ySpeed;
+				
+				if (newX < 20)
+				{
+					ball.x = RADIUS;
+					xSpeed = 0;
+				}
+				
+				else if (newX > stage.stageWidth - RADIUS)
+				{
+					ball.x = stage.stageWidth - RADIUS;
+					xSpeed = 0;
+				}
+				
+				else
+				{
+					ball.x += xSpeed;
+				}
+				
+				if (newY < RADIUS)
+				{
+					ball.y = RADIUS;
+					ySpeed = 0;
+				}
+				
+				else if (newY > this.height - RADIUS)
+				{
+					ball.y = this.height - RADIUS;
+					ySpeed = 0;
+				}
+				
+				else
+				{
+					ball.y += ySpeed;
+				}
+			}
+			
+			private function accUpdateHandler(event:AccelerometerEvent):void
+			{
+				xSpeed -= event.accelerationX * 2;
+				ySpeed += event.accelerationY * 2;
+			}
+			
+			protected function deactivate(event:ViewNavigatorEvent):void
+			{
+				stage.autoOrients = true;
+			}
+			
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				if(currentState == "DemoState"){
+					currentState = "InfoState";				
+				}else if(currentState == "InfoState"){
+					currentState = "DemoState";
+				}
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="DemoState"/>
+		<s:State name="InfoState"/>
+	</s:states>
+	
+	<fx:Declarations>
+		<s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
+		<s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+	</fx:Declarations>
+
+	<s:SpriteVisualElement id="container" includeIn="DemoState"/>
+	
+	<s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The Accelerometer class dispatches events based on activity detected by the device's motion sensor. This data represents the device's location or movement along a 3-dimensional axis. When the device moves, the sensor detects this movement and returns acceleration data. The Accelerometer class provides methods to query whether or not accelerometer is supported, and also to set the rate at which acceleration events are dispatched.
+				&#xd; &#xd;Note: Use the Accelerometer.isSupported property to test the runtime environment for the ability to use this feature. While the Accelerometer class and its members are accessible to the Runtime Versions listed for each API entry, the current environment for the runtime determines the availability of this feature. For example, you can compile code using the Accelerometer class properties for Flash Player 10.1, but you need to use the Accelerometer.isSupported property to test for the availability of the Accelerometer feature in the current deployment environment for the Flash Player runtime. If Accelerometer.isSupported is true at runtime, then Accelerometer support currently exists."/>
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+	</s:actionContent>
+	
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/AIRViews/SQLiteView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/AIRViews/SQLiteView.mxml b/tourdeflexmobile/src/AIRViews/SQLiteView.mxml
new file mode 100644
index 0000000..c2db60f
--- /dev/null
+++ b/tourdeflexmobile/src/AIRViews/SQLiteView.mxml
@@ -0,0 +1,153 @@
+<?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="SQLite" viewActivate="init(event)">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			import mx.events.FlexEvent;
+			
+			import spark.events.ViewNavigatorEvent;
+			import spark.skins.mobile.TextAreaSkin;
+			
+			public var conn:SQLConnection;
+			public var db:File;
+			private var myStatement:SQLStatement;
+			private var myQuery:String;
+			
+			protected function init(event:ViewNavigatorEvent):void
+			{
+				db = File.applicationStorageDirectory.resolvePath("flex.db");
+				conn = new SQLConnection();
+				conn.addEventListener(SQLEvent.OPEN, openDatabaseHandler);
+				conn.openAsync(db);
+			}
+			
+			private function loadEntries():void{
+				myStatement = new SQLStatement();
+				myStatement.sqlConnection = conn;
+				myStatement.addEventListener(SQLEvent.RESULT, openDatabaseResult);				
+				var myQuery:String = "SELECT * FROM items";				
+				myStatement.text = myQuery;
+				myStatement.execute();
+			}
+			
+			private function openDatabaseHandler(event:SQLEvent):void{
+				myStatement = new SQLStatement();
+				myStatement.sqlConnection = conn;
+				myStatement.addEventListener(SQLEvent.RESULT, loadDatabaseResult);				
+				myQuery = "CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY, itemText TEXT)";
+				myStatement.text = myQuery;
+				myStatement.execute();
+			}
+			
+			private function loadDatabaseResult(event:SQLEvent):void{
+				loadEntries();
+			}
+			
+			private function openDatabaseResult(event:SQLEvent):void{
+				var itemsArray:Array = new Array();
+				
+				var result:SQLResult = myStatement.getResult();
+				
+				if(result.data != null){
+					for(var i:int = 0; i<result.data.length; i++){
+						itemsArray.push({label:unescape(result.data[i].itemText)});					
+					}
+				}
+							
+				itemsCollection = new ArrayCollection(itemsArray);
+				itemsList.dataProvider = itemsCollection;
+			}
+			
+			private function modifyDatabaseResult(event:SQLEvent):void{
+				loadEntries();
+			}
+			
+			protected function addItemHandler():void
+			{
+				if(textInput.text != ""){
+					var myStatement:SQLStatement = new SQLStatement();
+					myStatement.sqlConnection = conn;
+					myStatement.addEventListener(SQLEvent.RESULT, modifyDatabaseResult);
+					
+					var myQuery:String = "INSERT INTO items (itemText) VALUES ('"+textInput.text+"')";
+					
+					myStatement.text = myQuery;
+					myStatement.execute();
+					
+					textInput.text = "";
+				}
+			}
+			
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				if(currentState == "DemoState"){
+					currentState = "InfoState";				
+				}else if(currentState == "InfoState"){
+					currentState = "DemoState";
+				}
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="DemoState"/>
+		<s:State name="InfoState"/>
+	</s:states>
+	
+	<fx:Declarations>
+		<s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
+		<s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+		<s:ArrayCollection id="itemsCollection"/>
+	</fx:Declarations>
+	
+	<s:TextInput id="textInput" includeIn="DemoState" enter="addItemHandler()" skinClass="spark.skins.mobile.TextInputSkin" y="10" left="5" right="60" height="40"/>
+	<s:Button label="Add" y="10" includeIn="DemoState" width="50" height="40" right="5" click="addItemHandler()"/>
+	
+	<s:List id="itemsList" includeIn="DemoState" width="100%" bottom="0" top="60"/>
+	
+	<s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="A SQLConnection instance is used to manage the creation of and connection to local SQL database files (local databases).
+				&#xd; &#xd;The functionality of the SQLConnection class falls into several categories:
+				
+				&#xd; &#xd;A local SQL database file is created or opened by calling the open() method or the SQLConnection instance to the SQLStatement's sqlConnection property.
+				
+				&#xd; &#xd;The SQLConnection class also provides state for SQL statements, including a mechanism for executing multiple statements in a transaction. Transactions are managed using the begin(), commit(), and rollback() methods. In addition, the setSavepoint(), releaseSavepoint(), and rollbackToSavepoint() methods allow code to define and manage savepoints. These are used to subdivide transactions into sets of operations.
+				
+				&#xd; &#xd;The SQLConnection class provides access to database schema information for connected databases. A database's schema describes the definitions of its tables, columns, indices, and triggers. See the loadSchema() method for more information.
+				
+				&#xd; &#xd;The SQLConnection class provides the ability to encrypt databases using AES with CCM. This provides both authentication and privacy for data. To encrypt a database, a 16 byte key (specified using a ByteArray) must be specified when the database is created. This key can later be changed using the SQLConnection.reencrypt() method. Encryption imposes a performance penalty on writes to and reads from the database. Encryption is applied to data stored on the disk, but not to a temporary data cache in memory. Encryption is not supported for in-memory databases.
+				
+				&#xd; &#xd;A SQLConnection instance can be used to receive database-level event notifications and provide configuration control for all aspects of a database, including cache page size, process canceling, and statement execution options.
+				
+				&#xd; &#xd;A SQLConnection instance operates in one of two distinct execution modes: asynchronous and synchronous. To use synchronous execution, you use the open() method to connect to the main database for the SQLConnection instance. To use asynchronous execution, use the openAsync() method to connect to the main database for the instance.
+				
+				&#xd; &#xd;When you're using asynchronous execution, you use event listeners or a Responder instance to determine when an operation completes or fails. The operations run in the background rather than in the main application thread, so the application continues to run and respond to user interaction even while the database operations are being performed. Each asynchronous SQLConnection instance executes SQL statements in its own thread.
+				
+				&#xd; &#xd;In asynchronous execution mode, you begin a specific operation by calling the appropriate method, and you can detect the completion (or failure) of the operation by registering a listener for the appropriate event. Each operation has an associated event that is dispatched when the operation completes successfully; for example, when an openAsync() method call completes successfully (when the database connection is opened) the open event is dispatched. When any operation fails, an error event is dispatched. The SQLError instance in the SQLErrorEvent object's error property contains information about the specific error, including the operation that was being attempted and the reason the operation failed.
+				
+				&#xd; &#xd;When you're using synchronous execution, you do not need to register event listeners to determine when an operation completes or fails. To identify errors, enclose the error-throwing statements in a try..catch block. Because synchronous operations execute in the main execution thread, all application functionality (including refreshing the screen and allowing mouse and keyboard interaction) is paused while the database operation or operations are performed. For long-running operations this can cause a noticeable pause in the application.."/>
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+	</s:actionContent>
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/LayoutViews/AccordionLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/AccordionLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/AccordionLayoutView.mxml
new file mode 100644
index 0000000..35f7e78
--- /dev/null
+++ b/tourdeflexmobile/src/LayoutViews/AccordionLayoutView.mxml
@@ -0,0 +1,57 @@
+<?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="AccordionLayout" xmlns:ns="http://flex.apache.org/experimental/ns">
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.primitives.BitmapImage;
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				var random:Number = Math.ceil(Math.random()*3);
+				
+				var bitmapImage:BitmapImage = new BitmapImage();
+				bitmapImage.width =  150;
+				bitmapImage.height = bitmapImage.width;
+				bitmapImage.source = "assets/images/box"+random+".png";
+				group.addElement(bitmapImage);
+				
+				group.verticalScrollPosition = group.contentHeight;
+			}
+		]]>
+	</fx:Script>
+	
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)">
+			<s:icon>
+				<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" />
+			</s:icon>
+		</s:Button>
+	</s:actionContent>
+			
+	<s:Scroller id="scroller" width="200" height="200" horizontalCenter="0" verticalCenter="0">
+		<s:Group id="group">
+			<s:layout>
+				<ns:AccordionLayout useVirtualLayout="true" />
+			</s:layout>
+		</s:Group>
+	</s:Scroller>
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/LayoutViews/CarouselLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/CarouselLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/CarouselLayoutView.mxml
new file mode 100644
index 0000000..d87f7e4
--- /dev/null
+++ b/tourdeflexmobile/src/LayoutViews/CarouselLayoutView.mxml
@@ -0,0 +1,57 @@
+<?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="CarouselLayout" xmlns:ns="http://flex.apache.org/experimental/ns">
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.primitives.BitmapImage;
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				var random:Number = Math.ceil(Math.random()*3);
+				
+				var bitmapImage:BitmapImage = new BitmapImage();
+				bitmapImage.width =  Math.ceil(Math.random()*150);
+				bitmapImage.height = bitmapImage.width;
+				bitmapImage.source = "assets/images/box"+random+".png";
+				group.addElement(bitmapImage);
+				
+				group.verticalScrollPosition = group.contentHeight;
+			}
+		]]>
+	</fx:Script>
+	
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)">
+			<s:icon>
+				<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" />
+			</s:icon>
+		</s:Button>
+	</s:actionContent>
+			
+	<s:Scroller id="scroller" width="100%" height="100%">
+		<s:Group id="group">
+			<s:layout>
+				<ns:CarouselLayout verticalAlign="middle" useVirtualLayout="true" />
+			</s:layout>
+		</s:Group>
+	</s:Scroller>
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/LayoutViews/CoverFlowLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/CoverFlowLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/CoverFlowLayoutView.mxml
new file mode 100644
index 0000000..116831d
--- /dev/null
+++ b/tourdeflexmobile/src/LayoutViews/CoverFlowLayoutView.mxml
@@ -0,0 +1,57 @@
+<?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="CoverFlowLayout" xmlns:ns="http://flex.apache.org/experimental/ns">
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.primitives.BitmapImage;
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				var random:Number = Math.ceil(Math.random()*3);
+				
+				var bitmapImage:BitmapImage = new BitmapImage();
+				bitmapImage.width =  Math.ceil(Math.random()*150);
+				bitmapImage.height = bitmapImage.width;
+				bitmapImage.source = "assets/images/box"+random+".png";
+				group.addElement(bitmapImage);
+				
+				group.verticalScrollPosition = group.contentHeight;
+			}
+		]]>
+	</fx:Script>
+	
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)">
+			<s:icon>
+				<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" />
+			</s:icon>
+		</s:Button>
+	</s:actionContent>
+			
+	<s:Scroller id="scroller" width="100%" height="100%">
+		<s:Group id="group">
+			<s:layout>
+				<ns:CoverflowLayout verticalAlign="middle" duration="500" useVirtualLayout="true" />
+			</s:layout>
+		</s:Group>
+	</s:Scroller>
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml
new file mode 100644
index 0000000..0caf89d
--- /dev/null
+++ b/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml
@@ -0,0 +1,57 @@
+<?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="HorizontalLayout">
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.primitives.BitmapImage;
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				var random:Number = Math.ceil(Math.random()*3);
+				
+				var bitmapImage:BitmapImage = new BitmapImage();
+				bitmapImage.width =  Math.ceil(Math.random()*150);
+				bitmapImage.height = bitmapImage.width;
+				bitmapImage.source = "assets/images/box"+random+".png";
+				group.addElement(bitmapImage);
+				
+				group.horizontalScrollPosition = group.contentWidth;
+			}
+		]]>
+	</fx:Script>
+	
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)">
+			<s:icon>
+				<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" />
+			</s:icon>
+		</s:Button>
+	</s:actionContent>
+			
+	<s:Scroller id="scroller" width="100%" height="100%">
+		<s:Group id="group">
+			<s:layout>
+				<s:HorizontalLayout verticalAlign="middle" useVirtualLayout="true" />
+			</s:layout>
+		</s:Group>
+	</s:Scroller>
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/LayoutViews/RolodexLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/RolodexLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/RolodexLayoutView.mxml
new file mode 100644
index 0000000..8934ec6
--- /dev/null
+++ b/tourdeflexmobile/src/LayoutViews/RolodexLayoutView.mxml
@@ -0,0 +1,57 @@
+<?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="RolodexLayout" xmlns:ns="http://flex.apache.org/experimental/ns">
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.primitives.BitmapImage;
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				var random:Number = Math.ceil(Math.random()*3);
+				
+				var bitmapImage:BitmapImage = new BitmapImage();
+				bitmapImage.width =  Math.ceil(Math.random()*150);
+				bitmapImage.height = bitmapImage.width;
+				bitmapImage.source = "assets/images/box"+random+".png";
+				group.addElement(bitmapImage);
+				
+				group.verticalScrollPosition = group.contentHeight;
+			}
+		]]>
+	</fx:Script>
+	
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)">
+			<s:icon>
+				<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" />
+			</s:icon>
+		</s:Button>
+	</s:actionContent>
+			
+	<s:Scroller id="scroller" width="100%" height="100%">
+		<s:Group id="group">
+			<s:layout>
+				<ns:RolodexLayout horizontalAlign="center" useVirtualLayout="true" />
+			</s:layout>
+		</s:Group>
+	</s:Scroller>
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml
new file mode 100644
index 0000000..3e556ac
--- /dev/null
+++ b/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml
@@ -0,0 +1,57 @@
+<?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="StackLayout" xmlns:ns="http://flex.apache.org/experimental/ns">
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.primitives.BitmapImage;
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				var random:Number = Math.ceil(Math.random()*3);
+				
+				var bitmapImage:BitmapImage = new BitmapImage();
+				bitmapImage.width =  Math.ceil(Math.random()*150);
+				bitmapImage.height = bitmapImage.width;
+				bitmapImage.source = "assets/images/box"+random+".png";
+				group.addElement(bitmapImage);
+				
+				group.verticalScrollPosition = group.contentHeight;
+			}
+		]]>
+	</fx:Script>
+	
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)">
+			<s:icon>
+				<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" />
+			</s:icon>
+		</s:Button>
+	</s:actionContent>
+			
+	<s:Scroller id="scroller" width="100%" height="100%">
+		<s:Group id="group">
+			<s:layout>
+				<ns:StackLayout verticalAlign="middle" useVirtualLayout="true" />
+			</s:layout>
+		</s:Group>
+	</s:Scroller>
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml
new file mode 100644
index 0000000..059817f
--- /dev/null
+++ b/tourdeflexmobile/src/LayoutViews/TileLayoutView.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:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:s="library://ns.adobe.com/flex/spark" title="TileLayout">
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.primitives.BitmapImage;
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				var random:Number = Math.ceil(Math.random()*3);
+				
+				var miniGroup:Group = new Group();
+				group.addElement(miniGroup);
+				
+				var bitmapImage:BitmapImage = new BitmapImage();
+				bitmapImage.width =  Math.ceil(Math.random()*100);
+				bitmapImage.height = bitmapImage.width;
+				bitmapImage.source = "assets/images/box"+random+".png";
+				miniGroup.addElement(bitmapImage);
+				
+				//group.verticalScrollPosition = group.contentHeight;
+			}
+		]]>
+	</fx:Script>
+	
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)">
+			<s:icon>
+				<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" />
+			</s:icon>
+		</s:Button>
+	</s:actionContent>
+			
+	<s:Scroller id="scroller" width="100%" height="100%">
+		<s:Group id="group">
+			<s:layout>
+				<s:TileLayout orientation="rows" columnWidth="100" rowHeight="100" useVirtualLayout="true" />
+			</s:layout>
+		</s:Group>
+	</s:Scroller>
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/LayoutViews/TimeMachineLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/TimeMachineLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/TimeMachineLayoutView.mxml
new file mode 100644
index 0000000..5a4bc42
--- /dev/null
+++ b/tourdeflexmobile/src/LayoutViews/TimeMachineLayoutView.mxml
@@ -0,0 +1,57 @@
+<?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="TimeMachineLayout" xmlns:ns="http://flex.apache.org/experimental/ns">
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.primitives.BitmapImage;
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				var random:Number = Math.ceil(Math.random()*3);
+				
+				var bitmapImage:BitmapImage = new BitmapImage();
+				bitmapImage.width =  Math.ceil(Math.random()*150);
+				bitmapImage.height = bitmapImage.width;
+				bitmapImage.source = "assets/images/box"+random+".png";
+				group.addElement(bitmapImage);
+				
+				group.verticalScrollPosition = group.contentHeight;
+			}
+		]]>
+	</fx:Script>
+	
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)">
+			<s:icon>
+				<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" />
+			</s:icon>
+		</s:Button>
+	</s:actionContent>
+			
+	<s:Scroller id="scroller" width="100%" height="100%">
+		<s:Group id="group">
+			<s:layout>
+				<ns:TimeMachineLayout verticalAlign="middle" useVirtualLayout="true" />
+			</s:layout>
+		</s:Group>
+	</s:Scroller>
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml
new file mode 100644
index 0000000..2d2d81b
--- /dev/null
+++ b/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml
@@ -0,0 +1,57 @@
+<?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="VerticalLayout">
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.primitives.BitmapImage;
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				var random:Number = Math.ceil(Math.random()*3);
+				
+				var bitmapImage:BitmapImage = new BitmapImage();
+				bitmapImage.width =  Math.ceil(Math.random()*150);
+				bitmapImage.height = bitmapImage.width;
+				bitmapImage.source = "assets/images/box"+random+".png";
+				group.addElement(bitmapImage);
+				
+				group.verticalScrollPosition = group.contentHeight;
+			}
+		]]>
+	</fx:Script>
+	
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)">
+			<s:icon>
+				<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" />
+			</s:icon>
+		</s:Button>
+	</s:actionContent>
+			
+	<s:Scroller id="scroller" width="100%" height="100%">
+		<s:Group id="group">
+			<s:layout>
+				<s:VerticalLayout horizontalAlign="center" useVirtualLayout="true" />
+			</s:layout>
+		</s:Group>
+	</s:Scroller>
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/TourDeFlexMobile-app.xml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/TourDeFlexMobile-app.xml b/tourdeflexmobile/src/TourDeFlexMobile-app.xml
new file mode 100644
index 0000000..e9667b6
--- /dev/null
+++ b/tourdeflexmobile/src/TourDeFlexMobile-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.9">
+
+<!-- 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>TourDeFlexMobile</id>
+
+	<!-- Used as the filename for the application. Required. -->
+	<filename>TourDeFlexMobile</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>TourDeFlexMobile</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.0.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>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/TourDeFlexMobile.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/TourDeFlexMobile.mxml b/tourdeflexmobile/src/TourDeFlexMobile.mxml
new file mode 100644
index 0000000..6a9dc94
--- /dev/null
+++ b/tourdeflexmobile/src/TourDeFlexMobile.mxml
@@ -0,0 +1,171 @@
+<?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" applicationDPI="160" applicationComplete="init(event)">
+	
+	<fx:Style source="styles.css"/>
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.events.FlexEvent;
+			
+			import spark.events.IndexChangeEvent;
+			
+			import AIRViews.AccelerometerView;
+			import AIRViews.SQLiteView;
+			
+			import LayoutViews.AccordionLayoutView;
+			import LayoutViews.CarouselLayoutView;
+			import LayoutViews.CoverFlowLayoutView;
+			import LayoutViews.HorizontalLayoutView;
+			import LayoutViews.RolodexLayoutView;
+			import LayoutViews.TileLayoutView;
+			import LayoutViews.TimeMachineLayoutView;
+			import LayoutViews.VerticalLayoutView;
+			
+			import UIViews.ButtonBarView;
+			import UIViews.CalloutButtonView;
+			import UIViews.CheckboxView;
+			import UIViews.DateSpinnerView;
+			import UIViews.ListView;
+			import UIViews.MobileGridView;
+			import UIViews.RadiobuttonView;
+			import UIViews.SpinnerListView;
+			import UIViews.TextInputView;
+			import UIViews.ToggleSwitchView;
+			
+			import views.HttpServiceView;
+			
+			private var isOpen:Boolean;	
+			
+			[Bindable]
+			private var currentStageWidth:Number;
+		
+			[Bindable]
+			private var currentStageHeight:Number;
+			
+			protected function init(event:FlexEvent):void
+			{
+				stage.addEventListener(Event.RESIZE, orientationHandler);
+				
+				currentStageWidth = stage.stageWidth*-1;
+				lateralMenu.x = currentStageWidth;
+				currentStageHeight = navigator.height-45;
+				lateralMenu.height = currentStageHeight;			
+				lateralMenu.x = currentStageWidth;
+				isOpen = false;
+			}
+			
+			private function orientationHandler(event:Event):void{
+				currentStageWidth = stage.stageWidth*-1;
+				
+				if(isOpen == false){
+					lateralMenu.x = currentStageWidth;
+				}
+				
+				currentStageHeight = navigator.height-45;
+				lateralMenu.height = currentStageHeight;	
+				
+				trace(lateralMenu.height);
+			}
+			
+			protected function menuHandler(event:MouseEvent):void
+			{
+				
+				if(isOpen == true){
+					moveOut.play();
+					isOpen = false;
+				} else if(isOpen == false){
+					moveIn.play();
+					isOpen = true;
+				}
+			}
+			
+			protected function changeHandler(event:IndexChangeEvent):void
+			{
+				isOpen = false;
+				moveOut.play();
+				
+				navigator.pushView(componentsList.selectedItem.view);
+			}
+			
+			protected function menuBackgroundHandler(event:MouseEvent):void
+			{
+				isOpen = false;
+				moveOut.play();
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:Move id="moveIn" duration="200" target="{lateralMenu}" xTo="0"/>
+		<s:Move id="moveOut" duration="200" target="{lateralMenu}" xTo="{currentStageWidth}"/>
+	</fx:Declarations>
+	
+	<s:ViewNavigator id="navigator" firstView="views.BlogView" width="100%" height="100%">
+		<s:navigationContent>
+			<s:Button icon="@Embed('assets/images/logo.png')" height="35" width="77" label="Menu" click="menuHandler(event)"/>
+		</s:navigationContent>
+	</s:ViewNavigator>
+	
+	<s:Group id="lateralMenu" width="100%" y="45">
+		<s:Graphic width="100%" height="100%" click="menuBackgroundHandler(event)">
+			<s:BitmapImage width="100%" height="100%" scaleMode="zoom" source="@Embed('assets/images/bg.png')"/>
+		</s:Graphic>
+		
+		<s:List id="componentsList" itemRenderer="renderers.MenuRenderer" width="200" height="100%" change="changeHandler(event)" contentBackgroundColor="#000000">
+			<s:ArrayList>
+				<fx:Object label="UI Components" type="separator"/>			
+				<fx:Object label="ButtonBar" type="view" view="{ButtonBarView}"/>
+				<fx:Object label="CalloutButton" type="view" view="{CalloutButtonView}"/>
+				<fx:Object label="CheckBox" type="view" view="{CheckboxView}"/>
+				<fx:Object label="DateSpinner" type="view" view="{DateSpinnerView}"/>
+				<fx:Object label="List" type="view" view="{ListView}"/>
+				<fx:Object label="MobileGrid" type="view" view="{MobileGridView}"/>
+				<fx:Object label="RadioButton" type="view" view="{RadiobuttonView}"/>
+				<fx:Object label="SpinnerList" type="view" view="{SpinnerListView}"/>
+				<fx:Object label="TextInput" type="view" view="{TextInputView}"/>
+				<fx:Object label="ToggleSwitch" type="view" view="{ToggleSwitchView}"/>
+				
+				<fx:Object label="Layouts" type="separator"/>				
+				<fx:Object label="HorizontalLayout" type="view" view="{HorizontalLayoutView}"/>
+				<fx:Object label="VerticalLayout" type="view" view="{VerticalLayoutView}"/>
+				<fx:Object label="TileLayout" type="view" view="{TileLayoutView}"/>
+				<fx:Object label="CoverFlowLayout" type="view" view="{CoverFlowLayoutView}"/>
+				<fx:Object label="TimeMachineLayout" type="view" view="{TimeMachineLayoutView}"/>
+				<fx:Object label="RolodexLayout" type="view" view="{RolodexLayoutView}"/>
+				<fx:Object label="CarouselLayout" type="view" view="{CarouselLayoutView}"/>
+				<fx:Object label="AccordionLayout" type="view" view="{AccordionLayoutView}"/>
+				<!-- <fx:Object label="StackLayout" type="view" view="{StackLayoutView}"/> -->
+				
+				<fx:Object label="AIR APIs" type="separator"/>				
+				<fx:Object label="SQLite" type="view" view="{SQLiteView}"/>
+				<fx:Object label="Accelerometer" type="view" view="{AccelerometerView}"/>
+				
+				<fx:Object label="Data Access" type="separator"/>			
+				<fx:Object label="HTTPService" type="view" view="{HttpServiceView}"/>
+			</s:ArrayList>
+		</s:List>
+	</s:Group>
+	
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/UIViews/ButtonBarView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/ButtonBarView.mxml b/tourdeflexmobile/src/UIViews/ButtonBarView.mxml
new file mode 100644
index 0000000..54814f2
--- /dev/null
+++ b/tourdeflexmobile/src/UIViews/ButtonBarView.mxml
@@ -0,0 +1,79 @@
+<?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="ButtonBar">
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.events.IndexChangeEvent;
+			import spark.skins.mobile.TextAreaSkin;
+			
+			protected function buttonbarHandler(event:IndexChangeEvent):void
+			{
+				label.text = buttonbar.selectedItem.label + " Pressed.";
+			}
+			
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				if(currentState == "DemoState"){
+					currentState = "InfoState";				
+				}else if(currentState == "InfoState"){
+					currentState = "DemoState";
+				}
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="DemoState"/>
+		<s:State name="InfoState"/>
+	</s:states>
+	
+	<fx:Declarations>
+		<s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
+		<s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+	</fx:Declarations>
+	
+	<s:ButtonBar id="buttonbar" includeIn="DemoState" change="buttonbarHandler(event)" left="5" right="5" top="5">
+		<s:ArrayList>
+			<fx:Object label="Button 1"/>
+			<fx:Object label="Button 2"/>
+			<fx:Object label="Button 3"/>
+		</s:ArrayList>
+	</s:ButtonBar>
+
+	<s:Label id="label" includeIn="DemoState" horizontalCenter="0" textAlign="center" bottom="20"/>
+	
+	<s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The ButtonBar control defines a horizontal group of logically related buttons with a common look and navigation.
+				&#xd; &#xd;The typical use for a button bar is for grouping a set of related buttons together, which gives them a common look and navigation, and handling the logic for the change event in a single place.
+				
+				&#xd; &#xd;The ButtonBar control creates Button controls based on the value of its dataProvider property. Use methods such as addItem() and removeItem() to manipulate the dataProvider property to add and remove data items. The ButtonBar control automatically adds or removes the necessary children based on changes to the dataProvider property.
+				
+				&#xd; &#xd;To use this component in a list-based component, such as a List or DataGrid, create an item renderer. For information about creating an item renderer, see Custom Spark item renderers.
+				
+				&#xd; &#xd;For non-mobile projects, you can use the ButtonBar control to set the active child of a ViewStack container, as the following example shows:
+				
+				&#xd; &#xd;Note: The Spark list-based controls (the Spark ListBase class and its subclasses such as ButtonBar, ComboBox, DropDownList, List, and TabBar) do not support the BasicLayout class as the value of the layout property. Do not use BasicLayout with the Spark list-based controls."/>
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+	</s:actionContent>
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml b/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml
new file mode 100644
index 0000000..eec4a8c
--- /dev/null
+++ b/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml
@@ -0,0 +1,72 @@
+<?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="CalloutButton">
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.skins.mobile.TextAreaSkin;
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				if(currentState == "DemoState"){
+					currentState = "InfoState";				
+				}else if(currentState == "InfoState"){
+					currentState = "DemoState";
+				}
+			}
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="DemoState"/>
+		<s:State name="InfoState"/>
+	</s:states>
+	
+	<fx:Declarations>
+		<s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
+		<s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+	</fx:Declarations>
+	
+	<s:CalloutButton label="CalloutButton" horizontalCenter="0" y="10">
+		<s:List>
+			<s:ArrayList>
+				<fx:Object label="Item 1"/>
+				<fx:Object label="Item 2"/>
+				<fx:Object label="Item 3"/>
+				<fx:Object label="Item 4"/>
+				<fx:Object label="Item 5"/>
+			</s:ArrayList>
+		</s:List>
+	</s:CalloutButton>
+	
+	<s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The CalloutButton control is a drop down component that defines a button to open and close a Callout container. The CalloutButton specifies the layout and child components of the Callout container.
+				
+				&#xd; &#xd;The CalloutButton control uses the spark.components.supportClasses.DropDownController class to manage the Callout container. You can access the DropDownController by using the protected CalloutButton.dropDownController property.
+				
+				&#xd; &#xd;When the callout is open:
+				
+				&#xd; &#xd;Clicking the button closes the callout
+				&#xd; &#xd;Clicking outside of the callout closes the callout."/>
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+	</s:actionContent>
+	
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/UIViews/CheckboxView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/CheckboxView.mxml b/tourdeflexmobile/src/UIViews/CheckboxView.mxml
new file mode 100644
index 0000000..ff9dbc6
--- /dev/null
+++ b/tourdeflexmobile/src/UIViews/CheckboxView.mxml
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:s="library://ns.adobe.com/flex/spark" title="CheckBox">
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.skins.mobile.TextAreaSkin;
+			protected function checkboxHandler(event:Event):void
+			{
+				label.text = event.target.label + " toggled: " + event.target.selected as String;
+			}
+			
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				if(currentState == "DemoState"){
+					currentState = "InfoState";				
+				}else if(currentState == "InfoState"){
+					currentState = "DemoState";
+				}
+			}
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="DemoState"/>
+		<s:State name="InfoState"/>
+	</s:states>
+	
+	<fx:Declarations>
+		<s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
+		<s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+	</fx:Declarations>
+	
+	<s:VGroup includeIn="DemoState" horizontalCenter="0" y="20">
+		<s:CheckBox change="checkboxHandler(event)" label="CheckBox 1" />
+		<s:CheckBox change="checkboxHandler(event)" label="CheckBox 2" />
+		<s:CheckBox change="checkboxHandler(event)" label="CheckBox 3" />
+	</s:VGroup>
+	
+	<s:Label includeIn="DemoState" id="label" horizontalCenter="0" bottom="20" textAlign="center"/>
+	
+	<s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The CheckBox component consists of an optional label and a small box that can contain a check mark or not.
+				&#xd; &#xd;When a user clicks a CheckBox component or its associated text, the CheckBox component sets its selected property to true for checked, and to false for unchecked.
+				
+				&#xd; &#xd;To use this component in a list-based component, such as a List or DataGrid, create an item renderer. For information about creating an item renderer, see Custom Spark item renderers."/>
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+	</s:actionContent>
+	
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml b/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml
new file mode 100644
index 0000000..0cb738f
--- /dev/null
+++ b/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml
@@ -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:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:s="library://ns.adobe.com/flex/spark" title="DateSpinnerView">
+	<fx:Script>
+		<![CDATA[
+			import spark.skins.mobile.TextAreaSkin;
+			
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				if(currentState == "DemoState"){
+					currentState = "InfoState";				
+				}else if(currentState == "InfoState"){
+					currentState = "DemoState";
+				}
+			}
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="DemoState"/>
+		<s:State name="InfoState"/>
+	</s:states>
+	
+	<fx:Declarations>
+		<s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
+		<s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+	</fx:Declarations>
+	
+	<s:DateSpinner includeIn="DemoState" displayMode="dateAndTime" verticalCenter="0" horizontalCenter="0"/>
+	
+	<s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The DateSpinner control presents an interface for picking a particular date or time.
+				&#xd;&#xd;The DateSpinner control can display the date, the time, or the date and time, based on the value of the displayMode property.
+				
+				&#xd;&#xd;The UI for the control is made up of a series of SpinnerList controls wrapped inside a SpinnerListContainer that show the currently-selected date. Through touch or mouse interaction, users can adjust the selected date.
+				
+				&#xd;&#xd;The DateSpinnerSkin only defines some sizing properties. To change the appearance of the DateSpinner control, you typically reskin the underlying SpinnerListSkin or SpinnerListContainerSkin."/>
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+	</s:actionContent>
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/UIViews/ListView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/ListView.mxml b/tourdeflexmobile/src/UIViews/ListView.mxml
new file mode 100644
index 0000000..ce00d68
--- /dev/null
+++ b/tourdeflexmobile/src/UIViews/ListView.mxml
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:s="library://ns.adobe.com/flex/spark" title="List">
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.skins.mobile.TextAreaSkin;
+			
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				if(currentState == "DemoState"){
+					currentState = "InfoState";				
+				}else if(currentState == "InfoState"){
+					currentState = "DemoState";
+				}
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="DemoState"/>
+		<s:State name="InfoState"/>
+	</s:states>
+	
+	<fx:Declarations>
+		<s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
+		<s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+	</fx:Declarations>
+	
+	<s:List includeIn="DemoState" width="100%" height="100%">
+		<s:ArrayList>
+			<fx:Object label="Item 1"/>
+			<fx:Object label="Item 2"/>
+			<fx:Object label="Item 3"/>
+			<fx:Object label="Item 4"/>
+			<fx:Object label="Item 5"/>
+			<fx:Object label="Item 6"/>
+			<fx:Object label="Item 7"/>
+			<fx:Object label="Item 8"/>
+			<fx:Object label="Item 9"/>
+			<fx:Object label="Item 10"/>
+			<fx:Object label="Item 11"/>
+			<fx:Object label="Item 12"/>
+			<fx:Object label="Item 13"/>
+			<fx:Object label="Item 14"/>
+			<fx:Object label="Item 15"/>
+			<fx:Object label="Item 16"/>
+			<fx:Object label="Item 17"/>
+			<fx:Object label="Item 18"/>
+			<fx:Object label="Item 19"/>
+			<fx:Object label="Item 20"/>
+			<fx:Object label="Item 21"/>
+			<fx:Object label="Item 22"/>
+			<fx:Object label="Item 23"/>
+		</s:ArrayList>
+	</s:List>
+	
+	<s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The List control displays a vertical list of items. Its functionality is similar to that of the SELECT form element in HTML. If there are more items than can be displayed at once, it can display a vertical scroll bar so the user can access all items in the list. An optional horizontal scroll bar lets the user view items when the full width of the list items is unlikely to fit. The user can select one or more items from the list, depending on the value of the allowMultipleSelection property.
+				&#xd;&#xd;Note: The Spark list-based controls (the Spark ListBase class and its subclasses such as ButtonBar, ComboBox, DropDownList, List, and TabBar) do not support the BasicLayout class as the value of the layout property. Do not use BasicLayout with the Spark list-based controls. When a layout is specified, the layout's typicalLayoutElement property should not be set; it's automatically set to an item renderer created with the List's typicalItem.
+				
+				&#xd;&#xd;To use this component in a list-based component, such as a List or DataGrid, create an item renderer. For information about creating an item renderer, see Custom Spark item renderers."/>
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+	</s:actionContent>
+</s:View>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/351fb18f/tourdeflexmobile/src/UIViews/MobileGridView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/MobileGridView.mxml b/tourdeflexmobile/src/UIViews/MobileGridView.mxml
new file mode 100644
index 0000000..d875580
--- /dev/null
+++ b/tourdeflexmobile/src/UIViews/MobileGridView.mxml
@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:s="library://ns.adobe.com/flex/spark" title="MobileGrid" xmlns:ns="http://flex.apache.org/experimental/ns">
+	<fx:Script>
+		<![CDATA[
+			import spark.skins.mobile.TextAreaSkin;
+			
+			protected function buttonHandler(event:MouseEvent):void
+			{
+				if(currentState == "DemoState"){
+					currentState = "InfoState";				
+				}else if(currentState == "InfoState"){
+					currentState = "DemoState";
+				}
+			}
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="DemoState"/>
+		<s:State name="InfoState"/>
+	</s:states>
+	
+	<fx:Declarations>
+		<s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
+		<s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+	</fx:Declarations>
+	
+	<ns:MobileGrid includeIn="DemoState" width="100%" height="100%">
+		<ns:columns>
+			<ns:MobileGridColumn width="33%" headerText="Column 1" dataField="label"/>
+			<ns:MobileGridColumn width="33%" headerText="Column 2" dataField="label"/>
+			<ns:MobileGridColumn width="33%" headerText="Column 3" dataField="label"/>
+		</ns:columns>
+		<s:ArrayList>
+			<fx:Object label="Item 1"/>
+			<fx:Object label="Item 2"/>
+			<fx:Object label="Item 3"/>
+			<fx:Object label="Item 4"/>
+			<fx:Object label="Item 5"/>
+			<fx:Object label="Item 6"/>
+			<fx:Object label="Item 7"/>
+			<fx:Object label="Item 8"/>
+			<fx:Object label="Item 9"/>
+			<fx:Object label="Item 10"/>
+			<fx:Object label="Item 11"/>
+			<fx:Object label="Item 12"/>
+			<fx:Object label="Item 13"/>
+			<fx:Object label="Item 14"/>
+			<fx:Object label="Item 15"/>
+			<fx:Object label="Item 16"/>
+			<fx:Object label="Item 17"/>
+			<fx:Object label="Item 18"/>
+			<fx:Object label="Item 19"/>
+			<fx:Object label="Item 20"/>
+			<fx:Object label="Item 21"/>
+			<fx:Object label="Item 22"/>
+			<fx:Object label="Item 23"/>
+		</s:ArrayList>
+	</ns:MobileGrid>
+	
+	
+	<s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The MobileGrid displays a collection of items in a grid of rows and columns and column headers and is optimized for speed on mobile devices.
+				&#xd;&#xd;The MobileGrid component provides the following features:
+				
+				&#xd;&#xd;user can swipe through the rows in the datagrid.
+				&#xd;&#xd;supports single selection of a row.
+				&#xd;&#xd;rows can be sorted according to a given column by clicking on the column's header.
+				&#xd;&#xd;cells can be displayed as text in different fonts and formats, as images, or using a custom renderer.
+				&#xd;&#xd;default skin uses dark shades of gray, and is available in different screen densities.
+				&#xd;&#xd;It's important to understand that MobileGrid does not have all the capabilities and flexibility of it's desktop equivalent, in order to ensure optimal display and scrolling performance on mobile devices.
+				
+				&#xd;&#xd;Typically, the following features are not available in MobileGrid:
+				
+				&#xd;&#xd;multiple selection is not supported
+				&#xd;&#xd;it's not possible to interactively reorder columns
+				&#xd;&#xd;MobileGrid does not scroll horizontally, even when the column widths exceeds the component's width.
+				&#xd;&#xd;custom cell renderers must be designed with care, preferably in ActionScript, to ensure good display performance
+				&#xd;&#xd;Internally, MobileGrid inherits for Mobile spark.List component rather than any Grid or DataGrid, which means that all cell renderers in a single row are managed by one single MobileGridRowRenderer that delegates the individual cell renderers to light-weight sub-renderers.
+				
+				&#xd;&#xd;You usually don't access this internal row renderer yourself, and will rather define the individual cell renderers.
+				
+				&#xd;&#xd;This technique ensures optimal display and memory performance, which is critical for mobile devices, at the price of less flexibility for cell renderers."/>
+	
+	<s:actionContent>
+		<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+	</s:actionContent>
+</s:View>


Mime
View raw message