Sfocatura e la disattivazione background mentre la riconnessione applicazione Flex per backend

Question

Il mio Flex 4.5 applicazione ha molti utenti dalla Russia e dall'Ucraina con connessioni internet poveri e le connessioni socket spesso interrupt e devono essere ricollegato.

Al momento ho impostato currentState a "non in linea" su eventi IOErrorEvent.IO_ERROR e Event.CLOSE e la visualizzazione solo 1 componente in quello stato:

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

, ma questo non è il modo migliore -. Perché gli utenti sono improvvisamente presentati dallo schermo bianco e la barra di avanzamento, mentre lo sfondo scompare

(In realtà non è una domanda, ma un gioco di carte - così gli utenti potrebbero almeno studiare le loro carte pur essendo ricollegato).

Quindi mi chiedo, se c'è un modo per sfumare e lo sfondo disable in Flex - simile a mx.controls.Alert , ma senza un pulsante OK e di essere eliminabili quando la connessione socket viene ripristinata?

UPDATE:

Ho usato un PopUpManager come suggerito da Chris, ma il ProgressBar indeterminata non è animato per qualche motivo. Come posso "calcio di inizio" è vero?

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:

Risolto che incorporando ProgressBar in un gruppo

Answer 1

Quando si utilizza Alert ciò che sta realmente accadendo è che un componente popup viene visualizzato in cima alla vostra app. È possibile ottenere lo stesso effetto utilizzando il PopUpManager per sfocare lo sfondo durante la visualizzazione di un piccolo messaggio per l'utente (forse un componente personalizzato utilizzando Canvas).

Answer 2

Quando si perde la connessione, impostare la proprietà enabled della vostra applicazione (o il componente di livello superiore che si desidera sfocatura) per false e di nuovo al true quando viene ristabilita la connessione.

'Application' definisce un disabled stato di pelle che diventa automaticamente il currentState quando i componenti 'abilitati' proprietà è impostata su 'false'. Questo significa che è possibile creare una pelle come questo:

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" >

    <fx:Metadata>[HostComponent("spark.components.Application")]</fx:Metadata>

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

    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />

    <s:filters.disabled>
        <s:BlurFilter />
    </s:filters.disabled>

</s:Skin>

Questo includerà la 'BlurFilter' solo nello stato 'disattivato'. E impostando la proprietà 'abilitato' a 'false' bloccherà automaticamente tutte le interazioni dell'utente con il componente.