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.
good job man thanks
Cool tip man..
@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.