1

我的 Flex4 应用程序使用如下标签栏:

<s:TabBar id="tabs"/>
    <mx:ViewStack id="vs" height="100%" width="100%">
        <s:NavigatorContent label="Tab 1"  width="100%" height="100%">
            ...
        </s:NavigatorContent>
        <s:NavigatorContent label="Tab 2"  width="100%" height="100%">
            ...
        </s:NavigatorContent>
        <s:NavigatorContent label="Tab 3"  width="100%" height="100%">
            ...
        </s:NavigatorContent>
    </mx:ViewStack>
</s:TabBar>

该应用程序默认使用 Tab 1 打开。Tab 2 尚未构建。

问题是,当我将选项卡更改为选项卡 2 时,Flex 需要很长时间来构建选项卡 2 UI 组件并显示选项卡内容。该应用程序在此过程中基本冻结。我需要向用户提供一些指示,表明他/她需要等待几秒钟。

我尝试使用光标管理器创建一个忙碌的鼠标图标。这不起作用(例如,光标仅在 Tab 2 完成构建时更改)。

我想在标签构建时简单地显示一个标题窗口。但是,当我切换选项卡时,我不知道如何启动它,这样标题窗口就会出现在选项卡 2 构建之前和期间。

我知道 mx ViewStack 可以有一个change=""属性,但是当我使用它时,标题窗口不会出现,直到 Tab 2 完成加载。

我不确定如何callLater()在以下场景中实现功能。

谁能帮我弄清楚如何触发标题窗口,以便它在 Tab 2 构建之前和期间出现?

参考:

当应用程序繁忙时,我们如何在 flex 中实现“请稍候......”屏幕

Flex:寻找设计模式以在我的应用程序“忙碌”时显示忙碌光标

更新 1:

通过createDeferredContent下面 David的setTimeout评论和 weltraumpirat 在上面链接的上一篇文章中的评论,我能够拼凑出一个解决方案,导致在加载选项卡 2 中的内容时显示一个忙碌的光标。这是我所做的:

创建 Tab 2 作为实现以下功能的组件:

<s:VGroup 
    ...
    preinitialize="preinit"
    creationComplete="start1">

    private function preinit():void {
        mx.managers.CursorManager.setBusyCursor();
    }

    private function start1():void {
        setTimeout(start2,100);
    }

    private function start2():void {
        // create mxml components
        myBC.createDeferredContent();

        // place any required actionscript code here
        mx.managers.CursorManager.removeBusyCursor();
    }

    ...

    <s:BorderContainer id="myBC" creationPolicy="none">
        <!--- place all mxml code here to create layout -->
    </s:BorderContainer>

</s:VGroup>

几点注意事项:

(1) 虽然在 Tab 2 完成构建之前确实显示了忙碌光标,但应用程序仍然冻结,并且当用户移动鼠标时,忙碌光标保持在屏幕上,而默认鼠标图标(箭头)在屏幕上移动,由用户直到 Tab 2 完成构建并显示。不理想,但至少繁忙的光标表明应用程序正在做某事。如果我愿意,我可以将繁忙的光标替换为一个标题窗口,指示繁忙等。

(2) 将超时时间从 100 ms 更改为 50 ms 仍然会产生良好的结果。但是将其减少到 10 毫秒会导致忙碌光标仅在构建和显示所有组件时出现。可以预料,将超时减少到某个阈值以下会导致这种行为。我想知道这个超时值的阈值(例如在 10 到 50 毫秒之间)是否取决于客户端计算机?或者,如果我使用 100 毫秒,是否可以安全地覆盖所有客户端计算机?(我们怎么知道它会?)

(3) 我原以为替换setTimeout(start2,100);callLater(start2);删除creationPolicy="none"应该会产生类似的结果,但事实并非如此(例如,繁忙的光标永远不会出现,应用程序会冻结几秒钟,直到显示 Tab 2)。我以前从未使用callLater()过,所以也许我做错了什么(?)。

4

1 回答 1

1

如果您在 Tab2 初始化期间有大量计算,您可以将它们分成小块并使用 callLater 机制连续执行它们。

这是非常简化的示例:

<?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" minWidth="955" minHeight="600">
<fx:Script>
    <![CDATA[
        import mx.core.FlexGlobals;
        import mx.events.FlexEvent;
        import mx.managers.CursorManager;

        private var i:int = 0;

        protected function nc2_initializeHandler(event:FlexEvent):void
        {
            FlexGlobals.topLevelApplication.enabled = false;                
            CursorManager.setBusyCursor();
            callLater(initTab2);
        }

        protected function initTab2():void
        {
            var j:int;

            //Part of calculations
            for (j=0; j< 10000; j++)
            {
                i++;
            }   

            //Check if completed
            if (i<1000000)
            {
                //If not call again
                callLater(initTab2);                    
            }
            else
            {
                //Finished
                CursorManager.removeBusyCursor();
                FlexGlobals.topLevelApplication.enabled = true;
            }
        }

    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup gap="10" top="10" left="10">
    <s:TabBar id="tabs"  dataProvider="{vs}"/>
    <mx:ViewStack id="vs" width="100%" >
        <s:NavigatorContent label="Tab 1"  width="100%" height="100%" >
            <s:Label text="Tab1 content"/>
        </s:NavigatorContent>
        <s:NavigatorContent id="nc2" label="Tab 2"  width="100%" height="100%">
            <s:Label text="Tab2 content" initialize="nc2_initializeHandler(event)"/>
        </s:NavigatorContent>
        <s:NavigatorContent label="Tab 3"  width="100%" height="100%">
            <s:Label text="Tab3 content"/>
        </s:NavigatorContent>
    </mx:ViewStack>

</s:VGroup>

于 2013-02-07T08:28:25.607 回答