Upgrading to Flex 4.6 from Flex 4.5

Question

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?

Decolonize

This does seem related to what I described in my question, however without any code it's really hard to tell. I guess it's to complicated to show here, so I suggest you try to recreate the faulty behaviour in a simple test app and analyze it from there. – Evasive

My guess is that there is some Z-order problem. AS to why it is manifesting itself now; but not before is tough to tell w/o a code review. – Beatrix

@RIAStar I've updated the original question, adding some code and a solution I found. Only thing is it's not clear to my why the solution works, nor why the original code broke so badly. – Decolonize

The difference might be in the layout rather than the Group class. I must say I've never used the percentWidth property in MXML. Would you try using width="100%" instead and tell us what happens? – Evasive

I'll give it a try though I don't think it will matter. I've always used percentWidth as you cannot do width = "100%" in Actionscript. This way my MXML stays consistent with my AS. Anyway, this still leaves us at: what changed between 4.5 and 4.6 that causes this to behave differently. I think I'll try doing a diff on the entire SDK tonight. – Decolonize

No luck with changing percentWidth="100" to width="100%". – Decolonize