<?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;
			import spark.skins.spark.DefaultComplexItemRenderer;
			
			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" includeIn="DemoState">
		<s:layout>
			<s:VerticalLayout useVirtualLayout="true" horizontalAlign="center" />
		</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: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="VerticalLayout class arranges the layout elements in a vertical sequence, top to bottom, with optional gaps between the elements and optional padding around the sequence of elements. 				
				&#xd; &#xd;The vertical position of the elements is determined by arranging them in a vertical sequence, top to bottom, taking into account the padding before the first element and the gaps between the elements.
				&#xd; &#xd;The horizontal position of the elements is determined by the layout's horizontalAlign property.
				&#xd; &#xd;During the execution of the measure() method, the default size of the container is calculated by accumulating the preferred sizes of the elements, including gaps and padding. When requestedRowCount is set, only the space for that many elements is measured, starting from the first element.
				&#xd; &#xd;During the execution of the updateDisplayList() method, 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 variableRowHeight is false, then set the element's height to the value of the rowHeight property.
				&#xd; &#xd;- If the element's percentHeight is set, then calculate the element's height by distributing the available container height between all elements with a percentHeight setting. The available container height is equal to the container height minus the gaps, the padding and the space occupied by the rest of the elements. The element's precentHeight property is ignored when the layout is virtualized.
				&#xd; &#xd;- Set the element's height to its preferred height.
				&#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;- Set the element's width to its preferred width.			
				"/>
</s:View>