Design mode troubles - "Error during component layout."

[Guest]

Hi all.

Since this is getting pretty annoying, I thought someone might know the right solution to this. Whenever I try to open Design mode on my AIR app (Spark + MX), I get:

Design mode: Error during component layout. Choose Design > Refresh to refresh design mode.    MyTestApp.mxml    /MyTestApp/src    Unknown    Problem

The MXML code for it is as simple as it can get:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                            xmlns:s="library://ns.adobe.com/flex/spark" 
                            xmlns:mx="library://ns.adobe.com/flex/mx"
                            skinClass="spark.skins.spark.SparkChromeWindowedApplicationSkin"
                            >
</s:WindowedApplication>

And app descriptor XML only contains transparent set to true and systemChrome to none, even tho it shouldn't make any difference in the Design view anyway. Refresh doesn't solve the error, and sometimes the Design view itself goes into infinite loop of refreshing.

However, if I remove the skinClass, it all works fine and Design view loads (but then I don't get the window chrome on run-time). Same goes if I declare the skin within <fx:Style /> tag, it only breaks when using skinClass attribute in the WindowedApplication declaration. And the same thing happens if I try to edit some of the Spark skins in the Design view.

I've tried creating a new project, switching workspaces, building a blank workspace, switching from Flex SDK 4.1 to 4.0 - all to no avail, the same error always occurs and it never goes away.

Any ideas?

[alejandrormz]

Instead of declaring the skin within the WindowedApplication tag, you have to call the Skin class from a Style tag right after you close your window tag:

<?xml version="1.0" encoding="utf-8"?>

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

Xmlns:mx="library://ns.adobe.com/flex/mx"

title="YOUR APP">

<fx:Style>

@namespace s "library://ns.adobe.com/flex/spark";

s|WindowedApplication

{

skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin");

background-color:#999999;

background-alpha:"0.7";

}

</fx:Style>

source: http://help.adobe.com/en_US/air/build/air_buildingapps.pdf