FBPanelBgSkin is a free component (licensed under the MIT License) for Adobe Flex 3 that adds additional styles to a Flex Panel, TitleWindow or Alert.
The additional styles that become available when the FBPanelBgSkin component is used include an inner shadow for the content area, a gradient background for the content area, a tiled image background for the content area, a tiled image border, and the ability to independently adjust the transparency of a background image and the transparency of the content area.
Here is a screen shot showing the component in use for a simple Panel and a simple TitleWindow:
A visual design application is provided to make it easy to prototype a Panel by allowing you to interactively apply different styles to a sample Panel.
Once you find a style that you like, you simply copy the automatically generated CSS class selector in the MXML style block to your application’s code and add the style name to your panel (note that you’ll also need to add FBPanelBgSkin.swc to your project’s libs directory). Once the class selector has been added to your application’s CSS, you can tweak the style properties to integrate the custom Panel style into your application’s look and feel.
Another feature of the component is the provision of an additional drop shadow rendering method that is slightly different from the one used by Adobe. Normally a drop shadow is drawn for a panel’s content area only when the alpha value for the content area is different than the alpha value for the border. Because of this, an Alert panel does not display a drop shadow around the content area. This is typically the behavior that you want; however, if you are styling a Panel that has the alpha for the border and the alpha for the content area set to the same value, then the drop shadow will disappear.
The FBPanelBgSkin component offers two drop shadow styles (in addition to an inner shadow). In the FBSkinDesigner application these styles are labeled “Drop Shadow”, which is the new style, and “Drop Shadow (Alpha Delta)”, which is the Adobe style. The “Drop Shadow” style will always draw a drop shadow regardless of the alpha values set for the content area and the border.
In addition to its immunity from disappearing when alpha values match, the new “Drop Shadow” style is also a bit darker than the Adobe “Alpha Delta” drop shadow. If it is too dark for your application then you can always change the shadow color from black to a shade of gray.
If you would like your panel to be drawn with a drop shadow but do not want a shadow drawn for the the panel’s content area, the FBPanelBgSkin component allows you to disable the shadow for the content area by setting the shadowType style to “none“.
Regarding the inner shadow, keep in mind that this shadow is drawn in the content background. Consequentially, objects drawn on top of the content area (like a backgroundImage for a Panel) could cover the inner shadow. Normally items placed in the content area are not drawn close to edges, so it typically should not be a problem. For a Panel background image that fills the entire content area, you can try decreasing the opacity of the background image and increasing the strength of the inner shadow so that the shadow is visible behind the background image.
One note about the gradient background option for the content area. The FBSkinDesigner application has four ColorPicker controls that are used to define the color values for the (optional) gradient background. The FBPanelBgSkin component is not limited to four colors so feel free to add or remove color values (along with the matching gradient ratio values) after you copy the style code to your application.
Finally, if you add a component to a panel and find that the panel’s background is no longer visible, check to make sure that the background alpha value for the added component is set to zero. A TextArea (for example) defaults to a solid color background so in order to see the panel background beneath the text you’ll need to set the TextArea‘s alpha value to zero.
Resources:
- View demo application (with View Source enabled)
- View documentation (ASDoc format)
- Download SWC, source, documentation and FBSkinDesigner
FBPanelBgSkin and FBSkinDesigner are copyright © 2008 by Paul Whitelock.
Nice work, thanks!
This is pretty sweet. Thanks for putting this out here!
Very nice!!! Thank you.
Nice work posting this Public.
Great Work!
Thank you very much for putting source code here
Amazing! This tool helped me understand exactly what was availiable when styling a =)
-rOck
Oh Chapeau! Nice work!
This is Totally needed! This allowed me to quickly visual select and inspect without having to compile my whole projects. I am artistically challenged , and must “see” my intended result. Helps a lot!
Simply awesome boss!!!