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

Posts: 132
Registered: ‎11-06-2012
My Device: BlackBerry Passport

How to push a screen in a QML file.

I'm doing a calculator, the list of result (ListView) works ok when in main.qml, but I moved it to a new qml file.


I have used " navPane.deprecatedPushQmlByString("page2.qml") " in NavigationPane but nothing happen when press the button.

Anyone know how to fix this, and please tell me how to open a new screen to show the detail of result in ListView.


Best Regards.


Sorry for bad english.

Posts: 17,024
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

Re: How to push a screen in a QML file.

deprecatedPushQmlByString is really this, deprecated. if it is used in samples you have, update them from github.

you can either use a page that is defined in the qml as an attached object, you use navPane.push() with the id of the component.
Or you create it from another component dynamically, using ComponentDefinition.
Check the API about the usage:
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
Posts: 262
Registered: ‎07-13-2012
My Device: PlayBook, DA B, DA C, LE Z10 #102, Q10, Z30
My Carrier: T-Mobile

Re: How to push a screen in a QML file.

You would do something like the following (using a button in my sample code but should be the same for a a touch event in a list):


         Button {
             id: buttonID
                    onClicked: {
                        var blogpage = goToWebView.createObject();
                    attachedObjects: ComponentDefinition {
                        id: goToWebView
                        source: "blog.qml"

 Where when you push the button, it pushes you to "blog.qml".  Also note that my variable and id names (blogpage and goToWebView) can be whatever you want, just make sure it follows that same format as above.

Check out my BB10 Cascades Coding site: BBcascades.com & Cascades Blog: bbcascadescode.tumblr.com

My Built for BlackBerry app: The Dive Plan
Posts: 132
Registered: ‎11-06-2012
My Device: BlackBerry Passport

Re: How to push a screen in a QML file.

It works but the blog.qml is a normal page, I try to make it to NavigationPane to push to another QML but It doesn't work.


This is my flow:

main.qml(NavigationPane) -> ListResult.qml(NavigationPane) -> DetailResult.qml(Page)



Posts: 85
Registered: ‎05-25-2012
My Device: Limited Edition Z10
My Carrier: Bell

Re: How to push a screen in a QML file.

bcs925 is right.  The code they posted can be copied to any page in your flow.


Check out the code in the base Navigation Pane when you create a new project.


Add the following to the DetailsPage.qml:


 Button {
            text: "More Details"
            onClicked: {
                // show detail page when the button is clicked
                var page = getThirdPage();
                console.debug("pushing details " + page)
            property Page thirdPage
            function getThirdPage() {
                if (! thirdPage) {
                    thirdPage = thirdPageDefinition.createObject();
                return thirdPage;
            attachedObjects: [
                ComponentDefinition {
                    id: thirdPageDefinition
                    source: "MoreDetails.qml"

 And add a new page MoreDetails.qml to be your 3rd level page on the navigation stack.