sean hess

I’ve finally had a chance to dive in to Flex 4. One trick I learned is incredibly powerful. CSS is a powerful way to specify settings to something from the outside, but it quickly becomes a pain if you need to push pixels around. I’m going to show you how you can create a skin that reads its properties from a stylesheet. This allows css to do what it does best: set simple properties, and lets you do the pixel pushing in the Skin.

Let’s start with some Flex 3 code we’d like to duplicate. This will create a “modal” overlay that covers the app with a translucent screen. You might use this for a LightBox.

<!-- MyOverlay.mxml -->
<mx:Canvas 
    width="100%" height="100%"
    styleName="overlay"
    >

    <!-- Put a panel or something here -->

</mx:Canvas>

/** styles.css **/
.overlay {
    background-color: #000000;
    background-alpha: 0.7;
}

Our First Skin

We want to create this in Flex 4. The (rough) equivalent to canvas is a Group, but it isn’t skinnable, so we can use a SkinnableContainer instead.

<!-- MyOverlay.mxml -->
<s:SkinnableContainer
    width="100%" height="100%"
    skinName="overlay"
    >

    <!-- Stuff -->

</s:SkinnableContainer>

SkinnableContainer doesn’t have a way to set backgroundColor or backgroundAlpha! The css will not work.

Let’s create the same functionality in a skin instead.

<!-- skins/OverlaySkin.mxml -->
<s:SparkSkin ... >

    <!-- The highest-level base class that can use this-->
    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata>
    
    <!-- specify all the states the host component uses -->
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>
    
    <!-- Here's our overlay! -->
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor color="#000000" alpha="0.7"/>
        </s:fill>
    </s:Rect>
    
    <!-- Put the panel, or whatever is in the component here --> 
    <s:Group id="contentGroup" verticalCenter="0" horizontalCenter="0">
        <s:layout><s:BasicLayout/></s:layout>
    </s:Group>
    
</s:SparkSkin>

That’s not too bad. We have a skin, and now we can apply it to our component by setting theskinClass property. For example:

<!-- MyOverlay.mxml -->
<s:SkinnableContainer
    width="100%" height="100%"
    skinClass="skins.OverlaySkin"
    >

    <!-- content -->

</s:SkinnableContainer>

Or we can set the skinClass in the style.

<!-- MyOverlay.mxml -->
<s:SkinnableContainer
    width="100%" height="100%"
    styleName="overlay" 
    >

    <!-- content -->

</s:SkinnableContainer>

/** styles.css **/
.overlay {
    skinClass: ClassReference("skins.OverlaySkin");
}

Using CSS on the Skin

Now we have a styleName we can apply to any SkinnableContainer and it will make it look like our black, translucent overlay. This works great, so we start using it, but pretty soon we realize that we need to be able to add a background to another container, but we don’t want to create a new skin just to tweak the color and alpha. Here is where it gets fun. We change the Rect tag in our skin to look like this:

<s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
                <s:SolidColor color="{getStyle('backgroundColor')}" alpha="{getStyle('backgroundAlpha')}"/>
        </s:fill>
</s:Rect>

Now it will get it’s color and alpha from the style. We can change our overlay style to look like this

/** styles.css **/
.overlay {
    background-color: #000000;
    background-alpha: 0.7;
    skinClass: ClassReference("skins.OverlaySkin");
}

That looks a lot more like the Flex 3 version! We can then add more styles for other kinds of containers that need backgrounds, and our skin is now much more useful than before.

The Final Version

<!-- skins/BackgroundSkin.mxml -->
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/halo">
    
    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata>
    
    
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>
    
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor color="{getStyle('backgroundColor')}" alpha="{getStyle('backgroundAlpha')}"/>
        </s:fill>
    </s:Rect>
    
    <!-- Tells the skin where to put the children you have specified -->
    <s:Group id="contentGroup" verticalCenter="0" horizontalCenter="0">
        <s:layout><s:BasicLayout/></s:layout>
    </s:Group>
    
</s:SparkSkin>

/** styles.css **/
.overlay {
    background-color: #000000;
    background-alpha: 0.7;
    skinClass: ClassReference("skins.OverlaySkin");
}

.error {
    background-color: #FF0000;
    background-alpha: 1.0;
}

.success {
    background-color: #00FF00;
    background-alpha: 1.0;
}

Using this technique will allow you to play to the strengths of both CSS and Spark Skins.

Having your app keep a detailed log can be indispensable for figuring out tricky user-reported bugs. This is easy on the server-side, where you can use any logging framework or just write to a file. Flash includes the trace function, which is useful while developing, but nearly impossible to get from an end-user. Flex, however, has a good logging api that lets you put log statements anywhere you want. I’ve always wanted the interface to be as easy as trace, so I write a couple of scripts to make it easier.

There are two files in there now. The first is log.as. I didn’t realize before that it was possible to define your own package-level functions. Some might disagree with me, but I think this syntax is a lot nicer than the default. It looks just like trace. All it does is create an easy way to access the flex logging api.

import net.seanhess.flog.log;

function stuff():void
{
    log("Executing stuff");
    // do stuff 
    log("Finished!");
}

You can replace all your trace statements with these. It’s easy enough to add a trace target to the logging api, so all log messages are traced. See the Flex Logging API for more details, but here’s how you would do it.

import mx.logging.Log;
import mx.logging.targets.TraceTarget;

// Only once in your app
function addLoggingTargets():void
{
    Log.addTarget(new TraceTarget());
}

The second little tool is a new logging target. I wanted a way to log to a local file in flex, so the support guys could get an end-user to email it. The only way to do this without hacks is to write to a shared object. It turns out if you write an array of strings to a shared object, it’s easily human-readable. You attach SharedObjectTarget like any other target and away you go.

import mx.logging.Log;
import net.seanhess.flog.SharedObjectTarget;

// Only once in your app
function addLoggingTargets():void
{
    Log.addTarget(new TraceTarget());
    Log.addTarget(new SharedObjectTarget("MyCustomAppLogging"));        
}

The file is located in the application data folder, which is in~/Library/Preferences/Macromedia/Flash Player/#SharedObjects on the mac. (Google it for windows). The target does some fancy stuff like automatically saving if it hasn’t received a log message for one second. It also automatically rotates messages once the size reaches about 50k (The default allowed size for shared objects is 100k).

There’s more that can be done here. I might add a debug and an error function. You could easily write an app to send the contents to a server too.

For alternatives and more information look at the approaches of Tom Barker, Virgil Cristea, and John Wilker.