How to Add a Background Gradient to a Canvas Layout Container

The Canvas layout container. We all know it, we all love it. Lets us place our components wherever we like. Such a good sport.

But the one aspect I dislike about the Canvas container is the lack of a background gradient. Why should buttons have all the fun?

After reading through the source code for the Canvas container and Button control, I realized creating a Canvas with a background gradient would be pretty easy, so long as I was willing to tinker around with the drawing API.

Which I was.

So how did I do it? I extended the Canvas container in a new AS3 class, and overrode the updateDisplayList() method. That’s it.

The beauty of this is that it doesn’t mess with the layout of the child components in the container. It just makes the background a whole lot prettier.

Sample code for the GradientCanvas:

package {     import mx.containers.Canvas;     import mx.styles.StyleManager;     import mx.utils.ColorUtil;     public class GradientCanvas extends Canvas     {         override protected function updateDisplayList             (w : Number, h : Number) : void         {             super.updateDisplayList (w, h);             // retrieves the user-defined styles             var fillColors : Array = getStyle (”fillColors”);             var fillAlphas : Array = getStyle (”fillAlphas”);             var cornerRadius : Number = getStyle (”cornerRadius”);             // converts the fill colors to RGB color values             StyleManager.getColorNames (fillColors);             // ready to draw!              graphics.clear ();             // draws the gradient             drawRoundRect (0, 0, w, h, cornerRadius, fillColors,                 fillAlphas, verticalGradientMatrix (0, 0, w, h));         }     } }

You’ll notice in the code that I only check for the fillColors, fillAlphas and cornerRadius styles in my component. That’s all I really needed for my GradientCanvas container, but if you wanted to add support for borders and shadows you would simply add the styles and draw them as well.

Piece of pie.

How to Eliminate The Arrow Buttons From Flex Scrollbars

I love Flex, but the default scrollbars are hideous. Sure, you can customize a couple of values in the CSS, the track and fill colors, etc. But those stupid arrow buttons are still there, sucking up the good vibes from the rest of your application.

So how do we get rid of them?

First, create a custom class that extends ProgrammaticSkin. Override the updateDisplayList() method in this class and leave it blank. Don’t even invoke the super.updateDisplayList() method!

Second, add a class reference to your CSS file for each of the up and down arrow skin properties.

Voilà! The arrow buttons are gone!

Update: I’ve posted sample code below to replace the dead Private Paste URLs.

Sample code for the custom skin:

package {      import mx.skins.ProgrammaticSkin;      public class NoArrowSkin extends ProgrammaticSkin      {          override protected function updateDisplayList              (w : Number, h : Number) : void          {          }      } }

Sample code for the custom styles:

ScrollBar {      upArrowDisabledSkin: ClassReference(”NoArrowSkin”);      upArrowDownSkin: ClassReference(”NoArrowSkin”);      upArrowOverSkin: ClassReference(”NoArrowSkin”);      upArrowUpSkin: ClassReference(”NoArrowSkin”);      downArrowDisabledSkin: ClassReference(”NoArrowSkin”);      downArrowDownSkin: ClassReference(”NoArrowSkin”);      downArrowOverSkin: ClassReference(”NoArrowSkin”);      downArrowUpSkin: ClassReference(”NoArrowSkin”); }