在重新连接Flex应用程序到后端时模糊和禁用背景

Question

我的Flex 4.5应用程序有许多来自俄罗斯和乌克兰的用户，他们的互联网连接很差，Socket连接经常中断，必须重新连接。

目前我在ioerrovent上设置currentState为"offline"。IO_ERROR和Event。关闭事件，只显示一个处于该状态的组件:

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

但是这并不是最好的方式——因为用户会突然看到白屏和进度条，而背景则消失了。

(实际上它不是一个应用程序，而是一个纸牌游戏-所以用户至少可以在重新连接时研究他们的纸牌)。

所以我想知道，如果有一种在Flex中模糊和禁用背景的方法-类似于mx.controls。警报，但没有ok按钮，并在Socket连接恢复时可解散?

更新:

我按照Chris的建议使用了PopUpManager，但是由于某些原因，不确定的ProgressBar没有动画。我如何"启动"它?

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>

更新2:

通过在组中嵌入ProgressBar来解决这个问题

Answer 1

当连接丢失时，将您的应用程序(或您想要模糊的顶级组件)的enabled属性设置为false，并在连接重新建立时返回true。

'Application'定义了一个皮肤状态disabled，当组件的'enabled'属性设置为'false'时，该状态自动变为currentState。这意味着您可以创建一个像这样的皮肤:

<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>

这将只包括处于"禁用"状态的"BlurFilter"。如果将enabled属性设置为false，则会自动阻止所有用户与组件的交互。

Answer 2

当你使用Alert时，真正发生的是一个弹出式组件显示在应用程序的顶部。你可以使用PopUpManager来实现同样的效果，在向用户显示小消息的同时模糊背景(可能是使用Canvas的自定义组件)。