What is the correct way to overlay an ActivityIndicator on BlackBerry 10?

Question

In my BB10 application I wish to overlay an ActivityIndicator in the centre of the current screen to indicate when something (eg "loading") is happening.

My current solution is to embed such an indicator in the centre of a custom transparent dialog, as follows:

import bb.cascades 1.4

Dialog {
    id: activityDialog
    objectName: "activityDialog"
    content: Container {
        id: activityDialogContainer

        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Center

        // fully transparent background!
        background: Color.create(0, 0, 0, 0)
        layout: StackLayout {

        }
        ActivityIndicator {
           id: theIndicator
           preferredWidth: 500               
           preferredHeight: 500           
        } 
        Label {
            id: activityLabel;
            objectName: "activityLabel";
            text: ""
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
        }                   
    }

    onOpened: {
        theIndicator.start();
    }

    onClosed: {
        theIndicator.stop();
    }
}

I can then simply open the dialog when I want to display the indicator.

The problem is that the dialog then prevents any interaction with the underlying Page 's / NavigationPane 's controls. I understand why. The dialog takes up the whole screen and although transparent still essentially hides any UI of the underlying pane.

How can I overlay an ActivityIndicator in the centre of the screen without preventing interaction with the underlying panel's controls?

Answer 1

现在我意识到我只需要围绕我的主Container和ActivityIndicator创建一个DockLayout 。