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

8 Responses to Beyond Styling: Applying Filters on Flex Components

  1. fyi, here is a version that compiles in beta 3:

  2. Vinny Timmermans says:

    Peter, did you calcalute the effect on total application performance when using these filters extensively thoughout an application?

  3. Peter Baird says:

    Good catch Mike. You are correct. The mxml is actually beta 3 ready, I inadvertantly capitalized the sample code in the post. Yes, it should be not . I’ve fixed that above.

    And, Vinny, that’s a good question. I did not calculate the effect on performance. I’d be interested to hear if anyone has some good stats or insights.

  4. egnar says:

    is it possible to add a gradient, like the one on the ControlBar) to a row in the tree component, one gradient for an open node and another for a closed nope. how would that be done?

    cheers!

  5. Scott Barnes says:

    First time caller, long time listener heh.

    One thing that baffles me and thought for sure it would be somewhere in this ere comments.

    “Why are the fonts so gritty looking the moment you add a filter to the quation”.

    Nice anti-alias fonts turn to crap with filters. There is a hack i’ve worked with by duplicating the lable so that the anti-alias is on top of the label with filters (gives the appearance) – facon-bacon.

    Any thoughts?

  6. Peter Baird says:

    Okay, I’ve got a confession to make… I’m a mac user almost to exclusivity, so I’ve never seen the effect that you’re seeing. That being the case, while I don’t have any particular insight, my guess would be that it has something to do with the Windows Anti-Aliasing Engine. Have you tried using an embedded font to see if it would do the same thing?

    On another note, I loved your recent post (http://www.mossyblog.com/archives/576.cfm) about applying gradients to containers with CSS. That seriously made hack of the year in my book!

  7. AMEUR says:

    YES I WANT TO USE HTML

  8. Rob says:

    That’s great, but is there any way of applying the filter to all instances of a class, like you can with CSS?

    Otherwise this is kind of pointless, as you’d need to extend every component just to add a drop shadow to all instances of them.