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.
<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.
14 responses so far ↓
1 Joseph Labrecque
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
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
Thanks a lot, I had the exact same problem, cool ;)4 Matthew Wallace
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
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
Thanks , this was what I was looking for7 Javier R.E.
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
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
Even for your WindowedApplication,in your *-app.xml:
<systemChrome>none</systemChrome>
<transparent>true</transparent>
This should do the trick.
10 James
For more demo, download Tour De Flex11 Kurt
Thanks a bunch. Tried to do the transparency thing for about 2 hours. Not as easy as Flex 3 but this worked great.12 Rodislav Moldovan
@Dan Martin,Hi, thanks a lot!!!!
13 Rodislav Moldovan
@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 :D
14 Zurgerok
<a href=http://mg-portal.com.ua/raskrutka-saytov.html> ????????? ?????? </a><img>http://mgp.ua/img/13/3.jpg</img>
Leave a Comment