The Space For App Developers

Beyond Plain Old HTML Objects

Simple Flex 4 components styling (part 1)

with 6 comments

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):

This movie requires Flash Player 10

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.

Appearance Panel

Written by Piotr Walczyszyn

January 5th, 2010 at 6:11 pm

Posted in Examples

Tagged with

«
»

6 Responses to 'Simple Flex 4 components styling (part 1)'

Subscribe to comments with RSS or TrackBack to 'Simple Flex 4 components styling (part 1)'.

  1. cmon… with all framework swf’s and etc it is almost 2MB… not good.

    ifmi

    5 Jan 10 at 11:53 pm

  2. good job man thanks

    Brett

    6 Jan 10 at 2:24 am

  3. Cool tip man.. :)

    Nathan

    6 Jan 10 at 10:11 am

  4. [...] 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

  5. @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

  6. [...] 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

Leave a Reply