Orientation

BlackBerry 10 Touch-Only devices can be used in Portrait or Landscape, where the Q5 / Q10 have a square screen and don’t distinguish between Portrait and Landscape.

There’s not the one-and-only-way-to-go HowTo solve the Orientation challenge.

Sometimes it helps using a DockLayout or using a StackLayout where sizes aren’t defined by size but relative using spaceQuota.

Cascades documentation gives you many hints and informations HowTo do this. So I only want to show some examples what can be done.

Simple Layout to support all

Here’s a simple ListView:

Q10 what

Z30_what

Z10_landscape

On a Q10 we have 2 rows of 3 items,

on a Z30 / Z10 we have 3 rows of 2 items in Portrait and 2 rows of 3 items in Landscape.

My default is always for Touch Screens in Portrait and the ListView Layout is defined this way:

layout: GridListLayout {
columnCount: 2
cellAspectRatio: 360/300
}

It’s a GridListLayout with 2 Columns where inside a Column a ImageView and Label are placed.
To watch for Orientation changes I added an orientationHandler to the Page:

attachedObjects: [
    OrientationHandler {
        onOrientationAboutToChange: {
            categorySelectionPage.reLayout(orientation)
        }
    }
]

As soon as orientation changes a function reLayout() was called.

function reLayout(orientation){
    if (orientation == UIOrientation.Landscape) {
        categoryList.layout.columnCount = 3
        categoryList.layout.cellAspectRatio = 360/200
    } else {
        categoryList.layout.columnCount = 2
        categoryList.layout.cellAspectRatio = 360/300
    }
}

Important: as soon as the Page was created I check if the device is square and change the parameters so it fits on the small screen – also I’m checking if the user is already holding the device in Landscape.

onCreationCompleted: {
    if (OrientationSupport.orientation == UIOrientation.Landscape) {
        reLayout(OrientationSupport.orientation)
    } else if (app.isSquare()) {
        categoryList.layout.columnCount = 3
        categoryList.layout.cellAspectRatio = 360/360
    }
}

Complex Layout to support’em all

Let’s take a look at a more complex sample. Please understand that I cannot show you all the code behind the scenes. To learn HowTo do this with Cascades you can attend a Cascades Workshop by me 😉 … or I develop the complete App for you 🙂

Here’s the first Tab from Tracked Times Details on Q10 and also Z30 Portrait and Landscape. Do you find out all the differences ?

Q10cat

Z30catportrait

Z30catlandscape

There are some Quick-Access Icons to jump to Geodata, Contact, Task/Project/Order and so on.

Q10 shows small Icons for this because there’s not so much space.

Z30 Portrait shows large icons in the bottom part of the screen, where in Landscape only the small Icons are visible and some fields are displayed at the right site of the Screen.

This Details Page is a Page with a Segmented TitleBar: 1. Category, 2. Detail, 3. Time, 4. Geo.

To switch between the Segments it’s easy on a Q10: simply use the 1,2,3 or 4 as key.

On a Z30 in Portrait with 5″ Screen it’s a long way up to the Top of the Screen, so I added a small navigation row at the bottom to easy swap between Segments. Moving the Z30 into Landscape this row disappears because there’s not enough space and also the TitleBar isn’t so far away.

Please also notice: in Portrait the TitleBar Segments are Text-Only where in Landscape I added an Icon because there’s much more space available.

Hope you got some inspiration what you can to to make your Users happy.