Navigation pane in BB10

In BB10, if you want to set UI on to the screen, we need to go for AbstractPane. It is better to learn a bit about abstract pane to know why we really need NavigationPane.

We can set our QML page to BB10 screen using Application::instance().setScene(AbstractPane).
If we use AbstractPane, the UI is set to the application, but if we want to maintain stack of all screens which are pushed on to the scene, it is not possible using AbstractPane. This requirement gave birth to NavigationPane.

So, If we want to maintain stack of screens which are pushed on to the screen, go and use NavigationPane which is child class of AbstractPane.

You can find the complete example in my previous post.

Practical explanation:
QML file with navpane is like

import bb.cascades 1.0
NavigationPane {
    // creates one page with a label
    Page {
        Container {
            layout: DockLayout {
            }
            Button {
                text: qsTr("Click me")
                verticalAlignment: VerticalAlignment.Center
                horizontalAlignment: HorizontalAlignment.Center
                onClicked: {
                    cppObj.onButtonClicked();
                }  // end onclicked
            }
        }  //end button
    }  // contianer ends

} // Nav pane ends

The nav pane is set to cpp file like this

QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);

    // create root object for the UI
    NavigationPane *pane = qml->createRootObject();

// set created root object as a scene
    app->setScene(pane);

Use pane object to push the future pages.

QmlDocument *qml = QmlDocument::create("asset:///buttonclicked.qml").parent(this);
Page* root = qml->createRootObject();
pane->push(root);

Once you push a page using NavigationPage, a bar will appear for navigating to previous screens.
Further detailed explanation is well documented in BB website.