flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jmcl...@apache.org
Subject [10/25] FIXED https://issues.apache.org/jira/browse/FLEX-33350 - mobile Callout moved to spark - Added borderColor and borderThickness styles to Callout - Desktop & Mobile Callout uses same s:Callout - MobileSkin refactored - new ActionScriptSkinBase
Date Tue, 08 Oct 2013 15:22:49 GMT
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/074354ca/frameworks/projects/spark/src/spark/skins/spark/CalloutSkin.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/spark/src/spark/skins/spark/CalloutSkin.as b/frameworks/projects/spark/src/spark/skins/spark/CalloutSkin.as
new file mode 100644
index 0000000..d3b1357
--- /dev/null
+++ b/frameworks/projects/spark/src/spark/skins/spark/CalloutSkin.as
@@ -0,0 +1,743 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.spark
+{
+
+import flash.display.BlendMode;
+import flash.display.GradientType;
+import flash.display.Graphics;
+import flash.display.Sprite;
+import flash.events.Event;
+
+import mx.core.UIComponent;
+import mx.core.mx_internal;
+import mx.events.EffectEvent;
+import mx.events.FlexEvent;
+import mx.utils.ColorUtil;
+
+import spark.components.ArrowDirection;
+import spark.components.Callout;
+import spark.components.ContentBackgroundAppearance;
+import spark.components.Group;
+import spark.core.SpriteVisualElement;
+import spark.effects.Fade;
+import spark.primitives.RectangularDropShadow;
+import spark.skins.ActionScriptSkinBase;
+import spark.skins.spark.assets.CalloutContentBackground;
+import spark.skins.spark.supportClasses.CalloutArrow;
+
+
+use namespace mx_internal;
+
+/**
+ *  The default skin class for the Spark Callout component in mobile
+ *  applications.
+ * 
+ *  <p>The <code>contentGroup</code> lies above a <code>backgroundColor</code>
fill
+ *  which frames the <code>contentGroup</code>. The position and size of the
frame 
+ *  adjust based on the host component <code>arrowDirection</code>, leaving
+ *  space for the <code>arrow</code> to appear on the outside edge of the
+ *  frame.</p>
+ * 
+ *  <p>The <code>arrow</code> skin part is not positioned by the skin.
Instead,
+ *  the Callout component positions the arrow relative to the owner in
+ *  <code>updateSkinDisplayList()</code>. This method assumes that Callout skin
+ *  and the <code>arrow</code> use the same coordinate space.</p>
+ *  
+ *  @see spark.components.Callout
+ *  
+ *  @langversion 3.0
+ *  @playerversion AIR 3
+ *  @productversion Flex 4.6
+ */ 
+public class CalloutSkin extends ActionScriptSkinBase
+{
+    mx_internal static const BACKGROUND_GRADIENT_BRIGHTNESS_TOP:int = 15;
+    
+    mx_internal static const BACKGROUND_GRADIENT_BRIGHTNESS_BOTTOM:int = -60;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  Constructor. 
+     * 
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    public function CalloutSkin()
+    {
+        super();
+        
+        dropShadowAlpha = 0.7;
+
+                // default DPI_160
+        backgroundCornerRadius = 6;
+        contentBackgroundInsetClass = CalloutContentBackground;
+        backgroundGradientHeight = 83;
+        frameThickness = 6;
+        arrowWidth = 26;
+        arrowHeight = 13;
+        contentCornerRadius = 4;
+        dropShadowBlurX = 12;
+        dropShadowBlurY = 12;
+        dropShadowDistance = 2;
+        highlightWeight = 0.5;
+
+         /*
+                backgroundCornerRadius = 8;
+                contentBackgroundInsetClass = CalloutContentBackground;
+                backgroundGradientHeight = 110;
+                frameThickness = 6;
+                arrowWidth = 26;
+                arrowHeight = 13;
+                contentCornerRadius = 5;
+                dropShadowBlurX = 16;
+                dropShadowBlurY = 16;
+                dropShadowDistance = 3;
+                highlightWeight = 1;
+          */
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+    
+    /** 
+     *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+     */
+    public var hostComponent:Callout;
+    
+    /**
+     *  Enables a RectangularDropShadow behind the <code>backgroundColor</code>
frame.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var dropShadowVisible:Boolean = true;
+    
+    /**
+     *  Enables a vertical linear gradient in the <code>backgroundColor</code>
frame. This
+     *  gradient fill is drawn across both the arrow and the frame. By default,
+     *  the gradient brightens the background color by 15% and darkens it by 60%.
+     * 
+     *  @default true
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var useBackgroundGradient:Boolean = true;
+    
+    /**
+     *  Corner radius used for the <code>contentBackgroundColor</code> fill.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var contentCornerRadius:uint;
+    
+    /**
+     *  A class reference to an FXG class that is layered underneath the
+     *  <code>contentGroup</code>. The instance of this class is sized to match
the
+     *  <code>contentGroup</code>.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var contentBackgroundInsetClass:Class;
+    
+    /**
+     *  Corner radius of the <code>backgroundColor</code> "frame".
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var backgroundCornerRadius:Number;
+    
+    /**
+     *  The thickness of the <code>backgroundColor</code> "frame" that surrounds
the
+     *  <code>contentGroup</code>.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var frameThickness:Number;
+    
+    /**
+     *  Color of the border stroke around the <code>backgroundColor</code> "frame".
+     *
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    mx_internal var borderColor:uint  = 0;
+
+    /**
+     *  Thickness of the border stroke around the <code>backgroundColor</code>
+     *  "frame".
+     *
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    mx_internal var borderThickness:Number = NaN;
+
+    /**
+     *  Width of the arrow in vertical directions. This property also controls
+     *  the height of the arrow in horizontal directions.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var arrowWidth:Number;
+    
+    /**
+     *  Height of the arrow in vertical directions. This property also controls
+     *  the width of the arrow in horizontal directions.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var arrowHeight:Number;
+    
+    /**
+     *  @private
+     *  Instance of the contentBackgroundClass
+     */
+    mx_internal var contentBackgroundGraphic:SpriteVisualElement;
+    
+    /**
+     *  @private
+     *  Tracks changes to the skin state to support the fade out tranisition 
+     *  when closed;
+     */
+    mx_internal var isOpen:Boolean;
+    
+    private var backgroundGradientHeight:Number;
+    
+    private var contentMask:Sprite;
+    
+    private var backgroundFill:SpriteVisualElement;
+    
+    private var dropShadow:RectangularDropShadow;
+    
+    private var dropShadowBlurX:Number;
+    
+    private var dropShadowBlurY:Number;
+    
+    private var dropShadowDistance:Number;
+    
+    private var dropShadowAlpha:Number;
+    
+    private var fade:Fade;
+    
+    private var highlightWeight:Number;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Skin parts
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @copy spark.components.SkinnableContainer#contentGroup
+     */
+    public var contentGroup:Group;
+    
+    /**
+     * @copy spark.components.Callout#arrow
+     */
+    public var arrow:UIComponent;
+
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     * @private
+     */
+    override protected function createChildren():void
+    {
+        super.createChildren();
+        
+        if (dropShadowVisible)
+        {
+            dropShadow = new RectangularDropShadow();
+            dropShadow.angle = 90;
+            dropShadow.distance = dropShadowDistance;
+            dropShadow.blurX = dropShadowBlurX;
+            dropShadow.blurY = dropShadowBlurY;
+            dropShadow.tlRadius = dropShadow.trRadius = dropShadow.blRadius = 
+                dropShadow.brRadius = backgroundCornerRadius;
+            dropShadow.mouseEnabled = false;
+            dropShadow.alpha = dropShadowAlpha;
+            addChild(dropShadow);
+        }
+        
+        // background fill placed above the drop shadow
+        backgroundFill = new SpriteVisualElement();
+        addChild(backgroundFill);
+        
+        // arrow
+        if (!arrow)
+        {
+            arrow = new CalloutArrow();
+            arrow.id = "arrow";
+            arrow.styleName = this;
+            addChild(arrow);
+        }
+        
+        // contentGroup
+        if (!contentGroup)
+        {
+            contentGroup = new Group();
+            contentGroup.id = "contentGroup";
+            addChild(contentGroup);
+        }
+
+        borderThickness = getStyle("borderThickness");
+        borderColor = getStyle("borderColor");
+
+    }
+    
+    /**
+     * @private
+     */
+    override protected function commitProperties():void
+    {
+        super.commitProperties();
+        
+        // add or remove the contentBackgroundGraphic
+        var contentBackgroundAppearance:String = getStyle("contentBackgroundAppearance");
+        
+        if (contentBackgroundAppearance == ContentBackgroundAppearance.INSET)
+        {
+            // create the contentBackgroundGraphic
+            if (!contentBackgroundGraphic && contentBackgroundInsetClass)
+            {
+                contentBackgroundGraphic = new contentBackgroundInsetClass() as SpriteVisualElement;
+                
+                // with the current skin structure, contentBackgroundGraphic is
+                // always the last child
+                addChild(contentBackgroundGraphic);
+            }
+        }
+        else if (contentBackgroundGraphic)
+        {
+            // if already created, remove the graphic for "flat" and "none"
+            removeChild(contentBackgroundGraphic);
+            contentBackgroundGraphic = null;
+        }
+        
+        // always invalidate to accomodate arrow direction changes
+        invalidateSize();
+        invalidateDisplayList();
+    }
+    
+    /**
+     * @private
+     */
+    override protected function measure():void
+    {
+        super.measure();
+
+        var borderWeight:Number = isNaN(borderThickness) ? 0 : borderThickness;
+        var frameAdjustment:Number = (frameThickness + borderWeight) * 2;
+        
+        var arrowMeasuredWidth:Number;
+        var arrowMeasuredHeight:Number;
+        
+        // pad the arrow so that the edges are within the background corner radius
+        if (isArrowHorizontal)
+        {
+            arrowMeasuredWidth = arrowHeight;
+            arrowMeasuredHeight = arrowWidth + (backgroundCornerRadius * 2);
+        }
+        else if (isArrowVertical)
+        {
+            arrowMeasuredWidth = arrowWidth + (backgroundCornerRadius * 2);
+            arrowMeasuredHeight = arrowHeight;
+        }
+        
+        // count the contentGroup size and frame size
+        measuredMinWidth = contentGroup.measuredMinWidth + frameAdjustment;
+        measuredMinHeight = contentGroup.measuredMinHeight + frameAdjustment;
+        
+        measuredWidth = contentGroup.getPreferredBoundsWidth() + frameAdjustment;
+        measuredHeight = contentGroup.getPreferredBoundsHeight() + frameAdjustment;
+        
+        // add the arrow size based on the arrowDirection
+        if (isArrowHorizontal)
+        {
+            measuredMinWidth += arrowMeasuredWidth;
+            measuredMinHeight = Math.max(measuredMinHeight, arrowMeasuredHeight);
+            
+            measuredWidth += arrowMeasuredWidth;
+            measuredHeight = Math.max(measuredHeight, arrowMeasuredHeight);
+        }
+        else if (isArrowVertical)
+        {
+            measuredMinWidth += Math.max(measuredMinWidth, arrowMeasuredWidth);
+            measuredMinHeight += arrowMeasuredHeight;
+            
+            measuredWidth = Math.max(measuredWidth, arrowMeasuredWidth);
+            measuredHeight += arrowMeasuredHeight;
+        }
+    }
+    
+    /**
+     *  @private
+     *  SkinnaablePopUpContainer skins must dispatch a 
+     *  FlexEvent.STATE_CHANGE_COMPLETE event for the component to properly
+     *  update the skin state.
+     */
+    override protected function commitCurrentState():void
+    {
+        super.commitCurrentState();
+        
+        var isNormal:Boolean = (currentState == "normal");
+        var isDisabled:Boolean = (currentState == "disabled")
+        
+        // play a fade out if the callout was previously open
+        if (!(isNormal || isDisabled) && isOpen)
+        {
+            if (!fade)
+            {
+                fade = new Fade();
+                fade.target = this;
+                fade.duration = 200;
+                fade.alphaTo = 0;
+            }
+            
+            // BlendMode.LAYER while fading out
+            blendMode = BlendMode.LAYER;
+            
+            // play a short fade effect
+            fade.addEventListener(EffectEvent.EFFECT_END, stateChangeComplete);
+            fade.play();
+            
+            isOpen = false;
+        }
+        else
+        {
+            isOpen = isNormal || isDisabled;
+            
+            // handle re-opening the Callout while fading out
+            if (fade && fade.isPlaying)
+            {
+                // Do not dispatch a state change complete.
+                // SkinnablePopUpContainer handles state interruptions.
+                fade.removeEventListener(EffectEvent.EFFECT_END, stateChangeComplete);
+                fade.stop();
+            }
+            
+            if (isDisabled)
+            {
+                // BlendMode.LAYER to allow CalloutArrow BlendMode.ERASE
+                blendMode = BlendMode.LAYER;
+                
+                alpha = 0.5;
+            }
+            else
+            {
+                // BlendMode.NORMAL for non-animated state transitions
+                blendMode = BlendMode.NORMAL;
+                
+                if (isNormal)
+                    alpha = 1;
+                else
+                    alpha = 0;
+            }
+            
+            stateChangeComplete();
+        }
+    }
+    
+    /**
+     * @private
+     */
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.drawBackground(unscaledWidth, unscaledHeight);
+        
+        var frameEllipseSize:Number = backgroundCornerRadius * 2;
+        
+        // account for borderThickness center stroke alignment
+        var showBorder:Boolean = !isNaN(borderThickness);
+        var borderWeight:Number = showBorder ? borderThickness : 0;
+        
+        // contentBackgroundGraphic already accounts for the arrow position
+        // use it's positioning instead of recalculating based on unscaledWidth
+        // and unscaledHeight
+        var frameX:Number = Math.floor(contentGroup.getLayoutBoundsX() - frameThickness)
- (borderWeight / 2);
+        var frameY:Number = Math.floor(contentGroup.getLayoutBoundsY() - frameThickness)
- (borderWeight / 2);
+        var frameWidth:Number = contentGroup.getLayoutBoundsWidth() + (frameThickness * 2)
+ borderWeight;
+        var frameHeight:Number = contentGroup.getLayoutBoundsHeight() + (frameThickness *
2) + borderWeight;
+        
+        var backgroundColor:Number = getStyle("backgroundColor");
+        var backgroundAlpha:Number = getStyle("backgroundAlpha");
+        
+        var bgFill:Graphics = backgroundFill.graphics;
+        bgFill.clear();
+        
+        if (showBorder)
+            bgFill.lineStyle(borderThickness, borderColor, 1, true);
+        
+        if (useBackgroundGradient)
+        {
+            // top color is brighter if arrowDirection == ArrowDirection.UP
+            var backgroundColorTop:Number = ColorUtil.adjustBrightness2(backgroundColor,

+                BACKGROUND_GRADIENT_BRIGHTNESS_TOP);
+            var backgroundColorBottom:Number = ColorUtil.adjustBrightness2(backgroundColor,

+                BACKGROUND_GRADIENT_BRIGHTNESS_BOTTOM);
+            
+            // max gradient height = backgroundGradientHeight
+            colorMatrix.createGradientBox(unscaledWidth, backgroundGradientHeight,
+                Math.PI / 2, 0, 0);
+            
+            bgFill.beginGradientFill(GradientType.LINEAR,
+                [backgroundColorTop, backgroundColorBottom],
+                [backgroundAlpha, backgroundAlpha],
+                [0, 255],
+                colorMatrix);
+        }
+        else
+        {
+            bgFill.beginFill(backgroundColor, backgroundAlpha);
+        }
+        
+        bgFill.drawRoundRect(frameX, frameY, frameWidth,
+            frameHeight, frameEllipseSize, frameEllipseSize);
+        bgFill.endFill();
+        
+        // draw content background styles
+        var contentBackgroundAppearance:String = getStyle("contentBackgroundAppearance");
+        
+        if (contentBackgroundAppearance != ContentBackgroundAppearance.NONE)
+        {
+            var contentEllipseSize:Number = contentCornerRadius * 2;
+            var contentBackgroundAlpha:Number = getStyle("contentBackgroundAlpha");
+            var contentWidth:Number = contentGroup.getLayoutBoundsWidth();
+            var contentHeight:Number = contentGroup.getLayoutBoundsHeight();
+            
+            // all appearance values except for "none" use a mask
+            if (!contentMask)
+                contentMask = new SpriteVisualElement();
+            
+            contentGroup.mask = contentMask;
+            
+            // draw contentMask 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();
+            
+            // reset line style to none
+            if (showBorder)
+                bgFill.lineStyle(NaN);
+            
+            // draw the contentBackgroundColor
+            bgFill.beginFill(getStyle("contentBackgroundColor"),
+                contentBackgroundAlpha);
+            bgFill.drawRoundRect(contentGroup.getLayoutBoundsX(),
+                contentGroup.getLayoutBoundsY(),
+                contentWidth, contentHeight, contentEllipseSize, contentEllipseSize);
+            bgFill.endFill();
+            
+            if (contentBackgroundGraphic)
+                contentBackgroundGraphic.alpha = contentBackgroundAlpha;
+        }
+        else // if (contentBackgroundAppearance == CalloutContentBackgroundAppearance.NONE))
+        {
+            // remove the mask
+            if (contentMask)
+            {
+                contentGroup.mask = null;
+                contentMask = null;
+            }
+        }
+        
+        // draw highlight in the callout when the arrow is hidden
+        if (useBackgroundGradient && !isArrowHorizontal && !isArrowVertical)
+        {
+            // highlight width spans the callout width minus the corner radius
+            var highlightWidth:Number = frameWidth - frameEllipseSize;
+            var highlightX:Number = frameX + backgroundCornerRadius;
+            var highlightOffset:Number = (highlightWeight * 1.5);
+            
+            // straight line across the top
+            bgFill.lineStyle(highlightWeight, 0xFFFFFF, 0.2 * backgroundAlpha);
+            bgFill.moveTo(highlightX, highlightOffset);
+            bgFill.lineTo(highlightX + highlightWidth, highlightOffset);
+        }
+    }
+    
+    /**
+     * @private
+     */
+    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.layoutContents(unscaledWidth, unscaledHeight);
+        
+        // pad the arrow so that the edges are within the background corner radius
+        if (isArrowHorizontal)
+        {
+            arrow.width = arrowHeight;
+            arrow.height = arrowWidth + (backgroundCornerRadius * 2);
+        }
+        else if (isArrowVertical)
+        {
+            arrow.width = arrowWidth + (backgroundCornerRadius * 2);
+            arrow.height = arrowHeight;
+        }
+        
+        setElementSize(backgroundFill, unscaledWidth, unscaledHeight);
+        setElementPosition(backgroundFill, 0, 0);
+        
+        var frameX:Number = 0;
+        var frameY:Number = 0;
+        var frameWidth:Number = unscaledWidth;
+        var frameHeight:Number = unscaledHeight;
+        
+        switch (hostComponent.arrowDirection)
+        {
+            case ArrowDirection.UP:
+                frameY = arrow.height;
+                frameHeight -= arrow.height;
+                break;
+            case ArrowDirection.DOWN:
+                frameHeight -= arrow.height;
+                break;
+            case ArrowDirection.LEFT:
+                frameX = arrow.width;
+                frameWidth -= arrow.width;
+                break;
+            case ArrowDirection.RIGHT:
+                frameWidth -= arrow.width;
+                break;
+            default:
+                // no arrow, content takes all available space
+                break;
+        }
+        
+        if (dropShadow)
+        {
+            setElementSize(dropShadow, frameWidth, frameHeight);
+            setElementPosition(dropShadow, frameX, frameY);
+        }
+        
+        // Show frameThickness by inset of contentGroup
+        var borderWeight:Number = isNaN(borderThickness) ? 0 : borderThickness;
+        var contentBackgroundAdjustment:Number = frameThickness + borderWeight;
+        
+        var contentBackgroundX:Number = frameX + contentBackgroundAdjustment;
+        var contentBackgroundY:Number = frameY + contentBackgroundAdjustment;
+        
+        contentBackgroundAdjustment = contentBackgroundAdjustment * 2;
+        var contentBackgroundWidth:Number = frameWidth - contentBackgroundAdjustment;
+        var contentBackgroundHeight:Number = frameHeight - contentBackgroundAdjustment;
+        
+        if (contentBackgroundGraphic)
+        {
+            setElementSize(contentBackgroundGraphic, contentBackgroundWidth, contentBackgroundHeight);
+            setElementPosition(contentBackgroundGraphic, contentBackgroundX, contentBackgroundY);
+        }
+        
+        setElementSize(contentGroup, contentBackgroundWidth, contentBackgroundHeight);
+        setElementPosition(contentGroup, contentBackgroundX, contentBackgroundY);
+        
+        // mask position is in the contentGroup coordinate space
+        if (contentMask)
+            setElementSize(contentMask, contentBackgroundWidth, contentBackgroundHeight);
+    }
+    
+    override public function styleChanged(styleProp:String):void
+    {
+        super.styleChanged(styleProp);
+        
+        var allStyles:Boolean = !styleProp || styleProp == "styleName";
+        
+        if (allStyles || (styleProp == "contentBackgroundAppearance"))
+            invalidateProperties();
+        
+        if (allStyles || (styleProp == "backgroundAlpha"))
+        {
+            var backgroundAlpha:Number = getStyle("backgroundAlpha");
+            
+            // Use BlendMode.LAYER to allow CalloutArrow to erase the dropShadow
+            // when the Callout background is transparent
+            blendMode = (backgroundAlpha < 1) ? BlendMode.LAYER : BlendMode.NORMAL;
+        }
+
+    }
+    
+    /**
+     * @private
+     */
+    mx_internal function get isArrowHorizontal():Boolean
+    {
+        return (hostComponent.arrowDirection == ArrowDirection.LEFT
+            || hostComponent.arrowDirection == ArrowDirection.RIGHT);
+    }
+    
+    /**
+     * @private
+     */
+    mx_internal function get isArrowVertical():Boolean
+    {
+        return (hostComponent.arrowDirection == ArrowDirection.UP
+            || hostComponent.arrowDirection == ArrowDirection.DOWN);
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Event handlers
+    //
+    //--------------------------------------------------------------------------
+    
+    private function stateChangeComplete(event:Event=null):void
+    {
+        if (fade && event)
+            fade.removeEventListener(EffectEvent.EFFECT_END, stateChangeComplete);
+        
+        // SkinnablePopUpContainer relies on state changes for open and close
+        dispatchEvent(new FlexEvent(FlexEvent.STATE_CHANGE_COMPLETE));
+    }
+}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/074354ca/frameworks/projects/spark/src/spark/skins/spark/assets/CalloutContentBackground.fxg
----------------------------------------------------------------------
diff --git a/frameworks/projects/spark/src/spark/skins/spark/assets/CalloutContentBackground.fxg
b/frameworks/projects/spark/src/spark/skins/spark/assets/CalloutContentBackground.fxg
new file mode 100644
index 0000000..8442b96
--- /dev/null
+++ b/frameworks/projects/spark/src/spark/skins/spark/assets/CalloutContentBackground.fxg
@@ -0,0 +1,51 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008"
+	scaleGridLeft="12" scaleGridRight="588" scaleGridTop="30" scaleGridBottom="388">
+
+	<!-- invisible fix for scaling -->
+	<Rect x="0" y="399" width="600" height="1">
+		<fill>
+			<SolidColor color="#ffffff" alpha="0"/>
+		</fill>
+	</Rect>
+    
+	<!-- Content Shading Top -->
+	<Rect x="0" y="0" width="600" height="20"
+			topLeftRadiusX="10" topLeftRadiusY="10"
+			topRightRadiusX="10" topRightRadiusY="10">
+		<fill>
+			<LinearGradient  rotation="90">
+				<GradientEntry ratio="0" color="#000000" alpha="0.6"/>
+				<GradientEntry ratio="0.5" color="#000000" alpha="0"/>
+			</LinearGradient>
+		</fill>
+	</Rect>
+		
+	<!-- Content Highlight -->
+	<Rect x="1" y="1" width="598" height="398"
+			radiusX="10" radiusY="10">
+		<stroke>
+			<SolidColorStroke color="#FFFFFF" alpha="0.8"
+								weight="2"/>
+		</stroke>
+	</Rect>
+</Graphic>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/074354ca/frameworks/projects/spark/src/spark/skins/spark/supportClasses/CalloutArrow.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/spark/src/spark/skins/spark/supportClasses/CalloutArrow.as
b/frameworks/projects/spark/src/spark/skins/spark/supportClasses/CalloutArrow.as
new file mode 100644
index 0000000..825fd1e
--- /dev/null
+++ b/frameworks/projects/spark/src/spark/skins/spark/supportClasses/CalloutArrow.as
@@ -0,0 +1,423 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.spark.supportClasses
+{
+import flash.display.BlendMode;
+import flash.display.GradientType;
+import flash.display.Graphics;
+import flash.display.GraphicsPathCommand;
+import flash.display.Sprite;
+
+import mx.core.DPIClassification;
+import mx.core.FlexGlobals;
+import mx.core.IVisualElement;
+import mx.core.UIComponent;
+import mx.core.mx_internal;
+import mx.utils.ColorUtil;
+
+import spark.components.Application;
+import spark.components.ArrowDirection;
+import spark.components.Callout;
+import spark.skins.ActionScriptSkinBase;
+import spark.skins.spark.CalloutSkin;
+
+use namespace mx_internal;
+
+/**
+ *  The arrow skin part for CalloutSkin.
+ *
+ *  @see spark.skin.mobile.CalloutSkin
+ *
+ *  @langversion 3.0
+ *  @playerversion AIR 3
+ *  @productversion Flex 4.6
+ */
+public class CalloutArrow extends UIComponent
+{
+    public function CalloutArrow()
+    {
+        super();
+
+        useBackgroundGradient = true;
+
+        var applicationDPI:Number = Application(FlexGlobals.topLevelApplication).applicationDPI;
+
+        // Copy DPI-specific values from CalloutSkin
+        switch (applicationDPI)
+        {
+            case DPIClassification.DPI_320:
+            {
+                // Note provisional may need changes
+                gap = 32;
+                backgroundGradientHeight = 440;
+                highlightWeight = 4;
+
+                break;
+            }
+            case DPIClassification.DPI_480:
+            {
+                // Note provisional may need changes
+                gap = 24;
+                backgroundGradientHeight = 330;
+                highlightWeight = 3;
+
+                break;
+            }
+            case DPIClassification.DPI_320:
+            {
+                gap = 16;
+                backgroundGradientHeight = 220;
+                highlightWeight = 2;
+
+                break;
+            }
+            case DPIClassification.DPI_240:
+            {
+                gap = 12;
+                backgroundGradientHeight = 165;
+                highlightWeight = 1;
+
+                break;
+            }
+            case DPIClassification.DPI_120:
+            {
+                // Note provisional may need changes
+                gap = 6;
+                backgroundGradientHeight = 83;
+                highlightWeight = 1;
+
+                break;
+            }
+            default:
+            {
+                // default DPI_160
+                gap = 8;
+                backgroundGradientHeight = 110;
+                highlightWeight = 1;
+
+                break;
+            }
+        }
+    }
+
+    /**
+     *  A gap on the frame-adjacent side of the arrow graphic to avoid
+     *  drawing past the CalloutSkin backgroundCornerRadius.
+     *
+     *  <p>The default implementation matches the gap value with the
+     *  <code>backgroundCornerRadius</code> value in <code>CalloutSkin</code>.</p>
+     *
+     *  @see spark.skins.mobile.CalloutSkin#backgroundCornerRadius
+     *
+     *  @langversion 3.0
+     *  @playerversion AIR 3
+     *  @productversion Flex 4.6
+     */
+    protected var gap:Number;
+    /**
+     *  @copy spark.skins.mobile.CalloutSkin#backgroundGradientHeight
+     */
+    protected var backgroundGradientHeight:Number;
+    /**
+     *  @copy spark.skins.mobile.CalloutSkin#useBackgroundGradient
+     */
+    protected var useBackgroundGradient:Boolean;
+    /**
+     *  @copy spark.skins.mobile.CalloutSkin#highlightWeight
+     */
+    private var highlightWeight:Number;
+    /**
+     *  @private
+     *  A sibling of the arrow used to erase the drop shadow in CalloutSkin
+     */
+    private var eraseFill:Sprite;
+
+    /**
+     * @private
+     */
+    override protected function createChildren():void
+    {
+        super.createChildren();
+
+        // eraseFill has the same position and arrow shape in order to erase
+        // the drop shadow under the arrow when backgroundAlpha < 1
+        eraseFill = new Sprite();
+        eraseFill.blendMode = BlendMode.ERASE;
+
+        // layer eraseFill below the arrow 
+        parent.addChildAt(eraseFill, parent.getChildIndex(this));
+    }
+
+    /**
+     * @private
+     */
+    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.updateDisplayList(unscaledWidth, unscaledHeight);
+
+        graphics.clear();
+        eraseFill.graphics.clear();
+
+        var calloutSkin:Object = parent;
+        var hostComponent:Callout = calloutSkin.hostComponent;
+        var arrowDirection:String = hostComponent.arrowDirection;
+
+        if (arrowDirection == ArrowDirection.NONE)
+            return;
+
+        // when drawing the arrow, compensate for cornerRadius via padding
+        var arrowGraphics:Graphics = this.graphics;
+        var eraseGraphics:Graphics = eraseFill.graphics;
+        var arrowWidth:Number = unscaledWidth;
+        var arrowHeight:Number = unscaledHeight;
+        var arrowX:Number = 0;
+        var arrowY:Number = 0;
+        var arrowTipX:Number = 0;
+        var arrowTipY:Number = 0;
+        var arrowEndX:Number = 0;
+        var arrowEndY:Number = 0;
+
+        var borderThickness:Number = hostComponent.getStyle("borderThickness"); // does not
inherit
+        var borderColor:uint = hostComponent.getStyle("borderColor"); // does not inherit
+        var showBorder:Boolean = !isNaN(borderThickness) && borderThickness >
0;
+        var borderWeight:Number = showBorder ? borderThickness : 0;
+
+        var borderHalf:Number = borderWeight / 2;
+        var isHorizontal:Boolean = false;
+
+        if ((arrowDirection == ArrowDirection.LEFT) ||
+                (arrowDirection == ArrowDirection.RIGHT))
+        {
+            isHorizontal = true;
+
+            arrowX = -borderHalf;
+            arrowY = gap;
+            arrowHeight = arrowHeight - (gap * 2);
+
+            arrowTipX = arrowWidth - borderHalf;
+            arrowTipY = arrowY + (arrowHeight / 2);
+
+            arrowEndX = arrowX;
+            arrowEndY = arrowY + arrowHeight;
+
+            // flip coordinates to point left
+            if (arrowDirection == ArrowDirection.LEFT)
+            {
+                arrowX = arrowWidth - arrowX;
+                arrowTipX = arrowWidth - arrowTipX;
+                arrowEndX = arrowWidth - arrowEndX;
+            }
+        }
+        else
+        {
+            arrowX = gap;
+            arrowY = -borderHalf;
+            arrowWidth = arrowWidth - (gap * 2);
+
+            arrowTipX = arrowX + (arrowWidth / 2);
+            arrowTipY = arrowHeight - borderHalf;
+
+            arrowEndX = arrowX + arrowWidth;
+            arrowEndY = arrowY;
+
+            // flip coordinates to point up
+            if (hostComponent.arrowDirection == ArrowDirection.UP)
+            {
+                arrowY = arrowHeight - arrowY;
+                arrowTipY = arrowHeight - arrowTipY;
+                arrowEndY = arrowHeight - arrowEndY;
+            }
+        }
+
+        var commands:Vector.<int> = new Vector.<int>(3, true);
+        commands[0] = GraphicsPathCommand.MOVE_TO;
+        commands[1] = GraphicsPathCommand.LINE_TO;
+        commands[2] = GraphicsPathCommand.LINE_TO;
+
+        var coords:Vector.<Number> = new Vector.<Number>(6, true);
+        coords[0] = arrowX;
+        coords[1] = arrowY;
+        coords[2] = arrowTipX
+        coords[3] = arrowTipY;
+        coords[4] = arrowEndX
+        coords[5] = arrowEndY;
+
+        var backgroundColor:Number = getStyle("backgroundColor");
+        var backgroundAlpha:Number = getStyle("backgroundAlpha");
+
+        if (useBackgroundGradient)
+        {
+            var backgroundColorTop:Number = ColorUtil.adjustBrightness2(backgroundColor,
+                    CalloutSkin.BACKGROUND_GRADIENT_BRIGHTNESS_TOP);
+            var backgroundColorBottom:Number = ColorUtil.adjustBrightness2(backgroundColor,
+                    CalloutSkin.BACKGROUND_GRADIENT_BRIGHTNESS_BOTTOM);
+
+            // translate the gradient based on the arrow position
+            ActionScriptSkinBase.colorMatrix.createGradientBox(unscaledWidth,
+                    backgroundGradientHeight, Math.PI / 2, 0, -getLayoutBoundsY());
+
+            arrowGraphics.beginGradientFill(GradientType.LINEAR,
+                    [backgroundColorTop, backgroundColorBottom],
+                    [backgroundAlpha, backgroundAlpha],
+                    [0, 255],
+                    ActionScriptSkinBase.colorMatrix);
+        }
+        else
+        {
+            arrowGraphics.beginFill(backgroundColor, backgroundAlpha);
+        }
+
+        // cover the adjacent border from the callout frame
+        if (showBorder)
+        {
+            var coverX:Number = 0;
+            var coverY:Number = 0;
+            var coverWidth:Number = 0;
+            var coverHeight:Number = 0;
+
+            switch (arrowDirection)
+            {
+                case ArrowDirection.UP:
+                {
+                    coverX = arrowX;
+                    coverY = arrowY;
+                    coverWidth = arrowWidth;
+                    coverHeight = borderWeight;
+                    break;
+                }
+                case ArrowDirection.DOWN:
+                {
+                    coverX = arrowX;
+                    coverY = -borderWeight;
+                    coverWidth = arrowWidth;
+                    coverHeight = borderWeight;
+                    break;
+                }
+                case ArrowDirection.LEFT:
+                {
+                    coverX = arrowX;
+                    coverY = arrowY;
+                    coverWidth = borderWeight;
+                    coverHeight = arrowHeight;
+                    break;
+                }
+                case ArrowDirection.RIGHT:
+                {
+                    coverX = -borderWeight;
+                    coverY = arrowY;
+                    coverWidth = borderWeight;
+                    coverHeight = arrowHeight;
+                    break;
+                }
+            }
+
+            arrowGraphics.drawRect(coverX, coverY, coverWidth, coverHeight);
+        }
+
+        // erase the drop shadow from the CalloutSkin
+        if (backgroundAlpha < 1)
+        {
+            // move eraseFill to the same position as the arrow
+            eraseFill.x = getLayoutBoundsX()
+            eraseFill.y = getLayoutBoundsY();
+
+            // draw the arrow shape
+            eraseGraphics.beginFill(0, 1);
+            eraseGraphics.drawPath(commands, coords);
+            eraseGraphics.endFill();
+        }
+
+        // draw arrow path
+        if (showBorder)
+        {
+            arrowGraphics.lineStyle(borderThickness, borderColor, 1, true);
+        }
+
+
+        arrowGraphics.drawPath(commands, coords);
+        arrowGraphics.endFill();
+
+        // adjust the highlight position to the origin of the callout
+        var isArrowUp:Boolean = (arrowDirection == ArrowDirection.UP);
+        var offsetY:Number = (isArrowUp) ? unscaledHeight : -getLayoutBoundsY();
+
+        // highlight starts after the backgroundCornerRadius
+        var highlightX:Number = gap - getLayoutBoundsX();
+
+        // highlight Y position is based on the stroke weight 
+        var highlightOffset:Number = (highlightWeight * 1.5);
+        var highlightY:Number = highlightOffset + offsetY;
+
+        // highlight width spans the callout width minus the corner radius
+        var highlightWidth:Number = IVisualElement(calloutSkin).getLayoutBoundsWidth() -
(gap * 2);
+
+        if (isHorizontal)
+        {
+            highlightWidth -= arrowWidth;
+
+            if (arrowDirection == ArrowDirection.LEFT)
+                highlightX += arrowWidth;
+        }
+
+        // highlight on the top edge is drawn in the arrow only in the UP direction
+        if (useBackgroundGradient)
+        {
+            if (isArrowUp)
+            {
+                // highlight follows the top edge, including the arrow
+                var rightWidth:Number = highlightWidth - arrowWidth;
+
+                // highlight style
+                arrowGraphics.lineStyle(highlightWeight, 0xFFFFFF, 0.2 * backgroundAlpha);
+
+                // in the arrow coordinate space, the highlightX must be less than 0
+                if (highlightX < 0)
+                {
+                    arrowGraphics.moveTo(highlightX, highlightY);
+                    arrowGraphics.lineTo(arrowX, highlightY);
+
+                    // compute the remaining highlight
+                    rightWidth -= (arrowX - highlightX);
+                }
+
+                // arrow highlight (adjust Y downward)
+                coords[1] = arrowY + highlightOffset;
+                coords[3] = arrowTipY + highlightOffset;
+                coords[5] = arrowEndY + highlightOffset;
+                arrowGraphics.drawPath(commands, coords);
+
+                // right side
+                if (rightWidth > 0)
+                {
+                    arrowGraphics.moveTo(arrowEndX, highlightY);
+                    arrowGraphics.lineTo(arrowEndX + rightWidth, highlightY);
+                }
+            }
+            else
+            {
+                // straight line across the top
+                arrowGraphics.lineStyle(highlightWeight, 0xFFFFFF, 0.2 * backgroundAlpha);
+                arrowGraphics.moveTo(highlightX, highlightY);
+                arrowGraphics.lineTo(highlightX + highlightWidth, highlightY);
+            }
+        }
+    }
+}
+}
\ No newline at end of file


Mime
View raw message