Flex 4 and Chromeless AIR applications

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.








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.

Published by tpryan

14 thoughts on “Flex 4 and Chromeless AIR applications”

  1. 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!

    Like

    Reply

  2. 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.

    Like

    Reply

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

    Like

    Reply

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

    Like

    Reply

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

    Like

    Reply

  8. 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

    Like

    Reply

  13. @Sarbagna, you’r right. That does the trick!

    but! one thing! :))

    if that is not working, you need to create new project – change properties in app.xml (how Sarbagna wrote) then test, if everything is ok, add you code to the project. And everything will be ok, but! don’t touch this – EVER!!!!

    because chrome may appear again 😀

    Like

    Reply

Leave a comment