3 Replies Latest reply on Dec 8, 2009 11:27 AM by Shongrunden

    Setting a stroke style on a Skinnable container?

    Handycam Level 1

      I have a SkinnablerContainer skin that I made using the "new skin from copy".  I've got it working with the fill properties included, but I'd also like to add some control for stroke.  I did this, but the component instance says "Cannot resolve attribute 'borderWeight' for component type spark.components.SkinnableContainer".

       

      <fx:Script fb:purpose="styling">
          <![CDATA[         
              /**
               *  @private
               */
              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
              {
                  bgFill.color = getStyle("backgroundColor");
                  bgFill.alpha = getStyle("backgroundAlpha");
                     bgStroke.color = getStyle("borderColor");
                     bgStroke.weight = getStyle("borderWeight");
                  
                  super.updateDisplayList(unscaledWidth, unscaledHeight);
              }
          ]]>        
      </fx:Script>
      
      <s:states>
          <s:State name="normal" />
          <s:State name="disabled" />
      </s:states>
      
      
      <s:Rect left="0" right="0" top="0" bottom="0" radiusX="12">
          <s:fill>
              <s:SolidColor id="bgFill"/>
          </s:fill>
           <s:stroke>
                <s:SolidColorStroke id="bgStroke"/>
           </s:stroke>
      </s:Rect>
      
        • 1. Re: Setting a stroke style on a Skinnable container?
          Gaurav J Adobe Employee

          The following:

          getStyle(borderColor);

          will call getStyle method on SkinnableContainer. But SkinnableContainer does not define borderColor as a style which is why you are getting the error.

           

          It does define backgroundColor, which is why

          getStyle(backgroundColor);

          worked.

           

           

          You can do, somthing like

          bgStroke.color = #FF0000;

          or call getStyle for a style that exists on SkinnableContainer..

           

          Hope that helps.

           

          Thanks,

          Gaurav Jain

          Flex SDK Team

          • 2. Re: Setting a stroke style on a Skinnable container?
            Handycam Level 1

            OK, so what component could I use that supports a borderColor? 

             

            Also, in the past I have "made up" my own styles:

            <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
                      minWidth="21" minHeight="21"
                      alpha.disabled="0.5">
                 
                 <fx:Metadata>
                      [HostComponent("spark.components.Button")]
                 </fx:Metadata>
                 
                 <fx:Script>          
                      
                      [Bindable] private var tColor:uint;
                      [Bindable] private var tColorOver:uint;
                      [Bindable] private var tColorDown:uint;
                      [Bindable] private var tColorDisabled:uint = 0xCCCCCC;
                      
                      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                      {
                           
                           bgcolor.color = getStyle("backgroundColor");
                           bgcolorover.color = getStyle("backgroundOverColor");
                           bgcolordown.color = getStyle("backgroundDownColor");
                           tColor = getStyle("color");
                           tColorOver = getStyle("colorOver");
                           tColorDown = getStyle("colorDown");
                           super.updateDisplayList(unscaledWidth, unscaledHeight);
                      }
                 </fx:Script>
            
                 
                 <s:Rect top="0" left="0" right="0" bottom="0" radiusX="6" radiusY="6">
                      <s:filters>
                           <s:BevelFilter strength=".3" distance="2" blurX="4" blurY="4"/>
                      </s:filters>
                      <s:filters.down>
                           <s:BevelFilter strength=".3" distance="-2" blurX="4" blurY="4"/>
                      </s:filters.down>
                      <s:fill>
                           <s:SolidColor id="bgcolor" />
                      </s:fill>
                      <s:fill.over>
                           <s:SolidColor id="bgcolorover" />
                      </s:fill.over>
                      <s:fill.down>
                           <s:SolidColor id="bgcolordown" />
                      </s:fill.down>
                 </s:Rect>
            

             

            Why does it work here?  Or does this only support css and not mxml?

            • 3. Re: Setting a stroke style on a Skinnable container?
              Shongrunden Adobe Employee

              Try the BorderContainer component (used to be Border)