Supporting BlackBerry Passport – 10.3 Active Frames

Welcome to part seven of my article series on ‘Supporting BlackBerry Passport and 10.3 SDK / API’

First three parts of this article series help you to support the BlackBerry Passport from SDK / API 10.2 – the other ones are using SDK 10.3

Please read these articles before going on:

1. Supporting BlackBerry Passport – step one 10.2
2. Supporting BlackBerry Passport – Keyboard Shortcuts
3. Supporting BlackBerry Passport – Fonts, Layouts, Logic
4. Supporting BlackBerry Passport – Git, Colors and ActionBar
5. Supporting BlackBerry Passport – Themes, SignatureAction, Touch on Keyboard
6. Supporting BlackBerry Passport – Icons for different Resolution and Density

Active Frames

You know if you’re switching from one App to another without closing the current App, the App will be minimized.

If you’re doing nothing Cascades will take a snapshot of your current screen and show this one minimized.

Of course it looks much better if you design a special screen and this is easy done by using a SceneCover. SceneCovers have special sizes and there are some recommended layouts like Header or Grid. Please take a look at Cascades documentation where you also will find the exact sizes.

BlackBerry Passport is the first device supporting two different Active Frames: a large one and a small one:

• Large-sized Active Frame: 440×486 px
• Small-sized Active Frame: 440×195 px

MultiCover

To support both sizes you have to use a MultiCover, where inside your MultiCover you can use:

• Two SceneCovers
• One SceneCover plus one ApplicationViewCover

Two SceneCovers allow you to design the large and small sized ActiveFrame by yourself or you’re only designing one size and let Cascades create the Cover using the (minimized) top-left part of your current Page.

Two SceneCovers:

import bb.cascades 1.3

MultiCover {
    id: multiCover

    SceneCover {
        id: bigCover
        MultiCover.level: CoverDetailLevel.High
        content: Container {
            // your layout
        }
        function update() {
            // do your update stuff
        }
    } // sceneCover HIGH
    
    SceneCover {
        id: smallCover
        MultiCover.level: CoverDetailLevel.Medium
        content: Container {
            // your layout
        }
        function update() {
            // do your update stuff
        }
    } // sceneCover MEDIUM

    function update() {
        bigCover.update()
        smallCover.update()
    }

} //  multiCover

One SceneCover plus one ApplicationViewCover:

import bb.cascades 1.3

MultiCover {
    id: multiCover

    SceneCover {
        id: bigCover
        MultiCover.level: CoverDetailLevel.High
        content: Container {
            // your layout
        }
        function update() {
            // do your update stuff
        }
    } // sceneCover HIGH

    ApplicationViewCover {
        id: appViewCover
        MultiCover.level: CoverDetailLevel.Medium
    }

    function update() {
        bigCover.update()
    }

} //  multiCover

CoverDetailLevel High or Medium decides which one will be used. The update() function is used to update the content dynamically – but this is the same as already known from 10.2

Perhaps you ask why does Passport support two different sized Active Frames ?

Screenshot CoverDetailLevel.High

As soon as there are more then 6 minimized Apps, the last ones will be smaller und use the layout fromCover with Screenshot CoverDetailLevel.Medium:

In this case the CoverDetailLevel.Medium was provided by ApplicationViewCover – something is cut at the right site and this minimized view will change if another Page is on top. So it will be better to design a second SceneCover in this case.

Next part of this series will tell you more about ‘du’ – Design units and designing layouts for 10.3 and BlackBerry Passport.

Have fun.