Implementing the back button on bb10

Question

I have one navigation pane and I disabled the back button in the main.qml, however I want to display the back button again to some part of the app. How do i implement this? here's my cpp

pane = qml->createRootObject<NavigationPane>();

    // Set created root object as the application scene
    app->setScene(pane);

    qml->setContextProperty("cppObj", this);

}

void ApplicationUI::onLoginClicked() {
    // create scene document from buttonclicked.qml asset
    // set parent to created document to ensure it exists for the whole application lifetime
    QmlDocument *qml = QmlDocument::create("asset:///projects.qml").parent(this);
    qml->setContextProperty("cppObj", this);
    Page* root = qml->createRootObject<Page>();
    pane->push(root);
}

void ApplicationUI::onAddClicked() {
    // create scene document from buttonclicked.qml asset
    // set parent to created document to ensure it exists for the whole application lifetime
    QmlDocument *qml = QmlDocument::create("asset:///addprojects.qml").parent(this);
    Page* root = qml->createRootObject<Page>();
    pane->push(root);
}

and here's my main where I disabled the back button

NavigationPane {
    backButtonsVisible: false }

How do i make the back button active to some section of the app?

Answer 1

Let's say you have the following code:

StartPage

import bb.cascades 1.0

NavigationPane {
    id: navPane

    Page {
        Container {
            horizontalAlignment: HorizontalAlignment.Fill
            verticalAlignment: VerticalAlignment.Fill
            layout: DockLayout {
            }
            Button {
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
                text: "Next Page"
                onClicked: {
                    var nextPage = page.createObject();
                    navPane.push(nextPage);
                }
            }
        }
    }

    attachedObjects: [
        ComponentDefinition {
            id: page
            source: "NextPage.qml"
        }
    ]
}

NextPage:

import bb.cascades 1.0

Page {
    // disables backButton (not peeking)
    paneProperties: NavigationPaneProperties {
            backButton: ActionItem {
            enabled: false
        }
    }

    // [0]
    Container {
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill
        layout: DockLayout {
        }
        Button {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            text: "Prev page"
            onClicked: {
                var page = navPane.pop();
                if (page)
                    page.destroy();
            }
        }
    } // [0]

    // hides navigation bar
    onCreationCompleted: {
        navPane.backButtonsVisible = false;
    }
}

Then you can completely disable backButton with this code in NextPage.qml

onCreationCompleted: {
    navPane.backButtonsVisible = false;
}

Alternatively, if you want to have navigation pane visible but just Back Button disabled, use following in the same NextPage.qml file:

paneProperties: NavigationPaneProperties {
    backButton: ActionItem {
        enabled: false
    }
}

Also, don't forget about peekEnabled property. Using peek BB10 feature user can move between sibling pages using sliding finger movement not touching any buttons on the screen.

It could be done in similar way:

onCreationCompleted: {
    navPane.peekEnabled = false;
}

Hope it helps.