Can not focus (click) on controls in container blackberry cascades

Question

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();
}

}

I have 2 buttons on top of page to navigate between Login and Register. The problem is : I can not focus (input texts or press on button) on Login container (But Register container is working well).

Please let me know how to solve this problem

Bojan Kogoj · Answer 1 · 2013-09-06T09:21:01.333

2

If I put it in IDE I immediately get

The default property for the component 'Page' does not accept several objects.

So, put a Container around your two containers, so Page will only have one element inside.

import bb.cascades 1.0
Page {
    Container {

        // Login container
        Container {
            // Email
            TextField {
            }
            // Password
            TextField {
            }
            // Button login
            Button {
            }
        }
        // Register container
        Container {
            // Email
            TextField {
            }
            // Password
            TextField {
            }
            // Button register
            Button {
            }
        }
    }
}

EDIT:

Since you added full code, there is another problem there. You created your Login Container, and then you create "ScrollView" which is for registering new user. The problem ScrollView was created on top of login Container, and even though it isn't visible it blocks container below. Two solutions:

Create a separate page for registering new user
Move your login Container UNDER ScrollView. With a bit of luck that should do the job (and not disable registering). Since you use DockLayout that shouldn't destroy your design

edited Sep 06 '13 at 09:21

answered Sep 05 '13 at 08:03

Bojan Kogoj

5,321
3
35
57

Thank you! I updated my question. The problem is : I can not focus on Login container – Phuc Tran Sep 05 '13 at 08:34
You want to have focus on email when you open it? – Bojan Kogoj Sep 05 '13 at 09:39
When opening app, the Login page is visible but I cannot focus on email, password or Login button. When I navigate to Register page, I can focus on any control (I can input email, password and press on Register button) – Phuc Tran Sep 05 '13 at 10:17
First of, here all is in one page. You have some different page setup? I can't see the problem without seeing the exact code you are using, what I gave you works – Bojan Kogoj Sep 05 '13 at 11:19
I just updated my full source code. There are some .png files will be missing if you paste this code to your IDE. – Phuc Tran Sep 05 '13 at 16:00

Can not focus (click) on controls in container blackberry cascades

1 Answers1