Fill Colors: Flex CSS styles and skins

tanglg wrote on 07/01/08 4:16 AM

Very Good?

aaa wrote on 07/07/08 7:07 AM

want full project source

apomales wrote on 08/28/09 7:52 AM

I love this skin and am trying to use it in an upcoming flex application.

The problem is that the SmartPanelSkin seems to be a fixed size. Is there a way to make it respond to resize events?

Thank You!

apomales wrote on 08/28/09 8:13 AM

I'm figuring no one will be checking this spot, so I'll add what I figured out:

package assets.skins
{
   import flash.display.DisplayObject;
   
   import mx.binding.utils.*;
   import mx.containers.Panel;
   import mx.controls.Alert;
   import mx.core.EdgeMetrics;
   import mx.core.mx_internal;
   import mx.events.ResizeEvent;
   import mx.skins.halo.PanelSkin;
   import mx.styles.CSSStyleDeclaration;
   import mx.styles.IStyleClient;
   import mx.styles.StyleManager;
   use namespace mx_internal;
   
   public class SmartPanelSkin extends PanelSkin
   {
      private var backgroundComplete:Boolean = false;
      private var contentComplete:Boolean = false;
      private var handlerAdded:Boolean = false;
      private var contentInstance:DisplayObject = null;
      private var backgroundInstance:DisplayObject = null;
      
      public function SmartPanelSkin()
      {
         super();
      }
      
      private function resizeHandler(event:ResizeEvent):void {
         var panel:Panel = Panel(parent);
         panel.rawChildren.removeChild(contentInstance);
         panel.rawChildren.removeChild(backgroundInstance);
         backgroundComplete = false;
         contentComplete = false;
      }
      
      override mx_internal function drawBorder(w:Number, h:Number):void
      {
         if(!parent || contentComplete) return;
         
         if (!handlerAdded) {
            handlerAdded = true;
            parent.addEventListener(ResizeEvent.RESIZE, resizeHandler);
         }
         
         contentComplete = true;
         var contentStyleName:* = getStyle("contentStyleName");
         if(contentStyleName)
         {
            var contentCSS:CSSStyleDeclaration = StyleManager.getStyleDeclaration("." + contentStyleName);
            var contentSkin:Class = contentCSS.getStyle("skin");
            if(contentSkin && parent is Panel)
            {
               contentInstance = new contentSkin();
             if(contentInstance is IStyleClient) IStyleClient(contentInstance).styleName = contentCSS;
             var metrics:EdgeMetrics = borderMetrics;
             contentInstance.width = w - metrics.left - metrics.right;
             contentInstance.height = h - metrics.bottom - metrics.top;
             contentInstance.x = metrics.left;
             contentInstance.y = metrics.top;
             var panel:Panel = Panel(parent);
             panel.rawChildren.addChildAt(contentInstance,1);
            }
         }
         else
         {
            super.drawBorder(w,h);
         }
      }
      override mx_internal function drawBackground(w:Number, h:Number):void
   {
      if(!parent || backgroundComplete) return;
      
      backgroundComplete = true;
      var backgroundSkin:Class = getStyle("backgroundSkin");
      if(backgroundSkin && parent is Panel)
      {
         backgroundInstance = new backgroundSkin();
         if(backgroundInstance is IStyleClient) IStyleClient(backgroundInstance).styleName = parent;
         backgroundInstance.width = w;
         backgroundInstance.height = h;
         var panel:Panel = Panel(parent);
         panel.rawChildren.addChildAt(backgroundInstance,0);
      }
      else
      {
         super.drawBackground(w,h);
      }
   }
   }
}

tamitutor wrote on 11/09/09 2:58 PM

apomales,

Where is the source to the SmartPanelSkin? I can't find it in this style's files. Is it part of the CSSPlus.swc? If so, is the source to CSSPlus.swc available some where so that I can update it with your nice contribution above?

Anyone from fillcolors.com have any answers?