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>

アプリはデフォルトでタブ1で開きます。タブ2はまだ作成されていません。

問題は、タブをタブ2に変更すると、Flexがタブ2UIコンポーネントを構築してタブの内容を表示するのに非常に長い時間がかかることです。このプロセス中、アプリは基本的にフリーズします。ユーザーが数秒待つ必要があることをユーザーに示す必要があります。

カーソルマネージャを使用して、ビジー状態のマウスアイコンを作成してみました。これは機能しませんでした（たとえば、タブ2がビルドを完了したときにのみカーソルが変更されます）。

タブの作成中にタイトルウィンドウを表示したいだけです。しかし、タブ2を作成する前と作成中にタイトルウィンドウが表示されるように、タブを切り替えたときに起動する方法がわかりません。

mx ViewStackにプロパティを設定できることは知っていchange=""ますが、それを使用すると、タブ2の読み込みが完了するまでタイトルウィンドウが表示されません。

callLater()以下のシナリオで関数を実装する方法がわかりません。

タブ2のビルド前とビルド中に表示されるように、タイトルウィンドウをトリガーする方法を誰かが理解するのを手伝ってもらえますか？

参照：

アプリがビジー状態のときにフレックスで「お待ちください....」画面を実装する方法

Flex：アプリが「ビジー」のときにビジーカーソルを表示するデザインパターンを探しています

更新1：

createDeferredContent以下のDavidからのコメントsetTimeoutと、上記にリンクされた以前の投稿のweltraumpiratからのコメントを使用して、ソリューションをハックすることができ、タブ2のコンテンツの読み込み中にビジーカーソルが表示されました。これが私がしたことです：

以下を実装するコンポーネントとしてタブ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) 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) 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) 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 (?).

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 に答える