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:
- Supporting BlackBerry Passport – step one 10.2
- Supporting BlackBerry Passport – Keyboard Shortcuts
- Supporting BlackBerry Passport – Fonts, Layouts, Logic
- Supporting BlackBerry Passport – Git, Colors and ActionBar
- Supporting BlackBerry Passport – Themes, SignatureAction, Touch on Keyboard
- 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.