1 Reply Latest reply on Dec 15, 2011 10:33 AM by Flex harUI

    Skinning bug madness: Causes entire app not to become visible.


      I've just spent 2 hours using the divide and conquer method to find find a bug that was causing my entire web flex app not to display.

      It occurs in a SparkButtonSkin, when I draw a border that is 1 pixel greater than the bottom of the parent border. Notice that outer_border's y="1" and its height="main_group.height" therefore it extends past the bottom by 1. If I go y=-1 it works or the perfect size works too....


      I'm compiling for 10.2 using flex sdk 4.5


      <?xml version="1.0" encoding="utf-8"?>
      Copyright 2008 Adobe Systems Incorporated
      All Rights Reserved.
      NOTICE: Adobe permits you to use, modify, and distribute this file
      in accordance with the terms of the license agreement accompanying it.
      <!--- The default skin class for the Spark Button component.  
      @see spark.components.Button
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
      <s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                                 minWidth="21" minHeight="21" 
                          * @copy spark.skins.spark.ApplicationSkin#hostComponent
                <fx:Script fb:purpose="styling">
                                    import spark.components.Group;
                                    /* Define the skin elements that should not be colorized. 
                                    For button, the graphics are colorized but the label is not. */
                                    static private const exclusions:Array = ["labelDisplay"];
                                     * @private
                                    override public function get colorizeExclusions():Array {return exclusions;}
                                     * @private
                                    override protected function initializationComplete():void
                                              useChromeColor = true;
                                     *  @private
                                    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
                                              super.updateDisplayList(unscaledWidth, unscaledHeight);
                                    private var cornerRadius:Number = 2;
                <s:Group id="main_group" width="100%" height="100%">
                          <s:Rect id="outer_border" left="0" right="0"  y="1"  height="{main_group.height}"  radiusX="22" radiusY="22">
                                              <s:SolidColor   color="black"/>
                <!-- states -->
                          <s:State name="up" />
                          <s:State name="over" />
                          <s:State name="down" />
                          <s:State name="disabled" />