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
New Developer
Posts: 18
Registered: ‎03-30-2012
My Device: 8830
My Carrier: Sprint

Can not focus (click) on controls in container

I have a Page like below :

 

import bb.cascades 1.0

NavigationPane {
    id: nav
    Page {
        // Root container
        Container {
            layout: DockLayout {
            }

            // Background
            ImageView {
                imageSource: "asset:///bg.png"
                verticalAlignment: VerticalAlignment.Fill
                horizontalAlignment: HorizontalAlignment.Fill
            }

            // Container for contents
            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.TopToBottom
                }

                // Top navigation : Login and Register buttons
                Container {
                    layout: StackLayout {
                        orientation: LayoutOrientation.LeftToRight
                    }

                    ImageView {
                        id: tabLogin
                        imageSource: "asset:///ic_login_selected_tab.png"
                        onTouch: {
                            // Show login & hide register
                            loginContainer.setVisible(true)
                            registerContainer.setVisible(false)
                            
                            // Change backgrounds
                            tabLogin.setImageSource(qsTr("asset:///ic_login_selected_tab.png"))
                            tabRegister.setImageSource(qsTr("asset:///ic_register_normal_tab.png"))
                        }

                    }

                    ImageView {
                        id: tabRegister
                        imageSource: "asset:///ic_register_normal_tab.png"

                        onTouch: {
                            loginContainer.setVisible(false)
                            registerContainer.setVisible(true)
                            tabLogin.setImageSource(qsTr("asset:///ic_login_normal_tab.png"))
                            tabRegister.setImageSource(qsTr("asset:///ic_register_selected_tab.png"))
                        }
                    }

                }

                // Container for Login and Register pages
                Container {
                    horizontalAlignment: HorizontalAlignment.Fill
                    layout: DockLayout {
                    }

                    // Login container
                    Container {
                        id: loginContainer
                        visible: true
                        horizontalAlignment: HorizontalAlignment.Fill
                        layout: StackLayout {
                            orientation: LayoutOrientation.TopToBottom
                        }

                        topPadding: 200

                        // safeMATE text
                        ImageView {
                            verticalAlignment: VerticalAlignment.Top
                            horizontalAlignment: HorizontalAlignment.Center
                            imageSource: "asset:///safemate.png"
                        }

                        // Container for email, passcode and login button
                        Container {
                            horizontalAlignment: HorizontalAlignment.Fill
                            verticalAlignment: VerticalAlignment.Center

                            topMargin: 100
                            bottomMargin: 50.0
                            Container {
                                layout: StackLayout {
                                    orientation: LayoutOrientation.LeftToRight
                                }

                                background: Color.White
                                horizontalAlignment: HorizontalAlignment.Fill

                                leftPadding: 20.0
                                rightPadding: 30.0
                                topPadding: 25
                                bottomPadding: 25
                                bottomMargin: 5.0
                                topMargin: 5.0
                                leftMargin: 5.0
                                rightMargin: 5.0
                                layoutProperties: StackLayoutProperties {

                                }

                                ImageView {
                                    imageSource: "asset:///ic_email.png"
                                }
                                TextField {
                                    hintText: "Email"
                                    inputMode: TextFieldInputMode.EmailAddress
                                }

                            }

                            Container {
                                layout: StackLayout {
                                    orientation: LayoutOrientation.LeftToRight
                                }

                                background: Color.White
                                horizontalAlignment: HorizontalAlignment.Fill

                                leftPadding: 20.0
                                rightPadding: 30.0
                                topPadding: 25
                                bottomPadding: 25

                                bottomMargin: 5.0
                                topMargin: 5.0
                                leftMargin: 5.0
                                rightMargin: 5.0
                                layoutProperties: StackLayoutProperties {

                                }
                                ImageView {
                                    imageSource: "asset:///ic_passcode.png"
                                }

                                TextField {
                                    hintText: "Passcode"
                                    inputMode: TextFieldInputMode.Password
                                }

                            }

                            ImageButton {
                                horizontalAlignment: HorizontalAlignment.Fill
                                defaultImageSource: "asset:///btn_login.png"
                                pressedImageSource: "asset:///btn_login_clicked.png"
                                
                                onClicked: {
                                    var page = homePage.createObject();
                                    
                                    nav.push(page);
                                }
                            }
                        }
                    }

                    // Register container
                    ScrollView {

                        Container {
                            id: registerContainer
                            visible: false
                        horizontalAlignment: HorizontalAlignment.Fill
                        layout: StackLayout {
                            orientation: LayoutOrientation.TopToBottom
                        }
                        
                        topPadding: 30
                        
                        // safeMATE text
                        ImageView {
                            verticalAlignment: VerticalAlignment.Top
                            horizontalAlignment: HorizontalAlignment.Center
                            imageSource: "asset:///safemate.png"
                        }
                        
                        // Container for email, passcode and login button
                        Container {
                            horizontalAlignment: HorizontalAlignment.Fill
                            verticalAlignment: VerticalAlignment.Center
                            
                            topMargin: 30
                            bottomMargin: 50.0
                            
                            // Email
                            Container {
                                layout: StackLayout {
                                    orientation: LayoutOrientation.LeftToRight
                                }
                                
                                background: Color.White
                                horizontalAlignment: HorizontalAlignment.Fill
                                
                                leftPadding: 20.0
                                rightPadding: 30.0
                                topPadding: 25
                                bottomPadding: 25
                                bottomMargin: 5.0
                                topMargin: 5.0
                                leftMargin: 5.0
                                rightMargin: 5.0
                                layoutProperties: StackLayoutProperties {
                                
                                }
                                
                                ImageView {
                                    imageSource: "asset:///ic_email.png"
                                }
                                TextField {
                                    hintText: "Email"
                                    inputMode: TextFieldInputMode.EmailAddress
                                }
                            
                            }
                            
                            // Full name
                            Container {
                                layout: StackLayout {
                                    orientation: LayoutOrientation.LeftToRight
                                }
                                
                                background: Color.White
                                horizontalAlignment: HorizontalAlignment.Fill
                                
                                leftPadding: 20.0
                                rightPadding: 30.0
                                topPadding: 25
                                bottomPadding: 25
                                bottomMargin: 5.0
                                topMargin: 5.0
                                leftMargin: 5.0
                                rightMargin: 5.0
                                layoutProperties: StackLayoutProperties {
                                
                                }
                                
                                ImageView {
                                    imageSource: "asset:///ic_fullname.png"
                                }
                                TextField {
                                    hintText: "Full name"
                                    inputMode: TextFieldInputMode.Default
                                }
                            
                            }
                            
                            // Passcode
                            Container {
                                layout: StackLayout {
                                    orientation: LayoutOrientation.LeftToRight
                                }
                                
                                background: Color.White
                                horizontalAlignment: HorizontalAlignment.Fill
                                
                                leftPadding: 20.0
                                rightPadding: 30.0
                                topPadding: 25
                                bottomPadding: 25
                                
                                bottomMargin: 5.0
                                topMargin: 5.0
                                leftMargin: 5.0
                                rightMargin: 5.0
                                layoutProperties: StackLayoutProperties {
                                
                                }
                                ImageView {
                                    imageSource: "asset:///ic_passcode.png"
                                }
                                
                                TextField {
                                    hintText: "Passcode"
                                    inputMode: TextFieldInputMode.Password
                                }
                            
                            }
                            
                            // Phone
                            Container {
                                layout: StackLayout {
                                    orientation: LayoutOrientation.LeftToRight
                                }
                                
                                // Country code
                                Container {
                                    layout: StackLayout {
                                        orientation: LayoutOrientation.LeftToRight
                                    }
                                    
                                    background: Color.White
                                    
                                    leftPadding: 20.0
                                    rightPadding: 30.0
                                    topPadding: 35
                                    bottomPadding: 35
                                    bottomMargin: 5.0
                                    topMargin: 5.0
                                    leftMargin: 5.0
                                    rightMargin: 5.0
                                    layoutProperties: StackLayoutProperties {
                                    
                                    }
                                    
                                    ImageView {
                                        imageSource: "asset:///ic_phonenumber.png"
                                    }
                                    
                                    
                                }
                                
                                // Phone
                                Container {
                                    horizontalAlignment: HorizontalAlignment.Fill
                                    layout: StackLayout {
                                        orientation: LayoutOrientation.LeftToRight
                                    }
                                    
                                    background: Color.White
                                    
                                    leftPadding: 20.0
                                    rightPadding: 30.0
                                    topPadding: 23
                                    bottomPadding: 23
                                    bottomMargin: 5.0
                                    topMargin: 5.0
                                    leftMargin: 5.0
                                    rightMargin: 5.0
                                    layoutProperties: StackLayoutProperties {
                                    
                                    }
                                    
                                    // Phone number text box
                                    TextField {
                                        hintText: "Phone number"
                                        inputMode: TextFieldInputMode.Default
                                    }   
                                }
                            }
                            
                            // Contact info title
                            Container {
                                topMargin: 20
                                horizontalAlignment: HorizontalAlignment.Fill
                                layout: StackLayout {
                                    orientation: LayoutOrientation.LeftToRight
                                }
                                
                                ImageView {
                                    imageSource: "asset:///ic_contactinfo.png"
                                }
                                
                                Container {
                                    leftPadding: 20
                                    layout: StackLayout {
                                        orientation: LayoutOrientation.TopToBottom
                                    }
                                    
                                    Label {
                                        verticalAlignment: VerticalAlignment.Center
                                        text: "CONTACT INFO"
                                    }
                                    Label {
                                        text: "These information will be used for emergencies"
                                        multiline: true
                                        textStyle.fontSize: FontSize.XSmall
                                    }
                                }
                                
                            }
                            
                            // Contact info container
                            Container {
                                topMargin: 20
                                horizontalAlignment: HorizontalAlignment.Fill
                                verticalAlignment: VerticalAlignment.Center
                                layout: StackLayout {
                                    orientation: LayoutOrientation.TopToBottom
                                }
                                
                                // Phone
                                Container {
                        
                                    layout: StackLayout {
                                        orientation: LayoutOrientation.LeftToRight
                                    }
                                    
                                    // Country code
                                    Container {
                                        layout: StackLayout {
                                            orientation: LayoutOrientation.LeftToRight
                                        }
                                        
                                        background: Color.White
                                        
                                        leftPadding: 20.0
                                        rightPadding: 30.0
                                        topPadding: 35
                                        bottomPadding: 35
                                        bottomMargin: 5.0
                                        topMargin: 5.0
                                        leftMargin: 5.0
                                        rightMargin: 5.0
                                        layoutProperties: StackLayoutProperties {
                                        
                                        }
                                        
                                        ImageView {
                                            imageSource: "asset:///ic_phonenumber.png"
                                        }
                                    }
                                    
                                    // Phone
                                    Container {
                                        horizontalAlignment: HorizontalAlignment.Fill
                                        layout: StackLayout {
                                            orientation: LayoutOrientation.LeftToRight
                                        }
                                        
                                        background: Color.White
                                        
                                        leftPadding: 20.0
                                        rightPadding: 30.0
                                        topPadding: 23
                                        bottomPadding: 23
                                        bottomMargin: 5.0
                                        topMargin: 5.0
                                        leftMargin: 5.0
                                        rightMargin: 5.0
                                        layoutProperties: StackLayoutProperties {
                                        
                                        }
                                        
                                        // Phone number text box
                                        TextField {
                                            hintText: "Phone number"
                                            inputMode: TextFieldInputMode.Default
                                        }   
                                    }
                                }
                                
                                // Address
                                Container {
                                    layout: StackLayout {
                                        orientation: LayoutOrientation.LeftToRight
                                    }
                                    
                                    background: Color.White
                                    horizontalAlignment: HorizontalAlignment.Fill
                                    
                                    leftPadding: 20.0
                                    rightPadding: 30.0
                                    topPadding: 25
                                    bottomPadding: 25
                                    bottomMargin: 5.0
                                    topMargin: 5.0
                                    leftMargin: 5.0
                                    rightMargin: 5.0
                                    layoutProperties: StackLayoutProperties {
                                    
                                    }
                                    
                                    ImageView {
                                        imageSource: "asset:///ic_address.png"
                                    }
                                    TextField {
                                        hintText: "Address"
                                        inputMode: TextFieldInputMode.EmailAddress
                                    }
                                
                                }
                            }
                            
                            // Register button
                            ImageButton {
                                horizontalAlignment: HorizontalAlignment.Fill
                                defaultImageSource: "asset:///btn_register.png"
                                pressedImageSource: "asset:///btn_register_clicked.png"
                                
                                onClicked: {
                                    var page = homePage.createObject();
                                    
                                    nav.push(page);
                                }
                            }
                        }
                    }
            }
                }
            }
        }
    }
    
    attachedObjects: [
        ComponentDefinition {
            id: homePage
            source: "home.qml"
        }
    ]
    
    onPopTransitionEnded: {
        // Transition is done destroy the Page to free up memory.
        page.destroy();
    }
    
}

 

There are 2 images on top : Login and Register

When opening app, Login container is visible, but I can not focus on any control.

When I press on Register image, Login container is hidden and Register container is visible.

I can focus (input text, press on button) on Register container

 

Please let me know why I can not focus on Login page

Highlighted
Developer
Posts: 16,987
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

Re: Can not focus (click) on controls in container

maybe another control handles the click? check if maybe a docklayout lets something overlap where you don't want it to.
too much code to analyze it in detail now, sorry.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
New Developer
Posts: 18
Registered: ‎03-30-2012
My Device: 8830
My Carrier: Sprint

Re: Can not focus (click) on controls in container

[ Edited ]

Thank you for your reply. 

Could you please give me your skype id? (Or you can add my skype id : {REMOVED})

I'm a senior Android developer but I'm a newbie on BlackBerry

 

Mod Edit: Removed personal information to comply with Community Guidelines and Terms and Conditions of Use.