Beyond Styling: Applying Filters on Flex Components

This is documented in the livedocs, but I also wanted to give some examples of how you can apply filters to components to further achieve your desired look-and-feel. Want a drop-shadow on a button or a label? Want your text to look chiseled, or maybe your combo-box looking nicely chiseled? What an inner-shadow on a text input? Or maybe you just wantd a an area that looks beveled, or inset. This is all possible with filters in flex, as shown in the image below.

Not only is it possible, but it’s incredibly simple. A label with a drop-shadow is as simple as the following:

<mx:Label label="Label">
   <mx:filters>
      <flash.filters:DropShadowFilter xmlns:flash.filters="flash.filters.*" />
   </mx:filters>
  </mx:Label>

So, I’ve provided a sample mxml file that shows some nice uses of filters.

View the Example

Download the MXML

Once again, here’s to Flex apps that don’t look like flex apps!

filtersOnComponents.jpg