Supporting different orientation settings per page

When you're using Cascades APIs to handle orientation changes in your app, you might want to support orientation changes on some pages but not on others. For example, you might have an app that you want to start in portrait orientation but that can also support both portrait and landscape orientations on other pages (such as a photo browser app).

On the first page that your app displays, you use the onCreationCompleted signal handler to configure the app to support portrait orientation only:

onCreationCompleted: { 
    OrientationSupport.supportedDisplayOrientation = 
        SupportedDisplayOrientation.DisplayPortrait;  
    }

On pages that support both landscape and portrait orientation, you set the supportedDisplayOrientation to SupportedDisplayOrientation.All:

onCreationCompleted: {
    OrientationSupport.supportedDisplayOrientation = 
        SupportedDisplayOrientation.All;
    }

If you're using a NavigationPane to navigate between pages, you can use the onTopChanged signal handler to change the orientation settings when the user navigates back to the first page. You can't use the onCreationCompleted signal handler anymore (because the page is already created), so you need to listen for the topChanged() signal that's emitted when the user navigates to or from pages in the NavigationPane. In the onTopChanged signal handler, you set your orientation preferences to support portrait orientation only.

onTopChanged: {
    OrientationSupport.supportedDisplayOrientation = 
        SupportedDisplayOrientation.DisplayPortrait;
    }

Coming soon

Not applicable

You can support orientation settings for other types of navigation (such as TabbedPane) and the same approach applies.

Screen showing different orientations

The following code samples demonstrate how to support different orientation settings in the same app. This code represents an app that contains a screen with a single image. When the image is tapped, the app displays the same image on a new page that supports orientation changes (SupportedDisplayOrientation.All). If you navigate back to the first page, the app switches to portrait orientation automatically (SupportedDisplayOrientation.DisplayPortrait) and the page doesn't support orientation changes.

Here, a NavigationPane and Page are defined to set portrait orientation in both the onCreationCompleted and onTopChanged signal handlers:

import bb.cascades 1.0
 
NavigationPane {
    id: navigationPane
    Page {
        id: mainpage
        content: Container {
            layout: DockLayout {
            }
            ImageView {
                imageSource: "niagara.png"
                preferredWidth: 500
                preferredHeight: 199
 
                verticalAlignment: VerticalAlignment.Center
                horizontalAlignment: HorizontalAlignment.Center
 
                gestureHandlers: [
                    TapHandler {
                        onTap: {
                            var newPage =
                                pageDefinition.createObject();
                            navigationPane.push(newPage);
                        }
                    }
                ]
            } // end of ImageView
        } // end of Container
        onCreationCompleted: {
            OrientationSupport.supportedDisplayOrientation = 
                SupportedDisplayOrientation.DisplayPortrait;
        }
         
        attachedObjects: [
            ComponentDefinition {
                id: pageDefinition
                source: "img.qml"
            }
        ]
    }
    onTopChanged: {
        if (page == mainpage) {
            OrientationSupport.supportedDisplayOrientation = 
                SupportedDisplayOrientation.DisplayPortrait;
        }
    } // end of Page 
} // end of NavigationPane 

In a separate QML file, a second page is defined that supports all orientations:

import bb.cascades 1.0
 
Page {
    onCreationCompleted: {
        OrientationSupport.supportedDisplayOrientation = 
            SupportedDisplayOrientation.All;
    }
    content: Container {
        layout: DockLayout {
        }
        ImageView {
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
 
            scalingMethod: ScalingMethod.AspectFit
            id: imagecontainer
            imageSource: "niagara.png"
        } // end of ImageView
    } // end of Container
} // end of Page

Coming soon

Not applicable

Last modified: 2015-07-24



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus