« Mac OS X-looking CSS for Flex 2 | Main | Time-based Flex 2 UI: If time were a color, what color is it now? »
May 10, 2006
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.
Once again, here's to Flex apps that don't look like flex apps!
Posted by Peter Baird at May 10, 2006 08:04 PM
Comments
fyi, here is a version that compiles in beta 3:
--
<mx:Label text="Label">
<mx:filters>
<flash.filters:DropShadowFilter xmlns:flash.filters="flash.filters.*" />
</mx:filters>
</mx:Label>
--
Posted by: mike chambers at May 10, 2006 10:30 PM
Peter, did you calcalute the effect on total application performance when using these filters extensively thoughout an application?
Posted by: Vinny Timmermans at May 10, 2006 10:37 PM
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 <mx:filters> not <mx:Filters>. 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.
Posted by: Peter Baird at May 11, 2006 04:54 AM
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!
Posted by: egnar at June 2, 2006 07:10 AM
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?
Posted by: Scott Barnes at August 9, 2006 11:42 PM
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!
Posted by: Peter Baird at August 10, 2006 05:31 AM
YES I WANT TO USE HTML
Posted by: AMEUR at January 12, 2007 07:33 AM
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.
Posted by: Rob at April 11, 2007 08:16 AM