Apply A Background Color Gradient To A Flex Panel
When I first started learning Flex 2.0, my main goal was to learn how to use the different controls (DataGrid, TileList, etc.) and how to get dynamic data into my Flex application. Recently, I've begun to learn the many different ways you can style Flex components and containers.
I found a post by Dirk Eisman done in November of 2006 where he provides an ActionScript class that enables you to apply a background color gradient to a Flex container. Dirk provides a demo of using the class and a download. I've experimented with his class to style the background color of a panel and developed my own version of Dirk's example. With Dirk's permission, I've posted my modification of Dirk's example (right click on it to view the source code).
My references for building this example are:
- //RICHINTERNET.BLOG, Dirk Eisman, Applying background gradients to VBox, HBox, Canvas etc., http://www.richinternet.de/blog/index.cfm?mode=month&month=11&year=2006
- Panel container, http://livedocs.macromedia.com/flex/2/langref/mx/containers/Panel.html
- ColorPicker control, http://livedocs.macromedia.com/flex/2/langref/mx/controls/ColorPicker.html
- HSlider control, http://livedocs.macromedia.com/flex/2/langref/mx/controls/HSlider.html
- Flex 2.01 Developer's Guide, Using Styles and Themes, http://livedocs.macromedia.com/flex/201/html/styles_069_01.html#241755
- Flex 2.01 Developer's Guide, Using Skins, http://livedocs.macromedia.com/flex/201/html/wwhelp/wwhimpl/js/html/wwhelp.htm?href=Part2_DevApps_048_1.html
- Flex 2 Style Explorer, http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html
- Class HaloBorder, http://livedocs.macromedia.com/flex/2/langref/mx/skins/halo/HaloBorder.html
- Web 2.0 how-to design guide, Gradients, http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#gradients
- Virtual Training Help Center, Photoshop, Lesson 23 Gradients, http://iit.bloomu.edu/vthc/Photoshop/DRAWING/gradients.htm
The Flex 2 Style Explorer (reference 7 above) provide a visual way to experiment with the various styles you can apply to Flex containers and controls. For example if you select the Panel container, you can adjust the corner radius, drop shadow, header and footer color gradients, and the background color. However, by default the background color is not a gradient but a single solid color. Dirk's ActionScript class (named SimpleGardientBorder) extends the HaloBorder class (see reference 8) to provide a capability to set the background color of a container to a color gradient.
Reference 9 describes gradients as one of the top design features of "Web 2.0" sites and since I see gradients on many newer sites I'll have to agree. Gradients are often used as the background for buttons, header images, and other graphics. Reference 10 explains that a "gradient is a fill consisting of two or more colors blending together."
Make sure that you download the SimpleBorderGradient ActionScript class source code from Dirk's blog and place it into your project. To use the SimpleGradientBorder class, you include the following in your style declaration:
<mx:Style>
.panel1filled
{
border-style: solid;
border-thickness: 0;
border-skin: ClassReference("border.SimpleGradientBorder");
fill-colors: #000099, #0099FF;
corner-radius: 30;
drop-shadow-enabled: false;
color:#ffffff;
font-size:12;
font-weight:bold;
}
</mx:Style>
The value for the border-skin attribute is the ActionScript class SimpleGradientBorder (which is found in the border folder in my Flex project). You must also set the border-style to solid and provide two values for the fill-colors. The first value will be used at the top of the container and the second color value will be used at the bottom of the container and then the SimpleGradientBorder class will create a gradient fill between the two colors.
When applying the SimpleGradientBorder to a Panel I had to set the drop-shadow-enabled value to false. When set to true the bottom corners of the panel did not render correctly. However, Dirk advised me in Flex 2.01 you need to set the roundedBottomCorners style for the panel to true when drop-shadow-enabled is true.
I am very design challenged. My background is almost completely in coding and databases, though I've done some basic website design. In my modification of Dirk's example, I provide 4 panels with controls that you can use to set the gradient colors and corner radius of each panel so that you can compare various settings. Each panel shows the hex color code and value for the corner radius so you can easily copy those values to your project.
My example uses the SimpleGradientBorder with the panel container. Dirk's original example applied the SimpleGradientBorder to the VBox container. Of course you can use the SimpleGradientBorder with other containers.
I hope this post will assist you in using Dirk's SimpleGradientBorder class in your own projects.
