Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Contributor
Posts: 21
Registered: ‎05-28-2013
My Device: Z10

Cascades grey loading screen

Hi,

 

I am wondering how can I present a grey background with alpha 0.8 and a activityIndicator spinning after user hit the login button. The grey background is to prevent user hitting an UI element.

 

My code:

import bb.cascades 1.2
import bb.system 1.0

Page {
    id: root
    
    titleBar: TitleBar {
        title: "Add Track Item"
    } // End of titleBar
    
    content: Container {
        id: contentContainer
        Container {
            id: loadingContainer
            layout: AbsoluteLayout {
                
            }
            ActivityIndicator {
                id: loadingIndicator
            }
        }
        Container {
            id: mainContainer
            layout: StackLayout {
            
            }
            leftPadding: 30.0
            topPadding: 30.0
            rightPadding: 30.0
            bottomPadding: 30.0 // End of StackLayout
            Label {
                id: lblMain
                text: "Please enter your tracking number"
            }
            Container {
                id: itemNumberContainer
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                
                }
                TextField {
                    id: txtPinNumber
                    layoutProperties: StackLayoutProperties {
                        spaceQuota: 9    
                    }
                    hintText: "Tracking Number"
                }
                Button {
                    layoutProperties: StackLayoutProperties {
                        spaceQuota: 1    
                    }            
                }
            }// End of itemNumberContainer
            TextField {
                id: txtTrackingDescription
                hintText: "Item Description (Optional)"
            
            } // End of Label
        } // End of main Container
    } // End of contentContainer
    actions: [
        ActionItem {
            title: "Save"
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
                var pin = txtPinNumber.text;
                var trackingDescription = txtTrackingDescription.text;
                
                if (pin == '')
                {
                    // Display a prompt to get user to try again
                    emptyPinDialog.show();
                    return;
                }
                mainObj.addTrackingPin(pin);                    
            }
        }        
    ] // End of actions
    attachedObjects: [
        SystemDialog {
            id: emptyPinDialog
            title: "Invalid Tracking Number"
            body: "Please enter a valid tracking Canada Post number."
            onFinished: {
                emptyPinDialog.close();
            }
        }
    ]
    onCreationCompleted: {
        //loadingIndicator.visible=false;
        loadingIndicator.running = true;
        mainObj.setLoadingIndicator(loadingIndicator);
    }
} // End of Page

 

Developer
Posts: 540
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....

Re: Cascades grey loading screen

[ Edited ]

You can set opacity of Container when currently loading. And also set enabled property to false. for example

Container{
    enabled: !loading //Prevent clicks when loading
    opacity: enabled ? 1 : 0.8
}

 



If helped give a like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog
Contributor
Posts: 21
Registered: ‎05-28-2013
My Device: Z10

Re: Cascades grey loading screen

Thanks.

 

Will give it a shot later, currently working on making the HTTP calls and handling response