Flex mobile Skin skinning в ActionScript - многострочная меткаDisplay

Question

Я работаю над приложением Flex mobil e и оптимизировал его производительность на мобильных устройствах. Я прочитал, что скины должны быть написаны в ActionScript, поэтому я попытался создать мой AS ButtonSkin.

public class mButtonSkin extends ButtonSkin 
{ 
    private static var colorMatrix:Matrix = new Matrix(); 

    protected var radiusX:Number = 12; 
    protected var mAngle:Number = 30; 
    protected var labelWidth:Number; 
    protected var labelHeight:Number; 
    protected var paddingLeft:Number = 12; 
    protected var paddingRight:Number = 12; 
    protected var paddingTop:Number = 2; 
    protected var paddingBottom:Number = 2; 



    public function mButtonSkin() { 
     super(); 
    } 


    override protected function drawBackground(unscaledWidth:Number,unscaledHeight:Number) : void { 
     colorMatrix.createGradientBox(width,height,mAngle); 
     if (currentState == "up") { 
      graphics.beginGradientFill(GradientType.LINEAR, 
       [hostComponent.getStyle("fill3"),hostComponent.getStyle("fill1")], [1,1], [0,255], colorMatrix); 
     } else { 
      graphics.beginFill(hostComponent.getStyle("fill4")); 
     } 

     graphics.lineStyle(0.5,hostComponent.getStyle("borderColor"),0.5); 
     graphics.drawRoundRect(0,0,hostComponent.width,hostComponent.height,12); 
     graphics.endFill(); 
    } 


    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number) : void { 
     labelDisplay.wordWrap = true; 
     labelDisplay.multiline = true; 

     labelDisplay.commitStyles(); 

     labelWidth = width - paddingLeft - paddingRight; 
     labelHeight = height - paddingTop - paddingBottom; 

     var x:Number = width/2 - labelWidth/2; 
     var y:Number = height/2 - getElementPreferredHeight(labelDisplay)/2; 

     setElementSize(labelDisplay,labelWidth,labelHeight); 
     setElementPosition(labelDisplay,x,y); 
    } 


    override protected function labelDisplay_valueCommitHandler(event:FlexEvent) : void { 
     labelDisplayShadow.text = ""; 
    } 
} 

Применяя эту кожу в моих кнопок:

Кнопка labelDisplay имеет неправильное выравнивание (VerticalAlignment должен быть средним).

После нажатия на кнопку:

Моя кнопка активна labelDisplay теперь вертикально выравнивается по центру.

Я что-то пропустил? Что я сделал не так?

Answer 1

на функции layoutContents, перед установкой labelDisplay элемента, я проверил первый ли это numLines свойства больше 1. Вот моя обновленная функция:

override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number) : void { 
     labelDisplay.wordWrap = true; 
     labelDisplay.multiline = true; 

     labelWidth = width - paddingLeft - paddingRight; 
     labelHeight = height - paddingTop - paddingBottom; 

     var x:Number = width * .5 - labelWidth * .5; 
     var y:Number = height * .5 - getElementPreferredHeight(labelDisplay) * .5; 

     setElementSize(labelDisplay,labelWidth,labelHeight); 

     if (labelDisplay.numLines == 1) 
      setElementPosition(labelDisplay,x,y); 
     else 
      setElementPosition(labelDisplay, x, labelDisplay.getLayoutBoundsY()); 
    } 

это решение не может быть полезным для других разработчиков там но он решил мою проблему.