frameworks/projects/mobiletheme/src/spark/skins/ios7/ViewMenuSkin.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.

-->


<!--- The default skin class for a Spark ViewMenu in a mobile application.  

@see spark.components.ViewMenu

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
	
	<fx:Metadata>
		<![CDATA[ 
		/** 
		* @copy spark.skins.spark.ApplicationSkin#hostComponent
		*/
		[HostComponent("spark.components.ViewMenu")]
		]]>
	</fx:Metadata> 
	
	<fx:Script fb:purpose="styling">
		<![CDATA[
			import mx.core.DPIClassification;
			import mx.core.FlexGlobals;
			import spark.effects.easing.Power;
			
			
			/**
			 * @private
			 */
			override protected function initializationComplete():void
			{
				useChromeColor = false;
				super.initializationComplete();
			}
			
			/**
			 *  @copy spark.skins.mobile.supportClasses.MobileSkin#applicationDPI
			 */
			public function get applicationDPI():int
			{
				return FlexGlobals.topLevelApplication.applicationDPI;
			}
			
			/**
			 *  @private
			 */
			override protected function measure():void
			{
				super.measure();
				
				// not actually used in normal situations, but 
				// is here to prevent bug 28950 if ViewMenu is misused
				measuredHeight = 200;
			}
			
			/**
			 *  @private
			 */
			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
			{
				super.updateDisplayList(unscaledWidth, unscaledHeight);
				
				var strokeWeight:Number = (applicationDPI == DPIClassification.DPI_640 || applicationDPI == DPIClassification.DPI_480 || applicationDPI == DPIClassification.DPI_320) ? 2 : 1;
				var separatorWeight:Number = 1;
				
				if (applicationDPI == DPIClassification.DPI_640)
					separatorWeight = 6;
				else if (applicationDPI == DPIClassification.DPI_480)
					separatorWeight = 4;
				else if (applicationDPI == DPIClassification.DPI_320)
					separatorWeight = 3;
				else if (applicationDPI == DPIClassification.DPI_240)
					separatorWeight = 2;  
				else if (applicationDPI == DPIClassification.DPI_120)
					separatorWeight = 1;  
				
				contentGroup.top = strokeWeight + separatorWeight;
				contentGroup.bottom = separatorWeight;
				contentGroupLayout.gap = separatorWeight;
			}
			
		]]>
	</fx:Script>
	
	<s:states>
		<s:State name="normal"                          stateGroups="openedGroup"/>
		<s:State name="closed"                          stateGroups="closedGroup"/>
		<s:State name="disabled"                        stateGroups="openedGroup"/>
		<s:State name="normalAndLandscape"              stateGroups="openedGroup, landscapeGroup"/>
		<s:State name="closedAndLandscape"              stateGroups="closedGroup, landscapeGroup"/>
		<s:State name="disabledAndLandscape"            stateGroups="openedGroup, landscapeGroup" />
	</s:states>
	
	<s:transitions>
		<s:Transition fromState="closed" toState="normal" autoReverse="true">
			<s:Parallel>
				<s:Fade target="{chromeGroup}" duration="150" easer="{new Power(0.5, 3)}" /> 
				<s:Move target="{chromeGroup}" duration="150" disableLayout="true"  easer="{new Power(0, 5)}"/>
			</s:Parallel>
		</s:Transition>
		
		<s:Transition fromState="closedAndLandscape" toState="normalAndLandscape" autoReverse="true">
			<s:Parallel>
				<s:Fade target="{chromeGroup}" duration="150" easer="{new Power(0.5, 3)}" /> 
				<s:Move target="{chromeGroup}" duration="150" disableLayout="true"  easer="{new Power(0, 5)}"/>
			</s:Parallel>
		</s:Transition>
		
		<s:Transition fromState="normal" toState="closed" autoReverse="true">
			<s:Parallel>
				<s:Fade target="{chromeGroup}" duration="100"/> 
				<s:Move target="{chromeGroup}" duration="100" disableLayout="true"/>
			</s:Parallel>
		</s:Transition>
		
		<s:Transition fromState="normalAndLandscape" toState="closedAndLandscape" autoReverse="true">
			<s:Parallel>
				<s:Fade target="{chromeGroup}" duration="100"/> 
				<s:Move target="{chromeGroup}" duration="100" disableLayout="true"/>
			</s:Parallel>
		</s:Transition>
	</s:transitions>
	
	<!-- The ViewMenu and its skin are sized to the application.
	The menu chrome is a separate group that is anchored to the bottom of the skin. -->
	
	
	<s:Group id="chromeGroup"
			 left="0"
			 right="0"
			 top.closedGroup="{hostComponent.height - chromeGroup.height / 2}"
			 bottom.openedGroup="0" 
			 visible.closedGroup="false">
		
		<s:Rect id="backgroundRect" left="18" right="18" top="1" bottom="0">
			<s:fill>
				<s:SolidColor color="#FFFFFF" />
			</s:fill>
			<s:stroke>
				<s:SolidColorStroke weight="0.5" alpha="0.2" />
			</s:stroke>
			<s:filters>
				<s:DropShadowFilter alpha="0.5" />
			</s:filters>
		</s:Rect>
		
		<!--
		Note: setting the minimum size to 0 here so that changes to the host component's
		size will not be thwarted by this skin part's minimum size.   This is a compromise,
		more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
		-->
		<!--- @copy spark.components.SkinnableContainer#contentGroup -->
		<s:Group id="contentGroup" left="20" right="20" top="3" bottom="2" minWidth="0" minHeight="0">
			<s:layout>
				<s:VerticalLayout gap="-1" id="contentGroupLayout"  horizontalAlign="contentJustify" >
				</s:VerticalLayout>
			</s:layout>
		</s:Group>    
	</s:Group>
</s:SparkSkin>