Question

My Flex 4.5 application has many users from Russia and Ukraine with poor internet connections and Socket connections often interrupt and have to be reconnected.

Currently I set currentState to “offline” on IOErrorEvent.IO_ERROR and Event.CLOSE events and display just 1 component in that state:

<mx:ProgressBar indeterminate="true" 
    horizontalCenter="0" verticalCenter="0"
    label="Reconnecting..." labelPlacement="center" 
    includeIn="offline" />

but this is not the best way – because the users are suddenly presented by the white screen and the progress bar, while the background disappears.

(Actually it is not an application, but a card game – so the users could at least study their cards while being reconnected).

So I wonder, if there is a way to blur and disable background in Flex – similar to mx.controls.Alert, but without an OK-button and being dismissable when the Socket connection is restored?

UPDATE:

I’ve used a PopUpManager as suggested by Chris, but the indeterminate ProgressBar is not animated for some reason. How can I “kick start” it?

MyApp.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    width="700" height="525" 
    backgroundColor="#CCFFCC"
    initialize="systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL" 
    applicationComplete="init()">

    <fx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import mx.controls.ProgressBar;

            private function init():void {
                var bar:Connecting = PopUpManager.createPopUp(this, Connecting, true) as Connecting;
                PopUpManager.centerPopUp(bar);              
            }

            private function fullScreen(event:MouseEvent):void {
                stage.displayState = 
                    stage.displayState == StageDisplayState.NORMAL ?
                    StageDisplayState.FULL_SCREEN :
                    StageDisplayState.NORMAL;
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="connected" />
    </s:states>

    <s:CheckBox right="10" bottom="10" 
        label="Full screen" 
        click="fullScreen(event)" />

</s:Application>

Loading.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:ProgressBar 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    indeterminate="true" fontWeight="normal"
    label="Connecting..." labelPlacement="center">
</mx:ProgressBar>

UPDATE 2:

Solved that by embedding ProgressBar in a Group

Answer 1

When you are using Alert what is really happening is that a popup component is displayed on top of your app. You can achieve the same effect using the PopUpManager to blur the background while displaying a small message to the user(maybe a custom component using Canvas).