Navigation

In the Cascades framework, there are several methods of navigation that you can provide to users of your apps. You can create an app with a single screen and add actions that are appropriate for that screen. For example, a simple weather app might display the current temperature and include actions to change the displayed temperature from Celsius to Fahrenheit.

Often, you might want to create apps with multiple screens and let users navigate between these screens. A weather app might include separate screens to display the temperature, add a new location, or provide detailed forecast information. Alternatively, the app could use tabs, the way that some browsers do, and each tab could display the temperature in a different location.

The  AbstractPane class provides the fundamental features of a screen. The root element of a Cascades application must inherit from this class, so every app that you develop includes at least one object that inherits from AbstractPane. For example, when you create a new Cascades project in the Momentics IDE using the standard empty project template, the prepopulated code in the project's main.qml file contains a  Page element at its root. This element inherits from AbstractPane, so it's a valid root element for the app.

// Default empty project template
import bb.cascades 1.0
 
// creates one page with a label
Page {
    Container {
        layout: DockLayout {}
        Label {
            text: qsTr("Hello World")
            textStyle.base: SystemDefaults.TextStyles.BigText
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
        }
    }
}

There are several subclasses of  AbstractPane  that you can use, depending on the type of navigation that you want your app to provide:

  • Page - This class represents a single screen. You can add other controls (such as  Label, TextArea Button, and  ImageView) as the content of the Page, and you can add actions to let users interact with the content.

  • NavigationPane - This class represents a set of screens, arranged in a stack, that users can navigate between. Each screen is an instance of an AbstractPane subclass (such as Page). You can push a new screen on to the stack to display it, and pop a screen off of the stack to remove it and display the previous screen again.

  • TabbedPane - This class represents a set of screens that are arranged as tabs. Each screen is an instance of an AbstractPane subclass (such as Page). Users can tap a tab to switch to the screen that's associated with the tab.

You can learn more about each type of navigation, as well as about how to add menus to your screens, by visiting the links below.

Last modified: 2013-12-21

comments powered by Disqus