tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml

<?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
			{
				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 source160dpi="@Embed('assets/icons/160/1.png')" 
								source240dpi="@Embed('assets/icons/240/1.png')" 
								source320dpi="@Embed('assets/icons/320/1.png')"
								source480dpi="@Embed('assets/icons/480/1.png')" id="box1"/>
		<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')" 
								source240dpi="@Embed('assets/icons/240/2.png')" 
								source320dpi="@Embed('assets/icons/320/2.png')"
								source480dpi="@Embed('assets/icons/480/2.png')" id="box2"/>
		<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')" 
								source240dpi="@Embed('assets/icons/240/3.png')" 
								source320dpi="@Embed('assets/icons/320/3.png')"
								source480dpi="@Embed('assets/icons/480/3.png')" id="box3"/>
		<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/about.png')" id="aboutIcon"  
								source240dpi="@Embed('assets/icons/240/about.png')" 
								source320dpi="@Embed('assets/icons/320/about.png')"
								source480dpi="@Embed('assets/icons/480/about.png')"/>
		<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/dock.png')" id="demoIcon"
								source240dpi="@Embed('assets/icons/240/dock.png')"  
								source320dpi="@Embed('assets/icons/320/dock.png')"
								source480dpi="@Embed('assets/icons/480/dock.png')"/>
	</fx:Declarations>	
	<s:actionContent>
		<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
	</s:actionContent>		
	<s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
			pageScrollingEnabled="true" includeIn="DemoState">
		<s:layout>
			<ns:StackLayout scrollBarDirection="horizontal" horizontalAlign="center" verticalAlign="middle"/>
		</s:layout>
		<s:dataProvider>
			<s:ArrayList>
				<s:BitmapImage source="{box1}" />
				<s:BitmapImage source="{box2}" />
				<s:BitmapImage source="{box3}" />
				<s:BitmapImage source="{box1}" />
				<s:BitmapImage source="{box2}" />
				<s:BitmapImage source="{box3}" />
				<s:BitmapImage source="{box1}" />
				<s:BitmapImage source="{box2}" />
				<s:BitmapImage source="{box3}" />
			</s:ArrayList>
		</s:dataProvider>
	</s:List>
	<s:TextArea includeIn="InfoState" selectable="false"  left="10" right="10" top="10" bottom="10" editable="false" 
				text="An StackLayout class shows a single element at a time.. 				
				&#xd; &#xd;The horizontal position of the shown element is determined by the layout's horizontalAlign property.
				&#xd; &#xd;The vertical position of the shown element is determined by the layout's verticalAlign property.
				&#xd; &#xd;The width of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum width and maximum width are always respected):
				&#xd; &#xd;- If horizontalAlign is 'justify', then set the element's width to the container width.			
				&#xd; &#xd;- If horizontalAlign is 'contentJustify', then set the element's width to the maximum between the container's width and all elements' preferred width.				
				&#xd; &#xd;- If the element's percentWidth is set, then calculate the element's width as a percentage of the container's width.				
				&#xd; &#xd;- Set the element's width to its preferred width.
				&#xd; &#xd;The height of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum height and maximum height are always respected):
				&#xd; &#xd;- If the verticalAlign property is 'justify', then set the element's height to the container height.
				&#xd; &#xd;- If the verticalAlign property is 'contentJustify', then set the element's height to the maximum between the container's height and all elements' preferred height
				&#xd; &#xd;- If the element's percentHeight property is set, then calculate the element's height as a percentage of the container's height.
				&#xd; &#xd;- Set the element's height to its preferred height."/>
</s:View>