 
 package spark.skins.mobile
 {
-import flash.display.Graphics;
-import flash.display.Sprite;
-
+import flash.display.DisplayObject;
+import flash.events.Event;
+import flash.text.TextLineMetrics;
+
+import mx.core.ILayoutElement;
 import mx.core.UIComponent;
+import mx.core.UITextField;
+import mx.core.mx_internal;
+import mx.styles.ISimpleStyleClient;
 
 import spark.components.ActionBar;
 import spark.components.Group;
-import spark.components.Label;
+import spark.components.supportClasses.MobileTextField;
+import spark.core.IDisplayText;
 import spark.core.SpriteVisualElement;
 import spark.layouts.HorizontalAlign;
 import spark.layouts.HorizontalLayout;

        hLayout.horizontalAlign = HorizontalAlign.LEFT;
        hLayout.verticalAlign = VerticalAlign.JUSTIFY;
        hLayout.gap = 0;
        hLayout.paddingLeft = hLayout.paddingTop = hLayout.paddingRight = hLayout.paddingBottom = 0;
        navigationGroup.layout = hLayout;
        addChild(navigationGroup);
        

        
        // Draw background
        graphics.clear();
        graphics.beginFill(getStyle("chromeColor"),
            getStyle("backgroundAlpha"));
        graphics.drawRect(0, 1, unscaledWidth, unscaledHeight);
        graphics.endFill();
    }
}
}
import flash.events.Event;
import flash.text.TextFormatAlign;
import flash.text.TextLineMetrics;

import mx.core.UIComponent;
import mx.core.UITextField;
import mx.core.mx_internal;
import mx.events.FlexEvent;

import spark.components.supportClasses.MobileTextField;
import spark.core.IDisplayText;

use namespace mx_internal;

/**
 *  @private
 *  Component that holds MobileTextFields to produce a drop shadow effect.
 */
class TitleDisplayComponent extends UIComponent implements IDisplayText
{
    private static var TEXT_WIDTH_PADDING:Number =
        UITextField.TEXT_WIDTH_PADDING + 1;
    
    private var titleDisplay:MobileTextField;
    private var titleDisplayShadow:MobileTextField;
    private var title:String;
    private var titleChanged:Boolean;
    
    // FIXME (jasonsj): padding styles
    private var paddingLeft:int = 15;
    private var paddingRight:int = 15;
    private var paddingTop:int = 15;
    private var paddingBottom:int = 15;
    
    public function TitleDisplayComponent()
    {
        super();
		title = "";
        
        // FIXME (jasonsj): mobile styling spec
        setStyle("fontSize", 32);
        setStyle("fontWeight", "bold");
        setStyle("textAlign", "left");
        setStyle("textShadowColor", 0x000000);
    }
    
    override protected function createChildren():void
    {
        // FIXME (jasonsj): pending mobile styling spec:
        //                  drop shadow style
        //                  textAlign
        titleDisplay = MobileTextField(createInFontContext(MobileTextField));
        titleDisplay.styleProvider = this;
        titleDisplay.editable = false;
        titleDisplay.selectable = false;
        titleDisplay.multiline = false;
        titleDisplay.wordWrap = false;
        titleDisplay.addEventListener(FlexEvent.VALUE_COMMIT,
            titleDisplay_valueCommitHandler);
        
        titleDisplayShadow =
            MobileTextField(createInFontContext(MobileTextField));
        titleDisplayShadow.styleProvider = this;
        titleDisplayShadow.colorName = "textShadowColor";
        titleDisplayShadow.editable = false;
        titleDisplayShadow.selectable = false;
        titleDisplayShadow.multiline = false;
        titleDisplayShadow.wordWrap = false;
        
        addChild(titleDisplayShadow);
        addChild(titleDisplay);
    }
    
    override protected function commitProperties():void
    {
        super.commitProperties();
        
        if (titleChanged)
        {
            if (titleDisplay)
            {
                titleDisplay.text = title;
                invalidateSize();
                
                invalidateDisplayList();
            }
            
            titleChanged = false;
        }
    }
    
    override protected function measure():void
    {
        var textWidth:Number = 0;
        var textHeight:Number = 0;
        var lineMetrics:TextLineMetrics;
        
        if (title != "")
        {
            lineMetrics = measureText(title);
            textWidth = lineMetrics.width + TEXT_WIDTH_PADDING;
        }
        else
        {
            lineMetrics = measureText("Wj");
        }
        
        textHeight = lineMetrics.height + UITextField.TEXT_HEIGHT_PADDING;
        
        measuredWidth = textWidth;
        measuredHeight = textHeight;
    }
    
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        
        var textHeight:Number = 0;
        var lineMetrics:TextLineMetrics;
        
        if (title != "")
            lineMetrics = measureText(title);
        else
            lineMetrics = measureText("Wj");
        
        textHeight = lineMetrics.height + UITextField.TEXT_HEIGHT_PADDING;
        
        // FIXME (jasonsj): pending mobile styling spec: vertical center
        titleDisplay.commitStyles();
        titleDisplay.x = 0;
        titleDisplay.y = Math.floor((unscaledHeight / 2) - (textHeight / 2)); // centered
        titleDisplay.width = unscaledWidth;
        titleDisplay.height = unscaledHeight;
        
        // before truncating text, we need to reset it to its original value
        if (titleDisplay.isTruncated)
            titleDisplay.text = title;
        titleDisplay.truncateToFit();
        
        titleDisplayShadow.commitStyles();
        titleDisplayShadow.x = 0;
        titleDisplayShadow.y = titleDisplay.y + 1; // 90 degree drop shadow
        titleDisplayShadow.width = unscaledWidth;
        titleDisplayShadow.height = unscaledHeight;
        
        // if labelDisplay is truncated, then push it down here as well.
        // otherwise, it would have gotten pushed in the labelDisplay_valueCommitHandler()
        if (titleDisplay.isTruncated)
            titleDisplayShadow.text = titleDisplay.text;
    }
    
    override public function styleChanged(styleProp:String):void 
    {
        super.styleChanged(styleProp);
        
        if (titleDisplay)
            titleDisplay.styleChanged(styleProp);
        
        if (titleDisplayShadow)
            titleDisplayShadow.styleChanged(styleProp);
    }
    
    /**
     *  @private 
     */ 
    private function titleDisplay_valueCommitHandler(event:Event):void 
    {
        titleDisplayShadow.text = titleDisplay.text;
    }
    
    public function get text():String
    {
        return title;
    }
    
    public function set text(value:String):void
    {
        title = value;
        titleChanged = true;
        
        invalidateProperties();
    }
    
    public function get isTruncated():Boolean
    {
        if (titleDisplay)
            return titleDisplay.isTruncated;
        
        return false;
    }
}