Simple Flex 4 components styling (part 1)
As you probably know, the upcoming Flex 4 (Gumbo) release was built with design in mind to let developers easily and quickly skin and style their applications. In particular, skinning can be realized with the use of a new component architecture called Spark that comes with two built-in themes, one also called Spark (the default) and the second one called Wireframe (very useful when prototyping). In addition to the skinning capabilities, new CSS properties were also introduced that make it even simpler to style existing components and quickly achieve really good looking results without needing new custom themes.
As an example I came up with a set of styles that you can apply to default Spark components to get a nice looking dark theme. Here is the example (with the source code here):
Example above uses only following CSS properties:
/* CSS file */ @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; global { chrome-color: #333333; content-background-color: #333333; symbol-color: #FFFFFF; selection-color: #FFB129; focus-color: #FF7F29; roll-over-color: #F7DCAD; color: #D7D6D6; } s|Panel { backgroundColor: #333333; }
To make it even simpler to style your application theme there was a new Appearance panel introduced in Flash Builder 4. It is available in the design view for your main MXML component.



cmon… with all framework swf’s and etc it is almost 2MB… not good.
ifmi
5 Jan 10 at 11:53 pm
good job man thanks
Brett
6 Jan 10 at 2:24 am
Cool tip man..
Nathan
6 Jan 10 at 10:11 am
[...] my previous post I gave few hints about styling Flex 4 applications using default Spark theme. This time I expended [...]
Simple Flex 4 components styling (part 2) | Space of Flex/AIR technologies
6 Jan 10 at 1:45 pm
@ifmi
Flex is an Application Framework … it’s purpose it to create fully fledged applications, with all that entails, such as event & component architectures. For these reasons the default size of any Flex swf will be fairly big. Normally you wouldn’t post Flex swfs that are not applicaitons, yet Piotr has done so here to demonstrate what the components can look like.
If you want small filesize use Flash.
Zule
7 Jan 10 at 3:37 pm
[...] Link: Simple Flex 4 components styling (part 1) | Space of Flex/AIR … [...]
Flex learner | Blog | Simple Flex 4 components styling (part 1) | Space of Flex/AIR ...
17 Jul 10 at 7:20 pm