Flex 4 and Chromeless AIR applications

July 8, 2009 · 9 Comments

I've been working on a class for some of our higher education community members. I take the class from an Illustrator comp, through Flash Catalyst, then Flash Builder, and Flex to a Flex Application, then on to an AIR application. Because I'm starting in Catalyst, when I get to the AIR application I don't really want to use AIR's chrome. Rather, I'd like to go chromeless and let the UI handle things like closing the application and whatnot.

I found a good tutorial on doing chromeless AIR applications. But no matter what I tried, I couldn't get rid of this big blank whitespace in my application, despite following the directions to the letter.

After a lot of trial and error it turns out that the old way of making the Application background disappear using CSS (step 6 in the article) doesn't work with the new component model. Instead you have to use a custom skin on the WindowedApplication tag.

The following skin works for me. I'm by no means an expert at this skinning stuff yet, but it gets the job done.

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark">
    
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" stateGroups="disabledGroup" />
        <s:State name="normalInactive" stateGroups="inactiveGroup" />
        <s:State name="disabledInactive" stateGroups="disabledGroup, inactiveGroup" />
    </s:states>

    <!-- content -->
    <s:Group id="contentGroup" width="100%" height="100%" minHeight="0" minWidth="0"/>
        
</s:SparkSkin>

Now let me make it clear. There may be another way to do this. There may be a better way of doing it. It's also possible that this is the flat out wrong way to do it. But when I searched for this, I got nothing. So I figured, I could at least help somebody just get the job done, and worry about "the right way" later.

Tags: Flex · Higher Ed · Flash Catalyst

9 response s so far ↓

1 Joseph Labrecque // Jul 8, 2009 at 8:06 PM

That's really good to know. I do a lot of chromeless AIR with Flex SDK 3.x and this is very different from the way I set things up, currently.

In the planning stages for a chromeless v4 app- so your post is good timing for me!
2 Dan Martin // Jul 9, 2009 at 11:03 AM

This is the way I do it:
1) in *-app.xml:
<systemChrome>none</systemChrome>
<transparent>true</transparent>

2) In your WindowedApplication in your root mxml:
layout="absolute" showStatusBar="false" showTitleBar="false" showGripper="false" backgroundAlpha="0" borderThickness="0"

Then, I have an Canvas inside WindowedApplication that is visible, with left="0" right="0" top="0" bottom="0". The main purpose of having an inner canvas is that it allows you to have rounded corners, semi-opaque background, etc unlike WindowedApplication.
3 Thibault Imbert // Jul 9, 2009 at 11:43 AM

Thanks a lot, I had the exact same problem, cool ;)
4 Matthew Wallace // Sep 9, 2009 at 10:46 PM

Your blog post was the only one that had a solution on it that I could find easily.

For the most part I would say the new component Skinning that is coming with Flex 4 is awesome but..... something like setting background alpha to 0 shouldn't be so hard to do. Ahhhhh Adobe sometimes I have to ask myself why.

Thanks for the post fo show!
-Matthew
5 Andre Venter // Oct 10, 2009 at 5:56 PM

To Dan Martin,

Your solution sounds great. How do you end up moving the AIR app around the screen and closing it?

I find when I suppress customchrome the AIR app does not want to go to my screen 0,0 and ends up floating in some arbitrary location near, but not at the center of my screen. It sucks not knowing how to control it's position.
6 Mike // Nov 13, 2009 at 2:15 PM

Thanks , this was what I was looking for
7 Javier R.E. // Jan 4, 2010 at 7:02 AM

Hi!

Can you explain a bit more how to use this code? I need to apply it to a Window component (not to the main WindowedApplication, but only to a window opened by the main app).

thanks!
Javier
8 Giorgos // Jan 24, 2010 at 2:06 PM

Could you explain the code a bit, its not that clear how to work this out, i've tried many things either but none of the tutorials worked for sdk 4.0.

Cheers!
Giorgos
9 Sarbagna // May 7, 2010 at 7:28 AM

Even for your WindowedApplication,
in your *-app.xml:
<systemChrome>none</systemChrome>
<transparent>true</transparent>

This should do the trick.

Blog