Search code examples
c++qmlblackberry-cascades

Cascades NavigationPane: connect to an object signal into another qml file


I've created a blackberry application using the wizard with NavigationPane template, and added some components on the DetailsPage.qml (like a Button and a TextField).

I want to connect a slot function on the button in DetailsPage.qml, that when clicked read the text into the TextArea on the same page.

My problem is that when the application is launched, the qml that is loaded is main.qml. If i try to get reference to an object on DetailsPage.qml findChild return 0x0, because it cannot find it. The main.qml file is:

// Navigation pane project template
import bb.cascades 1.0

NavigationPane {
    id: navigationPane
    Page {
        // page with a picture thumbnail
        Container {
            background: Color.Black
            layout: DockLayout {
            }
            Button {                
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
                text: qsTr("New todo")
                imageSource: "asset:///images/picture1thumb.png"
                onClicked: {
                    // show detail page when the button is clicked
                    var page = getSecondPage();
                    console.debug("pushing detail " + page)
                    navigationPane.push(page);
                }
                property Page secondPage
                function getSecondPage() {
                    if (! secondPage) {
                        secondPage = secondPageDefinition.createObject();
                    }
                    return secondPage;
                }
                attachedObjects: [
                    ComponentDefinition {
                        id: secondPageDefinition
                        objectName: "secondPageDefinition"
                        source: "DetailsPage.qml"
                    }
                ]
            }
        }
    }
    onCreationCompleted: {
        // this slot is called when declarative scene is created
        // write post creation initialization here
        console.log("NavigationPane - onCreationCompleted()");

        // enable layout to adapt to the device rotation
        // don't forget to enable screen rotation in bar-bescriptor.xml (Application->Orientation->Auto-orient)
        OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
    }
}

The detailsPage.qml file is:

// Navigation pane project template
import bb.cascades 1.0

Page {
    // page with a picture detail
    id: pgDetail
    objectName: "pgDetail"
    actions: [
        // create navigation panel actions here
        ActionItem {
            title: qsTr("Break")
            onTriggered: {
                imgView.imageSource = "asset:///images/picture1br.png"
            }
        }
    ]
    paneProperties: NavigationPaneProperties {
        backButton: ActionItem {
            onTriggered: {
                // define what happens when back button is pressed here
                // in this case is closed the detail page
                navigationPane.pop()
            }
        }
    }
    Container {
        background: Color.Black
        Label {
            text: qsTr("Page 2")
            horizontalAlignment: HorizontalAlignment.Center
            textStyle {
                base: SystemDefaults.TextStyles.TitleText
                color: Color.Yellow
            }
        }
        ImageView {
            id: imgView
            imageSource: "asset:///images/picture1.png"
            horizontalAlignment: HorizontalAlignment.Center
        }
        Label {
            text: qsTr("Picture description")
            horizontalAlignment: HorizontalAlignment.Center
        }
        TextArea {
            objectName: "noteText"
        }
        Button {
            objectName: "insertBtn"
            text: qsTr("Insert Note")
        }
    }
}

I tried to connect the button using the signal pushTransactionEnded, but it has two problems:

  1. The connect method is called every time i change screen (and i want to connect the slot only on startup).
  2. When i the button is clicked, i have the same problem, i have no reference to the currentPage (but maybe if i save the root pane in that case, using the top() method, i can obtain access to the current Page)

So basically my questions are: When i must connect my slot to a signal? How i do that, if the objects are on a different qml file?

I want to handle the clicked event on C++ not directly in qml File.


Solution

  • Register C++ object containing your slot with qml using setContextProperty and call that slot directly from DetailsPage.qml

        ...
        Button {
    
            objectName: "insertBtn"
            text: qsTr("Insert Note")
            onClicked:{
                 cppObject.mySlot()
            }
        }
        ...