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

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

    twigg989

      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"?>
      
      
      <!--
      
      
      ADOBE SYSTEMS INCORPORATED
      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" 
                                                 xmlns:s="library://ns.adobe.com/flex/spark" 
                                                 xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                                                 minWidth="21" minHeight="21" 
                                                 alpha.disabled="0.5">
        
                <fx:Metadata>
                          <![CDATA[ 
                          /** 
                          * @copy spark.skins.spark.ApplicationSkin#hostComponent
                          */
                          [HostComponent("spark.components.Button")]
                          ]]>
                </fx:Metadata>
        
                <fx:Script fb:purpose="styling">
                          <![CDATA[         
                                    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;
                                              super.initializationComplete();
                                    }  
        
                                    /**
                                     *  @private
                                     */
                                    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
                                    {
        
        
                                              super.updateDisplayList(unscaledWidth, unscaledHeight);
                                    }
        
                                    private var cornerRadius:Number = 2;
        
                          ]]>        
                </fx:Script>
        
        
                <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:fill>
                                              <s:SolidColor   color="black"/>
                                    </s:fill>
                          </s:Rect>
        
                </s:Group>
        
        
                <!-- states -->
                <s:states>
                          <s:State name="up" />
                          <s:State name="over" />
                          <s:State name="down" />
                          <s:State name="disabled" />
                </s:states>
        
      </s:SparkButtonSkin>