frameworks/projects/mobiletheme/src/spark/skins/mobile/CalloutViewNavigatorSkin.as

////////////////////////////////////////////////////////////////////////////////
//
//  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.
//
////////////////////////////////////////////////////////////////////////////////

package spark.skins.mobile
{

import flash.display.Graphics;

import mx.core.DPIClassification;
import mx.core.mx_internal;

import spark.core.SpriteVisualElement;
import spark.skins.mobile120.assets.CalloutContentBackground;
import spark.skins.mobile160.assets.CalloutContentBackground;
import spark.skins.mobile240.assets.CalloutContentBackground;
import spark.skins.mobile320.assets.CalloutContentBackground;
import spark.skins.mobile480.assets.CalloutContentBackground;
import spark.skins.mobile640.assets.CalloutContentBackground;

use namespace mx_internal;

/**
 *  The ActionScript-based skin for view navigators inside a callout.
 *  This skin lays out the action bar and content
 *  group in a vertical fashion, where the action bar is on top.
 *  Unlike the default skin, overlay modes are not supported. 
 * 
 *  @langversion 3.0
 *  @playerversion AIR 3 
 *  @productversion Flex 4.6
 */
public class CalloutViewNavigatorSkin extends ViewNavigatorSkin
{
    //--------------------------------------------------------------------------
    //
    //  Constructor
    //
    //--------------------------------------------------------------------------  
    
    /**
     *  Constructor.
     *  
     *  @langversion 3.0
     *  @playerversion AIR 3
     *  @productversion Flex 4.6
     */
    public function CalloutViewNavigatorSkin()
    {
        super();
        
        switch (applicationDPI)
        {
			case DPIClassification.DPI_640:
			{
				contentBackgroundClass = spark.skins.mobile640.assets.CalloutContentBackground;
				contentCornerRadius = 28;
				gap = 48;
				break;
			}	
			case DPIClassification.DPI_480:
			{
				contentBackgroundClass = spark.skins.mobile480.assets.CalloutContentBackground;
				contentCornerRadius = 14;
				gap = 24;
				break;
			}	
            case DPIClassification.DPI_320:
            {
                contentBackgroundClass = spark.skins.mobile320.assets.CalloutContentBackground;
                contentCornerRadius = 10;
                gap = 16;
                break;
            }
			case DPIClassification.DPI_240:
			{
				contentBackgroundClass = spark.skins.mobile240.assets.CalloutContentBackground;
				contentCornerRadius = 7;
				gap = 12;
				break;
			}
			case DPIClassification.DPI_240:
			{
				contentBackgroundClass = spark.skins.mobile240.assets.CalloutContentBackground;
				contentCornerRadius = 4;
				gap = 6;
				break;
			}
            default:
            {
                // default DPI_160
                contentBackgroundClass = spark.skins.mobile160.assets.CalloutContentBackground;
                contentCornerRadius = 5;
                gap = 8;
                break;
            }
        }
    }
    
    //--------------------------------------------------------------------------
    //
    //  Layout variables
    //
    //--------------------------------------------------------------------------
    
    mx_internal var gap:Number;
    
    //--------------------------------------------------------------------------
    //
    //  Variables
    //
    //--------------------------------------------------------------------------
    
    mx_internal var contentBackgroundClass:Class;
    
    mx_internal var contentBackgroundGraphic:SpriteVisualElement;
    
    mx_internal var contentCornerRadius:Number;
    
    private var contentMask:SpriteVisualElement;
    
    //--------------------------------------------------------------------------
    //
    //  Overridden methods
    //
    //--------------------------------------------------------------------------
    
    /**
     *  @private 
     */ 
    override protected function createChildren():void
    {
        super.createChildren();
        
        // mask the ViewNavigator contentGroup
        contentMask = new SpriteVisualElement();
        contentGroup.mask = contentMask;
        
        // contentBackground shadow is layered above the contentGroup
        contentBackgroundGraphic = new contentBackgroundClass() as SpriteVisualElement;
        addChild(contentBackgroundGraphic);
    }
    
    /**
     *  @private 
     */ 
    override protected function measure():void
    {
        super.measure();
        
        measuredWidth = Math.max(actionBar.getPreferredBoundsWidth(), 
            contentGroup.getPreferredBoundsWidth());
        measuredHeight = actionBar.getPreferredBoundsHeight()
            + contentGroup.getPreferredBoundsHeight()
            + gap;
    }
    
    /**
     *  @private
     */ 
    override protected function commitCurrentState():void
    {
        super.commitCurrentState();
        
        // Force a layout pass on the components
        invalidateProperties();
        invalidateSize();
        invalidateDisplayList();
    }
    
    /**
     *  @private
     */
    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
    {
        // omit super call
        
        var actionBarHeight:Number = 0;
        
        // The action bar is always placed at 0,0 and stretches the entire
        // width of the navigator
        if (actionBar.includeInLayout)
        {
            actionBarHeight = Math.min(actionBar.getPreferredBoundsHeight(), unscaledHeight);
            setElementSize(actionBar, unscaledWidth, actionBarHeight);
            setElementPosition(actionBar, 0, 0);
            actionBarHeight = actionBar.getLayoutBoundsHeight();
        }
        
        // If the hostComponent is in overlay mode, the contentGroup extends
        // the entire bounds of the navigator and the alpha for the action 
        // bar changes
        // If this changes, also update validateEstimatedSizesOfChild
        var contentGroupHeight:Number = 0;
        
        if (contentGroup.includeInLayout)
        {
            contentGroupHeight = Math.max(unscaledHeight - actionBarHeight - gap, 0);
            
            setElementSize(contentGroup, unscaledWidth, contentGroupHeight);
            setElementPosition(contentGroup, 0, actionBarHeight + gap);
            
            setElementSize(contentBackgroundGraphic, unscaledWidth, contentGroupHeight);
            setElementPosition(contentBackgroundGraphic, 0, actionBarHeight + gap);
        }
        
        setElementSize(contentMask, unscaledWidth, contentGroupHeight);
        setElementPosition(contentBackgroundGraphic, 0, actionBarHeight + gap);
    }
    
    /**
     *  @private
     */
    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.drawBackground(unscaledWidth, unscaledHeight);
        
        // draw the contentBackgroundColor
        // the shading and highlight are drawn in FXG
        var contentEllipseSize:Number = contentCornerRadius * 2;
        var contentBackgroundAlpha:Number = getStyle("contentBackgroundAlpha");
        var contentWidth:Number = contentGroup.getLayoutBoundsWidth();
        var contentHeight:Number = contentGroup.getLayoutBoundsHeight();
        
        graphics.beginFill(getStyle("contentBackgroundColor"),
            contentBackgroundAlpha);
        graphics.drawRoundRect(contentBackgroundGraphic.getLayoutBoundsX(),
            contentBackgroundGraphic.getLayoutBoundsY(),
            contentWidth,
            contentHeight,
            contentEllipseSize,
            contentEllipseSize);
        graphics.endFill();
        
        if (contentMask)
        {
            // content mask in contentGroup coordinate space
            var maskGraphics:Graphics = contentMask.graphics;
            maskGraphics.clear();
            maskGraphics.beginFill(0, 1);
            maskGraphics.drawRoundRect(0, 0, contentWidth, contentHeight,
                contentEllipseSize, contentEllipseSize);
            maskGraphics.endFill();
        }
        
        contentBackgroundGraphic.alpha = contentBackgroundAlpha;
    }
}
}