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

Question

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

目前，我在 IOErrorEvent.IO_ERROR 和 Event.CLOSE 事件上将 currentState 设置为“offline”，并仅显示该状态下的 1 个组件：

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

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

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

所以我想知道，是否有一种方法可以在 Flex 中模糊和禁用背景 - 类似于 mx.controls.Alert，但没有“确定”按钮，并且在 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

当您使用警报时，真正发生的是一个弹出组件显示在您的应用程序顶部。您可以使用 PopUpManager 模糊背景，同时向用户显示一条小消息（可能是使用 Canvas 的自定义组件）。