Search code examples
qtqmlblackberry-10qtquick2blackberry-cascades

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


In my BB10 application I wish to overlay an ActivityIndicator in the centre of the current screen to indicate when something (e.g. "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?


Solution

  • I now realised I simply need to create a DockLayout around my main Container and the ActivityIndicator.