what is this control and how to use it in BB 10 cascades for navigation

Question

I need to develop a bb 10 cascades app in which i need to add a control like in this image

http://subefotos.com/ver/?37868d57047746ce1ea9ca55b7637e9eo.jpg#codigos

(rounded in red color)

when i touch on second bubble, i need to show second screen ,for third bubble third screen and so on. Default screen should be displayed is first screen(first bubble high lights)

but how to do it in BB 10 cascades and what is that control called in bb 10?

Please help,

Thanks !!!

Answer 1

-------AM ADDED PAGE NAVIGATION HERE, REUSE THIS CODE FOR YOUR PROJECT-------------

Get sample app from my github samples for your query....

https://github.com/svmrajesh/BB-10-Cascades/tree/master/MY%20APPS/stackNavigation

---

1.main.qml: (first page)

import bb.cascades 1.0

NavigationPane { id: navigationPane backButtonsVisible: false peekEnabled: false

Page {
    id: rootPage
    Container {
        background: Color.LightGray

        layout: DockLayout {

        }
        Label {
            text: "First page"
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
        }
    }

    actions: [
        ActionItem {
            title: "Next page"
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
                var page = pageDefinition.createObject();
                navigationPane.push(page);

            }

            attachedObjects: ComponentDefinition {
                id: pageDefinition
                source: "PageTwo.qml"
            }
        }
    ]
}
onPopTransitionEnded: {
    page.destroy();
}

}

2.second page

import bb.cascades 1.0

Page { id: pageTwo Container { background: Color.Gray layout: DockLayout {

    }
    Label {
        text: "Second page"
        horizontalAlignment: HorizontalAlignment.Center
    }


    Container {
        layout: StackLayout {

        }
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Center

        Button {

        text: qsTr("Next Page")
        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
                source: "PageTwoOne.qml"
            }
        ]
    }

    Button {
       text: "Previous Page"
       onClicked: {
           navigationPane.pop();
       }

    }

}
}

/* ------------- Use this Code If back button visibility is "True"-----------------

paneProperties: NavigationPaneProperties {

    backButton: ActionItem {
        title: "Back"
     // imageSource: "asset:///back.png"
        onTriggered: {
            navigationPane.pop();
        }
        }
} */

}

3.last page

import bb.cascades 1.0

Page { id: pageTwoone

    Container {
 background: Color.DarkGray
 layout: DockLayout {}

 Label {
        horizontalAlignment: HorizontalAlignment.Center
        text: "Last Page"
 }


 Container {
      layout: StackLayout {}
      horizontalAlignment: HorizontalAlignment.Center
      verticalAlignment: VerticalAlignment.Center


    Button {
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Center
        text: qsTr("Goto Home Page")

        onClicked: {
            // show detail page when the button is clicked
            navigationPane.navigateTo(rootPage);
             }
            }
        Button {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            text: qsTr("Goto Back")

            onClicked: {
                // show detail page when the button is clicked
                navigationPane.pop();
            }

        }
    }
}
}

------------ ADD More pages to navigate using this code----------------------------

-------------copy this code and run.. get sample app from above link if needed ------