How we implement “Please wait …” screen in flex when app is busy

问题

I have a function that restores all of the default settings of my application. This process can take a bit of time, so I would like to implement a "Please wait..." modal popup to let the user know that everything is alright and the program hasn't frozen. Once the function completes its task, I'd like for it to remove the message, and resume normal behavior.

alt text http://www.freeimagehosting.net/uploads/c5906da30c.jpg

回答1:

On start:

var waitingpopup:TitleWindow = new TitleWindow()
waitingpopup.title = "Please Wait ..."

PopupManager.addPopup(waitingpopup, this, true)

On complete:

PopupManager.removePopup(waitingpopup)

回答2:

As long as you don't need to convey anything to the user other than "the app is still running", I think a more elegant method would be to just change the cursor:

mx.managers.CursorManager.setBusyCursor()
//do stuff
mx.managers.CursorManager.removeBusyCursor()

The cursor will change to a clock with spinning hands. I'm not sure if there's a way to override this with your own animation, but it's simple and doesn't require you to design your own window.

回答3:

You can use the PopUpManager to create a Modal PopUp with an animated spinner. The Alert component does this. You can always reference the Alert source code to see how it works.

回答4:

For those arriving late to this question, Adobe released a Throbber in 4.5:

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1283019

http://fusiongrokker.com/post/using-the-flex-4-5-busyindicator

http://flexdevtips.blogspot.com/2011/05/simple-animating-preloader-and.html

For example, run the following from the fusiongrokker link above:

        private function busyOn():void
        {
            throbberId.visible = true;
        }

        private function busyOff():void
        {
            throbberId.visible = false;
        }
    ]]>
</fx:Script>

<s:VGroup width="100%" 
          paddingLeft="10" 
          paddingRight="10" 
          paddingTop="10" 
          paddingBottom="10">
    <s:BusyIndicator 
        id="throbberId" 
        visible="false" 
        rotationInterval="{rotationInterval}" />
    <s:Button 
        id="start" 
        click="busyOn()" 
        width="100%" 
        height="50" 
        label="start" />
    <s:Button 
        id="stop" 
        click="busyOff()" 
        width="100%" 
        height="50" 
        label="stop" />
</s:VGroup>

来源：https://stackoverflow.com/questions/2453508/how-we-implement-please-wait-screen-in-flex-when-app-is-busy

标签

apache-flex