ScaleNine

There have been a ton of new specs added for Flex 4 lately, so I thought I’d grab the most recent version of the Flex 4 SDK to see what’s changed since I last checked. I currently have the Flex 4 SDK set up to run in Flex Builder 3, so I just added some components to start playing around with a few things. When I ran the application I noticed a whole new Flex theme that looks something like this:

It appears the Halo theme we’ve all have come to know is going to be replaced with a refreshed look (Any guesses on the name of this theme?). This theme is done all in FXG and includes a pretty good number of new “Gumbonents”. It’s great seeing the new method of skinning executed on an entire theme because you can really see some of the power behind what you’ll be able to do.

After I saw this default theme, I started looking around in other folder in the SDK download and there’s another theme that’s been added as well, called Wireframe. It looks like this:

What I like about this theme is it feels very “blueprint-like”. It does indeed remind me of what you might see in a created set of wireframes. This theme also is a great way to manage client expectations and get them to focus on interactions versus the visual design. One of the issues I’ve seen with the Halo theme is that it can look great right out of the box, so people might feel fine leaving it as is. This theme does a great job of begging to be customized.

While looking at the source files of the skins, I wondered what it might take to make a graphical skin that works in Flex 3 with with the new “Gumbonents”. Turns out it’s pretty easy. If you’ve got a Flex 3 Button skin created with PNGs that you want to use in an FxButton, you can do something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<?xml version="1.0" encoding="utf-8"?>
<Skin xmlns="http://ns.adobe.com/mxml/2009">
 
	<states>
        <State name="up" />
        <State name="over" />
        <State name="down" />
        <State name="disabled" />
    </states>
 
    <!-- Skin -->
    <Image left="0" top="0" right="0" bottom="0" maintainAspectRatio="false"
    	source.up="@Embed(source='Button_upSkin.png',scaleGridTop='5',scaleGridLeft='5',scaleGridRight='59',scaleGridBottom='17')"
    	source.over="@Embed(source='Button_overSkin.png',scaleGridTop='5',scaleGridLeft='5',scaleGridRight='59',scaleGridBottom='17')"
    	source.down="@Embed(source='Button_downSkin.png',scaleGridTop='5',scaleGridLeft='5',scaleGridRight='59',scaleGridBottom='17')"
    	source.disabled="@Embed(source='Button_disabledSkin.png',scaleGridTop='5',scaleGridLeft='5',scaleGridRight='59',scaleGridBottom='17')"
    />
 
    <!-- Label -->
    <TextBox id="labelField"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="2"
             textAlign="center" verticalAlign="middle"
             color.over="0x336699">
    </TextBox>
 
</Skin>

And what about a skin created in Flash and outputted as a SWC? Well, for that you’d can drop the SWC into your libs folder and then use the local namespace to reference the skin classes. Using that skin class in a Gumbo skin looks something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?xml version="1.0" encoding="utf-8"?>
<Skin xmlns="http://ns.adobe.com/mxml/2009">
 
	<states>
        <State name="up" />
        <State name="over" />
        <State name="down" />
        <State name="disabled" />
    </states>
 
    <!-- Skin -->
    <local:Button_skin left="0" top="0" right="0" bottom="0"
    	currentState="up"
    	currentState.over="over"
    	currentState.down="down"
    	currentState.down="disabled"/> 
 
    <!-- Label -->
    <TextBox id="labelField"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="2"
             textAlign="center" verticalAlign="middle">
    </TextBox>
 
</Skin>

If you want to gain a good understanding of how the new method of skinning works in Flex 4, I recommend looking at these themes and playing around with them. You’ll be up to speed in no time.

This entry was posted on Thursday, October 30th, 2008 at 5:51 pm and is filed under flex 4, skinning samples. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.