The Background

I'm in the process of updating an AIR app that was built with Flex 4.5 and AIR 2.6 to Flex 4.6 and AIR 3.3. I'm doing this to take advantage of the native JSON class and to get ready for AIR 3.4 and Actionscript Workers, both things I plan to make use of. I'm also using PureMVC 2.0.4.

The actual updating process went fine. I downloaded the Flex 4.6 SDK and overlaid the AIR 3.3 SDK on top of it. So far so good. I was using the JSON class in as3corelib so I had to make some changes, removing references to that from my app. Aside from that smooth sailing. With the code compiling nicely I proceeded to launch the app.

The Problem

This is where things fall apart.

When the app launches the "welcome" view (this is essentially a landing that has buttons for things like "open file", "new file" and so on along with a news feed that is pulled from a web service) is just missing. The background image shows up but the UI is just not there. Here are some sample screen caps:

Before (The working 4.5 version of the Welcome View)

After (The broken 4.6 version of the Welcome View. This is the background image of the view.)

Stepping through the start up process with tons of breakpoints in the Flash Builder debugger isn't revealing anything obviously wrong. Other UI elements are also missing. For example: this tab bar is just missing buttons

Before (The working 4.5 version)

After (The broken 4.6 version)

In trying to establish what's going on here I've been playing around with the app as best I can (with the welcome UI gone this is rather hard) and I've found that minimizing the application then restoring it will cause the app to hang to the point where Windows adds the "(Not Responding)" bit to the app title bar then resume normally with the UI kinda-sorta-mostly working. Some sample images:

Welcome View after restore (Note the horizontal rule that is going far off to the right)

TabBar after restore (This content is completely disregarding layout rules. Further it's actually scrolling to the left -- that's right, it somehow grew legs and is just moving off the screen all on it's own. There was never any tweening/animation code attached to this view)

All of this is happening on Windows 7 x64 with Flash Builder 4.6.

The Question

What the heck is going on here? Why would my UI just disappear like this?

I feel like I'm missing something fundamental like "oh, just add this compiler option" and BAM! things will be fixed. I certainly don't feel that my app should be so completely broken with this upgrade.

Has anyone experienced a similar issue in upgrading to Flex 4.6/AIR 3.x from previous versions of Flex/AIR? How did you solve your problem?

Could it be my custom skins causing this problem? Why would that happen? On the topic of skins this seems like a similar question.

Update

I was hoping to avoid this but I wasn't really getting anywhere with this so I decided to start pulling out the theme and external SWCs until I could get the app to some sane level of functionality and work back from there. I started with the theme and, while the problem wasn't with the theme is pointed me in the correct direction.

In my app there is a class called HRule. It's the horizontal rule between the "Open from Dealers" and "Logout" buttons in some of the above screen shots. This class is simply a Spark Group with two Lines inside that draw the rule.

Here is the complete class:

<?xml version="1.0" encoding="utf-8"?>
<s:Group 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->

    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout
            gap="0">
        </s:VerticalLayout>
    </s:layout>

    <s:Line
        xTo="{width}">
        <s:stroke>
            <s:SolidColorStroke
                color="#000000"
                alpha="0.4" />
        </s:stroke>
    </s:Line>

    <s:Line
        xTo="{width}">
        <s:stroke>
            <s:SolidColorStroke
                color="#ffffff"
                alpha="0.15" />
        </s:stroke>
    </s:Line>


</s:Group>

I then use this class like this:

<s:VGroup
    width="300">

    <s:Button 
        label="Button 1"
        percenthWidth="100"/>

    <mycomps:HRule 
        percenthWidth="100"/>

    <s:Button 
        label="Button 2"
        percenthWidth="100"/>

</s:VGroup>

I can fix all my problems simply by changing the base class from Group to SkinnableContainer. I downloaded WinMerge to do a diff on the 4.5 version of Spark Group and the 4.6 version and the files are identical.

So this brings up a new question: why would the behavior of Group change between 4.5 and 4.6?