软硬度:如何改变标签时,标签的UI组件构建之前调用titleWindow正在标签、软硬、组件、UI

2023-09-08 14:28:36 作者:用十年换一句好久不见

我的FLEX4应用程序使用一个标签栏,如下所示:

My Flex4 app uses a tab bar as follows:

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

该应用程序会打开选项卡默认为1。表二是没有建立呢。

The app opens with Tab 1 by default. Tab 2 is not built yet.

现在的问题是,当我改变选项卡标签2,Flex将需要很长的时间来建立的标签2 UI组件和显示选项​​卡的内容。该应用程序在此过程中基本上冻结。我需要提供一些指示,即他/她需要等待几秒钟的用户。

The problem is, when I change tabs to Tab 2, Flex takes a very long time to build the Tab 2 UI components and display the tab contents. The app basically freezes during this process. I need to provide some indication to the user that he/she needs to wait several seconds.

我已经使用光标管理器创建一个繁忙的鼠标图标尝试。这没有工作(如游标只改变时,Tab键2完成建设)。

I've tried using the Cursor Manager to create a busy mouse icon. This didn't work (e.g. the cursor only changes when Tab 2 completes building).

我想只显示标题的窗口,而标签的基础之上。但是,我不知道如何启动它,当我切换选项卡中,这样的标题窗口前出现,而标签2正在建设。

I'd like to simply display a title window while the tab builds. But, I don't know how to launch it when I switch the tab, such that the title window appears before and while Tab 2 is building.

我知道MX ViewStack的可以有一个变化=属性,但是当我使用的标题窗口不会出现,直到标签2完成装载。

I know that the mx ViewStack can have a change="" property, but when I use that the title window doesn't appear until Tab 2 completes loading.

我不知道如何实现在下面的方案中的使用callLater()功能。

I'm not sure how to implement a callLater() function in the below scenario.

谁能帮助我弄清楚如何使之出现之前触发标题窗口,而标签2构建?

Can anyone help me figure out how to trigger the title window so that it appears before and while Tab 2 builds?

参考文献:

How我们实行&QUOT;请稍候....&QUOT;屏幕弯曲时,应用程序正忙于

Flex:寻找设计模式来显示忙碌光标,而我的应用程序是与QUOT;忙QUOT;

更新1:

通过从大卫下面的 createDeferredContent 评论和的setTimeout 在我的previous员额从weltraumpirat评论上面链接,我是能够破解在一起造成,而在选项卡加载内容显示忙碌光标的解决方案。这是我做的:

With the createDeferredContent comment from David below and setTimeout comment from weltraumpirat in my previous post linked above, I was able to hack together a solution resulting in a busy cursor displayed while the content in tab 2 loads. Here's what I did:

创建选项卡2作为实施以下组成部分:

Create Tab 2 as a component implementing the following:

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

的几个注意事项:

A few notes:

(1)虽然忙碌光标确实标签2完成建设之前显示,应用程序仍然冻结,当用户移动鼠标忙碌光标停留在屏幕上放置,而默认的鼠标图标(箭头)在屏幕上移动用户直到标签2完成建设,被显示为控制。不理想,但至少忙光标表示该应用程序正在做什么。如果我想,我可以代替忙碌光标与titleWindow正在忙碌的指示等。

(1) While a busy cursor does display before Tab 2 completes building, the app still freezes and when the user moves the mouse the busy cursor stays put on the screen while the default mouse icon (the arrow) moves around the screen as controlled by the user until Tab 2 completes building and gets displayed. Not ideal, but at least the busy cursor indicates the app is doing something. If I wanted to, I could replace the busy cursor with a titlewindow indicating busy, etc.

(2)改变从100ms超时时间为50毫秒仍然产生了良好的效果。但它减少到10毫秒导致忙光标时,所有组件都建立并显示才会出现。这是可预期的是降低到低于某个阈值的超时会造成这样的行为。我不知道这门槛的超时值(例如地方10和50毫秒之间),取决于客户端计算机上?或者,如果我用了100毫秒,并安全地覆盖所有客户机? (我们怎么知道它会?)

(2) Changing the timeout from 100 ms to 50 ms still produces good results. But reducing it to 10 ms causes the busy cursor to appear only when all components are built and displayed. It's to be expected that reducing the timeout below some threshold will cause such behavior. I wonder if this threshold for timeout value (e.g. somewhere between 10 and 50 ms) depends on the client computer? Or, if I used 100 ms, does that safely cover all client machines? (How do we know it will?)

(3)我本来预计将的setTimeout(start2,100); 使用callLater(START2); 和删除 = creationPolicy的无应产生类似的结果,但它没有(如忙光标永远不会出现和应用程序冻结了几秒钟,直到标签2获取显示)。我从来没有使用使用callLater()之前,所以也许我做错了什么事(?)。

(3) I would have expected that replacing setTimeout(start2,100); with callLater(start2); and deleting creationPolicy="none" should produce a similar result, but it doesn't (e.g. the busy cursor never appears and the app freezes for a few seconds until Tab 2 gets displayed). I've never used callLater() before, so maybe I did something wrong (?).

推荐答案

如果你TAB2过程中有重计算initializaition您可以通过一小块一小块分开他们,并执行它们连续使用使用callLater机制。

In case you have heavy calculations during Tab2 initializaition you can split them by small chunks and execute them consecutively using callLater mechanism.

下面是非常简单的例子:

Here is VERY simplified example:

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