How to shift within two screens in BB 10

Hello friends 🙂 It is being a long time since I have writing a blog post. For a fresh start let’s begin with a new category. Here is my first blog post on BlackBerry 10 (BB 10) development. For Android developers, I wrote a post about How to shift within two Activities. Lets do the same thing with BlackBerry 10.

Hence this is my first blog post in BlackBerry 10 category, I would like to mention about my development and testing environment. I’m using Mac OS X 10.7.4 , QNX Momentics IDE 10.1.0 , VMware Fusion 5.0, BlackBerry 10 Native SDK and BlackBerry simulator.

For those who have developed for BlackBerry earlier versions before 10, uses JAVA as the development language. But for BB 10 OS and newer versions use C++ and QML as main languages for Native and Cascades developments. I wish to cover most of my BB 10 posts with Cascades developments. Before it is getting boring I am going to show you guys two screens that I am going to implement.

First Screen

Screen One

Second Screen

Screen Two

Most of the implementations we are doing using C++, can be done using QML. In this post I’m going to prove it to you. For this small application, I’m not going to touch any C++ source file or header file. But when we create a Cascades project using QNX IDE, it will create us two C++ source files named as main.cpp, applicationui.cpp and one header file named as applicationui.hpp.

The IDE will generate a QML file also. That is main.qml, where you can find it under assets directory. That is our first screen. You can load it using IDE and see the UI appearence without running the application. According to our topic, we are trying to shift within two screens. To create the second screen UI, I’m going to use another QML file and name it as second.qml.

Okay, first take a look at the main.qml file.

import bb.cascades 1.0

NavigationPane {
    id: navigationPane
    Page {
        Container {
            layout: DockLayout {}

            Label {
                text: qsTr("Hello World")
                textStyle.base: SystemDefaults.TextStyles.BigText
                verticalAlignment: VerticalAlignment.Center
                horizontalAlignment: HorizontalAlignment.Center
            Button {
                id: mainNextButton
                text: "Next"

                attachedObjects: [
                    ComponentDefinition {
                        id: secondPageDefinition
                        source: "second.qml"

                property Page secondPage

                function getSecondPage() {
                    console.log("***** getSecondPage ");

                    if (! secondPage) {
                        secondPage = secondPageDefinition.createObject();
                    return secondPage;

                onClicked: {
                    var page = getSecondPage();


There are several ways of navigating among screens. In this application I have taken advantage of the default BB 10 back button to shift from second screen to first one. That is why I have used NavigationPane as the most outer property in this main.qml file. If you  didn’t get what I told, please look at the Screen Two image. Can you see a bottom bar with back arrow ? That part is adding by the platform when we use NavigationPane. If you are still not clear, think about it in this way. How can we move to the first screen from the second screen if we have nothing to trigger an event? After I’m uploading the code for second.qml, you will see that there is nothing in the code except for a Label which contains the text “Second Screen“. I have given an ID for that NavigationPane, because later we need to call this UI element.

Then I have used Page inside NavigationPane and all other elements contains inside this Page. When we load second screen, what will really happen is, a second Page will take the place of this first Page while NavigationPane is remain still. Look inside the Button code for more clarification. You can see, we are calling second.qml as an attachedObject and we create a Page Object by using second.qml ComponenetDefinition ID, if it is not already created.

Inside the Button onClicked event, we push that created Page inside to NavigationPane. When we create the project at first, the IDE will create the “Hello WorldLabel for us. So no need to bother about that code snippet. Another special thing that I would like to focus. That is debugging. You can see that I have used console.log() to take an out put which will print on Device Log view.  That’s all about the main.qml file. Lets look at the second.qml file now.

import bb.cascades 1.0

Page {
    Container {
        layout: DockLayout {}
        Label {
            id: secondScreenLable
            text: qsTr("Second Screen")


As I  have mentioned you earlier, it has nothing to explain. That Page contains a Label with the text “Second Screen“. That’s all about this post. Thank you for joining with me again. Have a nice day 🙂

About AnujAroshA

Working as an Associate Technical Lead. Specialized in iOS application development. A simple person :)
This entry was posted in BlackBerry 10 and tagged , , . Bookmark the permalink.

1 Response to How to shift within two screens in BB 10

  1. Megnusin says:

    Thank you for creating this. It’s exactly what I was looking for!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s